Gutenberg Plugin: Correctly enqueue core block theme styles

[t-hamano]

Closes #54783
Related to: #31239

What?

This PR ensures that the Gutenberg plugin's core block theme styles properly override the WordPress core block theme styles.

This PR solves the following two problems:

1. Even if you update the theme.scss with the Gutenberg plugin, the style will be overridden in the core theme.scss
2. The theme style of blocks without a main style sheet (template part block) is not enqueued correctly

Why?

Regarding the first problem, please check the issue comments for details.

Regarding the second problem, I think it's because the style handle name (wp-block-{$block_name}) passed to the wp_register_style function() is already in use.

How?

Remove core theme styles via wp_deregister_style(). For blocks without a main stylesheet, I added the -theme suffix to the handle name to ensure that styles are enqueued correctly.

Testing Instructions

Here we will test the code block and template parts block.

• Activate Twenty Twenty-two: This theme opts in to wp-block-styles, so you can test the code I've made.
• Insert a code block into the post. This block has the main stylesheet and theme styles.
• Open the post and check the source code.

trunk

Looking at the code, we see the following:

• Regarding the code block, the core theme styles are located after the Gutenberg plugin theme styles, so the Gutenberg plugin cannot overwrite them.
• Only the core theme styles for template parts block are output.

Even if you update the theme.scss of these two blocks on the Gutenberg plugin side, the styles should not be reflected.

<style id='wp-block-code-inline-css'>
.wp-block-code{
  box-sizing:border-box;
}
.wp-block-code code{
  display:block;
  font-family:inherit;
  overflow-wrap:break-word;
  white-space:pre-wrap;
}

// theme styles enqueued by Gutenberg plugin
.wp-block-code{
  border:1px solid #ccc;
  border-radius:4px;
  font-family:Menlo,Consolas,monaco,monospace;
  padding:.8em 1em;
}
</style>

<style id='wp-block-code-theme-inline-css'>
// theme styles enqueued by core
.wp-block-code{
  border:1px solid #ccc;
  border-radius:4px;
  font-family:Menlo,Consolas,monaco,monospace;
  padding:.8em 1em;
}
</style>

<!-- theme styles enqueued by core -->
<style id='wp-block-template-part-theme-inline-css'>
.wp-block-template-part.has-background{
  margin-bottom:0;
  margin-top:0;
  padding:1.25em 2.375em;
}
</style>

This PR

Looking at the code, we see the following:

• Regarding the code block, there are no theme styles for the core block, and theme styles from the Gutenberg plugin are added to the main inline CSS.
• Regarding the template part block, There is no inline theme theme style from the core block, and the theme style from the Gutenberg plugin is output as a style tag.

<style id='wp-block-code-inline-css'>
.wp-block-code{
  box-sizing:border-box;
}
.wp-block-code code{
  display:block;
  font-family:inherit;
  overflow-wrap:break-word;
  white-space:pre-wrap;
}

// theme styles enqueued by Gutenberg plugin
.wp-block-code{
  border:1px solid #ccc;
  border-radius:4px;
  font-family:Menlo,Consolas,monaco,monospace;
  padding:.8em 1em;
}
</style>

<!-- theme styles enqueued by Gutenberg plugin -->
<link rel='stylesheet' id='wp-block-template-part-theme-css' href='XXXX/gutenberg/build/block-library/blocks/template-part/theme.css?ver=1695994259' media='all' />

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/blocks.php

[oandregal]

👋 I've been pinged here but I don't have much context about this work, sorry. Looking at wp-block-styles (the theme support related to theme.css styles) I see it's used in a couple of places and there are some PRs related to this. I'll ping that people in case they can share what they know:

• Split theme.css styles loading #31239 @aristath @ntsekouras
• Only include theme.css if the theme declares support for wp-block-styles #44640 @carolinan @aristath @mikachan @scruffian
• Edit site: prevent enqueuing entire stylesheet in iframe #54254 @ellatrix @jorgefilipecosta

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in c7d3482.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7924350235
📝 Reported issues:

• [Flaky Test] submenu converts to link automatically #58981 in /test/e2e/specs/editor/blocks/navigation.spec.js

[t-hamano]

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