mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-04-13 00:22:52 +02:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Editor: Correctly style separator blocks when only a background-color is defined.

Browse Source 
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
This commit is contained in:
Jonathan Desrosiers 2022-11-11 17:23:19 +00:00
parent d8712695cb
commit 66c8599abf
2 changed files with 135 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/wp-includes/class-wp-theme-json.php
View File

@ -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 );

92
tests/phpunit/tests/theme/wpThemeJson.php
View File

@ -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;}',
),
);
}
}