From 684aa5c764f731f4d16178557463327398665749 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 7 Apr 2022 13:00:03 +1200 Subject: [PATCH 1/6] Remove the important tag from user predefined style selections and reduce specificity of table element selector to prevent it overriding user applied styles --- lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php | 2 +- packages/block-library/src/table/block.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php index 5ad476b7d13bbf..53c4a7536664b6 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php @@ -958,7 +958,7 @@ protected static function compute_preset_classes( $settings, $selector, $origins array( array( 'name' => $property, - 'value' => 'var(' . $css_var . ') !important', + 'value' => 'var(' . $css_var . ')', ), ) ); diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json index d19d260249e020..162000f7fd4814 100644 --- a/packages/block-library/src/table/block.json +++ b/packages/block-library/src/table/block.json @@ -156,7 +156,7 @@ "width": true } }, - "__experimentalSelector": ".wp-block-table > table" + "__experimentalSelector": ":where(.wp-block-table > table)" }, "styles": [ { From 7dc3b4269f6022ab8da0d1bf5bc476561ea8202c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 7 Apr 2022 14:33:15 +1200 Subject: [PATCH 2/6] Fix unit tests --- phpunit/class-wp-theme-json-test.php | 46 +++------------------------- 1 file changed, 4 insertions(+), 42 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index b138564896cb7c..582c7550b0d375 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -529,7 +529,7 @@ function test_get_stylesheet() { $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.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 = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; - $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-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; + $presets = '.has-grey-color{color: var(--wp--preset--color--grey);}.has-grey-background-color{background-color: var(--wp--preset--color--grey);}.has-grey-border-color{border-color: var(--wp--preset--color--grey);}.has-small-font-family{font-family: var(--wp--preset--font-family--small);}.has-big-font-family{font-family: var(--wp--preset--font-family--big);}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); @@ -559,7 +559,7 @@ function test_get_stylesheet_preset_classes_work_with_compounded_selectors() { ); $this->assertEquals( - 'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: var(--wp--preset--color--white) !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}h1.has-white-border-color,h2.has-white-border-color,h3.has-white-border-color,h4.has-white-border-color,h5.has-white-border-color,h6.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}', + 'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: var(--wp--preset--color--white);}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: var(--wp--preset--color--white);}h1.has-white-border-color,h2.has-white-border-color,h3.has-white-border-color,h4.has-white-border-color,h5.has-white-border-color,h6.has-white-border-color{border-color: var(--wp--preset--color--white);}', $theme_json->get_stylesheet( array( 'presets' ) ) ); } @@ -595,7 +595,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ); $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-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;}'; + $presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey);}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey);}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey);}'; $variables = '.wp-block-group{--wp--preset--color--grey: grey;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() ); @@ -637,7 +637,7 @@ function test_get_stylesheet_generates_proper_classes_and_css_vars_from_slugs() ); $this->assertEquals( - '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-color{color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-color{color: var(--wp--preset--color--white-2-black) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-background-color{background-color: var(--wp--preset--color--white-2-black) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-border-color{border-color: var(--wp--preset--color--white-2-black) !important;}', + '.has-grey-color{color: var(--wp--preset--color--grey);}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey);}.has-light-grey-color{color: var(--wp--preset--color--light-grey);}.has-white-2-black-color{color: var(--wp--preset--color--white-2-black);}.has-grey-background-color{background-color: var(--wp--preset--color--grey);}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey);}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey);}.has-white-2-black-background-color{background-color: var(--wp--preset--color--white-2-black);}.has-grey-border-color{border-color: var(--wp--preset--color--grey);}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey);}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey);}.has-white-2-black-border-color{border-color: var(--wp--preset--color--white-2-black);}', $theme_json->get_stylesheet( array( 'presets' ) ) ); $this->assertEquals( @@ -647,44 +647,6 @@ function test_get_stylesheet_generates_proper_classes_and_css_vars_from_slugs() } - public function test_get_stylesheet_preset_values_are_marked_as_important() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', - ), - ), - ), - ), - 'styles' => array( - 'blocks' => array( - 'core/paragraph' => array( - 'color' => array( - 'text' => 'red', - 'background' => 'blue', - ), - 'typography' => array( - 'fontSize' => '12px', - 'lineHeight' => '1.3', - ), - ), - ), - ), - ), - 'default' - ); - - $this->assertEquals( - 'body{--wp--preset--color--grey: grey;}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; }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() - ); - } - public function test_merge_incoming_data() { $theme_json = new WP_Theme_JSON_Gutenberg( array( From 15c14e3bffdb03d7d52eab2f141150114e8bdc4f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 7 Apr 2022 16:05:45 +1200 Subject: [PATCH 3/6] Wrap the theme.json element selectors in a :where to prevent them overwritting user applied presets --- lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php index 53c4a7536664b6..7d8442b2789be9 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php @@ -555,7 +555,7 @@ protected static function get_blocks_metadata() { foreach ( static::ELEMENTS as $el_name => $el_selector ) { $element_selector = array(); foreach ( $block_selectors as $selector ) { - $element_selector[] = $selector . ' ' . $el_selector; + $element_selector[] = ':where(' . $selector . ' ' . $el_selector . ')'; } static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector ); } From 6798e6e810b8f3e8bf8288507dd59e818bc0db1f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 7 Apr 2022 16:53:53 +1200 Subject: [PATCH 4/6] Also reduce specificity of theme.json elements --- lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php index 7d8442b2789be9..fa9f0ce427137e 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-5-9.php @@ -1409,7 +1409,7 @@ protected static function get_style_nodes( $theme_json, $selectors = array() ) { foreach ( $theme_json['styles']['elements'] as $element => $node ) { $nodes[] = array( 'path' => array( 'styles', 'elements', $element ), - 'selector' => static::ELEMENTS[ $element ], + 'selector' => ':where(' . static::ELEMENTS[ $element ] . ')', ); } } From 00c73b802f8b0844442fc19c0d7e2b06b2432624 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 8 Apr 2022 09:42:47 +1200 Subject: [PATCH 5/6] Reduce specificity of block font and color defaults --- packages/block-library/src/button/style.scss | 10 +++++++--- packages/block-library/src/code/theme.scss | 5 +++-- packages/block-library/src/pullquote/theme.scss | 5 ++++- packages/block-library/src/search/style.scss | 6 ++++-- packages/block-library/src/separator/style.scss | 4 +++- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index f03929b0ebfb72..f712777d9ddc64 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -1,16 +1,20 @@ // This variable is repeated across Button, Buttons, and Buttons editor styles. $blocks-block__margin: 0.5em; +:where(.wp-block-button__link) { + color: $white; + background-color: #32373c; + font-size: 1.125em; +} + // Prefer the link selector instead of the regular button classname // to support the previous markup in addition to the new one. .wp-block-button__link { - color: $white; - background-color: #32373c; + border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape. box-shadow: none; cursor: pointer; display: inline-block; - font-size: 1.125em; padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions. text-align: center; text-decoration: none; diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss index 668837a1e9fa65..9cceebf19be8b7 100644 --- a/packages/block-library/src/code/theme.scss +++ b/packages/block-library/src/code/theme.scss @@ -1,6 +1,7 @@ +:where(.wp-block-code) { + font-family: Menlo, Consolas, monaco, monospace; +} .wp-block-code { - border: 1px solid #ccc; border-radius: 4px; - font-family: Menlo, Consolas, monaco, monospace; padding: 0.8em 1em; } diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 6b5e8401227f5b..6ef39b9c988c83 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -1,8 +1,11 @@ -.wp-block-pullquote { +:where(.wp-block-pullquote) { border-top: 4px solid currentColor; border-bottom: 4px solid currentColor; margin-bottom: 1.75em; color: currentColor; +} +.wp-block-pullquote { + margin-bottom: 1.75em; cite, footer, diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index da8ca3e866aa83..ea97087179d2a6 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -1,8 +1,10 @@ -.wp-block-search__button { +:where(.wp-block-search__button) { background: #f7f7f7; border: 1px solid #ccc; - padding: 0.375em 0.625em; color: #32373c; +} +.wp-block-search__button { + padding: 0.375em 0.625em; margin-left: 0.625em; word-break: normal; font-size: inherit; diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index b4f466205564cb..5a249166b084b2 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -1,6 +1,8 @@ -.wp-block-separator { +:where(.wp-block-separator) { border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; +} +.wp-block-separator { // Default, thin style, is stored in theme.scss so it can be opted out of // Dots style From ad668e2726f93589986aa387fd5b9fbe026e41d4 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 11 Apr 2022 13:42:35 +1200 Subject: [PATCH 6/6] Update phpunit/class-wp-theme-json-test.php Co-authored-by: Ramon --- phpunit/class-wp-theme-json-test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 582c7550b0d375..2c34a9bea434ac 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -528,7 +528,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.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 = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }:where(a){background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}:where(.wp-block-group a){color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}:where(h1 a),:where(h2 a),:where(h3 a),:where(h4 a),:where(h5 a),:where(h6 a){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}:where(.wp-block-post-date a){background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey);}.has-grey-background-color{background-color: var(--wp--preset--color--grey);}.has-grey-border-color{border-color: var(--wp--preset--color--grey);}.has-small-font-family{font-family: var(--wp--preset--font-family--small);}.has-big-font-family{font-family: var(--wp--preset--font-family--big);}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() );