From cfe5fa928d977282f02dcfa8c638e222705f3498 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Mon, 25 Jul 2022 17:00:37 +1000 Subject: [PATCH 1/5] Layout: Reduce specificity of fallback blockGap styles --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 29 ++++++++++++------ .../global-styles/use-global-styles-output.js | 30 ++++++++++++++----- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index ac2f983721aa74..e0c2c9a060d122 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -1295,7 +1295,7 @@ protected function get_layout_styles( $block_metadata ) { if ( $block_gap_value ) { foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) { // Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap. - if ( ! $has_block_gap_support && 'default' === $layout_definition_key ) { + if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) { continue; } @@ -1324,14 +1324,25 @@ protected function get_layout_styles( $block_metadata ) { } } - $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s'; - $layout_selector = sprintf( - $format, - $selector, - $class_name, - $spacing_rule['selector'] - ); - $block_rules .= static::to_ruleset( $layout_selector, $declarations ); + if ( ! $has_block_gap_support ) { + // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. + $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%1$s :where(.%2$s%3$s)' : '%1$s%3$s'; + $layout_selector = sprintf( + $format, + $selector, + $class_name, + $spacing_rule['selector'] + ); + } else { + $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s'; + $layout_selector = sprintf( + $format, + $selector, + $class_name, + $spacing_rule['selector'] + ); + } + $block_rules .= static::to_ruleset( $layout_selector, $declarations ); } } } diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 431e8a420f79b0..5051c3e7b15783 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -328,14 +328,28 @@ export function getLayoutStyles( { } if ( declarations.length ) { - const combinedSelector = - selector === ROOT_BLOCK_SELECTOR - ? `${ selector } .${ className }${ - spacingStyle?.selector || '' - }` - : `${ selector }.${ className }${ - spacingStyle?.selector || '' - }`; + let combinedSelector = ''; + + if ( ! hasBlockGapSupport ) { + // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. + combinedSelector = + selector === ROOT_BLOCK_SELECTOR + ? `${ selector } :where( .${ className }${ + spacingStyle?.selector || '' + })` + : `${ selector }${ + spacingStyle?.selector || '' + }`; + } else { + combinedSelector = + selector === ROOT_BLOCK_SELECTOR + ? `${ selector } .${ className }${ + spacingStyle?.selector || '' + }` + : `${ selector }.${ className }${ + spacingStyle?.selector || '' + }`; + } ruleset += `${ combinedSelector } { ${ declarations.join( '; ' ) }; }`; From cd77ff07bae6832cd7d777d045f745e615c6f18c Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 26 Jul 2022 15:51:54 +1000 Subject: [PATCH 2/5] Try adding where rule to block-level style, too --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 4 ++-- .../components/global-styles/test/use-global-styles-output.js | 4 ++-- .../src/components/global-styles/use-global-styles-output.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index e0c2c9a060d122..223d1ab8786698 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -1295,7 +1295,7 @@ protected function get_layout_styles( $block_metadata ) { if ( $block_gap_value ) { foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) { // Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap. - if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) { + if ( ! $has_block_gap_support && 'default' === $layout_definition_key ) { continue; } @@ -1326,7 +1326,7 @@ protected function get_layout_styles( $block_metadata ) { if ( ! $has_block_gap_support ) { // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. - $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%1$s :where(.%2$s%3$s)' : '%1$s%3$s'; + $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%1$s :where(.%2$s%3$s)' : '%1$s:where(.%2$s%3$s)'; $layout_selector = sprintf( $format, $selector, diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js index 88828eb7bfa784..e6056b82d4da72 100644 --- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js @@ -582,7 +582,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - 'body .is-layout-flex { gap: 0.5em; }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; }body .is-layout-flex > * { margin: 0; }' + 'body :where(.is-layout-flex) { gap: 0.5em; }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; }body .is-layout-flex > * { margin: 0; }' ); } ); @@ -647,7 +647,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - '.wp-block-group.is-layout-flex { gap: 2em; }' + '.wp-block-group:where(.is-layout-flex) { gap: 2em; }' ); } ); } ); diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 5051c3e7b15783..df9cc8058189ef 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -334,10 +334,10 @@ export function getLayoutStyles( { // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. combinedSelector = selector === ROOT_BLOCK_SELECTOR - ? `${ selector } :where( .${ className }${ + ? `${ selector } :where(.${ className }${ spacingStyle?.selector || '' })` - : `${ selector }${ + : `${ selector }:where(.${ className })${ spacingStyle?.selector || '' }`; } else { From 5bedc7aaa29d7c9cda75115890612fabd917c32c Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 26 Jul 2022 16:10:47 +1000 Subject: [PATCH 3/5] Fix tests --- phpunit/class-wp-theme-json-test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 655c5c5e5f8c92..7c0775c34050b1 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -69,7 +69,7 @@ public function test_get_stylesheet_generates_fallback_gap_layout_styles( $layou // Results also include root site blocks styles. $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; }body .is-layout-flex{gap: 0.5em;}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;}', + '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; }body :where(.is-layout-flex){gap: 0.5em;}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;}', $stylesheet ); } @@ -98,7 +98,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $ // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility. $this->assertEquals( - 'body .is-layout-flex{gap: 0.5em;}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-columns.is-layout-flex{gap: 2em;}', + 'body :where(.is-layout-flex){gap: 0.5em;}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-columns:where(.is-layout-flex){gap: 2em;}', $stylesheet ); } From 29d04f873062a6e3479eacba1ac90dd2d0ccc3ae Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 26 Jul 2022 16:26:30 +1000 Subject: [PATCH 4/5] Tweak the where rule so that it encapsulates the whole rule --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +- .../global-styles/test/use-global-styles-output.js | 4 ++-- .../components/global-styles/use-global-styles-output.js | 6 +++--- phpunit/class-wp-theme-json-test.php | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 223d1ab8786698..0c3caec54ddee8 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -1326,7 +1326,7 @@ protected function get_layout_styles( $block_metadata ) { if ( ! $has_block_gap_support ) { // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. - $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%1$s :where(.%2$s%3$s)' : '%1$s:where(.%2$s%3$s)'; + $format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)'; $layout_selector = sprintf( $format, $selector, diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js index e6056b82d4da72..fbaf2ac7ee45d5 100644 --- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js @@ -582,7 +582,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - 'body :where(.is-layout-flex) { gap: 0.5em; }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; }body .is-layout-flex > * { margin: 0; }' + ':where(.is-layout-flex) { gap: 0.5em; }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; }body .is-layout-flex > * { margin: 0; }' ); } ); @@ -647,7 +647,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - '.wp-block-group:where(.is-layout-flex) { gap: 2em; }' + ':where(.wp-block-group.is-layout-flex) { gap: 2em; }' ); } ); } ); diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index df9cc8058189ef..6fcc268031918f 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -334,12 +334,12 @@ export function getLayoutStyles( { // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. combinedSelector = selector === ROOT_BLOCK_SELECTOR - ? `${ selector } :where(.${ className }${ + ? `:where(${ selector } .${ className }${ spacingStyle?.selector || '' })` - : `${ selector }:where(.${ className })${ + : `:where(${ selector }.${ className }${ spacingStyle?.selector || '' - }`; + })`; } else { combinedSelector = selector === ROOT_BLOCK_SELECTOR diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 7c0775c34050b1..221b44ab0afa83 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -69,7 +69,7 @@ public function test_get_stylesheet_generates_fallback_gap_layout_styles( $layou // Results also include root site blocks styles. $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; }body :where(.is-layout-flex){gap: 0.5em;}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;}', + '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; }:where(.is-layout-flex){gap: 0.5em;}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;}', $stylesheet ); } @@ -98,7 +98,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $ // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility. $this->assertEquals( - 'body :where(.is-layout-flex){gap: 0.5em;}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-columns:where(.is-layout-flex){gap: 2em;}', + ':where(.is-layout-flex){gap: 0.5em;}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;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}', $stylesheet ); } From 22b3f58ab48b42d5e678c84115aef9f30f2e4333 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 26 Jul 2022 16:36:29 +1000 Subject: [PATCH 5/5] Fix global styles issue --- .../src/components/global-styles/use-global-styles-output.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 6fcc268031918f..4508469102ebf1 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -334,7 +334,7 @@ export function getLayoutStyles( { // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles. combinedSelector = selector === ROOT_BLOCK_SELECTOR - ? `:where(${ selector } .${ className }${ + ? `:where(.${ className }${ spacingStyle?.selector || '' })` : `:where(${ selector }.${ className }${