Font size selector doesn't work if you have more than one font size with the same default value.

[matiasbenedetto]

Description

When you have more than one font size with the same value the font size selector doesn't work as expected. When you are not using fluid font sizes API probably it makes sense to consolidate both font sizes defined in only one, after all, it's exactly the same value. But, it's a different story when you are using the fluid typography API theme.json, because in this case you could have the same default value but the min and max values could be very different.

Example settings.typography in theme.json:

"fluid": true,
"fontSizes": [
{
    "size": "1.25rem",
    "slug": "default",
    "name": "Default"
},
{
    "size": "1.25rem",
    "fluid": {
        "min": "1.25rem",
        "max": "2.5rem"
    },
    "slug": "default-title",
    "name": "Default Title"
}
]

Step-by-step reproduction instructions

See the video below. There you will be able to see that I'm not able to select the "Default title" font size because the "Default" font size is selected because of the shared base font size.

I expect to be able to select any of the font sizes, no matter if the base font size is repeated from another font size definition or not.

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/1310626/180837187-392e53e6-6c86-4aa4-b2d8-32b6955b46d7.mp4

Environment info

• WordPress 6.0.1
• 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

[pagelab]

I can confirm this. Tested with Gutenberg trunk (13.8.20220725)

[ramonjd]

I see... Fluid font size functionality is exposing an existing quirk. Here is the editor with fluid type completely removed:

Maybe we should first address the quirk before we patch a fluid font size solution on top of it?

What's the preferred approach in relation to fluid font size? Maybe we could look at renaming the size slug in the UI, e.g., 2.75rem (fluid) or ~2.75rem ?

[SH4LIN]

I would like to work on this bug, I'll start researching what needs to be changed and update the findings here.