Block Styles registered via a json file stopped working in Gutenberg 19.2.0

[Bjornjansfelt]

Description

I tried with the files in the Twenty Twenty-Five repository. styles / blocks / 01-display.json

The CSS is shown properly inside the Gutenberg editor but the css rules are missing on the actual page. If I downgrade to Gutenberg 19.1 if works both ways as expected.

Step-by-step reproduction instructions

1. Go to https://github.com/WordPress/twentytwentyfive/tree/trunk/styles/blocks
2. Copy the 01-display.json file
3. Apply the style on a core/heading or core/paragraph
4. Save and view page

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

[Bjornjansfelt]

I just noticed that it also stops working as soon as I wrap the core/heading or core/paragraph in a core/group.

[carolinan]

Hi Which version of WordPress are you using?

[Bjornjansfelt]

Hi @carolinan I'm using Wordpress version 6.6.2.

[Bjornjansfelt]

@carolinan

If I register a style using register_block_styles it get's generated twice, like so:

    <style id='wp-block-library-inline-css'>
      .is-style-cta-heading {
        font-size: clamp(1.875rem, 1.705rem + 0.852vw, 2.25rem);
        line-height: clamp(2.25rem, 2.14rem + 0.57vw, 2.5rem);
        letter-spacing: -0.025em;
      }

      .is-style-cta-heading {
        font-size: clamp(1.875rem, 1.705rem + 0.852vw, 2.25rem);
        line-height: clamp(2.25rem, 2.14rem + 0.57vw, 2.5rem);
        letter-spacing: -0.025em;
      }
    </style>

And if I register styles using a json file it can just suddenly stops working and is extremely unreliable. With the Gutenberg v19 plugin actived it generated this: <p class="is-style-text-lead is-style-text-lead--2">Test</p> (notice the same class with a number suffix) which don't output any css. If I de-active it, save and reload I get this <p class="is-style-text-lead is-style-text-lead--871e2aaf5228314fcd94fd63456cc182">Test</p> which has this css output (expected results):

:root :where(p.is-style-text-lead--871e2aaf5228314fcd94fd63456cc182) {
  font-size: var(--wp--preset--font-size--text-lg);
  line-height: 1.7777777778;
  margin-top: var(--wp--preset--spacing--6);
}

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[carolinan]

Is this still an issue with latest WP and Gutenberg?

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[t-hamano]

As far as I've tested, this issue cannot be reproduced with the latest WP and Gutenberg.

@Bjornjansfelt My test procedure is as follows. I'd like to close this issue, but please comment if there are any mistakes.

• Gutenberg version: 21.1.0 (309338a3bc)
• WordPress version: 6.8.1

Testing Procedure

• Activate Twenty Twenty-Five theme.
• Create a path/to/wp-content/themes/twentytwentyfive/styles/blocks/04-test.json file:

  {
  	"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  	"version": 3,
  	"title": "Test",
  	"slug": "test",
  	"blockTypes": ["core/heading", "core/paragraph"],
  	"styles": {
  		"typography": {
  			"fontSize": "50px",
  			"lineHeight": 2
  		}
  	}
  }
  

• Add a new post.
• Insert a Paragraph block and a Heading block and apply the "Test" style to them, they should look like this in the code editor:

  <!-- wp:heading {"className":"is-style-test"} -->
  <h2 class="wp-block-heading is-style-test">Heading</h2>
  <!-- /wp:heading -->
  <!-- wp:paragraph {"className":"is-style-test"} -->
  <p class="is-style-test">Paragraph</p>
  <!-- /wp:paragraph -->
  

• Check the page on the front end. The HTML for the content part looks like this:

  <div class="entry-content alignfull wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained">
    <h2 class="wp-block-heading is-style-test is-style-test--2">Heading</h2>
    <p class="is-style-test is-style-test--3">Paragraph</p>
  </div>
  

• The following style should be generated in your source code:

  <style id='block-style-variation-styles-inline-css'>
  :root :where(.wp-block-heading.is-style-test--2){
  	font-size: clamp(28.836px, 1.802rem + ((1vw - 3.2px) * 2.075), 50px);
  	line-height: 2;
  }
  :root :where(p.is-style-test--3){
  	font-size: clamp(28.836px, 1.802rem + ((1vw - 3.2px) * 2.075), 50px);
  	line-height: 2;
  }
  </style>
  

• Verify that these styles are actually applied to the block.