Skip to content

Commit 2dbaeb1

Browse files
t-hamanot-hamano
committed
Merge branch 'trunk' into add/text-align-block-support
2 parents 611a0b2 + 5727784 commit 2dbaeb1

File tree

55 files changed

+692
-340
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+692
-340
lines changed

‎lib/block-supports/layout.php‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -292,32 +292,32 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
292292
'declarations' => array( 'max-width' => 'none' ),
293293
)
294294
);
295+
}
295296

296-
if ( isset( $block_spacing ) ) {
297-
$block_spacing_values = gutenberg_style_engine_get_styles(
298-
array(
299-
'spacing' => $block_spacing,
300-
)
301-
);
297+
if ( isset( $block_spacing ) ) {
298+
$block_spacing_values = gutenberg_style_engine_get_styles(
299+
array(
300+
'spacing' => $block_spacing,
301+
)
302+
);
302303

303-
/*
304-
* Handle negative margins for alignfull children of blocks with custom padding set.
305-
* They're added separately because padding might only be set on one side.
306-
*/
307-
if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
308-
$padding_right = $block_spacing_values['declarations']['padding-right'];
309-
$layout_styles[] = array(
310-
'selector' => "$selector > .alignfull",
311-
'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
312-
);
313-
}
314-
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
315-
$padding_left = $block_spacing_values['declarations']['padding-left'];
316-
$layout_styles[] = array(
317-
'selector' => "$selector > .alignfull",
318-
'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
319-
);
320-
}
304+
/*
305+
* Handle negative margins for alignfull children of blocks with custom padding set.
306+
* They're added separately because padding might only be set on one side.
307+
*/
308+
if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
309+
$padding_right = $block_spacing_values['declarations']['padding-right'];
310+
$layout_styles[] = array(
311+
'selector' => "$selector > .alignfull",
312+
'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
313+
);
314+
}
315+
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
316+
$padding_left = $block_spacing_values['declarations']['padding-left'];
317+
$layout_styles[] = array(
318+
'selector' => "$selector > .alignfull",
319+
'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
320+
);
321321
}
322322
}
323323

@@ -471,6 +471,12 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
471471
'selector' => $selector,
472472
'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
473473
);
474+
if ( ! empty( $layout['rowCount'] ) ) {
475+
$layout_styles[] = array(
476+
'selector' => $selector,
477+
'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(0, 1fr))' ),
478+
);
479+
}
474480
} else {
475481
$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
476482

‎lib/global-styles-and-settings.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ function gutenberg_get_global_styles_base_custom_css() {
207207
*
208208
* @since 6.6.0
209209
*
210-
* @global WP_Styles $wp_styles
210+
* @global WP_Styles $wp_styles
211211
*/
212212
function gutenberg_add_global_styles_block_custom_css() {
213213
global $wp_styles;
@@ -247,9 +247,9 @@ function gutenberg_add_global_styles_block_custom_css() {
247247
/**
248248
* Adds global style rules to the inline style for each block.
249249
*
250-
* @return void
251-
*
252250
* @global WP_Styles $wp_styles
251+
*
252+
* @return void
253253
*/
254254
function gutenberg_add_global_styles_for_blocks() {
255255
global $wp_styles;

‎packages/block-editor/src/components/block-inspector/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
300300
<InspectorControls.Slot group="styles" />
301301
<InspectorControls.Slot
302302
group="background"
303-
label={ __( 'Background' ) }
303+
label={ __( 'Background image' ) }
304304
/>
305305
<PositionControls />
306306
<div>

‎packages/block-editor/src/components/block-list/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,9 @@ function Items( {
211211
'disabled' &&
212212
__unstableGetEditorMode() !== 'zoom-out'
213213
: rootClientId === selectedBlockClientId ||
214-
( ! rootClientId && ! selectedBlockClientId ) ),
214+
( ! rootClientId &&
215+
! selectedBlockClientId &&
216+
! _order.length ) ),
215217
};
216218
},
217219
[ rootClientId, hasAppender, hasCustomAppender ]

‎packages/block-editor/src/components/global-styles/background-panel.js‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ import MediaReplaceFlow from '../media-replace-flow';
4040
import { store as blockEditorStore } from '../../store';
4141

4242
const IMAGE_BACKGROUND_TYPE = 'image';
43+
const DEFAULT_CONTROLS = {
44+
backgroundImage: true,
45+
backgroundSize: false,
46+
};
4347

4448
/**
4549
* Checks site settings to see if the background panel may be used.
@@ -135,28 +139,30 @@ export const backgroundPositionToCoords = ( value ) => {
135139
};
136140

137141
function InspectorImagePreview( { label, filename, url: imgUrl } ) {
138-
const imgLabel = label || getFilename( imgUrl );
142+
const imgLabel =
143+
label || getFilename( imgUrl ) || __( 'Add background image' );
144+
139145
return (
140146
<ItemGroup as="span">
141-
<HStack justify="flex-start" as="span">
142-
<span
143-
className={ classnames(
144-
'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
145-
{
146-
'has-image': imgUrl,
147-
}
148-
) }
149-
aria-hidden
150-
>
151-
{ imgUrl && (
147+
<HStack justify={ imgUrl ? 'flex-start' : 'center' } as="span">
148+
{ imgUrl && (
149+
<span
150+
className={ classnames(
151+
'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
152+
{
153+
'has-image': imgUrl,
154+
}
155+
) }
156+
aria-hidden
157+
>
152158
<span
153159
className="block-editor-global-styles-background-panel__inspector-image-indicator"
154160
style={ {
155161
backgroundImage: `url(${ imgUrl })`,
156162
} }
157163
/>
158-
) }
159-
</span>
164+
</span>
165+
) }
160166
<FlexItem as="span">
161167
<Truncate
162168
numberOfLines={ 1 }
@@ -247,7 +253,7 @@ function BackgroundImageToolsPanelItem( {
247253

248254
const onFilesDrop = ( filesList ) => {
249255
mediaUpload( {
250-
allowedTypes: [ 'image' ],
256+
allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
251257
filesList,
252258
onFileChange( [ image ] ) {
253259
if ( isBlobURL( image?.url ) ) {
@@ -295,7 +301,7 @@ function BackgroundImageToolsPanelItem( {
295301
onSelect={ onSelectMedia }
296302
name={
297303
<InspectorImagePreview
298-
label={ __( 'Background image' ) }
304+
label={ title }
299305
filename={ title || __( 'Untitled' ) }
300306
url={ url }
301307
/>
@@ -518,6 +524,7 @@ function BackgroundToolsPanel( {
518524
value,
519525
panelId,
520526
children,
527+
headerLabel,
521528
} ) {
522529
const resetAll = () => {
523530
const updatedValue = resetAllFilter( value );
@@ -527,8 +534,8 @@ function BackgroundToolsPanel( {
527534
return (
528535
<VStack
529536
as={ ToolsPanel }
530-
spacing={ 6 }
531-
label={ __( 'Background' ) }
537+
spacing={ 4 }
538+
label={ headerLabel }
532539
resetAll={ resetAll }
533540
panelId={ panelId }
534541
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
@@ -538,11 +545,6 @@ function BackgroundToolsPanel( {
538545
);
539546
}
540547

541-
const DEFAULT_CONTROLS = {
542-
backgroundImage: true,
543-
backgroundSize: true,
544-
};
545-
546548
export default function BackgroundPanel( {
547549
as: Wrapper = BackgroundToolsPanel,
548550
value,
@@ -552,6 +554,7 @@ export default function BackgroundPanel( {
552554
panelId,
553555
defaultControls = DEFAULT_CONTROLS,
554556
defaultValues = {},
557+
headerLabel = __( 'Background image' ),
555558
} ) {
556559
const resetAllFilter = useCallback( ( previousValue ) => {
557560
return {
@@ -568,6 +571,7 @@ export default function BackgroundPanel( {
568571
value={ value }
569572
onChange={ onChange }
570573
panelId={ panelId }
574+
headerLabel={ headerLabel }
571575
>
572576
<BackgroundImageToolsPanelItem
573577
onChange={ onChange }

‎packages/block-editor/src/components/global-styles/style.scss‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181

8282
button.components-button {
8383
color: $gray-900;
84-
box-shadow: inset 0 0 0 $border-width $gray-300;
84+
box-shadow: inset 0 0 0 $border-width $gray-400;
8585
width: 100%;
8686
display: block;
8787
height: $grid-unit-50;
@@ -111,17 +111,11 @@
111111
}
112112

113113
.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
114-
background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image.
115-
border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem.
116-
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
117114
display: block;
118115
width: 20px;
119116
height: 20px;
120117
flex: none;
121-
122-
&.has-image {
123-
background: #fff; // No diagonal line for non-empty background image. A background color is in use to account for partially transparent images.
124-
}
118+
background: #fff;
125119
}
126120

127121
.block-editor-global-styles-background-panel__inspector-image-indicator {

‎packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
3030
/>
3131
<InspectorControls.Slot
3232
group="background"
33-
label={ __( 'Background' ) }
33+
label={ __( 'Background image' ) }
3434
/>
3535
<InspectorControls.Slot group="filter" />
3636
<InspectorControls.Slot

‎packages/block-editor/src/components/link-control/style.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,7 @@ $block-editor-link-control-number-of-actions: 1;
249249
border-radius: $radius-block-ui;
250250
line-height: 1.1;
251251

252+
252253
&:focus {
253254
box-shadow: none;
254255
}
@@ -268,8 +269,15 @@ $block-editor-link-control-number-of-actions: 1;
268269
font-weight: normal;
269270
}
270271

271-
svg {
272-
display: none; // specifically requested to be removed visually as well.
272+
.components-external-link__icon {
273+
position: absolute;
274+
width: 1px;
275+
height: 1px;
276+
padding: 0;
277+
margin: -1px;
278+
overflow: hidden;
279+
clip: rect(0, 0, 0, 0); // specifically requested to be removed visually as well.
280+
border: 0;
273281
}
274282
}
275283
}

‎packages/block-editor/src/hooks/layout.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,7 @@ function BlockWithLayoutStyles( {
359359
block: BlockListBlock,
360360
props,
361361
blockGapSupport,
362+
layoutClasses,
362363
} ) {
363364
const { name, attributes } = props;
364365
const id = useInstanceId( BlockListBlock );
@@ -369,7 +370,6 @@ function BlockWithLayoutStyles( {
369370
layout?.inherit || layout?.contentSize || layout?.wideSize
370371
? { ...layout, type: 'constrained' }
371372
: layout || defaultBlockLayout || {};
372-
const layoutClasses = useLayoutClasses( attributes, name );
373373

374374
const { kebabCase } = unlock( componentsPrivateApis );
375375
const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
@@ -415,8 +415,9 @@ function BlockWithLayoutStyles( {
415415
*/
416416
export const withLayoutStyles = createHigherOrderComponent(
417417
( BlockListBlock ) => ( props ) => {
418-
const { clientId, name } = props;
418+
const { clientId, name, attributes } = props;
419419
const blockSupportsLayout = hasLayoutBlockSupport( name );
420+
const layoutClasses = useLayoutClasses( attributes, name );
420421
const extraProps = useSelect(
421422
( select ) => {
422423
// The callback returns early to avoid block editor subscription.
@@ -444,13 +445,21 @@ export const withLayoutStyles = createHigherOrderComponent(
444445
);
445446

446447
if ( ! extraProps ) {
447-
return <BlockListBlock { ...props } />;
448+
return (
449+
<BlockListBlock
450+
{ ...props }
451+
__unstableLayoutClassNames={
452+
blockSupportsLayout ? layoutClasses : undefined
453+
}
454+
/>
455+
);
448456
}
449457

450458
return (
451459
<BlockWithLayoutStyles
452460
block={ BlockListBlock }
453461
props={ props }
462+
layoutClasses={ layoutClasses }
454463
{ ...extraProps }
455464
/>
456465
);

0 commit comments

Comments
 (0)