Have you just run the WordPress 5.9 update and seen your site change how it looks? I ran through the update today and was shocked to see that any paragraph blocks that I have previously set to large were no longer 20px as per my theme options but now showing at 36px
Why Did my WordPress theme fonts change size when I updated to WordPress 5.9?
The simple answer is because of the new FSE (Full Site Editing) capability that has been included in this update. This new mechanism to configure the editor enables a finer-grained control and introduces the theme.json file which consolidates the various block editor APIs into a single point in the root of the theme directory.
The documentation states that there is backward compatibility with “add_theme_support” which has been used by many themes up to this point, but my findings from updating 50+ WordPress sites today are that this is not always the case, and ‘editor-font-sizes’ seems to be replaced with the default settings
When I investigated what was causing the text to show at 36px, I could see this in the CSS
font-size: var(--wp--preset--font-size--large) !important;This is the WordPress 5.9 default size for large – and is far too large for my theme.
My current theme settings that I have been using for a year or more use add_theme_support(), as per below were being overridden.
add_theme_support('editor-font-sizes', array(
array(
'name' => esc_attr__( 'Small', 'genesis-sample' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => esc_attr__( 'Normal', 'genesis-sample' ),
'size' => 18,
'slug' => 'normal'
),
array(
'name' => esc_attr__( 'Large', 'genesis-sample' ),
'size' => 20,
'slug' => 'large'
),
array(
'name' => esc_attr__( 'Larger', 'genesis-sample' ),
'size' => 24,
'slug' => 'larger'
)
) );Digging into the WordPress 5.9 update notes, I could see that the Full Site Editing means that theme.json is now supporting theme updates. Perhaps if I added a theme.json file to my existing theme, I could reassert the font sizes I wanted?
How do you add theme.json to an existing WordPress theme?
Using SFTP, navigate to your theme directory, and in the root of the theme, create a new file called theme.json
Then paste in the code below, recreating the font size names and sizes that your existing theme has. In my case, I added additional sizes (new names) and amended the sizes that matched
Basic theme.json to amend font-sizes only
Please note, I added layout settings too, because, without them, the editor was left-aligned to the screen edge and full width
{
"$schema": "https://schemas.wp.org/wp/5.9/theme.json",
"version":1,
"settings": {
"layout": {
"contentSize": "820px",
"wideSize": "1000px"
},
"typography": {
"fontSizes": [
{
"slug": "extra-small",
"size": "10px",
"name": "Extra small"
},
{
"slug": "small",
"size": "12px",
"name": "Small"
},
{
"slug": "normal",
"size": "18px",
"name": "Normal"
},
{
"slug": "medium",
"size": "20px",
"name": "Medium"
},
{
"slug": "large",
"size": "20px",
"name": "Large"
},
{
"slug": "larger",
"size": "24px",
"name": "Larger"
},
{
"slug": "extra-large",
"size": "40px",
"name": "Extra large"
}
]
}
}
}- The
slugis used in the generated CSS class name. - The
sizeproperty can be any CSS that is valid for font sizes, using for example em, rem or px units. - The
Nameproperty is the visible name in the editor.
Once I pressed saved and refreshed my page, the font sizes had returned to their original size
More about the theme.json file
The theme.json file which consolidates the various block editor APIs into a single point in the root of the theme directory.
The theme.json specification lays out the current specification, but as of Jan 31st is still referencing WordPress 5.8, so I am expecting updates
If you would like any help with correcting theme overrides that have appeared after upgrading to WordPress 5.9, please contact me and I would be happy to help