Typography: Theme defined font sizes are no longer working

[iamtakashi]

Description

It looks like the font sizes a theme defines in its theme.json are no longer working.

without plugin	with plugin

For example, in the theme, --wp--preset--font-size--medium should be 1.05rem but with Gutenberg plugin, the size is clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.625), 20px)

I can see this issue with other themes too.

Step-by-step reproduction instructions

1. Open a homepage in the browser.
2. Deactivate Gutenberg trunk
3. Open the homepage in a new tab
4. Notice the difeerence

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.4.2
• Gutenberg Trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[bgardner]

Can also confirm this is happening.

[bgardner]

Pinging @richtabor and @annezazu b/c IMO this is a pretty big deal (and breaking situation).

[bgardner]

To further illustrate what is happening, see below. Gutenberg trunk seems to exacerbate the problem with even more unexpected results and—in this case—breaking changes on the front end.

What font sizes should be in my Powder theme:

What is output with Gutenberg 17.5 active:

[bgardner]

Perhaps this is related (or has similar behavior) to #52200.

Also pinging @carolinan as she was involved in the issue I mentioned.

[colorful-tones]

@ajlende, could this be a side-effect or regression from work introduced in #56661 ? Can you take a peek, please?

[iamtakashi]

@bgardner @colorful-tones, thanks for adding more context.

It'd be great if this issue gets fixed quickly. It blocks theme creations if you use the trunk :/

[annezazu]

I'll escalate where I can too. Thank you for the ping and raising the alarm.

[bgardner]

Can’t wait to see what you come up with @ajlende, as Gutenberg 17.6 RC1 now has breaking changes on the front end with font sizes.

[iamtakashi]

Any progress on this? The first comparison images with TT4 might not have illustrated the issue very much because the difference was subtle 🔍

The extent of the disturbance depends on the design of the theme, and this example might illustrate the issue better. The left is how it should be and the right is the current.

[SantosGuillamot]

I am far from an expert in how those properties are handled in Gutenberg, but maybe changing the prevent_override to false solves the problem: link.

prevent_override => false

I've tested that and, making that change, it seems to work for my case:

• If I have a theme.json with sizes with the same slug as the default ones ("small", "medium", "large"...) the value from the theme takes precedence over the default value in Gutenberg.
• If I remove the fontSizes from the theme, they still appear now with the values provided by Gutenberg.

Is that what we want? If that should be the solution I can work on a pull request.

EDIT: I ended up creating the pull request in case I'm not around and we need to merge this. Feel free to suggest/modify anything.

[ajlende]

@SantosGuillamot Thanks for taking a look! I've also been working on this and commented in the PR that caused the issue (#56661). It'll be helpful if you can review when I get it working.

This PR changed the default value for prevent_override to be the value of defaultFontSizes which is true by default. Previously prevent_override was false, so now any theme defined font sizes that use the same slugs as the default font sizes (small, medium, large, etc.) are no longer overridden by their theme counterparts. I didn't think this was an issue because of the bug described in #56661 (comment). However, apparently in some cases the ordering was correct, so this change broke those sites.

The value for defaultFontSizes can't be set to false because it is also in control of the UI, and themes that don't define custom font sizes would no longer show the defaults. So I'm planning on adding a third value "legacy" or something that global styles can interpret as prevent_override being false, but the UI can interpret as defaultFontSizes being true so that they are all shown.

So both the ordering bug and the legacy behavior both need to be added to fix this issue which is why there are delays.

[SantosGuillamot]

Great to hear you are working on that 🙂

The value for defaultFontSizes can't be set to false because it is also in control of the UI, and themes that don't define custom font sizes would no longer show the defaults.

Oh, that's a pity. I can test whatever the solution is, although I'm not gonna be available until tomorrow.

[bgardner]

Noting that while the front end is better/fixed, the font sizes in the editor (Typography > Size) are still being hijacked by core sizes. In other words, the screenshots from my comment above are still an issue.

cc: @annezazu for visibility and @iamtakashi to confirm if seeing the same thing.

[bgardner]

To re-iterate, these were just taken with/without Gutenberg 17.6.0-rc.3 active.

Gutenberg not active:

Gutenberg active:

[justintadlock]

Just reopening if this is still an ongoing issue and not fully corrected with the latest change.

[justintadlock]

@bgardner - Just to help me understand the current issue:

From what I'm seeing in your latest screenshots is that the core sizes are listed above yours. If that is the only problem, there's a separate issue for that: #52200

Or is it that your custom sizes are not working still?

[bgardner]

@justintadlock I see that this exists: #52200

The problem is that in the editor, where there are font sizes names common with core/default themes and my Frost/Powder themes (Small, Medium, Large, and Extra Large in this case) the drop down menu shows the core values and not my theme values. With the revert in #58456, the issue is no longer on the front end out of the box—just when text is given any of those sizes listed above (in which case it becomes a front end problem.)

In English: if a theme declares font sizes that are identical to the ones in core, core should defer altogether (front end, back end, site editor) to the theme.

[ktmn]

Theme defined font sizes are no longer working

For me I have turned off every style, but with Gutenberg 6.4.3 (since 6.4.0 iirc) font size is back

theme.json:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": false,
		"typography": {
			"defaultFontSizes": false,
			"customFontSize": false,
			"lineHeight": false,
			"dropCap": false,
			"fluid": false,
			"fontStyle": false,
			"fontWeight": false,
			"letterSpacing": false,
			"textDecoration": false,
			"textTransform": false,
			"fontFamilies": [],
			"fontSizes": []
		}
	},

The font size control is back, making the whole "Styles" tab appear:

Which also brings back this broken-looking thing, under Advanced:

---

Edit: Gutenberg 17.6.0 - it's still there. defaultFontSizes false/[]/null doesn't turn off the font size control (but it used to).

---

Edit: Adding:

"blocks": {
	"core/paragraph": {
		"typography": {
			"fontSizes": []
		}
	}
},

Produces empty styles tab with "Typography" label:

[t-hamano]

Since this issue has been reopened, I will also change the project board status from "Done" to "ToDo".

[iamtakashi]

@bgardner Sorry for the delay in response. I was away.

I can confirm that blocks now appear with the correct font sizes on both the editor and the front of the site, but the sizes with the same slugs as core are labelled incorrectly.

[scruffian]

I think the original issue caused by #56661 which was resolved when we reverted in #58456.

The original issue (#52200) is still open, as is this other one about duplicate font sizes: #57733

I think these two issues cover all the currently known bugs, so I'll close this one in favour of them.