Heading Block: Don't rely on the experimental selector anymore

[scruffian]

What?

Before we had a class name on the heading block, the only way to target it was using this selector h1,h2,h3,h4,h5,h6. Now we have a class name on the block (#42122), we can remove this __experimentalSelector and revert to the standard selector (.wp-block-heading).

Why?

This gives theme.json more control over what it targets - now heading block settings will only apply to heading blocks, not all heading elements.

How?

Simply remove the __experimentalSelector property.

Testing Instructions

0. Switch to a block theme
1. Add this to your theme.json file:

			"core/heading": {
				"color": {
					"background": "red"
				}
			},

3. Check that the heading block has a red background, but other block that use H* elements do not (for example Post Title).

Testing Instructions for Keyboard

Screenshots or screencast

@WordPress/block-themers

[mikachan]

This works well for me 👍

Tested using Archeo:

Before	After

[bph]

flagged for Dev notes in 6.2
@scruffian This just needs short blurb added to the Miscellaneous Dev Note. What do you think?
Over the coming days, I will review the comments on the tracking issue and group the PRs accordingly.

[scruffian]

Dev note

Giving block themes more control over headings

To give themes more fine grained control over styling headings, it is now possible to control heading blocks independently of heading elements. To target all headings themes can target heading elements:

	"styles": {
		"elements": {
			"h1": {
				"typography": {
					"fontSize": "3.625rem",
					"lineHeight": "1.2"
				}
			},
			"h2": {
				"typography": {
					"fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)",
					"lineHeight": "1.2"
				}
			},
			"h3": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--x-large)"
				}
			},
			"h4": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--large)"
				}
			},
			"h5": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontWeight": "700",
					"textTransform": "uppercase"
				}
			},
			"h6": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)",
					"textTransform": "uppercase"
				}
			},
			"heading": {
				"typography": {
					"fontWeight": "400",
					"lineHeight": "1.4"
				}
			}
		}
	}

To target heading blocks but not any other headings:

	"styles": {
		"elements": {
			"core/heading": {
				"color": {
					"background": "red"
				}
			}
		}
	}