vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-01 15:50:09 +00:00
Code Issues Actions 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.
Fixes #56903.

git-svn-id: https://develop.svn.wordpress.org/trunk@54821 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers
2022-11-11 17:09:11 +00:00
parent bb6b296647
commit 368587707d
2 changed files with 135 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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