From a00347711a87a4b9d0e947a28b6d911cf5a25429 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 10 Jan 2024 17:29:40 +1000 Subject: [PATCH] Bump element styles specificity again for overcoming variation styles This ensures that element styles placed upon a block instance by the user take precedence over element styles for a block type within a block style variation e.g. `styles.blocks.core/group.variations.custom.blocks.core/media-text.elements` --- lib/block-supports/elements.php | 7 ++++++- packages/block-editor/src/hooks/style.js | 6 +++++- phpunit/block-supports/elements-test.php | 20 ++++++++++---------- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php index ac5fe6b03e361..c277e11012f71 100644 --- a/lib/block-supports/elements.php +++ b/lib/block-supports/elements.php @@ -134,8 +134,13 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) { return null; } + // The class name is duplicated twice to provide the required specificity + // to overcome default block styles, global block styles, and block style + // variation styles including elements styles on block types within a + // block style variation. + // See: https://github.com/WordPress/gutenberg/pull/56540 $class_name = wp_get_elements_class_name( $block ); - $class_name = ".$class_name.$class_name"; + $class_name = ".$class_name.$class_name.$class_name"; $element_types = array( 'button' => array( diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 7221de63456cd..fe1e25ae4b90f 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -368,7 +368,11 @@ function useBlockProps( { name, style } ) { // The .editor-styles-wrapper selector is required on elements styles. As it is // added to all other editor styles, not providing it causes reset and global // styles to override element styles because of higher specificity. - const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`; + // The block elements class is duplicated to provide the required + // specificity to correctly take precedence over block variation styles, + // including those for elements within a variation's block type styles. + // See: https://github.com/WordPress/gutenberg/pull/56540 + const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }.${ blockElementsContainerIdentifier }`; const blockElementStyles = style?.elements; const styles = useMemo( () => { diff --git a/phpunit/block-supports/elements-test.php b/phpunit/block-supports/elements-test.php index ced216e96ef28..20ceca7e6e91e 100644 --- a/phpunit/block-supports/elements-test.php +++ b/phpunit/block-supports/elements-test.php @@ -261,7 +261,7 @@ public function data_elements_block_support_styles() { 'elements_styles' => array( 'button' => array( 'color' => $color_styles ), ), - 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} .wp-element-button, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} .wp-block-button__link' . $color_css_rules . '$/', + 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} .wp-element-button, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} .wp-block-button__link' . $color_css_rules . '$/', ), 'link element styles are applied' => array( 'color_settings' => array( 'link' => true ), @@ -273,15 +273,15 @@ public function data_elements_block_support_styles() { ), ), ), - 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} a' . $color_css_rules . - '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} a:hover' . $color_css_rules . '$/', + 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} a' . $color_css_rules . + '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} a:hover' . $color_css_rules . '$/', ), 'generic heading element styles are applied' => array( 'color_settings' => array( 'heading' => true ), 'elements_styles' => array( 'heading' => array( 'color' => $color_styles ), ), - 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h1, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h2, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h3, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h4, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h5, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/', + 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h1, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h2, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h3, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h4, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h5, .wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/', ), 'individual heading element styles are applied' => array( 'color_settings' => array( 'heading' => true ), @@ -293,12 +293,12 @@ public function data_elements_block_support_styles() { 'h5' => array( 'color' => $color_styles ), 'h6' => array( 'color' => $color_styles ), ), - 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h1' . $color_css_rules . - '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h2' . $color_css_rules . - '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h3' . $color_css_rules . - '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h4' . $color_css_rules . - '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h5' . $color_css_rules . - '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/', + 'expected_styles' => '/^.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h1' . $color_css_rules . + '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h2' . $color_css_rules . + '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h3' . $color_css_rules . + '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h4' . $color_css_rules . + '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h5' . $color_css_rules . + '.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32}.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/', ), ); }