Skip to content

Commit f32a7de

Browse files
tellthemachinestellthemachines
authored
Add compound class to layout wrapper for global spacing styles (#47952)
* Add constrained/flow layout to Cover block. * Remove edit logic. * Add compound class to layout wrapper for global spacing styles * Block name should always be a string. * Repeat compound classname for specificity * Fix failing tests.
1 parent 1af9cab commit f32a7de

File tree

9 files changed

+22
-13
lines changed

9 files changed

+22
-13
lines changed

‎docs/reference-guides/core-blocks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https
230230

231231
- **Name:** core/cover
232232
- **Category:** media
233-
- **Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
233+
- **Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
234234
- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
235235

236236
## Embed

‎lib/block-supports/layout.php

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,10 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
469469
}
470470
}
471471

472+
// Add combined layout and block classname for global styles to hook onto.
473+
$block_name = explode( '/', $block['blockName'] );
474+
$class_names[] = 'wp-block-' . end( $block_name ) . '-' . $layout_classname;
475+
472476
$content_with_outer_classnames = '';
473477

474478
if ( ! empty( $outer_class_names ) ) {

‎lib/class-wp-theme-json-gutenberg.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1315,7 +1315,7 @@ protected function get_layout_styles( $block_metadata ) {
13151315
$spacing_rule['selector']
13161316
);
13171317
} else {
1318-
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
1318+
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%1$s .%2$s%3$s' : '%1$s-%2$s%1$s-%2$s%3$s';
13191319
$layout_selector = sprintf(
13201320
$format,
13211321
$selector,

‎packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
644644
} );
645645

646646
expect( layoutStyles ).toEqual(
647-
'.wp-block-group.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group.is-layout-flex { gap: 12px; }'
647+
'.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex.wp-block-group-is-layout-flex { gap: 12px; }'
648648
);
649649
} );
650650

‎packages/block-editor/src/components/global-styles/use-global-styles-output.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,7 @@ export function getLayoutStyles( {
399399
? `${ selector } .${ className }${
400400
spacingStyle?.selector || ''
401401
}`
402-
: `${ selector }.${ className }${
402+
: `${ selector }-${ className }${ selector }-${ className }${
403403
spacingStyle?.selector || ''
404404
}`;
405405
}

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const layoutBlockSupportKey = '__experimentalLayout';
4040
*
4141
* @return { Array } Array of CSS classname strings.
4242
*/
43-
export function useLayoutClasses( blockAttributes = {}, blockName ) {
43+
export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
4444
const rootPaddingAlignment = useSelect( ( select ) => {
4545
const { getSettings } = select( blockEditorStore );
4646
return getSettings().__experimentalFeatures
@@ -63,10 +63,13 @@ export function useLayoutClasses( blockAttributes = {}, blockName ) {
6363
globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
6464
?.className
6565
) {
66-
layoutClassnames.push(
66+
const baseClassName =
6767
globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
68-
?.className
69-
);
68+
?.className;
69+
const compoundClassName = `wp-block-${ blockName
70+
.split( '/' )
71+
.pop() }-${ baseClassName }`;
72+
layoutClassnames.push( baseClassName, compoundClassName );
7073
}
7174

7275
if (

‎packages/block-library/src/cover/block.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,10 @@
8888
"spacing": {
8989
"padding": true,
9090
"margin": [ "top", "bottom" ],
91+
"blockGap": true,
9192
"__experimentalDefaultControls": {
92-
"padding": true
93+
"padding": true,
94+
"blockGap": true
9395
}
9496
},
9597
"color": {

‎phpunit/block-supports/layout-test.php

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -420,7 +420,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
420420
),
421421
),
422422
),
423-
'expected_output' => '<div class="wp-block-group is-layout-flow"></div>',
423+
'expected_output' => '<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"></div>',
424424
),
425425
'single wrapper block layout with constrained type' => array(
426426
'args' => array(
@@ -439,7 +439,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
439439
),
440440
),
441441
),
442-
'expected_output' => '<div class="wp-block-group is-layout-constrained"></div>',
442+
'expected_output' => '<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"></div>',
443443
),
444444
'multiple wrapper block layout with flow type' => array(
445445
'args' => array(
@@ -460,7 +460,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
460460
),
461461
),
462462
),
463-
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow"></div></div>',
463+
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow wp-block-group-is-layout-flow"></div></div>',
464464
),
465465
);
466466
}

‎phpunit/class-wp-theme-json-test.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n
119119
);
120120

121121
$this->assertEquals(
122-
'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1rem; }body { --wp--style--block-gap: 1rem; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1rem;margin-block-end: 0;}body .is-layout-flex{gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-post-content{color: gray;}.wp-block-social-links.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flex{gap: 0;}.wp-block-buttons.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flex{gap: 0;}',
122+
'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1rem; }body { --wp--style--block-gap: 1rem; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1rem;margin-block-end: 0;}body .is-layout-flex{gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-post-content{color: gray;}.wp-block-social-links-is-layout-flow.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flow.wp-block-social-links-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-flow.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flow.wp-block-buttons-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex.wp-block-buttons-is-layout-flex{gap: 0;}',
123123
$theme_json->get_stylesheet()
124124
);
125125
}

0 commit comments

Comments
 (0)