From 158c01abbaba6566424b5b020162c456e33dc610 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com> Date: Wed, 2 Nov 2022 16:13:57 +0100 Subject: [PATCH] Switch background color to text color on block separator (#44943) * Switch background to text, remove gradients on separator block * Use theme_json class to fix separator color issue * Add fix for the editor * Fix the separator on the editor * Give the border color more specifity * Add text color specifity * Small refactor * Add unit test for separator background php part * Use only color instead of border-color * Refactor to just update declarations * Update documentation * Add static to private function * Update the wording of the comments * Add missing spread to global styles output * Rename test to fit the new function Co-authored-by: Michal Czaplinski Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> --- .../wordpress-6.1/class-wp-theme-json-6-1.php | 50 ++++++++ .../global-styles/use-global-styles-output.js | 40 ++++++- phpunit/class-wp-theme-json-test.php | 111 ++++++++++++++++++ 3 files changed, 199 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 8e12d99a074905..d7f934ef2eb305 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -768,6 +768,51 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' return $stylesheet; } + /** + * 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. + * + * @param array $declarations List of declarations. + * + * @return array $declarations List of declarations filtered. + */ + private static function update_separator_declarations( $declarations ) { + $background_matches = array_values( + array_filter( + $declarations, + function( $declaration ) { + return 'background-color' === $declaration['name']; + } + ) + ); + if ( ! empty( $background_matches && isset( $background_matches[0]['value'] ) ) ) { + $border_color_matches = array_values( + array_filter( + $declarations, + function( $declaration ) { + return 'border-color' === $declaration['name']; + } + ) + ); + $text_color_matches = array_values( + array_filter( + $declarations, + function( $declaration ) { + return 'color' === $declaration['name']; + } + ) + ); + if ( empty( $border_color_matches ) && empty( $text_color_matches ) ) { + $declarations[] = array( + 'name' => 'color', + 'value' => $background_matches[0]['value'], + ); + } + } + + return $declarations; + } + /** * Gets the CSS rules for a particular block from theme.json. * @@ -856,6 +901,11 @@ 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 ); + } + // 2. Generate and append the rules that use the general selector. $block_rules .= static::to_ruleset( $selector, $declarations ); diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js index 63306f050061ae..d0fdeea1b31fd7 100644 --- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js +++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js @@ -845,8 +845,44 @@ export const getBlockSelectors = ( blockTypes ) => { 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 useGlobalStylesOutput() { - const { merged: mergedConfig } = useContext( GlobalStylesContext ); + let { merged: mergedConfig } = useContext( GlobalStylesContext ); + const [ blockGap ] = useSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGap !== null; const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support. @@ -859,7 +895,7 @@ export function useGlobalStylesOutput() { if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) { return []; } - + mergedConfig = updateConfigWithSeparator( mergedConfig ); const blockSelectors = getBlockSelectors( getBlockTypes() ); const customProperties = toCustomProperties( mergedConfig, diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index aa92f61f888f7e..4a6327f60b878b 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -1339,4 +1339,115 @@ public function test_get_styles_for_block_with_content_width() { $style_rules = $theme_json->get_styles_for_block( $metadata ); $this->assertEquals( $expected, $root_rules . $style_rules ); } + + public function test_update_separator_declarations() { + // If only background is defined, test that includes border-color to the style so it is applied on the front end. + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => array( + 'core/separator' => array( + 'color' => array( + 'background' => 'blue', + ), + ), + ), + ), + ), + 'default' + ); + $expected = 'body { margin: 0;}.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; }.wp-block-separator{background-color: blue;color: blue;}'; + $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) ); + $this->assertEquals( $expected, $stylesheet ); + + // If background and text are defined, do not include border-color, as text color is enough. + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => array( + 'core/separator' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', + ), + ), + ), + ), + ), + 'default' + ); + $expected = 'body { margin: 0;}.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; }.wp-block-separator{background-color: blue;color: red;}'; + $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) ); + $this->assertEquals( $expected, $stylesheet ); + + // If only text is defined, do not include border-color, as by itself is enough. + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => array( + 'core/separator' => array( + 'color' => array( + 'text' => 'red', + ), + ), + ), + ), + ), + 'default' + ); + $expected = 'body { margin: 0;}.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; }.wp-block-separator{color: red;}'; + $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) ); + $this->assertEquals( $expected, $stylesheet ); + + // If background, text, and border-color are defined, include everything, CSS specifity will decide which to apply. + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => array( + 'core/separator' => array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + ), + ), + ), + 'default' + ); + $expected = 'body { margin: 0;}.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; }.wp-block-separator{background-color: blue;border-color: pink;color: red;}'; + $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) ); + $this->assertEquals( $expected, $stylesheet ); + + // If background and border color are defined, include everything, CSS specifity will decide which to apply. + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => array( + 'core/separator' => array( + 'color' => array( + 'background' => 'blue', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + ), + ), + ), + 'default' + ); + $expected = 'body { margin: 0;}.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; }.wp-block-separator{background-color: blue;border-color: pink;}'; + $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) ); + $this->assertEquals( $expected, $stylesheet ); + + } }