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.