From 66c8599abfa295a887329c715caf6ac3e25efd88 Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers Date: Fri, 11 Nov 2022 17:23:19 +0000 Subject: [PATCH] Editor: Correctly style separator blocks when only a `background-color` is defined. When separator blocks are configured using only a `background-color`, they are shown correctly within the editor but not on the front end. This changes `WP_Theme_JSON` to detect this scenario and move the `background-color` value to just `color` when both `color` and `border-color` are missing. Props cbravobernal, flixos90, davidbaumwald, hellofromTonya, desrosj, andrewserong, czapla, glendaviesnz, wildworks. Merges [54821] to the 6.1 branch. Fixes #56903. git-svn-id: https://develop.svn.wordpress.org/branches/6.1@54822 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/class-wp-theme-json.php | 43 +++++++++++ tests/phpunit/tests/theme/wpThemeJson.php | 92 +++++++++++++++++++++++ 2 files changed, 135 insertions(+) diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index d93b4eea67..8f93f5cda9 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -1949,6 +1949,44 @@ class WP_Theme_JSON { 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 ) { + $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. * @@ -2133,6 +2171,11 @@ class WP_Theme_JSON { } } + // 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/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index c4241ba79d..913a9601ca 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -3998,4 +3998,96 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase { ), ); } + + /** + * Tests the core separator block outbut based on various provided settings. + * + * @ticket 56903 + * + * @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 ) { + // 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( + array( + 'version' => WP_Theme_JSON::LATEST_SCHEMA, + 'styles' => array( + 'blocks' => array( + 'core/separator' => $separator_block_settings, + ), + ), + ), + 'default' + ); + + $stylesheet = $theme_json->get_stylesheet( array( 'styles' ) ); + + $this->assertSame( $expected_output, $stylesheet ); + } + + /** + * Data provider for separator declaration tests. + * + * @return array + */ + 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' => '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;}', + ), + // 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' => '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;}', + ), + // 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' => '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;}', + ), + // If background, text, and border-color are defined, include everything, CSS specifity will decide which to apply. + 'background, text, and border-color' => array( + array( + 'color' => array( + 'background' => 'blue', + 'text' => 'red', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + 'expected_output' => '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;}', + ), + // If background and border color are defined, include everything, CSS specifity will decide which to apply. + 'background, text, and border-color' => array( + array( + 'color' => array( + 'background' => 'blue', + ), + 'border' => array( + 'color' => 'pink', + ), + ), + 'expected_output' => '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;}', + ), + ); + } }