From f32a7def563a4937000aa604530579a9eb955e6c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 9 Mar 2023 10:47:11 +1100 Subject: [PATCH] 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. --- docs/reference-guides/core-blocks.md | 2 +- lib/block-supports/layout.php | 4 ++++ lib/class-wp-theme-json-gutenberg.php | 2 +- .../global-styles/test/use-global-styles-output.js | 2 +- .../global-styles/use-global-styles-output.js | 2 +- packages/block-editor/src/hooks/layout.js | 11 +++++++---- packages/block-library/src/cover/block.json | 4 +++- phpunit/block-supports/layout-test.php | 6 +++--- phpunit/class-wp-theme-json-test.php | 2 +- 9 files changed, 22 insertions(+), 13 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index d9f017b60a99e7..abe8ab6b0643ac 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -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 diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index cb9f1573e4e056..70029166ce658c 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -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 ) ) { diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b92e1106c1aa1c..673e97d2b84e5c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -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, diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js index 2edef1b38b11b6..1848906ed1fcde 100644 --- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js @@ -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; }' ); } ); diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 847526ef00daf8..f16ed603869e8d 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -399,7 +399,7 @@ export function getLayoutStyles( { ? `${ selector } .${ className }${ spacingStyle?.selector || '' }` - : `${ selector }.${ className }${ + : `${ selector }-${ className }${ selector }-${ className }${ spacingStyle?.selector || '' }`; } diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 0497edf74eea13..b05068ffbbce5c 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -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 @@ -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 ( diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index b515b21e61ea38..3b3ac379d74305 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -88,8 +88,10 @@ "spacing": { "padding": true, "margin": [ "top", "bottom" ], + "blockGap": true, "__experimentalDefaultControls": { - "padding": true + "padding": true, + "blockGap": true } }, "color": { diff --git a/phpunit/block-supports/layout-test.php b/phpunit/block-supports/layout-test.php index 7ec06401c01706..c29899e3f4d1b8 100644 --- a/phpunit/block-supports/layout-test.php +++ b/phpunit/block-supports/layout-test.php @@ -420,7 +420,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() { ), ), ), - 'expected_output' => '
', + 'expected_output' => '
', ), 'single wrapper block layout with constrained type' => array( 'args' => array( @@ -439,7 +439,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() { ), ), ), - 'expected_output' => '
', + 'expected_output' => '
', ), 'multiple wrapper block layout with flow type' => array( 'args' => array( @@ -460,7 +460,7 @@ public function data_layout_support_flag_renders_classnames_on_wrapper() { ), ), ), - 'expected_output' => '
', + 'expected_output' => '
', ), ); } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 742c2d948b4515..b46838c0275b1a 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -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() ); }