Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch background color to text color on block separator #44943

Merged
merged 15 commits into from
Nov 2, 2022
Merged

Switch background color to text color on block separator #44943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ba9f7c8
Switch background to text, remove gradients on separator block
cbravobernal Oct 13, 2022
fcb71a2
Use theme_json class to fix separator color issue
cbravobernal Oct 20, 2022
66e5eb7
Add fix for the editor
cbravobernal Oct 20, 2022
d62d462
Fix the separator on the editor
cbravobernal Oct 20, 2022
e76a2d8
Give the border color more specifity
cbravobernal Oct 21, 2022
213abf8
Add text color specifity
cbravobernal Oct 21, 2022
f3c6d4f
Small refactor
cbravobernal Oct 21, 2022
b2e27e8
Add unit test for separator background php part
cbravobernal Oct 21, 2022
5cb2dfc
Use only color instead of border-color
cbravobernal Oct 24, 2022
0049c98
Refactor to just update declarations
cbravobernal Oct 24, 2022
d1dff3d
Update documentation
cbravobernal Oct 24, 2022
1ada01c
Add static to private function
cbravobernal Oct 24, 2022
ba8e8dc
Update the wording of the comments
michalczaplinski Oct 25, 2022
9fe9e39
Add missing spread to global styles output
andrewserong Oct 25, 2022
8e35090
Rename test to fit the new function
cbravobernal Oct 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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 );

Expand Down
40 changes: 38 additions & 2 deletions packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies for missing this earlier, I just noticed that this object is missing a spread before text ( e.g. ...config.styles.blocks[ 'core/separator' ].color, so it's currently overwriting the background prop. In global styles in the site editor, this means that background is not being applied to the custom block styles that require it:

image

In the screenshot above, the text color is correctly using the green, but the diamond style's default black is not being overridden because the background-color key isn't being output.

I've pushed a commit in ed4a033 to fix this up.

.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.
Expand All @@ -859,7 +895,7 @@ export function useGlobalStylesOutput() {
if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
return [];
}

mergedConfig = updateConfigWithSeparator( mergedConfig );
const blockSelectors = getBlockSelectors( getBlockTypes() );
const customProperties = toCustomProperties(
mergedConfig,
Expand Down
111 changes: 111 additions & 0 deletions phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

}
}