Idea: Remove custom fontsize names and use section styles for pseudo "heading" classes

[bacoords]

This theme uses font-size names based on semantic elements, h1, h2, etc because marketing/design-focused clients are used to that.

I think that after 6.6 and theme.json-v3, it makes more sense to opt into default font size slugs (small, medium, etc) and use 'section styles' to creating those pseudo-heading styles. The issue I've had is that it's not just font-size that you want to replicate, it's really the entire typography choices- letter spacing, weight, etc. This is much easier by setting the default "elements" styles for headings and then using matching 'section styles' to be able to apply one headings style to another or to a paragraph.

These section styles would generate classnames like .is-style-h2 which won't conflict and will be easier to manager than the core .has-h-2-font-size that are being generated now.

Plus - we can use the "ref" parameter to have the values automatically pulled from theme.json.

Example section style:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "H1 Style",
	"slug": "h1",
	"blockTypes": ["core/heading", "core/paragraph"],
	"styles": {
		"typography": {
			"fontFamily": {
				"ref": "styles.elements.h1.typography.fontFamily"
			},
			"fontSize": {
				"ref": "styles.elements.h1.typography.fontSize"
			},
			"lineHeight": {
				"ref": "styles.elements.h1.typography.lineHeight"
			},
			"fontWeight": {
				"ref": "styles.elements.h1.typography.fontWeight"
			},
			"letterSpacing": {
				"ref": "styles.elements.h1.typography.letterSpacing"
			},
			"textTransform": {
				"ref": "styles.elements.h1.typography.textTransform"
			},
			"fontStyle": {
				"ref": "styles.elements.h1.typography.fontStyle"
			}
		}
	}
}

Edit: Note to remind myself that this approach only works if you still have all your heading font sizes set as either CSS variables OR strings. "Ref" does not work with objects, like fluid font sizes.

Related: #265 Related: #264

https://make.wordpress.org/core/2024/06/19/theme-json-version-3/