Gutenberg Bug - Nested WP Element Styles Broken

[TimDix]

Description

I'm noticing some very weird behavior in the latest version of Gutenberg. It appears that the logic for inline styles is broken. Here's a video showing, 6.2.2, and an unmodified twenty twenty three theme:

https://www.youtube.com/watch?v=YRpz5xJfHZw

It seems to me that WordPress is unable to output the styles in the correct order, causing the wrong styles to override. WordPress is combining multiple styles when the color is the same, which causes specific styles on descendant elements to be hoisted to a higher level.

Step-by-step reproduction instructions

• Set one color on the parent
• Set a different color on a child
• Set the same color as the parent on another child
• Second color overrides the first

Multiple related bugs and steps to reproduce demonstrated in the video.

Screenshots, screen recording, code snippet

https://www.youtube.com/watch?v=YRpz5xJfHZw

Environment info

WordPress 6.2.2, unmodified Twenty twenty three theme, Chrome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[costdev]

Trac ticket for the bugfix merge when it's ready: https://core.trac.wordpress.org/ticket/58811

[johannecourtright]

I have done some testing, it seems that disabling this solves it
if ( true === $options['optimize'] ) { $this->combine_rules_selectors(); }
wp-includes/style-engine/class-wp-style-engine-processor.php

[TimDix]

Also, optimize does not default to false, it defaults to true?

wp-includes/style-engine/class-wp-style-engine-processor.php

@type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is false.

$defaults = array( 'optimize' => true, 'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG, );

[johannecourtright]

until this gets resolved, this is a temporary work around, put this in your theme. Enforce the option to be passed into the function, remove the action hook first and re-add
`
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );
remove_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 );

add_action( 'wp_enqueue_scripts', 'fix_enqueue_stored_styles' );
add_action( 'wp_footer', 'fix_enqueue_stored_styles', 1 );

function fix_enqueue_stored_styles() {
$options = array('optimize' => false);
wp_enqueue_stored_styles($options);
}
`

[ramonjd]

Also, optimize does not default to false, it defaults to true?

Thanks for filing this issue and noticing the discrepancy. I've flipped the default to false here:

#53085