From 3aae7d5835209174b52ffda53d9186d3f7a273cd Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 25 Nov 2024 19:24:40 +1000 Subject: [PATCH 1/5] Try enforcing global styles separator color --- ...class-wp-theme-json-resolver-gutenberg.php | 15 ++++++++++++ .../global-styles-provider/index.js | 24 ++++++++++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 1f45d897a77cc0..8a29b7e969ec2f 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -563,6 +563,21 @@ public static function get_user_data() { } } + /* + * The Separator block uses different CSS properties for its color depending + * on how it is being rendered e.g. as "content" for the Dots style, or + * as a border etc. + * + * Uses are only presented with a single color control for background. Any + * selection of a background color should be applied to the other paths + * so it can be honoured. + */ + $separator_color = $config['styles']['blocks']['core/separator']['color']['background'] ?? null; + if ( $separator_color ) { + _wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'color', 'text' ), $separator_color ); + _wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'border', 'color' ), $separator_color ); + } + /** This filter is documented in wp-includes/class-wp-theme-json-resolver.php */ $theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) ); static::$user = $theme_json->get_theme_json(); diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js index 74fbed5f000624..c47ebc91f9495f 100644 --- a/packages/editor/src/components/global-styles-provider/index.js +++ b/packages/editor/src/components/global-styles-provider/index.js @@ -22,7 +22,7 @@ const { GlobalStylesContext, cleanEmptyObject } = unlock( ); export function mergeBaseAndUserConfigs( base, user ) { - return deepmerge( base, user, { + const mergedConfig = deepmerge( base, user, { /* * We only pass as arrays the presets, * in which case we want the new array of values @@ -41,6 +41,28 @@ export function mergeBaseAndUserConfigs( base, user ) { return undefined; }, } ); + + /* + * The Separator block uses different CSS properties for its color depending + * on how it is being rendered e.g. as "content" for the Dots style, or + * as a border etc. + * + * Uses are only presented with a single color control for background. Any + * selection of a background color should be applied to the other paths + * so it can be honoured. + */ + const separatorColor = + user.styles?.blocks?.[ 'core/separator' ]?.color?.background; + if ( separatorColor ) { + mergedConfig.styles.blocks[ 'core/separator' ].color.text = + separatorColor; + mergedConfig.styles.blocks[ 'core/separator' ].border = { + ...mergedConfig.styles.blocks[ 'core/separator' ].border, + color: separatorColor, + }; + } + + return mergedConfig; } function useGlobalStylesUserConfig() { From 27ece0c6dcf169a5761b12e275786f7b386f3f3f Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:32:29 +1000 Subject: [PATCH 2/5] Fix whitespace and US spelling --- lib/class-wp-theme-json-resolver-gutenberg.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 8a29b7e969ec2f..c2cc7dbffa592b 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -567,12 +567,12 @@ public static function get_user_data() { * The Separator block uses different CSS properties for its color depending * on how it is being rendered e.g. as "content" for the Dots style, or * as a border etc. - * + * * Uses are only presented with a single color control for background. Any * selection of a background color should be applied to the other paths - * so it can be honoured. + * so it can be honored. */ - $separator_color = $config['styles']['blocks']['core/separator']['color']['background'] ?? null; + $separator_color = $config['styles']['blocks']['core/separator']['color']['background'] ?? null; if ( $separator_color ) { _wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'color', 'text' ), $separator_color ); _wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'border', 'color' ), $separator_color ); From e71fd97215bbdd3e2d749a45354aaa01a175b158 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 27 Nov 2024 16:41:26 +1000 Subject: [PATCH 3/5] Make separator hacks consistent work on theme.json data --- lib/class-wp-theme-json-gutenberg.php | 45 --- ...class-wp-theme-json-resolver-gutenberg.php | 21 ++ .../global-styles/use-global-styles-output.js | 50 +--- .../global-styles-provider/index.js | 48 ++-- phpunit/class-wp-theme-json-resolver-test.php | 269 ++++++++++++++++++ phpunit/class-wp-theme-json-test.php | 91 ------ 6 files changed, 321 insertions(+), 203 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 083ce3516b71af..3a5b9832709ffe 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2676,46 +2676,6 @@ public function get_styles_block_nodes() { return static::get_block_nodes( $this->theme_json ); } - /** - * Returns a filtered declarations array if there is a separator block with only a background - * style defined in theme.json by adding a color attribute to reflect the changes in the front. - * - * @since 6.1.1 - * - * @param array $declarations List of declarations. - * @return array $declarations List of declarations filtered. - */ - private static function update_separator_declarations( $declarations ) { - // Gutenberg and core implementation differed. - // https://github.com/WordPress/gutenberg/pull/44943. - $background_color = ''; - $border_color_matches = false; - $text_color_matches = false; - - foreach ( $declarations as $declaration ) { - if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) { - $background_color = $declaration['value']; - } elseif ( 'border-color' === $declaration['name'] ) { - $border_color_matches = true; - } elseif ( 'color' === $declaration['name'] ) { - $text_color_matches = true; - } - - if ( $background_color && $border_color_matches && $text_color_matches ) { - break; - } - } - - if ( $background_color && ! $border_color_matches && ! $text_color_matches ) { - $declarations[] = array( - 'name' => 'color', - 'value' => $background_color, - ); - } - - return $declarations; - } - /** * An internal method to get the block nodes from a theme.json file. * @@ -3003,11 +2963,6 @@ static function ( $pseudo_selector ) use ( $selector ) { ); } - // Update declarations if there are separators with only background color defined. - if ( '.wp-block-separator' === $selector ) { - $declarations = static::update_separator_declarations( $declarations ); - } - /* * Root selector (body) styles should not be wrapped in `:root where()` to keep * specificity at (0,0,1) and maintain backwards compatibility. diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index c2cc7dbffa592b..94d7ec8a532e04 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -271,6 +271,27 @@ public static function get_theme_data( $deprecated = array(), $options = array() $theme_json_data = static::inject_variations_from_block_style_variation_files( $theme_json_data, $variations ); $theme_json_data = static::inject_variations_from_block_styles_registry( $theme_json_data ); + /* + * The core Separator block has Block Styles that rely on different CSS + * properties. For example, the "Dots" style renders using `::before` and + * requires styling the `color` property instead of `border-color`. + * TwentyTwenty's default style renders using a linear gradient that can't + * be applied to `color` so uses `background` instead. + * + * End users are only given a single color control in the Global Styles UI + * so we need to ensure all the required values are set if a theme only adds + * the `background` property, matching the UI. + */ + $separator_color = $theme_json_data['styles']['blocks']['core/separator']['color']['background'] ?? null; + if ( $separator_color ) { + if ( ! isset( $theme_json_data['styles']['blocks']['core/separator']['color']['text'] ) ) { + _wp_array_set( $theme_json_data, array( 'styles', 'blocks', 'core/separator', 'color', 'text' ), $separator_color ); + } + if ( ! isset( $theme_json_data['styles']['blocks']['core/separator']['border']['color'] ) ) { + _wp_array_set( $theme_json_data, array( 'styles', 'blocks', 'core/separator', 'border', 'color' ), $separator_color ); + } + } + /** * Filters the data provided by the theme for global styles and settings. * 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 7bdc95d222142d..5aa094f3219b45 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 @@ -1282,41 +1282,6 @@ export const getBlockSelectors = ( return result; }; -/** - * If there is a separator block whose color is defined in theme.json via background, - * update the separator color to the same value by using border color. - * - * @param {Object} config Theme.json configuration file object. - * @return {Object} configTheme.json configuration file object updated. - */ -function updateConfigWithSeparator( config ) { - const needsSeparatorStyleUpdate = - config.styles?.blocks?.[ 'core/separator' ] && - config.styles?.blocks?.[ 'core/separator' ].color?.background && - ! config.styles?.blocks?.[ 'core/separator' ].color?.text && - ! config.styles?.blocks?.[ 'core/separator' ].border?.color; - if ( needsSeparatorStyleUpdate ) { - return { - ...config, - styles: { - ...config.styles, - blocks: { - ...config.styles.blocks, - 'core/separator': { - ...config.styles.blocks[ 'core/separator' ], - color: { - ...config.styles.blocks[ 'core/separator' ].color, - text: config.styles?.blocks[ 'core/separator' ] - .color.background, - }, - }, - }, - }, - }; - } - return config; -} - export function processCSSNesting( css, blockSelector ) { let processedCSS = ''; @@ -1404,7 +1369,6 @@ export function useGlobalStylesOutputWithConfig( if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) { return []; } - const updatedConfig = updateConfigWithSeparator( mergedConfig ); const blockSelectors = getBlockSelectors( getBlockTypes(), @@ -1412,19 +1376,19 @@ export function useGlobalStylesOutputWithConfig( ); const customProperties = toCustomProperties( - updatedConfig, + mergedConfig, blockSelectors ); const globalStyles = toStyles( - updatedConfig, + mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, disableRootPadding ); - const svgs = toSvgFilters( updatedConfig, blockSelectors ); + const svgs = toSvgFilters( mergedConfig, blockSelectors ); const styles = [ { @@ -1437,7 +1401,7 @@ export function useGlobalStylesOutputWithConfig( }, // Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor. { - css: updatedConfig.styles.css ?? '', + css: mergedConfig.styles.css ?? '', isGlobalStyles: true, }, { @@ -1451,11 +1415,11 @@ export function useGlobalStylesOutputWithConfig( // If there are, get the block selector and push the selector together with // the CSS value to the 'stylesheets' array. getBlockTypes().forEach( ( blockType ) => { - if ( updatedConfig.styles.blocks[ blockType.name ]?.css ) { + if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) { const selector = blockSelectors[ blockType.name ].selector; styles.push( { css: processCSSNesting( - updatedConfig.styles.blocks[ blockType.name ]?.css, + mergedConfig.styles.blocks[ blockType.name ]?.css, selector ), isGlobalStyles: true, @@ -1463,7 +1427,7 @@ export function useGlobalStylesOutputWithConfig( } } ); - return [ styles, updatedConfig.settings ]; + return [ styles, mergedConfig.settings ]; }, [ hasBlockGapSupport, hasFallbackGapSupport, diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js index c47ebc91f9495f..8879ae320258b9 100644 --- a/packages/editor/src/components/global-styles-provider/index.js +++ b/packages/editor/src/components/global-styles-provider/index.js @@ -22,7 +22,7 @@ const { GlobalStylesContext, cleanEmptyObject } = unlock( ); export function mergeBaseAndUserConfigs( base, user ) { - const mergedConfig = deepmerge( base, user, { + return deepmerge( base, user, { /* * We only pass as arrays the presets, * in which case we want the new array of values @@ -41,28 +41,6 @@ export function mergeBaseAndUserConfigs( base, user ) { return undefined; }, } ); - - /* - * The Separator block uses different CSS properties for its color depending - * on how it is being rendered e.g. as "content" for the Dots style, or - * as a border etc. - * - * Uses are only presented with a single color control for background. Any - * selection of a background color should be applied to the other paths - * so it can be honoured. - */ - const separatorColor = - user.styles?.blocks?.[ 'core/separator' ]?.color?.background; - if ( separatorColor ) { - mergedConfig.styles.blocks[ 'core/separator' ].color.text = - separatorColor; - mergedConfig.styles.blocks[ 'core/separator' ].border = { - ...mergedConfig.styles.blocks[ 'core/separator' ].border, - color: separatorColor, - }; - } - - return mergedConfig; } function useGlobalStylesUserConfig() { @@ -238,9 +216,31 @@ export function useGlobalStylesContext() { }, [ userConfig, baseConfig ] ); const context = useMemo( () => { + /* + * The Separator block uses different CSS properties for its color depending + * on how it is being rendered e.g. as "content" for the Dots style, or + * as a border etc. + * + * Uses are only presented with a single color control for background. Any + * selection of a background color should be applied to the other paths + * so it can be honored. + */ + const updatedUserConfig = { ...userConfig }; + const separatorColor = + userConfig?.styles?.blocks?.[ 'core/separator' ]?.color?.background; + + if ( separatorColor ) { + updatedUserConfig.styles.blocks[ 'core/separator' ].color.text = + separatorColor; + updatedUserConfig.styles.blocks[ 'core/separator' ].border = { + ...userConfig.styles.blocks[ 'core/separator' ].border, + color: separatorColor, + }; + } + return { isReady: isUserConfigReady && isBaseConfigReady, - user: userConfig, + user: updatedUserConfig, base: baseConfig, merged: mergedConfig, setUserConfig, diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php index d2339f2496290c..a8f1522c3af210 100644 --- a/phpunit/class-wp-theme-json-resolver-test.php +++ b/phpunit/class-wp-theme-json-resolver-test.php @@ -1438,4 +1438,273 @@ public function test_block_style_variation_merge_order() { $this->assertSameSetsWithIndex( $expected, $actual, 'Merged variation styles do not match.' ); } + + /** + * Tests that separator block colors are correctly merged in user data. + * + * @dataProvider data_separator_color_merge_user_data + * + * @param array $input_styles The styles to test. + * @param array $expected_styles The expected merged styles. + */ + public function test_separator_color_merge_user_data( $input_styles, $expected_styles ) { + switch_theme( 'block-theme' ); + wp_set_current_user( self::$administrator_id ); + + // Create user CPT with the test styles. + $user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( wp_get_theme(), true ); + $config = json_decode( $user_cpt['post_content'], true ); + + _wp_array_set( $config, array( 'styles', 'blocks', 'core/separator' ), $input_styles ); + + $user_cpt['post_content'] = wp_json_encode( $config ); + wp_update_post( $user_cpt, true, false ); + + // Get the merged data. + $theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_user_data(); + $actual_styles = $theme_json->get_raw_data()['styles']['blocks']['core/separator'] ?? null; + + // Clean up the test post. + wp_delete_post( $user_cpt['ID'], true ); + + $this->assertSameSetsWithIndex( $expected_styles, $actual_styles ); + } + + /** + * Tests that separator block colors are correctly merged in theme data. + * + * @dataProvider data_separator_color_merge_theme_data + * + * @param array $input_styles The styles to test. + * @param array $expected_styles The expected merged styles. + */ + public function test_separator_color_merge_theme_data( $input_styles, $expected_styles ) { + global $wp_filesystem; + + if ( ! $wp_filesystem ) { + require_once ABSPATH . '/wp-admin/includes/file.php'; + WP_Filesystem(); + } + + $theme_json_string = wp_json_encode( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => array( + 'core/separator' => $input_styles, + ), + ), + ) + ); + + // Create a temporary theme.json file. + $temp_theme_json = wp_tempnam( 'theme-json-test' ); + $wp_filesystem->put_contents( $temp_theme_json, $theme_json_string ); + + add_filter( + 'theme_file_path', + function ( $path ) use ( $temp_theme_json ) { + if ( str_contains( $path, 'theme.json' ) ) { + return $temp_theme_json; + } + return $path; + } + ); + + // Get the merged data. + $theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data(); + $actual_styles = $theme_json->get_raw_data()['styles']['blocks']['core/separator'] ?? null; + + wp_delete_file( $temp_theme_json ); + + $this->assertSameSetsWithIndex( $expected_styles, $actual_styles ); + } + + /** + * Data provider for separator color merge tests in user data. + * + * @return array + */ + public function data_separator_color_merge_user_data() { + return array( + 'only background' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'blue', // Always set to match background. + ), + 'border' => array( + 'color' => 'blue', // Always set to match background. + ), + ), + ), + 'background and text' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'blue', // Always overridden by background. + ), + 'border' => array( + 'color' => 'blue', // Always set to match background. + ), + ), + ), + 'only text' => array( + 'input_styles' => array( + 'color' => array( + 'text' => 'red', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'text' => 'red', + ), + ), + ), + 'background, text, and border-color' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'blue', // Always overridden by background. + ), + 'border' => array( + 'color' => 'blue', // Always overridden by background. + ), + ), + ), + 'background and border-color' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'blue', // Always set to match background. + ), + 'border' => array( + 'color' => 'blue', // Always overridden by background. + ), + ), + ), + ); + } + + /** + * Data provider for separator color merge tests in theme data. + * + * @return array + */ + public function data_separator_color_merge_theme_data() { + return array( + 'only background' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'blue', // Set because not defined. + ), + 'border' => array( + 'color' => 'blue', // Set because not defined. + ), + ), + ), + 'background and text' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', // Kept because already defined. + ), + 'border' => array( + 'color' => 'blue', // Set because not defined. + ), + ), + ), + 'only text' => array( + 'input_styles' => array( + 'color' => array( + 'text' => 'red', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'text' => 'red', + ), + ), + ), + 'background, text, and border-color' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', // Kept because already defined. + ), + 'border' => array( + 'color' => 'pink', // Kept because already defined. + ), + ), + ), + 'background and border-color' => array( + 'input_styles' => array( + 'color' => array( + 'background' => 'blue', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + 'expected_styles' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'blue', // Set because not defined. + ), + 'border' => array( + 'color' => 'pink', // Kept because already defined. + ), + ), + ), + ); + } } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index e47a36f73f4188..625a7d8efb68d4 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4994,97 +4994,6 @@ public function data_set_spacing_sizes_when_invalid() { ); } - /** - * Tests the core separator block outbut based on various provided settings. - * - * @dataProvider data_update_separator_declarations - * - * @param array $separator_block_settings Example separator block settings from the data provider. - * @param array $expected_output Expected output from data provider. - */ - public function test_update_separator_declarations( $separator_block_settings, $expected_output ) { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'styles' => array( - 'blocks' => array( - 'core/separator' => $separator_block_settings, - ), - ), - ), - 'default' - ); - - $separator_node = array( - 'path' => array( 'styles', 'blocks', 'core/separator' ), - 'selector' => '.wp-block-separator', - ); - $this->assertSame( $expected_output, $theme_json->get_styles_for_block( $separator_node ) ); - } - - /** - * Data provider for separator declaration tests. - * - * @return array - */ - public function data_update_separator_declarations() { - return array( - // If only background is defined, test that includes border-color to the style so it is applied on the front end. - 'only background' => array( - array( - 'color' => array( - 'background' => 'blue', - ), - ), - 'expected_output' => ':root :where(.wp-block-separator){background-color: blue;color: blue;}', - ), - // If background and text are defined, do not include border-color, as text color is enough. - 'background and text, no border-color' => array( - array( - 'color' => array( - 'background' => 'blue', - 'text' => 'red', - ), - ), - 'expected_output' => ':root :where(.wp-block-separator){background-color: blue;color: red;}', - ), - // If only text is defined, do not include border-color, as by itself is enough. - 'only text' => array( - array( - 'color' => array( - 'text' => 'red', - ), - ), - 'expected_output' => ':root :where(.wp-block-separator){color: red;}', - ), - // If background, text, and border-color are defined, include everything, CSS specificity will decide which to apply. - 'background, text, and border-color' => array( - array( - 'color' => array( - 'background' => 'blue', - 'text' => 'red', - ), - 'border' => array( - 'color' => 'pink', - ), - ), - 'expected_output' => ':root :where(.wp-block-separator){background-color: blue;border-color: pink;color: red;}', - ), - // If background and border color are defined, include everything, CSS specificity will decide which to apply. - 'background, and border-color' => array( - array( - 'color' => array( - 'background' => 'blue', - ), - 'border' => array( - 'color' => 'pink', - ), - ), - 'expected_output' => ':root :where(.wp-block-separator){background-color: blue;border-color: pink;}', - ), - ); - } - public function test_shadow_preset_styles() { $theme_json = new WP_Theme_JSON_Gutenberg( array( From ba610d7e88faef52ac8650970db99245b188a21f Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 2 Dec 2024 17:39:31 +1000 Subject: [PATCH 4/5] Add backport changelog --- backport-changelog/6.8/7927.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 backport-changelog/6.8/7927.md diff --git a/backport-changelog/6.8/7927.md b/backport-changelog/6.8/7927.md new file mode 100644 index 00000000000000..7789413214aade --- /dev/null +++ b/backport-changelog/6.8/7927.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7927 + +* https://github.com/WordPress/gutenberg/pull/67269 From 407464147ac1b49bbf72156db259e4ce305b602c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 6 Dec 2024 18:06:09 +1000 Subject: [PATCH 5/5] Try allowing block instance styles to override global styles border color --- packages/block-library/src/separator/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index 65e463bc513f48..c34acbaf651b54 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -8,6 +8,13 @@ border-bottom: none; } +// 0-2-0 specificity required to enforce block instance +// color selections over global styles. +.wp-block-separator.has-background, +.wp-block-separator.has-text-color { + border-color: currentColor; +} + // Dots block style variation :root :where(.wp-block-separator.is-style-dots) { text-align: center;