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

Global Styles: Fix Separator block color use #67269

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Global Styles: Fix Separator block color use #67269

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3aae7d5
Try enforcing global styles separator color
aaronrobertshaw Nov 25, 2024
27ece0c
Fix whitespace and US spelling
aaronrobertshaw Nov 27, 2024
e71fd97
Make separator hacks consistent work on theme.json data
aaronrobertshaw Nov 27, 2024
ba610d7
Add backport changelog
aaronrobertshaw Dec 2, 2024
4074641
Try allowing block instance styles to override global styles border c…
aaronrobertshaw Dec 6, 2024
de09644
Try merging separator variation colors
aaronrobertshaw Jan 6, 2025
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
15 changes: 15 additions & 0 deletions lib/class-wp-theme-json-resolver-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,6 +563,21 @@
}
}

/*
* The Separator block uses different CSS properties for its color depending
* on how it is being rendered e.g. as "content" for the Dots style, or
* as a border etc.
*

Check failure on line 570 in lib/class-wp-theme-json-resolver-gutenberg.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Whitespace found at end of line
* Uses are only presented with a single color control for background. Any
* selection of a background color should be applied to the other paths
* so it can be honoured.
*/
$separator_color = $config['styles']['blocks']['core/separator']['color']['background'] ?? null;

Check failure on line 575 in lib/class-wp-theme-json-resolver-gutenberg.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Expected 1 space after "="; 2 found
Copy link
Member

Choose a reason for hiding this comment

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

This reminds me to brush off the theme json style-related methods abstraction issue

if ( $separator_color ) {
_wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'color', 'text' ), $separator_color );
_wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'border', 'color' ), $separator_color );
}
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved

/** This filter is documented in wp-includes/class-wp-theme-json-resolver.php */
$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
static::$user = $theme_json->get_theme_json();
Expand Down
24 changes: 23 additions & 1 deletion packages/editor/src/components/global-styles-provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const { GlobalStylesContext, cleanEmptyObject } = unlock(
);

export function mergeBaseAndUserConfigs( base, user ) {
return deepmerge( base, user, {
const mergedConfig = deepmerge( base, user, {
/*
* We only pass as arrays the presets,
* in which case we want the new array of values
Expand All @@ -41,6 +41,28 @@ export function mergeBaseAndUserConfigs( base, user ) {
return undefined;
},
} );

/*
* The Separator block uses different CSS properties for its color depending
* on how it is being rendered e.g. as "content" for the Dots style, or
* as a border etc.
*
* Uses are only presented with a single color control for background. Any
* selection of a background color should be applied to the other paths
* so it can be honoured.
*/
const separatorColor =
user.styles?.blocks?.[ 'core/separator' ]?.color?.background;
if ( separatorColor ) {
mergedConfig.styles.blocks[ 'core/separator' ].color.text =
separatorColor;
mergedConfig.styles.blocks[ 'core/separator' ].border = {
...mergedConfig.styles.blocks[ 'core/separator' ].border,
color: separatorColor,
};
}

return mergedConfig;
}

function useGlobalStylesUserConfig() {
Expand Down
Loading