From da85ab0f73a11607e308a7121ce120db5a97f9f9 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 14 May 2024 12:26:37 +0900 Subject: [PATCH] Styles: try wrapping with :root to fix reset styles --- lib/class-wp-theme-json-gutenberg.php | 4 ++-- .../src/components/global-styles/use-global-styles-output.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1dec7b164d880..e0d3ff09861d5 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2745,7 +2745,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,7 +2762,7 @@ 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. 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 index 981189309f828..8e276fa3406e1 100644 --- 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 @@ -860,7 +860,7 @@ export const toStyles = ( ( [ cssSelector, declarations ] ) => { if ( declarations.length ) { const rules = declarations.join( ';' ); - ruleset += `:where(${ cssSelector }){${ rules };}`; + ruleset += `:root :where(${ cssSelector }){${ rules };}`; } } ); @@ -955,7 +955,7 @@ export const toStyles = ( disableRootPadding ); if ( declarations?.length ) { - ruleset += `:where(${ selector }){${ declarations.join( + ruleset += `:root :where(${ selector }){${ declarations.join( ';' ) };}`; }