Post title block specificity

[mrleemon]

Description

I added the following to my custom theme theme.json file:

"styles": {
	"elements": {
		"heading": {
			"color": {
				"text": "#000000"
			},
			"typography": {
				"fontWeight": "700",
				"lineHeight": "1.2"
			},
			"spacing": {
				"margin": {
					"top": "1rem",
					"right": "0",
					"bottom": "1rem",
					"left": "0"
				},
				"padding": {
					"top": "0",
					"right": "0",
					"bottom": "0",
					"left": "0"
				}
			}
		},
		"h1": {
			"typography": {
				"fontSize": "1.5rem"
			}
		}
	},
	"blocks": {
		"core/post-title": {
			"typography": {
				"fontSize": "1.3rem",
			}
		}
	}
}

The generated CSS in the editor is:

.editor-styles-wrapper h1 {
  font-size: 1.5rem;
}
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 {
  color: #000000;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1rem;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
.editor-styles-wrapper :where(.wp-block-post-title) {
  font-size: 1.3rem;
}

As you can see, the regular h1 tag has a higher specificity than the post title block (because of the :where pseudo-class). What is the reason for this? I think it should be the other way around; the .wp-block-post-title class should take precedence as it's more specific. Can this behavior be modified? If so, how?

Step-by-step reproduction instructions

1. Add my theme.json code to a theme
2. Go to the editor and check the CSS applied to post title blocks via the browser inspector

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.6.1
• A classic/hybrid theme with theme.json support
• No Gutenberg plugin

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]

@mrleemon Thanks for reporting this, it looks like the same issue reported as #63925, just with a different block, so I'll close this as a duplicate.

What is the reason for this? I think it should be the other way around; the .wp-block-post-title class should take precedence as it's more specific. Can this behavior be modified? If so, how?

It's quite a nuanced issue. The bug only happens when the block editor doesn't use an iframe, which currently happens if you have custom fields active or some older blocks installed (with an apiVersion of 2 or 3). When the editor is iframed it uses the exact same css as the frontend, but when there's no iframe there needs to be a way to scope the css to just the content. So the .editor-styles-wrapper is appended to the classnames. Unfortunately it bumps the specificity of the h1, h2, h3 etc. classnames to be higher.

[mrleemon]

Thanks for your answer!

[mrleemon]

I tried Gutenberg 19.2 and this issue is apparently fixed.
I hope the fix is backported to WP 6.6.3.