Description

I've registered a custom block style variation for the core/post-content block using a JSON file located at:

[theme]/styles/blocks/post-content-red-headings.json

{
  "$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json",
  "version": 3,
  "title": "Post content in red headings",
  "slug": "red-headings",
  "blockTypes": [ "core/post-content" ],
  "description": "Post content with red headings.",
  "styles": {
    "elements": {
      "heading": {
        "color": {
          "text": "#ff0000"
        }
      }
    }
  }
}

When this style variation is applied to the core/post-content block within the page.html template, it renders correctly on the frontend. However, in the Site Editor, the styles are not applied unless the "Show template" option is enabled.

Expected Behavior:

The styles defined in the block style variation JSON should be applied in the Site Editor regardless of the "Show template" setting.

Actual Behavior:

The styles are only applied in the Site Editor when "Show template" is enabled.

Step-by-step reproduction instructions

1. Create the above JSON file in the specified directory.
2. Add <!-- wp:post-content {"className":"is-style-red-headings"} /--> to the page.html template.
3. Open a page and add some headings to the content
4. Observe that the custom styles are not applied in the editor.
5. Enable the "Show template" option.
6. Observe that the custom styles are now applied.

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure