Description

When adding a custom font size preset via Styles → Typography in the Site Editor, I've experienced an issue when using custom fluid values.

When I directly set the toggle "Custom fluid values" to on, the size input above gets disabled and the value this field has disappears. Instead, below the toggle two more fields are added for minimum and maximum values. Saving this works. However if I add a second font size preset the exakt same way, without deleting the top size value first and directly adding custom fluid values, I run into an issue when trying to select the second font. See the video below.

This is the exact same behaviour as described in #64760 and #42683.

The difference here is the user experience. I've had two people this week bring that to my attention. In both cases, the size next to the font size preset name in the selection showed 16px instead of the fluid values that were actually added.

If the 16px gets removed before the custom fluid values toggle is turned on, then this is not a problem. However the current interface behaviour does not indicate that this field has to be emptied in order to use the custom fluid values.

In #69939, a UX improvement is discussed to properly show fluid values.

Step-by-step reproduction instructions

1. Open up the Site Editor.
2. Go to Styles → Typography → Font Size Presets.
3. Add a new custom preset.
4. Ignore the 16px in the size field and directly toggle the "Custom fluid values" option.
5. Insert any fluid values, I used em and rem.
6. Go back to the preset overview and repeat adding a custom font size with some different values.
7. Go to whatever block is available in the editor and try to select the second custom value you just added. You should not be able to, and both custom font size presets will show 16px as size, instead of the actual fluid value.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.8.2
• Gutenberg plugin NOT active, but makes no difference if Gutenberg is active
• Twenty Twenty-Five theme

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure