Global Styles: Add block CSS rules after the Global Styles rules (#41934

)

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

* move some default styles to core theme.json, wrap others with a :where

* make search block CSS less specific

* fix the linter

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