Blocks using Variations not getting styled on front end because dynamically generated IDs don't match

[pinksharpii]

Description

I have created a few block styles for headings and paragraph blocks. As an example, this is one of each:

<?php 
register_block_style(
                'core/heading',
                array(
                    'name'         => 'h2'
                    'label'        => 'H2'
                )
            );

register_block_style(
                'core/paragraph',
                array(
                    'name'         => 'h2'
                    'label'        => 'H2'
                )
            );

And then in my theme.json, I have styles defined for all of my variations under styles/blocks/variations (shortened for brevity):

"blocks": {
            "core/heading": {
                "variations": {
                    "h1": {
                        "typography": {
                            "fontSize": "var(--wp--custom--size--h-1)",
                            "lineHeight": "1em",
                            "fontWeight": "900",
                            "textTransform": "uppercase"
                        },
                        "color": {
                            "text": "inherit"
                        }
                    },
                    "h2": {
                        "typography": {
                            "fontSize": "var(--wp--custom--size--h-2)",
                            "lineHeight": "1.1em",
                            "fontWeight": "700"
                        },
                        "color": {
                            "text": "var(--wp--preset--color--red)"
                        }
                    },
                    "h3": {
                        "typography": {
                            "fontSize": "var(--wp--custom--size--h-3)",
                            "lineHeight": "1.3em",
                            "fontWeight": "500"
                        },
                        "color": {
                            "text": "var(--wp--preset--color--grey)"
                        }
                    },
            }
        }
}

As an aside note, the font sizes are custom variables I defined higher up in the json (again shortened to the necessary snippet):

    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "custom": {
            "size": {
                "h1": "60px",
                "h2": "48px",
                "h3": "42px",
                "h4": "30px",
                "h5": "25px",
                "h6": "20px"
            }
        },

Step-by-step reproduction instructions

But I'm experiencing inconsistencies in the appropriate style tag actually being output. Sometimes they render and output the correct HTML just fine:
These are h3 heading blocks styled as the h4 variation

But then other times, blocks will be output and not receive styling:

they appear correctly in the admin:

I believe the issue is the ID mapping. You can see in the Inspector above that each of those headings has a randomly generated ID like is-style-h3--1201e5b0c2adef11e541d2ddcd3f346e. And when I go look at the <style> tag that got generated for that page, the appropriate amount of declarations are there, for the correct variations, but the unique IDs don't always match up. They do sometimes (like my bottom three headings) which makes it even weirder:

<style id='block-style-variation-styles-inline-css' type='text/css'>
  | :root :where(p.is-style-h3--fc4590e70988365998624fc19ea16136){color: var(--wp--preset--color--grey);font-size: var(--wp--custom--size--h-3);font-weight: 500;line-height: 1.3em;}
  | :root :where(p.is-style-h3--ca5828e71bdbb005ea8600896ab716e3){color: var(--wp--preset--color--grey);font-size: var(--wp--custom--size--h-3);font-weight: 500;line-height: 1.3em;}
  | :root :where(p.is-style-h4--a15eb6bd25f67f392df068f039fd93a5){font-size: var(--wp--custom--size--h-4);font-weight: 500;line-height: 1.4em;}
  | :root :where(p.is-style-h5--8fba83247f820e03edbca5de8e9c55ca){font-size: var(--wp--custom--size--h-5);font-weight: 400;line-height: 1.5em;}
  | :root :where(p.is-style-h6--ac76c0cae77ea36808f71dc985c412b2){font-size: var(--wp--custom--size--h-6);font-weight: 700;line-height: 1.6em;}
  | :root :where(.wp-block-heading.is-style-h4--1a2609c1625fb625912671e328b5dff8){color: inherit;font-size: var(--wp--custom--size--h-4);font-weight: 500;line-height: 1.4em;}
  | :root :where(.wp-block-heading.is-style-h4--8946e58e8aa38077217167641814d107){color: inherit;font-size: var(--wp--custom--size--h-4);font-weight: 500;line-height: 1.4em;}
  | :root :where(.wp-block-heading.is-style-h4--b0d0cda587c2da4bc2ad06074f110ca4){color: inherit;font-size: var(--wp--custom--size--h-4);font-weight: 500;line-height: 1.4em;}
  | :root :where(.wp-block-heading.is-style-h4--09342925ff481a8074c7015022ae9f06){color: inherit;font-size: var(--wp--custom--size--h-4);font-weight: 500;line-height: 1.4em;}
  | </style>

Some of those IDs don't exist on my page, but it is the correct number of declarations being generated.

Screenshots, screen recording, code snippet

No response

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

[talldan]

@pinksharpii Thanks for reporting this. There were some previous issues around the class name ids mismatching, but they were fixed (an issue was reported here - #59462, a fix was made here #59535), so it's interesting to see the same kind of problem again.

I've tried to reproduce it using the code snippets you've provided, but I haven't been able to spot any issues.

If you could provide some more info it would help us with a reproduction:

• Do you have any plugins installed (especially plugins that add extra features to blocks)?
• Is there any other custom code you've added to your site that add extra features to the headings/paragraphs you're experiencing the issue with?
• You mention that the issue is inconsistent - if you could provide some more info around that. Is it that when you load the page it sometimes works but other times it doesn't? Or is it more that on some block instances it works, but on others it doesn't? If it's the latter could you copy the block markup from the Code Editor and share it in a comment here.

[pinksharpii]

• I deactivated every plugin except ACF and in that process I noticed the heading displays properly with Yoast SEO deactivated. And as soon as I activated it again, it borked the styling across all pages for my headings with variations. So that seems to be the kicker. We haven't done anything special with settings yet, as I'm just starting to build the site, if that helps.
• No other custom features besides the ones I listed in the issue
• And yes for clarification, it's inconsistent across blocks, not page refreshes. The same headings either consistently don't display correctly, or they do. I made a brand new page and those headings display the right variation styling when assigned a variation. But then I made a second new page, and those headings don't get the right variation styling... so that's what I mean by inconsistent. I've also tried removing characters like colons, in case that would be what it doesn't like, but it seems content of my heading blocks does not affect it.

Here is the block markup from one of my pages if that still helps:

<!-- wp:cover {"useFeaturedImage":true,"isUserOverlayColor":true,"focalPoint":{"x":0.52,"y":0.51},"gradient":"blue-to-transparent","contentPosition":"top center","className":"is-style-angled-bottom","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-top-center is-style-angled-bottom"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-blue-to-transparent-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:post-title {"textAlign":"center","level":1} /--></div></div>
<!-- /wp:cover -->

<!-- wp:group {"className":"is-style-default","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-default"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Hydro Excavation Services for Utilities Work</h2>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-h4"} -->
<h3 class="wp-block-heading has-text-align-center is-style-h4">Utility Excavation Services Include:</h3>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:acf/region-map {"name":"acf/region-map","align":"full","mode":"preview"} -->
<!-- wp:heading {"className":"is-style-h3"} -->
<h2 class="wp-block-heading is-style-h3">Your Trusted Excavation Partner for Midwest Locations:</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Wisconsin</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Minnesota</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Illinois</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Iowa</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Upper Peninsula of Michigan</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- /wp:acf/region-map -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:heading {"textAlign":"center","align":"wide"} -->
<h2 class="wp-block-heading alignwide has-text-align-center">Our Difference</h2>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":97,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="http://localhost:8000/wp-content/uploads/2024/08/Utility-Vacuum-Excavation-Icon-Safety.svg" alt="" class="wp-image-97"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-h4"} -->
<h3 class="wp-block-heading has-text-align-center is-style-h4">2-Person Crew</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Operating two-person crews allow us to work safely and efficiently, preventing work stoppages due to safety concerns for timely, affordable project delivery.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":99,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="http://localhost:8000/wp-content/uploads/2024/08/Utility-Vacuum-Excavation-Icon-Precision.svg" alt="" class="wp-image-99"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-h4"} -->
<h3 class="wp-block-heading has-text-align-center is-style-h4">Precision</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">We are committed to doing the job right the first time.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":98,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="http://localhost:8000/wp-content/uploads/2024/08/Utility-Vacuum-Excavation-Icon-Experience.svg" alt="" class="wp-image-98"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-heading4 is-style-h4"} -->
<h3 class="wp-block-heading has-text-align-center is-style-heading4 is-style-h4">Experience</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Company has been independently owned and operated since our founding in 2003.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

[talldan]

Thanks that extra info really helps. I'll do some testing and hopefully be able to reproduce the issue.

[talldan]

Actually, one more question @pinksharpii - what versions of WordPress/Gutenberg do you have installed?

[pinksharpii]

I'm on WP 6.6.1

[pinksharpii]

Any update on this? Is it an issue that will be resolved with a future release of WP? Or is Yoast working on a fix on their end?

[talldan]

I've been trying to reproduce the issue, but haven't been able to. I'll keep trying, and also reach out to some Yoast contributors to see if they have any ideas.

Just to check, are all your plugins up to date?

[pinksharpii]

The plugins are up to date.

I have this page. All of my variation styles are pulling in correctly - the quotes are center aligned; the headings in the three column text above the quotes are styled properly as the "heading4" style.

But then I have this page where the quotes are not centered and the three Difference headings are not the right size/color.
The weird thing is, that 3 column Difference section is a Pattern so it's the same block on both pages.

If I deactivate Yoast, everything displays correctly. If I deactivate any other plugin, it doesn't make a difference.

Theme.json link for reference.

Note, I changed my variation/style names from h3/h4 to heading3/heading4 respectively, just to see if the name was the problem.

[pinksharpii]

Well you can potentially ignore my two page links above because they all work now. I found this weird bug where if my page does not have a meta description or social description in Yoast, the styles don't get output appropriately. Once I put them in
for each page, they render the correct CSS. If I take them out again, the CSS isn't output correctly. So this looks like maybe a Yoast bug? I can raise it on their Github unless we can determine it's a Gutenberg issue.