Heading: Fix per-level element style overrides

[aaronrobertshaw]

Fixes: #49070

What?

Corrects the CSS selector used for generating h1-h6 element style overrides for the Heading block.

Why?

Without the correct selectors a theme author can't override the Heading block styles per level.

How?

As the heading elements are a special edge case, this quick fix adds a conditional to the generation of element selectors during the theme.json block metadata processing. If the element in question is h1-h6 it will prepend the element selector to the block selector instead of appending the element as a child to the block selector.

Testing Instructions

1. Using the example theme.json snippet below, update your theme to have a generic h1-h6 element style, then update the core/heading block styles to include an override for a specific h1-h6 element style.
2. Load the editor and paste in the example block markup from the snippet below
3. Note that the Heading block's per-level element style override isn't applied. Save and confirm the same on the frontend
4. Checkout this PR, reload the editor and note that the Heading block's per-level element styles are now applied correctly
5. Refresh the post on the frontend and confirm the correct styles there.
6. Tweak your theme's element styles or set them via Global Styles for other elements and ensure those element styles still work correctly.

Theme.json Snippet

{
	"styles": {
		"elements": {
			"h1": {
				"color": {
					"background": "blue"
				}
			}
	        },
		"blocks": {
			"core/heading": {
				"elements": {
					"h1": {
						"color": {
							"background": "pink"
						}
					},
					"h3": {
						"color": {
							"background": "aliceblue"
						}
					},
					"h5": {
						"color": {
							"background": "darkseagreen"
						}
					}
				}
			}
		}
	}
}

Example block markup

<!-- wp:paragraph -->
<p>This is a quick demo for the different levels of heading in the Heading block.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Top level heading - h1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Second level heading - h2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Third level heading - h3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Fourth level heading - h4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">Fifth level heading - h5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6 class="wp-block-heading">Sixth level heading - h6</h6>
<!-- /wp:heading -->

<!-- wp:html -->
<p>This paragraph and the headings below have been added via a custom HTML block to pick up generic element styles</p>
<h1>Generic h1</h1>
<h2>Generic h2</h2>
<h3>Generic h3</h3>
<h4>Generic h4</h4>
<h5>Generic h5</h5>
<h6>Generic h6</h6>
<!-- /wp:html -->

Screenshots or screencast

Before	After

[github-actions]

Flaky tests detected in 6a92764.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4464511878
📝 Reported issues:

• [Flaky Test] can detach blocks from a template part #42245 in /test/e2e/specs/site-editor/template-part.spec.js
• [Flaky Test] doesn't throw a block error when clicking on a link #47747 in /test/e2e/specs/site-editor/template-part.spec.js
• [Flaky Test] shouldn't conflict with server-side autosave #35176 in specs/editor/various/autosave.test.js

[Mamaduka]

Thank you, @aaronrobertshaw!

Can you add a simple PHPUnit test for this particular case? We can confirm that the snippet from the DevNote produces desired CSS.

[aaronrobertshaw]

Closing this PR as per #49070 (comment).

• [Heading block] Add a wp-block-heading CSS class #42122 only prevented leaking of Heading block styles impacting h1-h6 element styles
• This PR would essentially introduce a new feature/behaviour for only the heading block that we probably shouldn't encourage