Fluid font size bug

[WraithKenny]

Description

When using Gutenberg 15.8.1 on WordPress 6.2.2, and using a FSE Block Theme (theme.json), setting a fluid font-size is producing different values in the editor vs the theme side. (Reproduced on Twenty Twenty-Three, updated description.)

In the FSE editor, its outputting
--wp--preset--font-size--xx-large: clamp(4rem, 4rem + ((1vw - 0.2rem) * 7.5), 10rem);

and in the theme (and page editor), it's outputting
--wp--preset--font-size--xx-large: clamp(4rem, 4rem + ((1vw - 0.2rem) * 10.909), 10rem);

Difference being 7.5 vs 10.909

I believe the FSE version is the correct value, and the page editor and theme side is incorrect.

Step-by-step reproduction instructions

1. Use the XX-Large font size in content
2. Note font size in FSE editor
3. Look at theme side (or page editor), and note different (wrong) font size.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.2.2
• Gutenberg 15.8.1
• Twenty Twenty-Three 1.1

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

[WraithKenny]

The difference is in the Full Site Editor, not the page editor.

[WraithKenny]

In the Twenty Twenty-Three theme:
--wp--preset--font-size--xx-large: clamp(4rem, 4rem + ((1vw - 0.2rem) * 7.5), 10rem);
vs
--wp--preset--font-size--xx-large: clamp(4rem, 4rem + ((1vw - 0.2rem) * 10.909), 10rem);

One of these is wrong.

[WraithKenny]

This became apparent to me, because I am using different values (70px and 125px) which for some reason results in a -17.19 factor, which means the font size is always 70px no matter the screen size.

It's less apparent in 2023, since that calc grows to 160px in both cases. Nevertheless, the value is incorrect, even if harder to notice.

[WraithKenny]

For the more dramatic values, use

{
  "fluid": {
    "max": "7.8125rem",
    "min": "4.375rem"
  },
  "size": "7.8125rem",
  "slug": "xx-large"
}

to get this nonsense:
clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * -17.19), 7.8125rem)
whereas it should be (and is, in the FSE):
clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)

[WraithKenny]

This bug is still present in 15.9.0-rc.1

[annezazu]

cc @ramonjd can you take a look?

[WraithKenny]

The regression is still present in 15.9.0

[ramonjd]

Thanks for reporting. 👀 now

[ramonjd]

Indeed a bug, and as @WraithKenny describes. Fix over here: #51146

Thank you!

[WraithKenny]

The regression is still present in 16.0.0

[WraithKenny]

In my theme, I was using

"layout": {
  "contentSize": "min(calc(100% - 60px), 1200px)",
  "wideSize": "min(calc(100% - 60px), 1400px)"
},

I assume that the fix didn't consider this use case, and did not fix it.

[WraithKenny]

What I don't really understand is how the Site Editor can get the value correct, even with a strange layout.contentSize value. Can't we just do that for everywhere else?

[ramonjd]

What I don't really understand is how the Site Editor can get the value correct, even with a strange layout.contentSize value. Can't we just do that for everywhere else?

What I think is happening is that layout.wideSize isn't being taken into account when setting a custom font size, so the clamp value will be calculated as if it didn't exist and use the fallback value of 1600px

[ramonjd]

I assume that the fix didn't consider this use case, and did not fix it.

CSS functions were never supported, but we should guard against them. I think the backend is the only place that doesn't. I'll update. Thank you for picking up on this! 🙇