Block assets have more CSS than expected when Gutenberg is enabled

[oandregal]

Description

See full report at #38712 (comment)

For themes that have should_load_separate_block_assets enabled, the styles for blocks are loaded as separate embedded stylesheets. The expected content of every stylesheet is the contents of the style.css of the block and, optionally, if the theme opts-in, the theme.css as well.

However, when Gutenberg is active, the block stylesheet has more contents than expected.

Step-by-step reproduction instructions

• Use WordPress 5.9.X with the Gutenberg plugin active.
• Use a block theme (by default they have should_load_separate_block_assets enabled).
• Go to the front-end and inspect the wp-block-group-inline-css. It contains:

.wp-block-group {
  box-sizing: border-box;
}
:where(.wp-block-group.has-background) {
  padding: 1.25em 2.375em;
}
.wp-block-group:where(.has-background) {
  padding: 1.25em 2.375em;
}

However, when Gutenberg is not enabled it instead outputs:

.wp-block-group {
  box-sizing: border-box;
}

.wp-block-group:where(.has-background) {
  padding: 1.25em 2.375em;
}

[oandregal]

cc @aristath in case you have any insight.

[oandregal]

I've looked at the styles coming from the plugin (style.css and theme.scss) as well as the styles coming from the WordPress environment (they're found in wp-includes/blocks/group in a WordPress installation).

Comparing their contents it seems that what's happening is that the theme.scss styles are loaded twice (first for the Gutenberg plugin and then for the WordPress runtime).

[ndiego]

Just chiming in here. The code block is a good one to look at. All of the styling from WordPress core is coming through, even though substantial enhancements/changes have been made in Gutenberg. As you mentioned, it seems as though both the Gutenberg and WordPress styles are being loaded.

Note this also seems to impact block.json. In 12.8, we changed how theme.json styles are applied to the code block. This is not respected and the specification in WordPress core is being applied instead.

[ndiego]

I would love to see this issue tackled in 6.0, especially if it requires a fix on the Core side. It impacts block themes pretty heavily. I am happy to help in any way that I can (likely testing), but not sure where to start investigating this issue 😅 cc @aristath @oandregal @annezazu

[annezazu]

Adding to 6.0 board in case something can happen. To set expectations, we have just over a week to get a PR in place so not sure if it'll make it in time!

[aristath]

Just an update here.
@carolinan, @JustinSainton and myself tried to debug this one yesterday and come up with a solution to the duplicate-styles issue, however we were unable to find something that will work.
theme.css styles get added to the style.css styles using wp_add_inline_styles. They don't have a $handle of their own, and we could not "detach" the core styles from the stylesheet's extras['after'][] array. It looks like Gutenberg styles get added before the core styles, so when the functions run, we can't have access to the inline styles that core will add later.