Description

Given the following styles in theme.json:

 "styles": {
    "blocks": {
      "core/post-title": {
        "elements": {
          "h1": {
            "typography": {
              "fontSize": "30px"
            }
          }
        }
    }
}

This is the generated CSS:

.wp-block-post-title h1 { font-size: 30px; }

However the generated selector is wrong, as the post title block has the following markup:

<h1 class="wp-block-post-title">A Post Title</h1>

Therefore the correct selector would be:

h1.wp-block-post-title { font-size: 30px; }

Step-by-step reproduction instructions

1. Given any WordPress site with a block theme enabled (like TT1)
2. Go to a single post page.
3. Add the styles from above to the theme.json file, making sure that the font size is different to the default.
4. Reload the single post page, see that nothing has changed visually.
5. Look into the browser's developer tools to see that no CSS styles are coming through for the block.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.8, Gutenberg 11.9.1, TT1

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