With WordPress 5.8, it is now possible to configure the editor through a new mechanism: theme.json. This addition means that themes can provide more control over what editors should do when editing posts or pages on your website (change font size, color schemes etc.).
With the addition of theme.json, theme authors can also control these settings on a per-block basis, which wasn’t possible before. The top-level applies to all blocks that support the relevant setting, but a specific block’s settings could override it by being more specific.
A significant benefit of the theme.json file is the consolidation of CSS required in both a theme’s style.css file and its style-editor.css file.
Theme.json in Classic Themes
- Standardizing Theme.json Font Sizes across WordPress Block Themes
- Standardizing Theme.json Color Slugs across WordPress Block Themes
- Standardizing Theme.json Site Spacing across WordPress Block Themes
Frost is considered a classic WordPress theme and currently includes a theme.json file. Though at some point, it will fully support Full Site Editing.
Theme.json in Frost Theme for WordPress
To standardize font sizes, Frost has adopted a naming convention that aligns with WordPress and should allow for future portability.
Here is a list of custom font sizes that are included in the Frost theme:
The clamp() CSS Function
Additionally, Frost registers 3 font sizes (48px, 60px, 72px) using the clamp() CSS function. This method dynamically resizes font size based on the viewport size, which delivers a better user experience on mobile devices.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. (source)
Here is a list of custom font sizes that use the clamp() CSS function: