Gutenberg Plugin: Unable to override block theme styles

[t-hamano]

Description

If the theme opts in to wp-block-styles, a style with the handle wp-block-library-theme will be output in the front end.

Also, if should_load_separate_core_block_assets is set to true, or if the CSS file size exceeds the threshold, a theme style with the handle wp-block-{block-name}-theme-inline-css will be output separately after the main style sheet with the handle wp-block-{block-name}-inline-css.

<style id='wp-block-{block-name}-inline-css'>
<!-- The main styles of the block are here -->
</style>

<style id='wp-block-{block-name}-theme-inline-css'>
<!-- The theme styles of the block are here -->
</style>

If you enable the Gutenberg plugin, this theme style will also be added to the end of the main stylesheet.

<style id='wp-block-{block-name}-inline-css'>
<!-- The main styles of the block are here -->
<!-- The theme styles of the block injected by the Gutenberg plugin are here -->
</style>

<style id='wp-block-{block-name}-theme-inline-css'>
<!-- The theme styles of the block are here -->
</style>

Therefore, even if you change the style in the theme.scss file on the Gutenberg plugin, if the same style exists in the core, it will be overwritten by the core style and you will not be able to debug the style.

I think this problem is probably caused by this location:

gutenberg/lib/blocks.php

Lines 293 to 297 in dc2517e

	// If there is a main stylesheet for this block, append the theme styles to main styles.
	wp_add_inline_style(
	"wp-block-{$block_name}",
	file_get_contents( gutenberg_dir_path() . $theme_style_path )
	);

Step-by-step reproduction instructions

Let's take a table block as an example and explain the steps to reproduce this problem.

• Insert a table block into the post.
• The front end should output a style with the following two handles for the table:
  • wp-block-table-inline-css
  • wp-block-table-theme-inline-css
• Activate the Gutenberg plugin and start the project in watch mode.
• Make changes to this line to change the margins of the table block.
• You can see that Gutenberg's theme styles have overwritten the core theme styles.

Screenshots, screen recording, code snippet

Environment info

No response

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

[t-hamano]

This problem does not reproduce with the latest Gutenberg. Perhaps it was resolved by #60098.