Styles: Level specificity using :root to fix reset styles (WordPress#…

…61638) Co-authored-by: ellatrix <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: talldan <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: kevin940726 <[email protected]>
carstingaxion · Jun 4, 2024 · 3dc574b · 3dc574b
1 parent 89c256e
commit 3dc574b
Show file tree

Hide file tree

Showing 35 changed files with 401 additions and 384 deletions.
diff --git a/backport-changelog/6.6/6522.md b/backport-changelog/6.6/6522.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/6522
+
+* https://github.com/WordPress/gutenberg/pull/60106
+* https://github.com/WordPress/gutenberg/pull/60228
+* https://github.com/WordPress/gutenberg/pull/61638
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -1293,7 +1293,7 @@ protected function process_blocks_custom_css( $css, $selector ) {
 			$is_root_css = ( ! str_contains( $part, '{' ) );
 			if ( $is_root_css ) {
 				// If the part doesn't contain braces, it applies to the root level.
-				$processed_css .= trim( $selector ) . '{' . trim( $part ) . '}';
+				$processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}';
 			} else {
 				// If the part contains braces, it's a nested CSS rule.
 				$part = explode( '{', str_replace( '}', '', $part ) );
@@ -1305,7 +1305,8 @@ protected function process_blocks_custom_css( $css, $selector ) {
 				$part_selector   = str_starts_with( $nested_selector, ' ' )
 					? static::scope_selector( $selector, $nested_selector )
 					: static::append_to_selector( $selector, $nested_selector );
-				$processed_css  .= $part_selector . '{' . trim( $css_value ) . '}';
+				$final_selector  = ":root :where($part_selector)";
+				$processed_css  .= $final_selector . '{' . trim( $css_value ) . '}';
 			}
 		}
 		return $processed_css;
@@ -1322,6 +1323,7 @@ public function get_custom_css() {
 		$block_custom_css = '';
 		$block_nodes      = $this->get_block_custom_css_nodes();
 		foreach ( $block_nodes as $node ) {
+			// The node selector will have its specificity set to 0-1-0 within process_blocks_custom_css.
 			$block_custom_css .= $this->get_block_custom_css( $node['css'], $node['selector'] );
 		}
 
@@ -1564,7 +1566,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) {
 										$spacing_rule['selector']
 									);
 								} else {
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s) %3$s' : ':where(%1$s-%2$s) %3$s';
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
 									$layout_selector = sprintf(
 										$format,
 										$selector,
@@ -2745,7 +2747,7 @@ static function ( $pseudo_selector ) use ( $selector ) {
 		}
 
 		// 2. Generate and append the rules that use the general selector.
-		$block_rules .= static::to_ruleset( ":where($selector)", $declarations );
+		$block_rules .= static::to_ruleset( ":root :where($selector)", $declarations );
 
 		// 3. Generate and append the rules that use the duotone selector.
 		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
@@ -2762,12 +2764,12 @@ static function ( $pseudo_selector ) use ( $selector ) {
 
 		// 5. Generate and append the feature level rulesets.
 		foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
-			$block_rules .= static::to_ruleset( ":where($feature_selector)", $individual_feature_declarations );
+			$block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
 		}
 
 		// 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( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
 		}
 
 		return $block_rules;

diff --git a/lib/theme.json b/lib/theme.json
@@ -370,6 +370,40 @@
 				"bottom": "0px",
 				"left": "0px"
 			}
+		},
+		"blocks": {
+			"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"
+							}
+						}
+					}
+				}
+			},
+			"core/site-logo": {
+				"variations": {
+					"rounded": {
+						"border": {
+							"radius": "9999px"
+						}
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -522,10 +522,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `:where(.${ className })${
+										? `.${ className }${
 												spacingStyle?.selector || ''
 										  }`
-										: `:where(${ selector }-${ className })${
+										: `${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -860,12 +860,56 @@ export const toStyles = (
 						( [ cssSelector, declarations ] ) => {
 							if ( declarations.length ) {
 								const rules = declarations.join( ';' );
-								ruleset += `:where(${ cssSelector }){${ rules };}`;
+								ruleset += `:root :where(${ cssSelector }){${ rules };}`;
 							}
 						}
 					);
 				}
 
+				// Process duotone styles.
+				if ( duotoneSelector ) {
+					const duotoneStyles = {};
+					if ( styles?.filter ) {
+						duotoneStyles.filter = styles.filter;
+						delete styles.filter;
+					}
+					const duotoneDeclarations =
+						getStylesDeclarations( duotoneStyles );
+					if ( duotoneDeclarations.length ) {
+						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
+					}
+				}
+
+				// Process blockGap and layout styles.
+				if (
+					! disableLayoutStyles &&
+					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
+				) {
+					ruleset += getLayoutStyles( {
+						style: styles,
+						selector,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						fallbackGapValue,
+					} );
+				}
+
+				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+				const styleDeclarations = getStylesDeclarations(
+					styles,
+					selector,
+					useRootPaddingAlign,
+					tree,
+					disableRootPadding
+				);
+				if ( styleDeclarations?.length ) {
+					ruleset += `:root :where(${ selector }){${ styleDeclarations.join(
+						';'
+					) };}`;
+				}
+
 				if ( styleVariationSelectors ) {
 					Object.entries( styleVariationSelectors ).forEach(
 						( [ styleVariationName, styleVariationSelector ] ) => {
@@ -892,7 +936,7 @@ export const toStyles = (
 													);
 												const rules =
 													declarations.join( ';' );
-												ruleset += `${ cssSelector }{${ rules };}`;
+												ruleset += `:root :where(${ cssSelector }){${ rules };}`;
 											}
 										}
 									);
@@ -907,7 +951,7 @@ export const toStyles = (
 										tree
 									);
 								if ( styleVariationDeclarations.length ) {
-									ruleset += `${ styleVariationSelector }{${ styleVariationDeclarations.join(
+									ruleset += `:root :where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
 										';'
 									) };}`;
 								}
@@ -916,50 +960,6 @@ export const toStyles = (
 					);
 				}
 
-				// Process duotone styles.
-				if ( duotoneSelector ) {
-					const duotoneStyles = {};
-					if ( styles?.filter ) {
-						duotoneStyles.filter = styles.filter;
-						delete styles.filter;
-					}
-					const duotoneDeclarations =
-						getStylesDeclarations( duotoneStyles );
-					if ( duotoneDeclarations.length ) {
-						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
-					}
-				}
-
-				// Process blockGap and layout styles.
-				if (
-					! disableLayoutStyles &&
-					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
-				) {
-					ruleset += getLayoutStyles( {
-						style: styles,
-						selector,
-						hasBlockGapSupport,
-						hasFallbackGapSupport,
-						fallbackGapValue,
-					} );
-				}
-
-				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-				const declarations = getStylesDeclarations(
-					styles,
-					selector,
-					useRootPaddingAlign,
-					tree,
-					disableRootPadding
-				);
-				if ( declarations?.length ) {
-					ruleset += `:where(${ selector }){${ declarations.join(
-						';'
-					) };}`;
-				}
-
 				// Check for pseudo selector in `styles` and handle separately.
 				const pseudoSelectorStyles = Object.entries( styles ).filter(
 					( [ key ] ) => key.startsWith( ':' )
@@ -1018,13 +1018,13 @@ export const toStyles = (
 			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
-			`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
+			`:root :where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+			':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
+			':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
 	}
 
 	if ( options.presets ) {
@@ -1185,7 +1185,7 @@ export function processCSSNesting( css, blockSelector ) {
 		const isRootCss = ! part.includes( '{' );
 		if ( isRootCss ) {
 			// If the part doesn't contain braces, it applies to the root level.
-			processedCSS += `${ blockSelector }{${ part.trim() }}`;
+			processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`;
 		} else {
 			// If the part contains braces, it's a nested CSS rule.
 			const splittedPart = part.replace( '}', '' ).split( '{' );
@@ -1198,7 +1198,7 @@ export function processCSSNesting( css, blockSelector ) {
 				? scopeSelector( blockSelector, nestedSelector )
 				: appendToSelector( blockSelector, nestedSelector );
 
-			processedCSS += `${ combinedSelector }{${ cssValue.trim() }}`;
+			processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`;
 		}
 	} );
 	return processedCSS;

diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:where(.wp-block-audio) {
+.wp-block-audio {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -37,38 +37,3 @@ div[data-type="core/button"] {
 	text-decoration: inherit;
 }
 
-.editor-styles-wrapper .wp-block-button .wp-block-button__link {
-	// The following styles ensure a default border is applied when the user selects only a border color or style in the editor,
-	// but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
-	&:where(.has-border-color) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-color"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-color"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-color"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-color"]) {
-		border-left-width: initial;
-	}
-
-	&:where([style*="border-style"]) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-style"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-style"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-style"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-style"]) {
-		border-left-width: initial;
-	}
-}