[6.2] Block-specific additional CSS is not applied in post/page editor

[ndiego]

Description

In 6.2 Beta 3, custom CSS that is applied at the block level in Global Styles is not applied in the post/page editor. Everything works correctly in the Site Editor.

Note this only occurs in 6.2 Beta 3. Activating the Gutenberg plugin resolves the issues. Therefore I think this might be related to the fact that the iframed editor was recently removed from 6.2 but is still in Gutenberg.

Step-by-step reproduction instructions

1. Using only 6.2 Beta 3, navigate to the Site Editor and add some custom CSS to the Heading block, for example, color: red
2. Note the Heading blocks are now red in the Site Editor.
3. Navigate to a page or post and add a Heading block. It is will not be red.
4. Now activate Gutenberg 15.2 and the Headings will be red.

Screenshots, screen recording, code snippet

custom-css.mov

Environment info

6.2 Beta 3

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

[ndiego]

cc @ellatrix @Mamaduka @ntsekouras

[tellthemachines]

Looks like both the site-wide and the block-specific custom CSS aren't being enqueued in the post editor.

Adding add_action( 'enqueue_block_editor_assets', 'wp_enqueue_global_styles_custom_css' ); here doesn't work by itself though, I think because we're not enqueuing the style directly in the wp_enqueue_global_styles_custom_css function.

Changing wp_add_inline_style( 'global-styles', $custom_css ); in the above function to

wp_register_style( 'custom-global-styles', false );
wp_add_inline_style( 'custom-global-styles', $custom_css );
wp_enqueue_style( 'custom-global-styles' );

seems to do the job.

Because this issue doesn't happen in the plugin with the iframed editor, would it be worth fixing directly in core?

[tellthemachines]

@glendaviesnz did you have Gutenberg enabled? I only tested on Core trunk so not sure how it might work with the plugin.

[glendaviesnz]

Just core without plugin, but that file was being called it turned out but the wp_enqueue_global_styles_custom_css is not called even though the add_action for it is - will try and work out why that is tomorrow.

[tellthemachines]

Oh weird. I'm not 100% sure my suggestion is the exact way to do it though - but those styles do need to be enqueued for the post editor somehow! If anyone knows of a better way, please chime in 😄

[Mamaduka]

The editors use settings to load global style custom CSS, similar to how we load other global styles.

Plugin: https://github.com/WordPress/gutenberg/blob/trunk/lib/compat/wordpress-6.2/block-editor-settings.php#L8-L28
Core: https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-editor.php#L417-L425

Update: I think I found the issue, it needs to be fixed in the core. I'll create PR shortly.

[Mamaduka]

Created core PR and the ticket. I think we can close this issue since there's no action required on the plugin side.

WordPress/wordpress-develop#4154

[Mamaduka]

The patch was committed https://core.trac.wordpress.org/changeset/55438.

[ndiego]

Just catching up on this. Thanks @Mamaduka 🙌