Global Styles: Add block CSS rules after the Global Styles rules

lib/blocks.php

@@ -199,15 +199,15 @@ 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' );
 
  // 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 );

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"
  }
  },

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 },

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 {

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;
 

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;
 }

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;
@@ -60,7 +62,8 @@
  }
  }
 
- .wp-block-search__button {
+ // For lower specificity.
+ :where(.wp-block-search__button) {
  padding: 0.125em 0.5em;
  }
 }