WordPress 5.9 overrides theme font sizes

[luminuu]

Hi, I'm not sure if you noticed this already: in WP 5.9, changes to the default variables for e. g. defined font sizes were made. This happens if a theme does not provide a theme.json file.

In my example I use the font size "Large" which is set by the theme to 20px. However with 5.9, these pre-defined classes get overwritten by the new default styles, which sets the font size to 36px. The other paragraphs in the screenshot are set to 21px.

Here's the corresponding issue at the Gutenberg repo: WordPress/gutenberg#38252

And the mentioned changes in the dev note: https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/#changes-to-the-global-stylesheet

[mapsteps]

Hey @luminuu,

I noticed the font-size selection is gone entirely. Instead I can choose a size between 1-4 where none of them indicate a size.
That's a bit strange. So adding additional CSS to fix this would be for backwards-compatibility only if I understand this correctly?

Thanks for reporting! :)

[luminuu]

🤔 Now I'm a bit confused. The 1, 2, 3, 4 font size selection is something I see in Twenty Twenty-Two, but when I activate Page Builder Framework, it looks like this on a paragraph block:

Which are defined here in PBF: https://github.com/MapSteps/Page-Builder-Framework/blob/2327e25502f3b592efb7b682d91c5041ba7e1856/inc/integration/gutenberg/gutenberg.php#L33

Tested on a fresh 5.9 install with PBF activated, no child theme. Screenshot in my first comment was from a project with a child theme but it's the same there. Also no Gutenberg plugin active too on both sites.

[mapsteps]

My bad, I had 2022 installed, lol. I'm on it & will report back asap :)

[mapsteps]

I wonder what the proper way would be to tackle this. Sure, I could add some custom CSS to just override what's happening here. I tried prefixing the CSS with the p but that obviously won't override the default added by WordPress since it's using !important for some reason. Geez.

I'm wondering if overriding the CSS variables is a good idea or not.

[mapsteps]

Also WordPress/gutenberg#38252 (comment)

[mapsteps]

Okay so I could just add a theme.json file like this:

{
	"settings": {
		"typography": {
			"fontSizes": [{
				"name": "Tiny",
				"size": "12px",
				"slug": "tiny"
			}, {
				"name": "Small",
				"size": "14px",
				"slug": "small"
			}, {
				"name": "Regular",
				"size": "1rem",
				"slug": "regular"
			}, {
				"name": "Large",
				"size": "20px",
				"slug": "large"
			}, {
				"name": "Larger",
				"size": "32px",
				"slug": "larger"
			}, {
				"name": "Extra Large",
				"size": "44px",
				"slug": "extra"
			}]
		}
	}
}

The only downside would be that we're losing the following logic that was quite handy because it inherited the font size defined in the customizer setting:

[mapsteps]

Fixed it by simply adopting & configuring the theme.json for typography :)

a026b9b