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.
Fixes #56903.
Built from https://develop.svn.wordpress.org/trunk@54821


git-svn-id: http://core.svn.wordpress.org/trunk@54373 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj 2022-11-11 17:11:10 +00:00
parent 3b86eee81b
commit 39f1141e78
2 changed files with 44 additions and 1 deletions

View File

@ -1949,6 +1949,44 @@ class WP_Theme_JSON {
return static::get_block_nodes( $this->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. * 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. // 2. Generate and append the rules that use the general selector.
$block_rules .= static::to_ruleset( $selector, $declarations ); $block_rules .= static::to_ruleset( $selector, $declarations );

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.2-alpha-54819'; $wp_version = '6.2-alpha-54821';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.