Skip to content

Fix block style variation custom CSS output on the front end #6797

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

Closed
tellthemachines wants to merge 3 commits into from
Closed

Fix block style variation custom CSS output on the front end #6797

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d6f514
Fix block style variation custom CSS output on the front end
tellthemachines Jun 13, 2024
857e4a8
Output custom CSS for nested block style variations.
tellthemachines Jun 17, 2024
a81d355
Add since comment
tellthemachines Jun 17, 2024
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
14 changes: 14 additions & 0 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2646,6 +2646,7 @@ private static function get_block_nodes( $theme_json ) {
* @since 6.1.0
* @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
* Updated general global styles specificity to 0-1-0.
* Fixed custom CSS output in block style variations.
*
* @param array $block_metadata Metadata about the block to get styles for.
*
Expand All @@ -2661,6 +2662,7 @@ public function get_styles_for_block( $block_metadata ) {

// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
$style_variation_declarations = array();
$style_variation_custom_css = array();
if ( ! empty( $block_metadata['variations'] ) ) {
foreach ( $block_metadata['variations'] as $style_variation ) {
$style_variation_node = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
Expand Down Expand Up @@ -2690,6 +2692,10 @@ static function ( $split_selector ) use ( $clean_style_variation_selector ) {

// Compute declarations for remaining styles not covered by feature level selectors.
$style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
// Store custom CSS for the style variation.
if ( isset( $style_variation_node['css'] ) ) {
$style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $style_variation['selector'] );
}
}
}
/*
Expand Down Expand Up @@ -2818,6 +2824,14 @@ static function ( $pseudo_selector ) use ( $selector ) {
// 6. Generate and append the style variation rulesets.
foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
if ( isset( $style_variation_custom_css[ $style_variation_selector ] ) ) {
$block_rules .= $style_variation_custom_css[ $style_variation_selector ];
}
}

// 7. Generate and append any custom CSS rules pertaining to nested block style variations.
if ( isset( $node['css'] ) && ! $is_root_selector ) {
Copy link
Contributor Author

@tellthemachines tellthemachines Jun 17, 2024

Choose a reason for hiding this comment

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

Because in core we're not setting the css property in get_block_nodes, this will only be true for nested block style variations.

$block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
}

return $block_rules;
Expand Down