You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
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
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:
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/
The text was updated successfully, but these errors were encountered: