Block Styles: Reduce specificity of block style variation selectors

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( ":where($style_variation_selector)", $individual_style_variation_declarations );
 		}
 
 		return $block_rules;

lib/theme.json

@@ -370,6 +370,48 @@
 				"bottom": "0px",
 				"left": "0px"
 			}
+		},
+		"blocks": {
+			"core/social-links": {
+				"spacing": {
+					"padding": {
+						"left": "0",
+						"right": "0"
+					}
+				}
+			},
+			"core/site-logo": {
+				"variations": {
+					"rounded": {
+						"border": {
+							"radius": "9999px"
+						}
+					}
+				}
+			},
+			"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"
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 }

packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

@@ -566,7 +566,9 @@ 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; }' +
+					':where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}: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; }'
 			);
 		} );
 

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -893,7 +893,7 @@ export const toStyles = (
 													);
 												const rules =
 													declarations.join( ';' );
-												ruleset += `${ cssSelector }{${ rules };}`;
+												ruleset += `:where(${ cssSelector }){${ rules };}`;
 											}
 										}
 									);
@@ -908,7 +908,7 @@ export const toStyles = (
 										tree
 									);
 								if ( styleVariationDeclarations.length ) {
-									ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
+									ruleset += `:where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
 										';'
 									) };}`;
 								}

packages/block-library/src/button/style.scss

@@ -86,34 +86,32 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-// the first selector is required for old buttons markup
+// The following block style selectors are required for old buttons markup and
+// are not wrapped in `:where` as global styles are to match the 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) {
+// Block style variations require zero specificity selectors for nesting.
+// Classic themes require the block style variation styles loaded here.
+// Block themes however would override these styles with button element or
+// block type styles. To work around this the styles related to block supports
+// e.g. border and background-color, are duplicated in the base theme.json so
+// they take precedence.
+:where(.wp-block-button.is-style-outline > .wp-block-button__link),
+:where(.wp-block-button .wp-block-button__link.is-style-outline) {
 	background-color: transparent;
 	// background-image is required to overwrite a gradient background
 	background-image: none;
+	border: 2px solid currentColor;
+	color: currentColor;
+	padding: 0.667em 1.333em;
 }
 
 .wp-block-button .wp-block-button__link {

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 also not scoped in `:where()` like global styles are to keep it
+	// the same specificity 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.
@@ -148,6 +142,13 @@
 	}
 }
 
+// Variations
+: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 {
 	margin: 0;
 }

packages/block-library/src/pullquote/editor.scss

@@ -1,4 +1,6 @@
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:where` as global styles
+// now 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;

packages/block-library/src/pullquote/style.scss

@@ -52,6 +52,8 @@
 }
 
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:where` as global styles
+// now does to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;
 	blockquote {

packages/block-library/src/reset.scss

@@ -56,20 +56,24 @@
 		margin: revert;
 	}
 
-	ul,
-	ol {
+	// These resets ignore the social links block without increasing
+	// specificity as the block library styles include their own reset. This
+	// allows the block to have zero specificity styles and remain compatible
+	// with global styles for block themes.
+	ul:where(:not([class*="wp-block"])),
+	ol:where(:not([class*="wp-block"])) {
 		margin: revert;
 		padding: revert;
 		list-style-type: revert;
 		box-sizing: border-box;
 
 		// Remove bottom margin from nested lists.
-		ul,
-		ol {
+		ul:where(:not([class*="wp-block"])),
+		ol:where(:not([class*="wp-block"])) {
 			margin: revert;
 		}
 
-		li {
+		li:where(:not([class*="wp-block"])) {
 			margin: revert;
 		}
 	}

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

packages/block-library/src/separator/style.scss

@@ -1,5 +1,7 @@
 .wp-block-separator {
 	// Dots style
+	// This block style selector can't have zero specificity, that global
+	// styles uses for block styles, in order to maintain the dots appearance.
 	&.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

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

packages/block-library/src/social-link/editor.scss

@@ -4,7 +4,7 @@
 
 // The editor uses the button element, the frontend uses a link.
 // Therefore we unstyle the button element to make it more like the frontend.
-.wp-block-social-link-anchor {
+:where(.wp-block-social-link-anchor) {
 	align-items: center;
 	background: none;
 	border: 0;
@@ -31,11 +31,11 @@
 	}
 }
 
-.wp-block-social-links.is-style-pill-shape .wp-social-link button {
+: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 {
+:where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
 	padding: 0;
 }

packages/block-library/src/social-links/editor.scss

@@ -11,9 +11,20 @@
 	transform: none;
 }
 
-.editor-styles-wrapper .wp-block-social-links {
+// Zero specificity selectors are to allow theme.json styling of the inner
+// social link blocks. The outer social links block still needs higher
+// specificity to overcome `ul,ol` defaults and resets.
+:where(.wp-block-social-links),
+:where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
 	padding: 0;
 }
+:where(.wp-block-social-links__social-placeholder .wp-social-link) {
+	padding: 0.25em;
+}
+: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 {
@@ -37,19 +48,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;