Skip to content

Commit

Permalink
Add compound class to layout wrapper for global spacing styles (#47952)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
@tellthemachines
tellthemachines authored Mar 8, 2023
1 parent 1af9cab commit f32a7de
Show file tree
Hide file tree
Showing 9 changed files with 22 additions and 13 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ Add an image or video with a text overlay — great for headers. ([Source](https

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

## Embed
Expand Down
4 changes: 4 additions & 0 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,6 +469,10 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
}
}

// Add combined layout and block classname for global styles to hook onto.
$block_name = explode( '/', $block['blockName'] );
$class_names[] = 'wp-block-' . end( $block_name ) . '-' . $layout_classname;

$content_with_outer_classnames = '';

if ( ! empty( $outer_class_names ) ) {
Expand Down
2 changes: 1 addition & 1 deletion lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1315,7 +1315,7 @@ protected function get_layout_styles( $block_metadata ) {
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%1$s .%2$s%3$s' : '%1$s-%2$s%1$s-%2$s%3$s';
$layout_selector = sprintf(
$format,
$selector,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
'.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; }'
'.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; }'
);
} );

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ export function getLayoutStyles( {
? `${ selector } .${ className }${
spacingStyle?.selector || ''
}`
: `${ selector }.${ className }${
: `${ selector }-${ className }${ selector }-${ className }${
spacingStyle?.selector || ''
}`;
}
Expand Down
11 changes: 7 additions & 4 deletions packages/block-editor/src/hooks/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const layoutBlockSupportKey = '__experimentalLayout';
*
* @return { Array } Array of CSS classname strings.
*/
export function useLayoutClasses( blockAttributes = {}, blockName ) {
export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
const rootPaddingAlignment = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings().__experimentalFeatures
Expand All @@ -63,10 +63,13 @@ export function useLayoutClasses( blockAttributes = {}, blockName ) {
globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
?.className
) {
layoutClassnames.push(
const baseClassName =
globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
?.className
);
?.className;
const compoundClassName = `wp-block-${ blockName
.split( '/' )
.pop() }-${ baseClassName }`;
layoutClassnames.push( baseClassName, compoundClassName );
}

if (
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/cover/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,10 @@
"spacing": {
"padding": true,
"margin": [ "top", "bottom" ],
"blockGap": true,
"__experimentalDefaultControls": {
"padding": true
"padding": true,
"blockGap": true
}
},
"color": {
Expand Down
6 changes: 3 additions & 3 deletions phpunit/block-supports/layout-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
),
),
),
'expected_output' => '<div class="wp-block-group is-layout-flow"></div>',
'expected_output' => '<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"></div>',
),
'single wrapper block layout with constrained type' => array(
'args' => array(
Expand All @@ -439,7 +439,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
),
),
),
'expected_output' => '<div class="wp-block-group is-layout-constrained"></div>',
'expected_output' => '<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"></div>',
),
'multiple wrapper block layout with flow type' => array(
'args' => array(
Expand All @@ -460,7 +460,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() {
),
),
),
'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow"></div></div>',
'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>',
),
);
}
Expand Down
2 changes: 1 addition & 1 deletion phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n
);

$this->assertEquals(
'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;}',
'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;}',
$theme_json->get_stylesheet()
);
}
Expand Down

0 comments on commit f32a7de

Please sign in to comment.