From 15a2337e1e2ef342cbf34956a8d8f596f94ea270 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 12:26:37 +0900 Subject: [PATCH 01/32] Styles: try wrapping with :root to fix reset styles --- lib/class-wp-theme-json-gutenberg.php | 4 ++-- .../src/components/global-styles/use-global-styles-output.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1dec7b164d880b..e0d3ff09861d58 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2745,7 +2745,7 @@ static function ( $pseudo_selector ) use ( $selector ) { } // 2. Generate and append the rules that use the general selector. - $block_rules .= static::to_ruleset( ":where($selector)", $declarations ); + $block_rules .= static::to_ruleset( ":root :where($selector)", $declarations ); // 3. Generate and append the rules that use the duotone selector. if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) { @@ -2762,7 +2762,7 @@ static function ( $pseudo_selector ) use ( $selector ) { // 5. Generate and append the feature level rulesets. foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) { - $block_rules .= static::to_ruleset( ":where($feature_selector)", $individual_feature_declarations ); + $block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations ); } // 6. Generate and append the style variation rulesets. 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 981189309f828b..8e276fa3406e1b 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 @@ -860,7 +860,7 @@ export const toStyles = ( ( [ cssSelector, declarations ] ) => { if ( declarations.length ) { const rules = declarations.join( ';' ); - ruleset += `:where(${ cssSelector }){${ rules };}`; + ruleset += `:root :where(${ cssSelector }){${ rules };}`; } } ); @@ -955,7 +955,7 @@ export const toStyles = ( disableRootPadding ); if ( declarations?.length ) { - ruleset += `:where(${ selector }){${ declarations.join( + ruleset += `:root :where(${ selector }){${ declarations.join( ';' ) };}`; } From d92a4596b4abe68c02ed7e539f62bc21403c4665 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 12:39:44 +0900 Subject: [PATCH 02/32] Adjust based on #59457 --- packages/block-library/src/audio/theme.scss | 2 +- packages/block-library/src/cover/style.scss | 2 +- packages/block-library/src/embed/theme.scss | 2 +- packages/block-library/src/image/theme.scss | 2 +- packages/block-library/src/pullquote/theme.scss | 2 +- packages/block-library/src/quote/theme.scss | 2 +- packages/block-library/src/table/theme.scss | 2 +- packages/block-library/src/template-part/theme.scss | 2 +- packages/block-library/src/video/theme.scss | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss index eda394fd6a3d54..ef0520dbce0b21 100644 --- a/packages/block-library/src/audio/theme.scss +++ b/packages/block-library/src/audio/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:where(.wp-block-audio) { +:root :where(.wp-block-audio) { margin: 0 0 1em 0; } diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index d14f606fc0226a..7155101ae7c319 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -1,5 +1,5 @@ // Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles. -:where(.wp-block-cover-image, .wp-block-cover) { +:root :where(.wp-block-cover-image, .wp-block-cover) { min-height: 430px; padding: 1em; } diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss index 57ece1dcd43cac..92d4f0566b1a3c 100644 --- a/packages/block-library/src/embed/theme.scss +++ b/packages/block-library/src/embed/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:where(.wp-block-embed) { +:root :where(.wp-block-embed) { margin: 0 0 1em 0; } diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss index 459036511335a6..096a8374a91f6a 100644 --- a/packages/block-library/src/image/theme.scss +++ b/packages/block-library/src/image/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:where(.wp-block-image) { +:root :where(.wp-block-image) { margin: 0 0 1em 0; } diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 0dc7943a770512..5ef3f5a636cd1f 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -1,4 +1,4 @@ -:where(.wp-block-pullquote) { +:root :where(.wp-block-pullquote) { border-top: 4px solid currentColor; border-bottom: 4px solid currentColor; margin-bottom: 1.75em; diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index aaf63b899771b0..903628c280cd05 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,4 +1,4 @@ -:where(.wp-block-quote) { +:root :where(.wp-block-quote) { border-left: 0.25em solid currentColor; margin: 0 0 1.75em 0; padding-left: 1em; diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss index 19dc71c8857bd7..e6a5477dce8195 100644 --- a/packages/block-library/src/table/theme.scss +++ b/packages/block-library/src/table/theme.scss @@ -9,6 +9,6 @@ } } -:where(.wp-block-table) { +:root :where(.wp-block-table) { margin: 0 0 1em 0; } diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss index 2f1d3a0a513cb7..fd503bbe9b8a4e 100644 --- a/packages/block-library/src/template-part/theme.scss +++ b/packages/block-library/src/template-part/theme.scss @@ -1,5 +1,5 @@ // Same as the group block styles. -:where(.wp-block-template-part) { +:root :where(.wp-block-template-part) { &.has-background { // Matches paragraph Block padding padding: $block-bg-padding--v $block-bg-padding--h; diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss index c5399582bbb281..84d50a76bcc145 100644 --- a/packages/block-library/src/video/theme.scss +++ b/packages/block-library/src/video/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:where(.wp-block-video) { +:root :where(.wp-block-video) { margin: 0 0 1em 0; } From 69949699b0dfcd4005b2e8094e7074ab2ad53fcd Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 14:35:22 +0900 Subject: [PATCH 03/32] Fix php unit tests --- .../test/use-global-styles-output.js | 4 +- .../block-library/src/gallery/editor.scss | 2 +- phpunit/class-wp-theme-json-test.php | 60 +++++++++---------- 3 files changed, 33 insertions(+), 33 deletions(-) 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 95de3d4007079c..7b042c89d19313 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 @@ -480,7 +480,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( tree, blockSelectors ) ).toEqual( - ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:where(body){background-color: red;margin: 10px;padding: 10px;}:where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:where(h1){font-size: 42px;}:where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:where(h1,h2,h3,h4,h5,h6){color: orange;}:where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:where(.wp-block-image){color: red;}.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; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' + ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:where(body){background-color: red;margin: 10px;padding: 10px;}:where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:where(h1){font-size: 42px;}:where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:where(h1,h2,h3,h4,h5,h6){color: orange;}:where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.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; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' ); } ); @@ -520,7 +520,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual( - ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:where(.wp-image-spacing){padding-top: 1px;}:where(.wp-image-border-color){border-color: red;}:where(.wp-image-border){border-radius: 9999px;}:where(.wp-image){color: red;}.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(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(.wp-image-spacing){padding-top: 1px;}:where(.wp-image-border-color){border-color: red;}:where(.wp-image-border){border-radius: 9999px;}:root :where(.wp-image){color: red;}.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; }' ); } ); diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index ea6fa8836a3a4b..ece76a6f86890f 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -1,4 +1,4 @@ -:where(figure.wp-block-gallery) { +:root :where(figure.wp-block-gallery) { // Override the default list style type _only in the editor_ // to avoid :not() selector specificity issues. // See https://github.com/WordPress/gutenberg/pull/10358 diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 00799b7ba0b478..1a420d03044888 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -547,7 +547,7 @@ public function test_get_stylesheet() { ); $variables = ':root{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = static::$base_styles . ':where(body){color: var(--wp--preset--color--grey);}:where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:where(.wp-block-heading){color: #123456;}:where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:where(.wp-block-post-date){color: #123456;}:where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:where(.wp-block-post-excerpt){column-count: 2;}:where(.wp-block-image){margin-bottom: 30px;}:where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}'; + $styles = static::$base_styles . ':root :where(body){color: var(--wp--preset--color--grey);}:root :where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-big-font-size{font-size: var(--wp--preset--font-size--big) !important;}.has-arial-font-family{font-family: var(--wp--preset--font-family--arial) !important;}'; $all = $variables . $styles . $presets; @@ -593,7 +593,7 @@ public function test_get_stylesheet_support_for_shorthand_and_longhand_values() ) ); - $styles = static::$base_styles . ':where(.wp-block-group){border-radius: 10px;margin: 1em;padding: 24px;}:where(.wp-block-image){margin-bottom: 30px;padding-top: 15px;}:where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}'; + $styles = static::$base_styles . ':root :where(.wp-block-group){border-radius: 10px;margin: 1em;padding: 24px;}:root :where(.wp-block-image){margin-bottom: 30px;padding-top: 15px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}'; $this->assertSame( $styles, $theme_json->get_stylesheet() ); $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -706,7 +706,7 @@ public function test_get_stylesheet_preset_rules_come_after_block_rules() { ) ); - $styles = static::$base_styles . ':where(.wp-block-group){color: red;}'; + $styles = static::$base_styles . ':root :where(.wp-block-group){color: red;}'; $presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}'; $variables = '.wp-block-group{--wp--preset--color--grey: grey;}'; @@ -793,7 +793,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertSame( - ':root{--wp--preset--color--grey: grey;}' . static::$base_styles . ':where(p){background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', + ':root{--wp--preset--color--grey: grey;}' . static::$base_styles . ':root :where(p){background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}', $theme_json->get_stylesheet() ); } @@ -831,7 +831,7 @@ public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors ) ); - $element_styles = ':where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}'; + $element_styles = ':root :where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:root :where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}'; $expected = static::$base_styles . $element_styles; @@ -868,7 +868,7 @@ public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given ) ); - $element_styles = ':where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}'; + $element_styles = ':root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:root :where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}'; $expected = static::$base_styles . $element_styles; @@ -905,7 +905,7 @@ public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_ ) ); - $element_styles = ':where(h4){background-color: red;color: green;}'; + $element_styles = ':root :where(h4){background-color: red;color: green;}'; $expected = static::$base_styles . $element_styles; @@ -942,7 +942,7 @@ public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() { ) ); - $element_styles = ':where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}'; + $element_styles = ':root :where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}'; $expected = static::$base_styles . $element_styles; @@ -988,7 +988,7 @@ public function test_get_stylesheet_handles_priority_of_elements_vs_block_elemen ) ); - $element_styles = ':where(.wp-block-group a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:where(.wp-block-group a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}'; + $element_styles = ':root :where(.wp-block-group a:where(:not(.wp-element-button))){background-color: red;color: green;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}'; $expected = static::$base_styles . $element_styles; @@ -1033,7 +1033,7 @@ public function test_get_stylesheet_handles_whitelisted_block_level_element_pseu ) ); - $element_styles = ':where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}:where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: black;color: yellow;}'; + $element_styles = ':root :where(a:where(:not(.wp-element-button))){background-color: red;color: green;}:root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: black;color: yellow;}'; $expected = static::$base_styles . $element_styles; @@ -1095,7 +1095,7 @@ public function test_get_stylesheet_with_deprecated_feature_level_selectors() { ); $base_styles = ':root{--wp--preset--color--green: green;}' . static::$base_styles; - $block_styles = ':where(.wp-block-test, .wp-block-test__wrapper){color: green;}:where(.wp-block-test .inner, .wp-block-test__wrapper .inner){border-radius: 9999px;padding: 20px;}:where(.wp-block-test .sub-heading, .wp-block-test__wrapper .sub-heading){font-size: 3em;}'; + $block_styles = ':root :where(.wp-block-test, .wp-block-test__wrapper){color: green;}:root :where(.wp-block-test .inner, .wp-block-test__wrapper .inner){border-radius: 9999px;padding: 20px;}:root :where(.wp-block-test .sub-heading, .wp-block-test__wrapper .sub-heading){font-size: 3em;}'; $preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}'; $expected = $base_styles . $block_styles . $preset_styles; @@ -1157,7 +1157,7 @@ public function test_get_stylesheet_with_block_json_selectors() { ); $base_styles = ':root{--wp--preset--color--green: green;}' . static::$base_styles; - $block_styles = ':where(.custom-root-selector){background-color: grey;padding: 20px;}:where(.custom-root-selector img){border-radius: 9999px;}:where(.custom-root-selector > figcaption){color: navy;font-size: 3em;}'; + $block_styles = ':root :where(.custom-root-selector){background-color: grey;padding: 20px;}:root :where(.custom-root-selector img){border-radius: 9999px;}:root :where(.custom-root-selector > figcaption){color: navy;font-size: 3em;}'; $preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}'; $expected = $base_styles . $block_styles . $preset_styles; @@ -1346,7 +1346,7 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n $this->assertSame( ':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(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(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }:where(.is-layout-flow) > :first-child{margin-block-start: 0;}:where(.is-layout-flow) > :last-child{margin-block-end: 0;}:where(.is-layout-flow) > *{margin-block-start: 1rem;margin-block-end: 0;}:where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.is-layout-constrained) > *{margin-block-start: 1rem;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1rem;}:where(.is-layout-grid) {gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}' . - ':where(.wp-block-post-content){color: gray;}:where(.wp-block-social-links-is-layout-flow) > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-flow) > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flex) {gap: 0;}:where(.wp-block-social-links-is-layout-grid) {gap: 0;}:where(.wp-block-buttons-is-layout-flow) > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-flow) > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flex) {gap: 0;}:where(.wp-block-buttons-is-layout-grid) {gap: 0;}', + ':root :where(.wp-block-post-content){color: gray;}:where(.wp-block-social-links-is-layout-flow) > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-flow) > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flex) {gap: 0;}:where(.wp-block-social-links-is-layout-grid) {gap: 0;}:where(.wp-block-buttons-is-layout-flow) > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-flow) > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flex) {gap: 0;}:where(.wp-block-buttons-is-layout-grid) {gap: 0;}', $theme_json->get_stylesheet() ); } @@ -1378,7 +1378,7 @@ public function test_get_stylesheet_returns_outline_styles() { ) ); - $element_styles = ':where(.wp-element-button, .wp-block-button__link){outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}:where(.wp-element-button:hover, .wp-block-button__link:hover){outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}'; + $element_styles = ':root :where(.wp-element-button, .wp-block-button__link){outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}'; $expected = static::$base_styles . $element_styles; $this->assertSame( $expected, $theme_json->get_stylesheet() ); @@ -1403,7 +1403,7 @@ public function test_get_stylesheet_custom_root_selector() { // Results also include root site blocks styles which hard code // `:where(body) { margin: 0; }`. $this->assertSame( - ':where(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(.custom){color: teal;}', + ':where(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; }:root :where(.custom){color: teal;}', $actual ); } @@ -1462,7 +1462,7 @@ public function test_get_stylesheet_generates_fluid_typography_values() { // Results also include root site blocks styles. $this->assertSame( - ':root{--wp--preset--font-size--pickles: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.156), 16px);--wp--preset--font-size--toast: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.575), 22px);}:where(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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(body){font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}:where(h1){font-size: clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 3.893), 100px);}:where(.wp-block-test-clamp-me){font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 1.571), 48px);}.has-pickles-font-size{font-size: var(--wp--preset--font-size--pickles) !important;}.has-toast-font-size{font-size: var(--wp--preset--font-size--toast) !important;}', + ':root{--wp--preset--font-size--pickles: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.156), 16px);--wp--preset--font-size--toast: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.575), 22px);}:where(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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:root :where(body){font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}:root :where(h1){font-size: clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 3.893), 100px);}:root :where(.wp-block-test-clamp-me){font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 1.571), 48px);}.has-pickles-font-size{font-size: var(--wp--preset--font-size--pickles) !important;}.has-toast-font-size{font-size: var(--wp--preset--font-size--toast) !important;}', $theme_json->get_stylesheet() ); } @@ -3519,7 +3519,7 @@ public function test_get_property_value_valid() { ) ); - $color_styles = ':where(body){background-color: #ffffff;color: #000000;}:where(.wp-element-button, .wp-block-button__link){background-color: #000000;color: #ffffff;}'; + $color_styles = ':root :where(body){background-color: #ffffff;color: #000000;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #000000;color: #ffffff;}'; $expected = static::$base_styles . $color_styles; $this->assertSame( $expected, $theme_json->get_stylesheet() ); } @@ -3597,7 +3597,7 @@ public function test_get_property_value_loop() { ) ); - $color_styles = ':where(body){background-color: #ffffff;}:where(.wp-element-button, .wp-block-button__link){color: #ffffff;}'; + $color_styles = ':root :where(body){background-color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}'; $expected = static::$base_styles . $color_styles; $this->assertSame( $expected, $theme_json->get_stylesheet() ); } @@ -3630,7 +3630,7 @@ public function test_get_property_value_recursion() { ) ); - $color_styles = ':where(body){background-color: #ffffff;color: #ffffff;}:where(.wp-element-button, .wp-block-button__link){color: #ffffff;}'; + $color_styles = ':root :where(body){background-color: #ffffff;color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}'; $expected = static::$base_styles . $color_styles; $this->assertSame( $expected, $theme_json->get_stylesheet() ); } @@ -3654,7 +3654,7 @@ public function test_get_property_value_self() { ) ); - $color_styles = ':where(body){background-color: #ffffff;}'; + $color_styles = ':root :where(body){background-color: #ffffff;}'; $expected = static::$base_styles . $color_styles; $this->assertSame( $expected, $theme_json->get_stylesheet() ); } @@ -3684,7 +3684,7 @@ public function test_get_styles_for_block_with_padding_aware_alignments() { 'selector' => 'body', ); - $expected = ':where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(body){--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}'; + $expected = ':where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { padding-right: 0; padding-left: 0; }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(.has-global-padding:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:root :where(body){--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}'; $root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ); $style_rules = $theme_json->get_styles_for_block( $metadata ); $this->assertSame( $expected, $root_rules . $style_rules ); @@ -3712,7 +3712,7 @@ public function test_get_styles_for_block_without_padding_aware_alignments() { 'selector' => 'body', ); - $expected = static::$base_styles . ':where(body){padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}'; + $expected = static::$base_styles . ':root :where(body){padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}'; $root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ); $style_rules = $theme_json->get_styles_for_block( $metadata ); $this->assertSame( $expected, $root_rules . $style_rules ); @@ -4682,7 +4682,7 @@ public function data_update_separator_declarations() { 'background' => 'blue', ), ), - 'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;color: blue;}', + 'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;color: blue;}', ), // If background and text are defined, do not include border-color, as text color is enough. 'background and text, no border-color' => array( @@ -4692,7 +4692,7 @@ public function data_update_separator_declarations() { 'text' => 'red', ), ), - 'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;color: red;}', + 'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;color: red;}', ), // If only text is defined, do not include border-color, as by itself is enough. 'only text' => array( @@ -4701,7 +4701,7 @@ public function data_update_separator_declarations() { 'text' => 'red', ), ), - 'expected_output' => static::$base_styles . ':where(.wp-block-separator){color: red;}', + 'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){color: red;}', ), // If background, text, and border-color are defined, include everything, CSS specificity will decide which to apply. 'background, text, and border-color' => array( @@ -4714,7 +4714,7 @@ public function data_update_separator_declarations() { 'color' => 'pink', ), ), - 'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;border-color: pink;color: red;}', + 'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;border-color: pink;color: red;}', ), // If background and border color are defined, include everything, CSS specificity will decide which to apply. 'background, and border-color' => array( @@ -4726,7 +4726,7 @@ public function data_update_separator_declarations() { 'color' => 'pink', ), ), - 'expected_output' => static::$base_styles . ':where(.wp-block-separator){background-color: blue;border-color: pink;}', + 'expected_output' => static::$base_styles . ':root :where(.wp-block-separator){background-color: blue;border-color: pink;}', ), ); } @@ -4790,7 +4790,7 @@ public function test_get_shadow_styles_for_blocks() { ); $global_styles = ':root{--wp--preset--shadow--natural: 5px 5px 0 0 black;}' . static::$base_styles; - $element_styles = ':where(a:where(:not(.wp-element-button))){box-shadow: var(--wp--preset--shadow--natural);}:where(.wp-element-button, .wp-block-button__link){box-shadow: var(--wp--preset--shadow--natural);}:where(p){box-shadow: var(--wp--preset--shadow--natural);}'; + $element_styles = ':root :where(a:where(:not(.wp-element-button))){box-shadow: var(--wp--preset--shadow--natural);}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: var(--wp--preset--shadow--natural);}:root :where(p){box-shadow: var(--wp--preset--shadow--natural);}'; $expected_styles = $global_styles . $element_styles; $this->assertSame( $expected_styles, $theme_json->get_stylesheet() ); } @@ -4836,7 +4836,7 @@ public function test_get_top_level_background_image_styles() { ) ); - $expected_styles = ":where(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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}"; + $expected_styles = ":where(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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}"; $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background styles type does not match expectations' ); $theme_json = new WP_Theme_JSON_Gutenberg( @@ -4853,7 +4853,7 @@ public function test_get_top_level_background_image_styles() { ) ); - $expected_styles = ":where(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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}"; + $expected_styles = ":where(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;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}"; $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' ); } From 898ee0ea0e2f4b34d0eccf2eb990a58076a95832 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 14:39:26 +0900 Subject: [PATCH 04/32] Fix js tests --- .../components/global-styles/test/use-global-styles-output.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 7b042c89d19313..ef87dbe7e5314b 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 @@ -480,7 +480,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( tree, blockSelectors ) ).toEqual( - ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:where(body){background-color: red;margin: 10px;padding: 10px;}:where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:where(h1){font-size: 42px;}:where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:where(h1,h2,h3,h4,h5,h6){color: orange;}:where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.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; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' + ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(body){background-color: red;margin: 10px;padding: 10px;}:root :where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:root :where(h1){font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.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; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}' ); } ); @@ -520,7 +520,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual( - ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(.wp-image-spacing){padding-top: 1px;}:where(.wp-image-border-color){border-color: red;}:where(.wp-image-border){border-radius: 9999px;}:root :where(.wp-image){color: red;}.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(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(.wp-image-spacing){padding-top: 1px;}:root :where(.wp-image-border-color){border-color: red;}:root :where(.wp-image-border){border-radius: 9999px;}:root :where(.wp-image){color: red;}.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; }' ); } ); From 4d0b1506229345726eeb11661b93df2ae0be4778 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 15:13:59 +0900 Subject: [PATCH 05/32] Add a basic test for overriding reset styles --- .../block-library/src/social-links/editor.scss | 4 ---- .../block-library/src/social-links/style.scss | 2 +- test/e2e/specs/editor/various/styles.spec.js | 17 +++++++++++++++++ 3 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 test/e2e/specs/editor/various/styles.spec.js diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index b729949c837d80..26886aef8de47a 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -11,10 +11,6 @@ transform: none; } -.editor-styles-wrapper .wp-block-social-links { - padding: 0; -} - // Placeholder/setup state. .wp-block-social-links__social-placeholder { display: flex; diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 1ad883bbb88840..50e299fd96226e 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -1,4 +1,4 @@ -.wp-block-social-links { +:root :where(.wp-block-social-links) { // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; diff --git a/test/e2e/specs/editor/various/styles.spec.js b/test/e2e/specs/editor/various/styles.spec.js new file mode 100644 index 00000000000000..0aa1f3007d2419 --- /dev/null +++ b/test/e2e/specs/editor/various/styles.spec.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Styles', () => { + test( 'should override reset styles', async ( { admin, editor } ) => { + await admin.createNewPost( { postType: 'page' } ); + await editor.insertBlock( { name: 'core/social-links' } ); + + const block = editor.canvas.getByRole( 'document', { + name: 'Block: Social Icons', + } ); + + await expect( block ).toHaveCSS( 'padding-left', '0px' ); + } ); +} ); From 04cb93100c245c06ae5df6ad08bbf1da5b26154b Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 15:45:54 +0900 Subject: [PATCH 06/32] Add test for global styles override --- test/e2e/specs/site-editor/styles.spec.js | 59 +++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 test/e2e/specs/site-editor/styles.spec.js diff --git a/test/e2e/specs/site-editor/styles.spec.js b/test/e2e/specs/site-editor/styles.spec.js new file mode 100644 index 00000000000000..66ddf0b7faa1b5 --- /dev/null +++ b/test/e2e/specs/site-editor/styles.spec.js @@ -0,0 +1,59 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Styles', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentythree' ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); + } ); + + test( 'should override reset styles and library styles', async ( { + admin, + editor, + requestUtils, + page, + } ) => { + const { id } = await requestUtils.createPage( { + title: 'Social Icons', + content: ` +
    +`, + status: 'publish', + } ); + await admin.visitSiteEditor( { + postId: id, + postType: 'page', + canvas: 'edit', + } ); + + const block = editor.canvas.getByRole( 'document', { + name: 'Block: Social Icons', + } ); + + await expect( block ).toHaveCSS( 'padding-left', '0px' ); + + const topBar = page.getByRole( 'region', { name: 'Editor top bar' } ); + // Navigate to Styles -> Blocks -> Heading -> Typography + await topBar.getByRole( 'button', { name: 'Styles' } ).click(); + await page.getByRole( 'button', { name: 'Blocks styles' } ).click(); + await page + .getByRole( 'button', { name: 'Social Icons block styles' } ) + .click(); + + // find the second padding control + const paddingControl = page + .locator( '[aria-label="padding"]' ) + .nth( 1 ); + + // Change the padding value + await paddingControl.fill( '2' ); + + // Check the padding value + await expect( block ).toHaveCSS( 'padding-left', '35.4644px' ); + } ); +} ); From 3f07cf76ffb48f96eb33d9b4304fd3897c313397 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 18:21:21 +0900 Subject: [PATCH 07/32] Don't add :root :where for single classes, because they are already 0-1-0 specificity --- packages/block-library/src/audio/theme.scss | 2 +- packages/block-library/src/cover/style.scss | 8 ++------ packages/block-library/src/embed/theme.scss | 2 +- packages/block-library/src/gallery/editor.scss | 3 +++ packages/block-library/src/image/theme.scss | 2 +- packages/block-library/src/pullquote/theme.scss | 4 +--- packages/block-library/src/quote/theme.scss | 2 +- packages/block-library/src/social-links/style.scss | 2 +- packages/block-library/src/table/theme.scss | 6 ++---- packages/block-library/src/template-part/theme.scss | 12 +++++------- packages/block-library/src/video/theme.scss | 2 +- 11 files changed, 19 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss index ef0520dbce0b21..2744d36e74ca62 100644 --- a/packages/block-library/src/audio/theme.scss +++ b/packages/block-library/src/audio/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:root :where(.wp-block-audio) { +.wp-block-audio { margin: 0 0 1em 0; } diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 7155101ae7c319..b190953f38a6d1 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -1,11 +1,7 @@ -// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles. -:root :where(.wp-block-cover-image, .wp-block-cover) { - min-height: 430px; - padding: 1em; -} - .wp-block-cover-image, .wp-block-cover { + min-height: 430px; + padding: 1em; position: relative; background-position: center center; display: flex; diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss index 92d4f0566b1a3c..e809a783b9c810 100644 --- a/packages/block-library/src/embed/theme.scss +++ b/packages/block-library/src/embed/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:root :where(.wp-block-embed) { +.wp-block-embed { margin: 0 0 1em 0; } diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index ece76a6f86890f..9efaf88e5acc71 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -1,3 +1,6 @@ +// Adding `figure` to the selector increases the specificity above the global +// styles specificity, which is levelled at 0-1-0. We should figure out why +// `figure` is needed. :root :where(figure.wp-block-gallery) { // Override the default list style type _only in the editor_ // to avoid :not() selector specificity issues. diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss index 096a8374a91f6a..d5b2cfb0e83e94 100644 --- a/packages/block-library/src/image/theme.scss +++ b/packages/block-library/src/image/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:root :where(.wp-block-image) { +.wp-block-image { margin: 0 0 1em 0; } diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 5ef3f5a636cd1f..6b5e8401227f5b 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -1,11 +1,9 @@ -:root :where(.wp-block-pullquote) { +.wp-block-pullquote { border-top: 4px solid currentColor; border-bottom: 4px solid currentColor; margin-bottom: 1.75em; color: currentColor; -} -.wp-block-pullquote { cite, footer, &__citation { diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index 903628c280cd05..5bcccbd60eefc4 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,4 +1,4 @@ -:root :where(.wp-block-quote) { +.wp-block-quote { border-left: 0.25em solid currentColor; margin: 0 0 1.75em 0; padding-left: 1em; diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 50e299fd96226e..1ad883bbb88840 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -1,4 +1,4 @@ -:root :where(.wp-block-social-links) { +.wp-block-social-links { // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss index e6a5477dce8195..d42e79b02b4965 100644 --- a/packages/block-library/src/table/theme.scss +++ b/packages/block-library/src/table/theme.scss @@ -1,4 +1,6 @@ .wp-block-table { + margin: 0 0 1em 0; + td, th { word-break: normal; @@ -8,7 +10,3 @@ @include caption-style-theme(); } } - -:root :where(.wp-block-table) { - margin: 0 0 1em 0; -} diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss index fd503bbe9b8a4e..179873b9448b82 100644 --- a/packages/block-library/src/template-part/theme.scss +++ b/packages/block-library/src/template-part/theme.scss @@ -1,9 +1,7 @@ // Same as the group block styles. -:root :where(.wp-block-template-part) { - &.has-background { - // Matches paragraph Block padding - padding: $block-bg-padding--v $block-bg-padding--h; - margin-top: 0; - margin-bottom: 0; - } +:root :where(.wp-block-template-part.has-background) { + // Matches paragraph Block padding + padding: $block-bg-padding--v $block-bg-padding--h; + margin-top: 0; + margin-bottom: 0; } diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss index 84d50a76bcc145..cdc95af0b02c29 100644 --- a/packages/block-library/src/video/theme.scss +++ b/packages/block-library/src/video/theme.scss @@ -2,6 +2,6 @@ @include caption-style-theme(); } -:root :where(.wp-block-video) { +.wp-block-video { margin: 0 0 1em 0; } From 177bd010be467a3656df9263c889982807102a17 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 22 May 2024 17:22:38 +1000 Subject: [PATCH 08/32] Try adding :root to layout stykes --- lib/class-wp-theme-json-gutenberg.php | 2 +- .../global-styles/test/use-global-styles-output.js | 6 +++--- .../global-styles/use-global-styles-output.js | 10 +++++----- phpunit/class-wp-theme-json-test.php | 12 ++++++------ 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index e0d3ff09861d58..c3c9ba99cb6a12 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1564,7 +1564,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) { $spacing_rule['selector'] ); } else { - $format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s) %3$s' : ':where(%1$s-%2$s) %3$s'; + $format = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$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 ef87dbe7e5314b..bede89469a8612 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 @@ -725,7 +725,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - ':where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(.is-layout-flex) { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }' + '.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }.is-layout-flex { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }' ); } ); @@ -742,7 +742,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - ':where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(.is-layout-flex) { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }' + '.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.is-layout-flex { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }' ); } ); @@ -759,7 +759,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - ':where(.wp-block-group-is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.wp-block-group-is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(.wp-block-group-is-layout-flex) { gap: 12px; }' + '.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; }' ); } ); 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 8e276fa3406e1b..15c7349661e75b 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 @@ -522,10 +522,10 @@ export function getLayoutStyles( { } else { combinedSelector = selector === ROOT_BLOCK_SELECTOR - ? `:where(.${ className })${ + ? `.${ className }${ spacingStyle?.selector || '' }` - : `:where(${ selector }-${ className })${ + : `${ selector }-${ className }${ spacingStyle?.selector || '' }`; } @@ -1018,13 +1018,13 @@ export const toStyles = ( getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em'; ruleset = ruleset + - `:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`; + `:root :where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`; ruleset = ruleset + - ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }'; + ':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }'; ruleset = ruleset + - ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }'; + ':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }'; } if ( options.presets ) { diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 1a420d03044888..563421c6c070b7 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -644,7 +644,7 @@ public function test_get_stylesheet_renders_enabled_protected_properties() { ) ); - $expected = ':where(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(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }:where(.is-layout-flow) > :first-child{margin-block-start: 0;}:where(.is-layout-flow) > :last-child{margin-block-end: 0;}:where(.is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.is-layout-constrained) > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1em;}:where(.is-layout-grid) {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}'; + $expected = ':where(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(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}'; $this->assertSame( $expected, $theme_json->get_stylesheet() ); $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -1188,7 +1188,7 @@ public function test_get_stylesheet_generates_layout_styles() { // Results also include root site blocks styles. $this->assertSame( - ':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(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(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }:where(.is-layout-flow) > :first-child{margin-block-start: 0;}:where(.is-layout-flow) > :last-child{margin-block-end: 0;}:where(.is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.is-layout-constrained) > *{margin-block-start: 1em;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1em;}:where(.is-layout-grid) {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}', + ':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(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(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1em;margin-block-end: 0;}.is-layout-flex {gap: 1em;}.is-layout-grid {gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}', $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -1217,7 +1217,7 @@ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets // Results also include root site blocks styles. $this->assertSame( - ':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(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(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: var(--wp--preset--spacing--60); }:where(.is-layout-flow) > :first-child{margin-block-start: 0;}:where(.is-layout-flow) > :last-child{margin-block-end: 0;}:where(.is-layout-flow) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.is-layout-constrained) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(.is-layout-flex) {gap: var(--wp--preset--spacing--60);}:where(.is-layout-grid) {gap: var(--wp--preset--spacing--60);}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}', + ':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(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(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: var(--wp--preset--spacing--60); }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}.is-layout-flex {gap: var(--wp--preset--spacing--60);}.is-layout-grid {gap: var(--wp--preset--spacing--60);}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}', $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -1345,8 +1345,8 @@ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_n ); $this->assertSame( - ':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(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(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }:where(.is-layout-flow) > :first-child{margin-block-start: 0;}:where(.is-layout-flow) > :last-child{margin-block-end: 0;}:where(.is-layout-flow) > *{margin-block-start: 1rem;margin-block-end: 0;}:where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.is-layout-constrained) > *{margin-block-start: 1rem;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1rem;}:where(.is-layout-grid) {gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}' . - ':root :where(.wp-block-post-content){color: gray;}:where(.wp-block-social-links-is-layout-flow) > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-flow) > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.wp-block-social-links-is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.wp-block-social-links-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-social-links-is-layout-flex) {gap: 0;}:where(.wp-block-social-links-is-layout-grid) {gap: 0;}:where(.wp-block-buttons-is-layout-flow) > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-flow) > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.wp-block-buttons-is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.wp-block-buttons-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:where(.wp-block-buttons-is-layout-flex) {gap: 0;}:where(.wp-block-buttons-is-layout-grid) {gap: 0;}', + ':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(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(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1rem;margin-block-end: 0;}.is-layout-flex {gap: 1rem;}.is-layout-grid {gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}' . + ':root :where(.wp-block-post-content){color: gray;}.wp-block-social-links-is-layout-flow > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-flow > :last-child{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-constrained > :first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-constrained > :last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex {gap: 0;}.wp-block-social-links-is-layout-grid {gap: 0;}.wp-block-buttons-is-layout-flow > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-flow > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > :first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-constrained > :last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex {gap: 0;}.wp-block-buttons-is-layout-grid {gap: 0;}', $theme_json->get_stylesheet() ); } @@ -3757,7 +3757,7 @@ public function test_get_styles_with_appearance_tools() { 'selector' => 'body', ); - $expected = ':where(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(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: ; }:where(.is-layout-flow) > :first-child{margin-block-start: 0;}:where(.is-layout-flow) > :last-child{margin-block-end: 0;}:where(.is-layout-flow) > *{margin-block-start: 1;margin-block-end: 0;}:where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:where(.is-layout-constrained) > *{margin-block-start: 1;margin-block-end: 0;}:where(.is-layout-flex) {gap: 1;}:where(.is-layout-grid) {gap: 1;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}'; + $expected = ':where(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(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: ; }.is-layout-flow > :first-child{margin-block-start: 0;}.is-layout-flow > :last-child{margin-block-end: 0;}.is-layout-flow > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-constrained > :first-child{margin-block-start: 0;}.is-layout-constrained > :last-child{margin-block-end: 0;}.is-layout-constrained > *{margin-block-start: 1;margin-block-end: 0;}.is-layout-flex {gap: 1;}.is-layout-grid {gap: 1;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}'; $root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ); $this->assertSame( $expected, $root_rules ); } From 4b43232444b187cba5bc1de90f508c61866bdeda Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 14:48:20 +1000 Subject: [PATCH 09/32] Reduce block style variation selector specificity to 0-1-0 --- lib/class-wp-theme-json-gutenberg.php | 2 +- phpunit/class-wp-theme-json-test.php | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index c3c9ba99cb6a12..17f2efbf965959 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2767,7 +2767,7 @@ static function ( $pseudo_selector ) use ( $selector ) { // 6. Generate and append the style variation rulesets. foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) { - $block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations ); + $block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations ); } return $block_rules; diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 563421c6c070b7..b74456a524d72c 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4146,9 +4146,9 @@ public function data_get_styles_for_block_with_style_variations() { $plain = array( 'metadata' => array( 'path' => array( 'styles', 'blocks', 'core/quote', 'variations', 'plain' ), - 'selector' => '.is-style-plain.is-style-plain.wp-block-quote', + 'selector' => '.is-style-plain.wp-block-quote', ), - 'styles' => '.is-style-plain.is-style-plain.wp-block-quote{background-color: hotpink;}', + 'styles' => ':root :where(.is-style-plain.wp-block-quote){background-color: hotpink;}', ); return array( From b278d7fa873f932eecdea458f995923c7a2a88c6 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 14:53:58 +1000 Subject: [PATCH 10/32] Update block style variation selectors in global styles hook --- .../components/global-styles/test/use-global-styles-output.js | 3 ++- .../src/components/global-styles/use-global-styles-output.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) 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 bede89469a8612..e549271e73b7f5 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 @@ -566,7 +566,8 @@ describe( 'global styles renderer', () => { }; expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual( - ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }.is-style-foo.wp-image.wp-image-spacing{padding-top: 2px;}.is-style-foo.wp-image.wp-image-border-color{border-color: blue;}.is-style-foo.wp-image{color: blue;}.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(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }' + + ':root :where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:root :where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}.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; }' ); } ); 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 15c7349661e75b..edce20ce482906 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 @@ -892,7 +892,7 @@ export const toStyles = ( ); const rules = declarations.join( ';' ); - ruleset += `${ cssSelector }{${ rules };}`; + ruleset += `:root :where(${ cssSelector }){${ rules };}`; } } ); @@ -907,7 +907,7 @@ export const toStyles = ( tree ); if ( styleVariationDeclarations.length ) { - ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join( + ruleset += `:root :where(${ styleVariationSelector }){${ styleVariationDeclarations.join( ';' ) };}`; } From e61722393572358209470618cb7699014420f2e4 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 16:41:04 +1000 Subject: [PATCH 11/32] Try applying :root :where selectors for custom css --- lib/class-wp-theme-json-gutenberg.php | 6 ++++-- .../global-styles/test/use-global-styles-output.js | 8 ++++---- .../global-styles/use-global-styles-output.js | 4 ++-- phpunit/class-wp-theme-json-test.php | 10 +++++----- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 17f2efbf965959..75b9ef60ff1fc8 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1293,7 +1293,7 @@ protected function process_blocks_custom_css( $css, $selector ) { $is_root_css = ( ! str_contains( $part, '{' ) ); if ( $is_root_css ) { // If the part doesn't contain braces, it applies to the root level. - $processed_css .= trim( $selector ) . '{' . trim( $part ) . '}'; + $processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}'; } else { // If the part contains braces, it's a nested CSS rule. $part = explode( '{', str_replace( '}', '', $part ) ); @@ -1305,7 +1305,8 @@ protected function process_blocks_custom_css( $css, $selector ) { $part_selector = str_starts_with( $nested_selector, ' ' ) ? static::scope_selector( $selector, $nested_selector ) : static::append_to_selector( $selector, $nested_selector ); - $processed_css .= $part_selector . '{' . trim( $css_value ) . '}'; + $final_selector = ":root :where($part_selector)"; + $processed_css .= $final_selector . '{' . trim( $css_value ) . '}'; } } return $processed_css; @@ -1322,6 +1323,7 @@ public function get_custom_css() { $block_custom_css = ''; $block_nodes = $this->get_block_custom_css_nodes(); foreach ( $block_nodes as $node ) { + // The node selector will have its specificity set to 0-1-0 within process_blocks_custom_css. $block_custom_css .= $this->get_block_custom_css( $node['css'], $node['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 e549271e73b7f5..b858a2e4140ea9 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 @@ -997,7 +997,7 @@ describe( 'global styles renderer', () => { it( 'should return processed CSS without any nested selectors', () => { expect( processCSSNesting( 'color: red; margin: auto;', '.foo' ) - ).toEqual( '.foo{color: red; margin: auto;}' ); + ).toEqual( ':root :where(.foo){color: red; margin: auto;}' ); } ); it( 'should return processed CSS with nested selectors', () => { expect( @@ -1006,7 +1006,7 @@ describe( 'global styles renderer', () => { '.foo' ) ).toEqual( - '.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}' + ':root :where(.foo){color: red; margin: auto;}:root :where(.foo.one){color: blue;}:root :where(.foo .two){color: green;}' ); } ); it( 'should return processed CSS with pseudo elements', () => { @@ -1016,7 +1016,7 @@ describe( 'global styles renderer', () => { '.foo' ) ).toEqual( - '.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}' + ':root :where(.foo){color: red; margin: auto;}:root :where(.foo::before){color: blue;}:root :where(.foo ::before){color: green;}:root :where(.foo.one::before){color: yellow;}:root :where(.foo .two::before){color: purple;}' ); } ); it( 'should return processed CSS with multiple root selectors', () => { @@ -1026,7 +1026,7 @@ describe( 'global styles renderer', () => { '.foo, .bar' ) ).toEqual( - '.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}' + ':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo::before, .bar::before){color: yellow;}:root :where(.foo ::before, .bar ::before){color: purple;}:root :where(.foo.three::before, .bar.three::before){color: orange;}:root :where(.foo .four::before, .bar .four::before){color: skyblue;}' ); } ); } ); 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 edce20ce482906..6c35b684227638 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 @@ -1185,7 +1185,7 @@ export function processCSSNesting( css, blockSelector ) { const isRootCss = ! part.includes( '{' ); if ( isRootCss ) { // If the part doesn't contain braces, it applies to the root level. - processedCSS += `${ blockSelector }{${ part.trim() }}`; + processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`; } else { // If the part contains braces, it's a nested CSS rule. const splittedPart = part.replace( '}', '' ).split( '{' ); @@ -1198,7 +1198,7 @@ export function processCSSNesting( css, blockSelector ) { ? scopeSelector( blockSelector, nestedSelector ) : appendToSelector( blockSelector, nestedSelector ); - processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`; + processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`; } } ); return processedCSS; diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index b74456a524d72c..aed3e9963ac25b 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4872,7 +4872,7 @@ public function test_get_custom_css_handles_global_custom_css() { ) ); - $custom_css = 'body {color:purple;}p{color:red;}'; + $custom_css = 'body {color:purple;}:root :where(p){color:red;}'; $this->assertSame( $custom_css, $theme_json->get_custom_css() ); } @@ -4979,7 +4979,7 @@ public function data_process_blocks_custom_css() { 'selector' => '.foo', 'css' => 'color: red; margin: auto;', ), - 'expected' => '.foo{color: red; margin: auto;}', + 'expected' => ':root :where(.foo){color: red; margin: auto;}', ), // CSS with nested selectors. 'with nested selector' => array( @@ -4987,7 +4987,7 @@ public function data_process_blocks_custom_css() { 'selector' => '.foo', 'css' => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}', ), - 'expected' => '.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}', + 'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo.one){color: blue;}:root :where(.foo .two){color: green;}', ), // CSS with pseudo elements. 'with pseudo elements' => array( @@ -4995,7 +4995,7 @@ public function data_process_blocks_custom_css() { 'selector' => '.foo', 'css' => 'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;} &.one::before{color: yellow;} & .two::before{color: purple;}', ), - 'expected' => '.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}', + 'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo::before){color: blue;}:root :where(.foo ::before){color: green;}:root :where(.foo.one::before){color: yellow;}:root :where(.foo .two::before){color: purple;}', ), // CSS with multiple root selectors. 'with multiple root selectors' => array( @@ -5003,7 +5003,7 @@ public function data_process_blocks_custom_css() { 'selector' => '.foo, .bar', 'css' => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;} &.three::before{color: orange;} & .four::before{color: skyblue;}', ), - 'expected' => '.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}', + 'expected' => ':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo::before, .bar::before){color: yellow;}:root :where(.foo ::before, .bar ::before){color: purple;}:root :where(.foo.three::before, .bar.three::before){color: orange;}:root :where(.foo .four::before, .bar .four::before){color: skyblue;}', ), ); } From f14f4c115b743440dfb55e1f7d0dbca3652d6601 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 23 May 2024 09:41:32 +0200 Subject: [PATCH 12/32] Add backport log entry --- backport-changelog/6.6/6522.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 backport-changelog/6.6/6522.md diff --git a/backport-changelog/6.6/6522.md b/backport-changelog/6.6/6522.md new file mode 100644 index 00000000000000..172464cf664de9 --- /dev/null +++ b/backport-changelog/6.6/6522.md @@ -0,0 +1,5 @@ +https://github.com/WordPress/wordpress-develop/pull/6522 + +* https://github.com/WordPress/gutenberg/pull/60106 +* https://github.com/WordPress/gutenberg/pull/60228 +* https://github.com/WordPress/gutenberg/pull/61638 From 92b680ce351c13338a48315d7ee525adeb3a1ff8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 May 2024 11:15:58 +1000 Subject: [PATCH 13/32] Move block style variation styles to after block styles Given they will have level specificity the variation styles should override the global block styles. --- .../global-styles/use-global-styles-output.js | 88 +++++++++---------- 1 file changed, 44 insertions(+), 44 deletions(-) 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 6c35b684227638..06d9400416eebb 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 @@ -866,6 +866,50 @@ export const toStyles = ( ); } + // Process duotone styles. + if ( duotoneSelector ) { + const duotoneStyles = {}; + if ( styles?.filter ) { + duotoneStyles.filter = styles.filter; + delete styles.filter; + } + const duotoneDeclarations = + getStylesDeclarations( duotoneStyles ); + if ( duotoneDeclarations.length ) { + ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join( + ';' + ) };}`; + } + } + + // Process blockGap and layout styles. + if ( + ! disableLayoutStyles && + ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) + ) { + ruleset += getLayoutStyles( { + style: styles, + selector, + hasBlockGapSupport, + hasFallbackGapSupport, + fallbackGapValue, + } ); + } + + // Process the remaining block styles (they use either normal block class or __experimentalSelector). + const styleDeclarations = getStylesDeclarations( + styles, + selector, + useRootPaddingAlign, + tree, + disableRootPadding + ); + if ( styleDeclarations?.length ) { + ruleset += `:root :where(${ selector }){${ styleDeclarations.join( + ';' + ) };}`; + } + if ( styleVariationSelectors ) { Object.entries( styleVariationSelectors ).forEach( ( [ styleVariationName, styleVariationSelector ] ) => { @@ -916,50 +960,6 @@ export const toStyles = ( ); } - // Process duotone styles. - if ( duotoneSelector ) { - const duotoneStyles = {}; - if ( styles?.filter ) { - duotoneStyles.filter = styles.filter; - delete styles.filter; - } - const duotoneDeclarations = - getStylesDeclarations( duotoneStyles ); - if ( duotoneDeclarations.length ) { - ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join( - ';' - ) };}`; - } - } - - // Process blockGap and layout styles. - if ( - ! disableLayoutStyles && - ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) - ) { - ruleset += getLayoutStyles( { - style: styles, - selector, - hasBlockGapSupport, - hasFallbackGapSupport, - fallbackGapValue, - } ); - } - - // Process the remaining block styles (they use either normal block class or __experimentalSelector). - const declarations = getStylesDeclarations( - styles, - selector, - useRootPaddingAlign, - tree, - disableRootPadding - ); - if ( declarations?.length ) { - ruleset += `:root :where(${ selector }){${ declarations.join( - ';' - ) };}`; - } - // Check for pseudo selector in `styles` and handle separately. const pseudoSelectorStyles = Object.entries( styles ).filter( ( [ key ] ) => key.startsWith( ':' ) From 23c538a9f54eabdd3d153b243a543fa5c59e4e89 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 17:55:24 +1000 Subject: [PATCH 14/32] Update button styles --- lib/theme.json | 25 +++++++ packages/block-library/src/button/editor.scss | 35 --------- packages/block-library/src/button/style.scss | 72 ++++++------------- 3 files changed, 45 insertions(+), 87 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index 7cd6129923df2a..d652dc47bf78c3 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -370,6 +370,31 @@ "bottom": "0px", "left": "0px" } + }, + "blocks": { + "core/button": { + "variations": { + "outline": { + "border": { + "width": "2px", + "style": "solid", + "color": "currentColor" + }, + "color": { + "text": "currentColor", + "gradient": "transparent none" + }, + "spacing": { + "padding": { + "top": "0.667em", + "right": "1.33em", + "bottom": "0.667em", + "left": "1.33em" + } + } + } + } + } } } } diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index c24021d17e38ec..8c879c7e3b7c9e 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -37,38 +37,3 @@ div[data-type="core/button"] { text-decoration: inherit; } -.editor-styles-wrapper .wp-block-button .wp-block-button__link { - // The following styles ensure a default border is applied when the user selects only a border color or style in the editor, - // but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button. - &:where(.has-border-color) { - border-width: initial; - } - &:where([style*="border-top-color"]) { - border-top-width: initial; - } - &:where([style*="border-right-color"]) { - border-right-width: initial; - } - &:where([style*="border-bottom-color"]) { - border-bottom-width: initial; - } - &:where([style*="border-left-color"]) { - border-left-width: initial; - } - - &:where([style*="border-style"]) { - border-width: initial; - } - &:where([style*="border-top-style"]) { - border-top-width: initial; - } - &:where([style*="border-right-style"]) { - border-right-width: initial; - } - &:where([style*="border-bottom-style"]) { - border-bottom-width: initial; - } - &:where([style*="border-left-style"]) { - border-left-width: initial; - } -} diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index f441152107973f..42306cba0c984d 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -86,69 +86,37 @@ $blocks-block__margin: 0.5em; } } -// the first selector is required for old buttons markup +// The follow block style selectors are required for old buttons markup +// and do not use the `:root :where()` format to match specificity at +// the time they were deprecated. .wp-block-button.is-style-squared, .wp-block-button__link.wp-block-button.is-style-squared { border-radius: 0; } - -// the first selector is required for old buttons markup .wp-block-button.no-border-radius, .wp-block-button__link.no-border-radius { border-radius: 0 !important; } -.wp-block-button:where(.is-style-outline) > .wp-block-button__link, -.wp-block-button .wp-block-button__link:where(.is-style-outline) { - border: 2px solid currentColor; - padding: 0.667em 1.333em; -} - -.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color), -.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) { - color: currentColor; -} - -.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background), -.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) { - background-color: transparent; - // background-image is required to overwrite a gradient background - background-image: none; -} - -.wp-block-button .wp-block-button__link { - // The following styles ensure a default border is applied when the user - // selects only a border color or style. This overcomes the zero border - // width applied by core's theme.json via the elements API. - &:where(.has-border-color) { - border-width: initial; - } - &:where([style*="border-top-color"]) { - border-top-width: initial; - } - &:where([style*="border-right-color"]) { - border-right-width: initial; - } - &:where([style*="border-bottom-color"]) { - border-bottom-width: initial; - } - &:where([style*="border-left-color"]) { - border-left-width: initial; +// Selectors here use the `:root :where()` format for maintaining compatibility +// with global styles and nested block style variations. +:root { + // Outline Block Style Variation. + :where(.wp-block-button.is-style-outline > .wp-block-button__link), + :where(.wp-block-button .wp-block-button__link.is-style-outline) { + border: 2px solid currentColor; + padding: 0.667em 1.333em; } - &:where([style*="border-style"]) { - border-width: initial; - } - &:where([style*="border-top-style"]) { - border-top-width: initial; + :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)), + :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) { + color: currentColor; } - &:where([style*="border-right-style"]) { - border-right-width: initial; - } - &:where([style*="border-bottom-style"]) { - border-bottom-width: initial; - } - &:where([style*="border-left-style"]) { - border-left-width: initial; + + :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)), + :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) { + background-color: transparent; + // background-image is required to overwrite a gradient background + background-image: none; } } From 9f6226d226aaed46e128dfcec0ff3da8a50176a7 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 18:10:56 +1000 Subject: [PATCH 15/32] Update image styles --- packages/block-library/src/image/style.scss | 51 ++++----------------- 1 file changed, 8 insertions(+), 43 deletions(-) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 75c8b839dca37c..40ffe0cd0e61c7 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -82,16 +82,10 @@ @include caption-style(); } - // Variations - &.is-style-rounded img, - .is-style-rounded img { - // We use an absolute pixel to prevent the oval shape that a value of 50% would give - // to rectangular images. A pill-shape is better than otherwise. - border-radius: 9999px; - } - // The following variation is deprecated. // The CSS is kept here for the time being, to support blocks using the old variation. + // The selector is not scoped with `:root :where()` like global styles are to keep its + // specificity the same as it was when it was deprecated. &.is-style-circle-mask img { // We use an absolute pixel to prevent the oval shape that a value of 50% would give // to rectangular images. A pill-shape is better than otherwise. @@ -108,42 +102,13 @@ border-radius: 0; } } +} - // The following is required to overcome WP Core applying styles that clear - // img borders with a higher specificity than those added by the border - // block support to provide a default border-style of solid when a border - // color or width has been set. - :where(.has-border-color) { - border-style: solid; - } - :where([style*="border-top-color"]) { - border-top-style: solid; - } - :where([style*="border-right-color"]) { - border-right-style: solid; - } - :where([style*="border-bottom-color"]) { - border-bottom-style: solid; - } - :where([style*="border-left-color"]) { - border-left-style: solid; - } - - :where([style*="border-width"]) { - border-style: solid; - } - :where([style*="border-top-width"]) { - border-top-style: solid; - } - :where([style*="border-right-width"]) { - border-right-style: solid; - } - :where([style*="border-bottom-width"]) { - border-bottom-style: solid; - } - :where([style*="border-left-width"]) { - border-left-style: solid; - } +// Variations +:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) { + // We use an absolute pixel to prevent the oval shape that a value of 50% would give + // to rectangular images. A pill-shape is better than otherwise. + border-radius: 9999px; } .wp-block-image figure { From 3781d7e9424c73948a2bb48f13ea1a5e8466d46c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 18:20:02 +1000 Subject: [PATCH 16/32] Update pullquote styles --- packages/block-library/src/pullquote/editor.scss | 2 ++ packages/block-library/src/pullquote/style.scss | 10 ++++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss index 7b985d8020c9fe..deb325849ebebf 100644 --- a/packages/block-library/src/pullquote/editor.scss +++ b/packages/block-library/src/pullquote/editor.scss @@ -1,4 +1,6 @@ // .is-style-solid-color is deprecated. +// This selector has not been scoped with `:root :where`, as global styles +// does, to keep its specificity as it was at the time of deprecation. .wp-block-pullquote.is-style-solid-color { & blockquote p { font-size: 32px; diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss index 07f6366d47617f..b9e28b7cdcfaa6 100644 --- a/packages/block-library/src/pullquote/style.scss +++ b/packages/block-library/src/pullquote/style.scss @@ -2,6 +2,8 @@ text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified. overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block. box-sizing: border-box; + margin: 0 0 1em 0; + padding: 4em 0; p, blockquote, @@ -35,12 +37,6 @@ } } -// Lowest specificity to avoid overriding layout and global styles. -:where(.wp-block-pullquote) { - margin: 0 0 1em 0; - padding: 4em 0; -} - // Ensure that we are reasonably specific to override theme defaults. .wp-block-pullquote.has-text-align-left blockquote { text-align: left; @@ -52,6 +48,8 @@ } // .is-style-solid-color is deprecated. +// This selector has not been scoped with `:root :where`, as global styles +// does, to keep its specificity as it was at the time of deprecation. .wp-block-pullquote.is-style-solid-color { border: none; blockquote { From 089a9b4454d4032e99e1319d0f231730d4913493 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 19:27:38 +1000 Subject: [PATCH 17/32] Update separator styles --- .../block-library/src/separator/editor.scss | 7 --- .../block-library/src/separator/style.scss | 45 +++++++++---------- 2 files changed, 21 insertions(+), 31 deletions(-) diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss index 220c6bd9d80e38..24e940684279e8 100644 --- a/packages/block-library/src/separator/editor.scss +++ b/packages/block-library/src/separator/editor.scss @@ -2,11 +2,4 @@ // Prevent margin collapsing so the area to select the separator is bigger. padding-top: 0.1px; padding-bottom: 0.1px; - - // This is also set in style.scss, but needs a higher specificity in editor - // due to the way that color block supports adds additional background color styles. - &.wp-block-separator.is-style-dots { - background: none !important; - border: none; - } } diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index d40dd2f05844ed..6cca97b7a0f028 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -1,28 +1,4 @@ .wp-block-separator { - // Dots style - &.is-style-dots { - // Override any background themes often set on the hr tag for this style. - // also override the color set in the editor since it's intented for normal HR - background: none !important; - border: none; - text-align: center; - line-height: 1; - height: auto; - - &::before { - content: "\00b7 \00b7 \00b7"; - color: currentColor; - font-size: 1.5em; - letter-spacing: 2em; - /*rtl:ignore*/ - padding-left: 2em; - font-family: serif; - } - } -} - -// Lowest specificity to avoid overriding global styles. -:where(.wp-block-separator) { border-top: 2px solid currentColor; // Default, thin style, is stored in theme.scss so it can be opted out of @@ -31,3 +7,24 @@ border-right: none; border-bottom: none; } + +// Dots block style variation +:root :where(.wp-block-separator.is-style-dots) { + // Override any background themes often set on the hr tag for this style. + // also override the color set in the editor since it's intended for normal HR + background: none !important; + border: none; + text-align: center; + line-height: 1; + height: auto; + + &::before { + content: "\00b7 \00b7 \00b7"; + color: currentColor; + font-size: 1.5em; + letter-spacing: 2em; + /*rtl:ignore*/ + padding-left: 2em; + font-family: serif; + } +} From 497ef7df5f4549f70c4d9c3fdc02f659eed983fc Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 19:41:45 +1000 Subject: [PATCH 18/32] Fix separator dots style --- packages/block-library/src/separator/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index 6cca97b7a0f028..aeb6a9576acd8a 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -13,7 +13,8 @@ // Override any background themes often set on the hr tag for this style. // also override the color set in the editor since it's intended for normal HR background: none !important; - border: none; + // Important required to ensure dots does not get a border. + border: none !important; text-align: center; line-height: 1; height: auto; From 545ead62b16a6053a33f8474dbbdc6ed3f827bd2 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 19:44:12 +1000 Subject: [PATCH 19/32] Update site logo styles --- lib/theme.json | 9 +++++++++ packages/block-library/src/site-logo/style.scss | 12 ++++++------ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index d652dc47bf78c3..2f1f723bf75f7f 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -394,6 +394,15 @@ } } } + }, + "core/site-logo": { + "variations": { + "rounded": { + "border": { + "radius": "9999px" + } + } + } } } } diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss index ca9c92539b6760..020b7aab5370b3 100644 --- a/packages/block-library/src/site-logo/style.scss +++ b/packages/block-library/src/site-logo/style.scss @@ -31,11 +31,11 @@ margin-right: auto; text-align: center; } +} - // Style variations - &.is-style-rounded { - // We use an absolute pixel to prevent the oval shape that a value of 50% would give - // to rectangular images. A pill-shape is better than otherwise. - border-radius: 9999px; - } +// Style variations +:root :where(.wp-block-site-logo.is-style-rounded) { + // We use an absolute pixel to prevent the oval shape that a value of 50% would give + // to rectangular images. A pill-shape is better than otherwise. + border-radius: 9999px; } From 6f128101ca1f42c0dae1fca97a44a576cd4872e4 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 20:04:59 +1000 Subject: [PATCH 20/32] Update social link styles --- .../block-library/src/social-link/editor.scss | 4 +-- .../src/social-links/editor.scss | 27 ++++++++--------- .../block-library/src/social-links/style.scss | 29 ++++++++++--------- 3 files changed, 31 insertions(+), 29 deletions(-) diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss index 73211958b48c15..bd93ad9f055fcd 100644 --- a/packages/block-library/src/social-link/editor.scss +++ b/packages/block-library/src/social-link/editor.scss @@ -31,11 +31,11 @@ } } -.wp-block-social-links.is-style-pill-shape .wp-social-link button { +:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) { padding-left: calc((2/3) * 1em); padding-right: calc((2/3) * 1em); } -.wp-block-social-links.is-style-logos-only .wp-social-link button { +:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) { padding: 0; } diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 26886aef8de47a..6f07ea209ecbea 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -11,6 +11,20 @@ transform: none; } +// Specificity for the following styles are fixed at 0-1-0 to match and be +// overridable by global styles. +:root :where(.wp-block-social-links), +:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) { + padding: 0; +} +:root :where(.wp-block-social-links__social-placeholder .wp-social-link) { + padding: 0.25em; +} +:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) { + padding-left: calc((2/3) * 1em); + padding-right: calc((2/3) * 1em); +} + // Placeholder/setup state. .wp-block-social-links__social-placeholder { display: flex; @@ -33,19 +47,6 @@ display: flex; } - .wp-social-link { - padding: 0.25em; - - .is-style-pill-shape & { - padding-left: calc((2/3) * 1em); - padding-right: calc((2/3) * 1em); - } - - .is-style-logos-only & { - padding: 0; - } - } - .wp-social-link::before { content: ""; display: block; diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 1ad883bbb88840..f04c11ea07acd3 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -21,12 +21,6 @@ } .wp-social-link { - // By setting the font size, we can scale icons and paddings consistently based on that. - // This also allows themes to override this, if need be. - a { - padding: 0.25em; - } - svg { width: 1em; height: 1em; @@ -119,14 +113,13 @@ } // Treatment for logos only style. +// The specificity for this selector has not been reduced to 0-1-0 as per +// global styles variation selectors as the lack of background should be +// enforced for this block style. .wp-block-social-links.is-style-logos-only { .wp-social-link { background: none; - a { - padding: 0; - } - // Make these bigger. svg { width: 1.25em; @@ -142,11 +135,19 @@ .wp-social-link { width: auto; } +} - .wp-social-link a { - padding-left: calc((2/3) * 1em); - padding-right: calc((2/3) * 1em); - } +// The following rules have their selector specificity set to 0-1-0 to +// facilitate theme.json styling of the inner social-link block padding. +:root :where(.wp-block-social-links .wp-social-link a) { + padding: 0.25em; +} +:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a) { + padding: 0; +} +:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a) { + padding-left: calc((2/3) * 1em); + padding-right: calc((2/3) * 1em); } // Ensure the Snapchat label is visible when no custom From f010443df95382d774e95d98b585611c303c9b5d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 20:15:33 +1000 Subject: [PATCH 21/32] Add comment explaining table selector --- packages/block-library/src/table/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index 4f4271650f50e1..69cd2666e13e20 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -71,6 +71,9 @@ } // "Stripes" style variation. + // This block style selector does not have 0-1-0 specificity, as per those + // generated via global styles, to maintain current styling. Global styles + // support for table borders also only applies to the outer `table` element. &.is-style-stripes { border-spacing: 0; border-collapse: inherit; From 46a95c3da22b59f0d220c9715651cc7848275dfb Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 23 May 2024 20:22:58 +1000 Subject: [PATCH 22/32] Update tag cloud styles --- .../block-library/src/tag-cloud/style.scss | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/tag-cloud/style.scss b/packages/block-library/src/tag-cloud/style.scss index 5fb04840de1517..dedb5e73ab1a1f 100644 --- a/packages/block-library/src/tag-cloud/style.scss +++ b/packages/block-library/src/tag-cloud/style.scss @@ -22,18 +22,20 @@ margin-left: 5px; text-decoration: none; } +} - &.is-style-outline { - display: flex; - flex-wrap: wrap; - gap: 1ch; - - a { - border: 1px solid currentColor; - font-size: unset !important; // !important Needed to override the inline styles. - margin-right: 0; - padding: 1ch 2ch; - text-decoration: none !important; // !important needed to override generic post content link decoration. - } - } +// Specificity is set to 0-1-0 to match global styles selectors. +:root :where(.wp-block-tag-cloud.is-style-outline) { + display: flex; + flex-wrap: wrap; + gap: 1ch; +} +// The block support related styles below haven't been replicated in the base theme.json +// as the block doesn't yet adopt them for its inner links. +:root :where(.wp-block-tag-cloud.is-style-outline a) { + border: 1px solid currentColor; + font-size: unset !important; // !important Needed to override the inline styles. + margin-right: 0; + padding: 1ch 2ch; + text-decoration: none !important; // !important needed to override generic post content link decoration. } From 58daed102a3a169b208d1edd84517f78aa52ef3c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 May 2024 16:07:59 +1000 Subject: [PATCH 23/32] Fix Cover styles blocking global styles --- packages/block-library/src/cover/style.scss | 24 ++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index b190953f38a6d1..58f1147f12d279 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -116,18 +116,6 @@ /*rtl:raw: direction: rtl; */ } - p, - h1, - h2, - h3, - h4, - h5, - h6 { - &:where(:not(.has-text-color)) { - color: inherit; - } - } - // Position: Top &.is-position-top-left { align-items: flex-start; @@ -310,3 +298,15 @@ section.wp-block-cover-image > h2, :where(.wp-block-cover-image.is-light:not(.has-text-color)) { color: $black; } + +:root { + :where(.wp-block-cover p:not(.has-text-color)), + :where(.wp-block-cover h1:not(.has-text-color)), + :where(.wp-block-cover h2:not(.has-text-color)), + :where(.wp-block-cover h3:not(.has-text-color)), + :where(.wp-block-cover h4:not(.has-text-color)), + :where(.wp-block-cover h5:not(.has-text-color)), + :where(.wp-block-cover h6:not(.has-text-color)) { + color: inherit; + } +} From 5b079e4a2b4db95be34e3aba3d5f7032d99475d1 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 May 2024 17:37:19 +1000 Subject: [PATCH 24/32] Fix image caption styles --- packages/block-library/src/image/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss index d5b2cfb0e83e94..c89dd3334dd09a 100644 --- a/packages/block-library/src/image/theme.scss +++ b/packages/block-library/src/image/theme.scss @@ -1,4 +1,4 @@ -.wp-block-image figcaption { +:root :where(.wp-block-image figcaption) { @include caption-style-theme(); } From cff5380202ae091ee59b78c4440a8b17d41c25a8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 May 2024 17:37:41 +1000 Subject: [PATCH 25/32] Fix latest posts padding styles --- packages/block-library/src/latest-posts/editor.scss | 3 --- packages/block-library/src/latest-posts/style.scss | 13 +++++++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss index 3c2d6a30f1c077..d0779bf215fb05 100644 --- a/packages/block-library/src/latest-posts/editor.scss +++ b/packages/block-library/src/latest-posts/editor.scss @@ -1,8 +1,5 @@ .wp-block-latest-posts { padding-left: 2.5em; - &.is-grid { - padding-left: 0; - } // Apply overflow for post items, so any floated featured images won't crop the focus style. > li { diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss index 5d3e360d0804a8..127dda2fb9d9d6 100644 --- a/packages/block-library/src/latest-posts/style.scss +++ b/packages/block-library/src/latest-posts/style.scss @@ -12,7 +12,6 @@ } &.wp-block-latest-posts__list { list-style: none; - padding-left: 0; li { clear: both; @@ -23,7 +22,6 @@ &.is-grid { display: flex; flex-wrap: wrap; - padding: 0; li { margin: 0 1.25em 1.25em 0; @@ -34,9 +32,9 @@ @include break-small { @for $i from 2 through 6 { &.columns-#{ $i } li { - width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i })); + width: calc((100% / #{$i}) - 1.25em + (1.25em / #{$i})); - &:nth-child( #{ $i }n ) { + &:nth-child(#{ $i }n) { margin-right: 0; } } @@ -44,6 +42,13 @@ } } +:root { + :where(.wp-block-latest-posts.is-grid), + :where(.wp-block-latest-posts.wp-block-latest-posts__list) { + padding-left: 0; + } +} + .wp-block-latest-posts__post-date, .wp-block-latest-posts__post-author { display: block; From 66cb8f3aa4db57e2340122f164e6c4c526cabee8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 May 2024 18:05:12 +1000 Subject: [PATCH 26/32] Fix list block's has-background padding --- packages/block-library/src/list/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/list/style.scss b/packages/block-library/src/list/style.scss index badf1b9e560ebd..11f7c4888a5eff 100644 --- a/packages/block-library/src/list/style.scss +++ b/packages/block-library/src/list/style.scss @@ -1,8 +1,8 @@ ol, ul { box-sizing: border-box; +} - &.has-background { - padding: $block-bg-padding--v $block-bg-padding--h; - } +:root :where(ul.has-background, ol.has-background) { + padding: $block-bg-padding--v $block-bg-padding--h; } From 362d2ae3fbf3c7d5cb5959bdd26e795243708574 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 May 2024 18:05:26 +1000 Subject: [PATCH 27/32] Fix paragraph block's has-padding style --- packages/block-library/src/paragraph/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 34960bdb2fd589..7bd8c77e85de83 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -38,7 +38,8 @@ p.has-drop-cap.has-background { overflow: hidden; } -p.has-background { +// Specificity is reduced to 0-1-0 so global styles can override this. +:root :where(p.has-background) { padding: $block-bg-padding--v $block-bg-padding--h; } From 06f8857da235e17255e0a00fae44dcc379c7baa0 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 24 May 2024 19:17:32 +1000 Subject: [PATCH 28/32] Fix site title link colors --- packages/block-library/src/site-title/editor.scss | 6 ++---- packages/block-library/src/site-title/style.scss | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss index 173e4570929a51..ce83659170ff6f 100644 --- a/packages/block-library/src/site-title/editor.scss +++ b/packages/block-library/src/site-title/editor.scss @@ -3,8 +3,6 @@ border: 1px dashed; } -.editor-styles-wrapper .wp-block-site-title { - a { - color: inherit; - } +.editor-styles-wrapper :where(.wp-block-site-title a) { + color: inherit; } diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss index afc6f449f4025b..337c82f79ad354 100644 --- a/packages/block-library/src/site-title/style.scss +++ b/packages/block-library/src/site-title/style.scss @@ -1,5 +1,3 @@ -.wp-block-site-title { - a { - color: inherit; - } +:root :where(.wp-block-site-title a) { + color: inherit; } From da3b22239da4f87adebc92934a5fb182510e84fc Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 27 May 2024 14:25:53 +1000 Subject: [PATCH 29/32] Revert "Fix paragraph block's has-padding style" This reverts commit 362d2ae3fbf3c7d5cb5959bdd26e795243708574. --- packages/block-library/src/paragraph/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 7bd8c77e85de83..34960bdb2fd589 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -38,8 +38,7 @@ p.has-drop-cap.has-background { overflow: hidden; } -// Specificity is reduced to 0-1-0 so global styles can override this. -:root :where(p.has-background) { +p.has-background { padding: $block-bg-padding--v $block-bg-padding--h; } From b73cffe438d73c36f0574820295aab5bb02c9993 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 27 May 2024 14:26:04 +1000 Subject: [PATCH 30/32] Revert "Fix list block's has-background padding" This reverts commit 66cb8f3aa4db57e2340122f164e6c4c526cabee8. --- packages/block-library/src/list/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/list/style.scss b/packages/block-library/src/list/style.scss index 11f7c4888a5eff..badf1b9e560ebd 100644 --- a/packages/block-library/src/list/style.scss +++ b/packages/block-library/src/list/style.scss @@ -1,8 +1,8 @@ ol, ul { box-sizing: border-box; -} -:root :where(ul.has-background, ol.has-background) { - padding: $block-bg-padding--v $block-bg-padding--h; + &.has-background { + padding: $block-bg-padding--v $block-bg-padding--h; + } } From 01c33e34cbb1dad1cbf9c1a60c3d27a8ef060a0d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 28 May 2024 14:24:45 +1000 Subject: [PATCH 31/32] Fix additional issues with latest posts padding --- packages/block-library/src/latest-posts/editor.scss | 12 ++++++++++-- packages/block-library/src/latest-posts/style.scss | 4 +++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss index d0779bf215fb05..a963ab531597c6 100644 --- a/packages/block-library/src/latest-posts/editor.scss +++ b/packages/block-library/src/latest-posts/editor.scss @@ -1,6 +1,4 @@ .wp-block-latest-posts { - padding-left: 2.5em; - // Apply overflow for post items, so any floated featured images won't crop the focus style. > li { overflow: hidden; @@ -24,3 +22,13 @@ border-radius: $radius-block-ui; } } + +:root :where(.wp-block-latest-posts) { + padding-left: 2.5em; +} +:root { + :where(.wp-block-latest-posts.is-grid), + :where(.wp-block-latest-posts__list) { + padding-left: 0; + } +} diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss index 127dda2fb9d9d6..2a01d177ef47c4 100644 --- a/packages/block-library/src/latest-posts/style.scss +++ b/packages/block-library/src/latest-posts/style.scss @@ -43,7 +43,9 @@ } :root { - :where(.wp-block-latest-posts.is-grid), + :where(.wp-block-latest-posts.is-grid) { + padding: 0; + } :where(.wp-block-latest-posts.wp-block-latest-posts__list) { padding-left: 0; } From df10d13d5c098b8860eae787d8db91057e9f36fc Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 28 May 2024 14:39:11 +1000 Subject: [PATCH 32/32] Fix enforcement of no borders or background for dots separator --- packages/block-library/src/separator/style.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index aeb6a9576acd8a..65e463bc513f48 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -10,11 +10,6 @@ // Dots block style variation :root :where(.wp-block-separator.is-style-dots) { - // Override any background themes often set on the hr tag for this style. - // also override the color set in the editor since it's intended for normal HR - background: none !important; - // Important required to ensure dots does not get a border. - border: none !important; text-align: center; line-height: 1; height: auto; @@ -29,3 +24,14 @@ font-family: serif; } } + +// The following overrides should be enforced regardless of global styles. +// The dots block style uses a pseudo element to render the dots. Background +// color and borders would break this aesthetic. +.wp-block-separator.is-style-dots { + // Override any background themes often set on the hr tag for this style. + // also override the color set in the editor since it's intended for normal HR + background: none !important; + // Important required to ensure dots does not get a border. + border: none !important; +}