From 007e625cb971c19b5047bcbe7f28f483f9123206 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 24 Jun 2022 09:34:24 +0100 Subject: [PATCH 1/4] Global Styles: Add block CSS rules after the Global Styles rules --- lib/blocks.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 3f0e8a547a8686..ff3506aa86ea44 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -199,7 +199,7 @@ function gutenberg_register_core_block_assets( $block_name ) { wp_register_style( "wp-block-{$block_name}", gutenberg_url( $style_path ), - array(), + array( 'global-styles' ), $default_version ); wp_style_add_data( "wp-block-{$block_name}", 'rtl', 'replace' ); @@ -207,7 +207,7 @@ function gutenberg_register_core_block_assets( $block_name ) { // Add a reference to the stylesheet's path to allow calculations for inlining styles in `wp_head`. wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $style_path ); } else { - wp_register_style( "wp-block-{$block_name}", false ); + wp_register_style( "wp-block-{$block_name}", false, array( 'global-styles' ), ); } // If the current theme supports wp-block-styles, dequeue the full stylesheet @@ -246,7 +246,7 @@ function() { wp_register_style( "wp-block-{$block_name}", gutenberg_url( $theme_style_path ), - array(), + array( 'global-styles' ), $default_version ); wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $theme_style_path ); From 5d5c539c92ff3111e40f462b948ab111d5727f5b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 24 Jun 2022 12:49:50 +0100 Subject: [PATCH 2/4] move some default styles to core theme.json, wrap others with a :where --- lib/compat/wordpress-6.1/theme.json | 4 +++- packages/block-library/src/button/block.json | 17 +---------------- packages/block-library/src/button/style.scss | 10 ++++++++++ packages/block-library/src/file/style.scss | 2 +- .../block-library/src/post-comments/style.scss | 10 +++++++--- packages/block-library/src/search/style.scss | 12 +++++++----- 6 files changed, 29 insertions(+), 26 deletions(-) diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json index eb37ea27068873..d036c158d2f8ea 100644 --- a/lib/compat/wordpress-6.1/theme.json +++ b/lib/compat/wordpress-6.1/theme.json @@ -247,7 +247,9 @@ "background": "#32373c" }, "typography": { - "fontSize": "1.125em", + "fontSize": "inherit", + "fontFamily": "inherit", + "lineHeight": "inherit", "textDecoration": "none" } }, diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 35887f057ca813..f86030c7460a57 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -89,22 +89,7 @@ "radius": true } }, - "__experimentalSelector": ".wp-block-button__link", - "__experimentalStyle": { - "border": { - "//": "100% causes an oval, but any explicit but really high value retains the pill shape.", - "radius": "9999px" - }, - "spacing": { - "padding": { - "//": "The extra 2px are added to size solids the same as the outline versions.", - "top": "calc(0.667em + 2px)", - "right": "calc(1.333em + 2px)", - "bottom": "calc(0.667em + 2px)", - "left": "calc(1.333em + 2px)" - } - } - } + "__experimentalSelector": ".wp-block-button__link" }, "styles": [ { "name": "fill", "label": "Fill", "isDefault": true }, diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 389b86194ad0c1..b76aeb0daa7844 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -29,6 +29,16 @@ $blocks-block__margin: 0.5em; } } +// These rules are set to zero specificity to keep the default styles for buttons. +// They are needed for backwards compatibility. +:where(.wp-block-button__link) { + // 100% causes an oval, but any explicit but really high value retains the pill shape. + border-radius: 9999px; + + // The extra 2px are added to size solids the same as the outline versions. + padding: calc(0.667em + 2px) calc(1.333em + 2px); +} + // Increased specificity needed to override margins. .wp-block-buttons > .wp-block-button { &.has-custom-width { diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss index 6452fdb9e78895..3d3dc9b8ced481 100644 --- a/packages/block-library/src/file/style.scss +++ b/packages/block-library/src/file/style.scss @@ -24,7 +24,7 @@ } //This needs a low specificity so it won't override the rules from the button element if defined in theme.json. -.wp-block-file__button { +:where(.wp-block-file__button) { border-radius: 2em; padding: 0.5em 1em; diff --git a/packages/block-library/src/post-comments/style.scss b/packages/block-library/src/post-comments/style.scss index 44c0b9be2d7c33..ebcf192d898b11 100644 --- a/packages/block-library/src/post-comments/style.scss +++ b/packages/block-library/src/post-comments/style.scss @@ -128,8 +128,12 @@ input:not([type="submit"]):not([type="checkbox"]) { padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons. } +} - input[type="submit"] { - border: none; - } + +// Using :where to give this a low specificity so that element styles take precedence. +// Needed for backwards compatibility. +// Styles copied from button block styles. +:where(.wp-block-post-comments input[type="submit"]) { + border: none; } diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 426e34662cde91..075993485ed1b7 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -1,11 +1,6 @@ .wp-block-search__button { - border: 1px solid #ccc; - padding: 0.375em 0.625em; margin-left: 0.625em; word-break: normal; - font-size: inherit; - font-family: inherit; - line-height: inherit; &.has-icon { line-height: 0; @@ -18,6 +13,13 @@ } } +// These rules are set to zero specificity to keep the default styles for search buttons. +// They are needed for backwards compatibility. +:where(.wp-block-search__button) { + border: 1px solid #ccc; + padding: 0.375em 0.625em; +} + .wp-block-search__inside-wrapper { display: flex; flex: auto; From 4e7648821673585b958770ae169403229ae2547d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 24 Jun 2022 15:57:50 +0100 Subject: [PATCH 3/4] make search block CSS less specific --- packages/block-library/src/search/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss index 075993485ed1b7..cc6aab40bd1cbe 100644 --- a/packages/block-library/src/search/style.scss +++ b/packages/block-library/src/search/style.scss @@ -62,7 +62,8 @@ } } - .wp-block-search__button { + // For lower specificity. + :where(.wp-block-search__button) { padding: 0.125em 0.5em; } } From 7457e1b623f05c23bc8c49c486b610f949b8ec2a Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 24 Jun 2022 16:18:12 +0100 Subject: [PATCH 4/4] fix the linter --- lib/blocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/blocks.php b/lib/blocks.php index ff3506aa86ea44..18a9eb34ff1668 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -207,7 +207,7 @@ function gutenberg_register_core_block_assets( $block_name ) { // Add a reference to the stylesheet's path to allow calculations for inlining styles in `wp_head`. wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $style_path ); } else { - wp_register_style( "wp-block-{$block_name}", false, array( 'global-styles' ), ); + wp_register_style( "wp-block-{$block_name}", false, array( 'global-styles' ) ); } // If the current theme supports wp-block-styles, dequeue the full stylesheet