Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bacoords opened this issue Jul 11, 2024 · 0 comments

Comments

@bacoords
Copy link
Owner

bacoords commented Jul 11, 2024

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/

@bacoords bacoords changed the title Idea: Remove custom fontsize names and use 'section styles Idea: Remove custom fontsize names and use section styles for pseudo "heading" classes Jul 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant