Skip to content

Commit

Permalink
Make separator hacks consistent work on theme.json data
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Nov 27, 2024
1 parent 27ece0c commit e71fd97
Show file tree
Hide file tree
Showing 6 changed files with 321 additions and 203 deletions.
45 changes: 0 additions & 45 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2676,46 +2676,6 @@ public function get_styles_block_nodes() {
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 ) {
// Gutenberg and core implementation differed.
// https://github.com/WordPress/gutenberg/pull/44943.
$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.
*
Expand Down Expand Up @@ -3003,11 +2963,6 @@ static 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 );
}

/*
* Root selector (body) styles should not be wrapped in `:root where()` to keep
* specificity at (0,0,1) and maintain backwards compatibility.
Expand Down
21 changes: 21 additions & 0 deletions lib/class-wp-theme-json-resolver-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,27 @@ public static function get_theme_data( $deprecated = array(), $options = array()
$theme_json_data = static::inject_variations_from_block_style_variation_files( $theme_json_data, $variations );
$theme_json_data = static::inject_variations_from_block_styles_registry( $theme_json_data );

/*
* The core Separator block has Block Styles that rely on different CSS
* properties. For example, the "Dots" style renders using `::before` and
* requires styling the `color` property instead of `border-color`.
* TwentyTwenty's default style renders using a linear gradient that can't
* be applied to `color` so uses `background` instead.
*
* End users are only given a single color control in the Global Styles UI
* so we need to ensure all the required values are set if a theme only adds
* the `background` property, matching the UI.
*/
$separator_color = $theme_json_data['styles']['blocks']['core/separator']['color']['background'] ?? null;
if ( $separator_color ) {
if ( ! isset( $theme_json_data['styles']['blocks']['core/separator']['color']['text'] ) ) {
_wp_array_set( $theme_json_data, array( 'styles', 'blocks', 'core/separator', 'color', 'text' ), $separator_color );
}
if ( ! isset( $theme_json_data['styles']['blocks']['core/separator']['border']['color'] ) ) {
_wp_array_set( $theme_json_data, array( 'styles', 'blocks', 'core/separator', 'border', 'color' ), $separator_color );
}
}

/**
* Filters the data provided by the theme for global styles and settings.
*
Expand Down
50 changes: 7 additions & 43 deletions packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1282,41 +1282,6 @@ export const getBlockSelectors = (
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' ]
.color.background,
},
},
},
},
};
}
return config;
}

export function processCSSNesting( css, blockSelector ) {
let processedCSS = '';

Expand Down Expand Up @@ -1404,27 +1369,26 @@ export function useGlobalStylesOutputWithConfig(
if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
return [];
}
const updatedConfig = updateConfigWithSeparator( mergedConfig );

const blockSelectors = getBlockSelectors(
getBlockTypes(),
getBlockStyles
);

const customProperties = toCustomProperties(
updatedConfig,
mergedConfig,
blockSelectors
);

const globalStyles = toStyles(
updatedConfig,
mergedConfig,
blockSelectors,
hasBlockGapSupport,
hasFallbackGapSupport,
disableLayoutStyles,
disableRootPadding
);
const svgs = toSvgFilters( updatedConfig, blockSelectors );
const svgs = toSvgFilters( mergedConfig, blockSelectors );

const styles = [
{
Expand All @@ -1437,7 +1401,7 @@ export function useGlobalStylesOutputWithConfig(
},
// Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
{
css: updatedConfig.styles.css ?? '',
css: mergedConfig.styles.css ?? '',
isGlobalStyles: true,
},
{
Expand All @@ -1451,19 +1415,19 @@ export function useGlobalStylesOutputWithConfig(
// If there are, get the block selector and push the selector together with
// the CSS value to the 'stylesheets' array.
getBlockTypes().forEach( ( blockType ) => {
if ( updatedConfig.styles.blocks[ blockType.name ]?.css ) {
if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) {
const selector = blockSelectors[ blockType.name ].selector;
styles.push( {
css: processCSSNesting(
updatedConfig.styles.blocks[ blockType.name ]?.css,
mergedConfig.styles.blocks[ blockType.name ]?.css,
selector
),
isGlobalStyles: true,
} );
}
} );

return [ styles, updatedConfig.settings ];
return [ styles, mergedConfig.settings ];
}, [
hasBlockGapSupport,
hasFallbackGapSupport,
Expand Down
48 changes: 24 additions & 24 deletions packages/editor/src/components/global-styles-provider/index.js
View file
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 ) {
const mergedConfig = deepmerge( base, user, {
return deepmerge( base, user, {
/*
* We only pass as arrays the presets,
* in which case we want the new array of values
Expand All @@ -41,28 +41,6 @@ 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 Expand Up @@ -238,9 +216,31 @@ export function useGlobalStylesContext() {
}, [ userConfig, baseConfig ] );

const context = useMemo( () => {
/*
* 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 honored.
*/
const updatedUserConfig = { ...userConfig };
const separatorColor =
userConfig?.styles?.blocks?.[ 'core/separator' ]?.color?.background;

if ( separatorColor ) {
updatedUserConfig.styles.blocks[ 'core/separator' ].color.text =
separatorColor;
updatedUserConfig.styles.blocks[ 'core/separator' ].border = {
...userConfig.styles.blocks[ 'core/separator' ].border,
color: separatorColor,
};
}

return {
isReady: isUserConfigReady && isBaseConfigReady,
user: userConfig,
user: updatedUserConfig,
base: baseConfig,
merged: mergedConfig,
setUserConfig,
Expand Down
Loading

0 comments on commit e71fd97

Please sign in to comment.