Global Styles: Add support for heading elements

[scruffian]

What?

Adds support for all heading elements to theme.json

Why?

This enables themes to set style rules for all heading elements together rather than having to do it individually.

How?

By adding "heading" to the list of supported elements.

Testing Instructions

Add this line to the elements array in your theme.json file:

			"heading": {
				"color": {
					"background": "blue"
				}
			}

Screenshots or screencast

Question

This raises an issue with the order that theme.json loads nodes in. Given this JSON, all heading elements will have a blue background

"elements" {
			"h2": {
				"color": {
					"background": "pink"
				}
			},
			"heading": {
				"color": {
					"background": "blue"
				}
			}
}

Whereas with this JSON, the h2s will have a pink background:

"elements" {
			"heading": {
				"color": {
					"background": "blue"
				}
			},
			"h2": {
				"color": {
					"background": "pink"
				}
			},

}

IMO this is a bug in Global Styles - I believe we should sort the elements array in Global styles so that element CSS is always created in the correct order, but this does remove some control from themes. I'm curious what others think

@WordPress/block-themers

[madhusudhand]

Are you referring to 'alphabetical' order? I am not sure if sorting is a good idea.
Tomorrow if we introduce a new element and if it falls in wrong sort order, it pops the same issue again.
I feel it should be a manual sorting, what ever the order in JSON always make it to pre-defined order may be part of sanitise or other pre-processing.

[scruffian]

@madhusudhand the question in my mind is whether the order should be determined by Gutenberg or by the theme. In my opinion it should be Gutenberg.

[mikachan]

@madhusudhand the question in my mind is whether the order should be determined by Gutenberg or by the theme. In my opinion it should be Gutenberg.

In the case of the example above (with h2 being above or below the heading property), would this mean Gutenberg would choose to prioritise the h2 setting over the heading, as it's more specific? If so, I think this makes sense, and it removes some potential confusion from theme.json, as the order there wouldn't matter.

[adamziel]

@scruffian I proposed a solution to the ordering problem in 0da5f58

Essentially, we'd collect the theme.json element styles in the order these elements are defined in WP_Theme_JSON::ELEMENTS and not in the theme.json file.

What do you think?

[scruffian]

@adamziel I think it's perfect. I'd approve it if I could, but that honour will have to go to you. Great work, thanks!

[bph]

I added the Needs-Dev-Note label for this theme.json, specifically for the order problem space.