Fluid typography does not work in the site editor when using `normal` as a fontSizes slug

[ScribbleGhost]

Description

Using the slug name normal as a fluid font size does not work in the full site editor.

This will not work:

{
    "fluid": {
        "max": "22px",
        "min": "19px"
    },
    "name": "Normal",
    "size": "22px",
    "slug": "normal"
},

The site editor defaults to 16px for all text that is Normal.

However, if I change the name of the fontSizes slug to something different, for example body-text, the font will scale fluidly as intended in the site editor.

This will work:

{
    "fluid": {
        "max": "22px",
        "min": "19px"
    },
    "name": "Body text",
    "size": "22px",
    "slug": "body-text"
},

I have managed to replicate this problem across multiple themes, even new ones starting from scratch.

Step-by-step reproduction instructions

1. Make a new theme and add a custom fluid font size.
2. Call the fluid font size a slug name of normal.
3. Test the theme in the full site editor.
4. Set the font size as normal in the global styles. (Styles->Typography->Text->Select font size normal)
5. Adjust the window width of the browser.
6. See if the text scales fluidly.

Screenshots, screen recording, code snippet

Environment info

• Wordpress 6.1.1
• Firefox LibreWolf 108.0.1-1
• Windows 10 22H2

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

[carolinan]

Normal is a legacy font size slug which was used in WordPress but has been replaced by "medium". The following CSS is added to the editor to preserve backwards compatibility:

// This CSS Custom Properties aren't used anymore as defaults,
// but we still need to keep them for backward compatibility.
.editor-styles-wrapper {
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
}

[Thelmachido]

Normal is a legacy font size slug which was used in WordPress but has been replaced by "medium".

Hi @carolinan thanks, do you think this will be looked at if that's the case?

[carolinan]

I think if these font size slugs are added to theme.json, that new value must be used instead of the above.

[t-hamano]

I was unable to reproduce this on both WordPress 6.1.1 and WordPress 6.2-RC4. I have changed the theme.json in emptytheme as follows:

theme.json

```json { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fluid": true, "fontSizes": [ { "fluid": { "max": "20.1px", "min": "20.0px" }, "name": "Small", "slug": "small", "size": "20.1px" }, { "fluid": { "max": "21.1px", "min": "21.0px" }, "name": "Normal", "slug": "normal", "size": "21.1px" }, { "fluid": { "max": "22.1px", "min": "22.0px" }, "name": "Large", "slug": "large", "size": "22.1px" }, { "fluid": { "max": "23.1px", "min": "23.0px" }, "name": "X Large", "slug": "x-large", "size": "23.1px" }, { "fluid": { "max": "24.1px", "min": "24.0px" }, "name": "Custom 1", "slug": "custom-1", "size": "24.1px" }, { "fluid": { "max": "25.1px", "min": "25.0px" }, "name": "Custom 2", "slug": "custom-2", "size": "25.1px" } ] } } } ```

As shown below, the --wp--preset--font-size--normal CSS variable is overridden and the fluid font size is applied. Am I missing something?

[carolinan]

I was testing with Twenty Twenty Three, I changed one of the existing fluid sizes in theme.json to normal. 🤔

[t-hamano]

I was testing with Twenty Twenty Three, I changed one of the existing fluid sizes in theme.json to normal. 🤔

I have also tried this method and the CSS variables seem to be overwritten correctly in both the front end and the editor( post editor and site editor) 🤔

@ScribbleGhost

Could you provide all the code for theme.json? Also, it would be great if you could check if this problem reproduces in WordPress 6.2.

[ScribbleGhost]

@t-hamano I no longer have the theme.json file that didn't work, but this issue seems to have been resolved in WordPress 6.2 Here is an example that works.

{
    "$schema": "https://schemas.wp.org/wp/6.2/theme.json",
    "settings": {
        "appearanceTools": true,
        "layout": {
            "contentSize": "620px",
            "wideSize": "1000px"
        },
        "spacing": {
            "units": [
                "%",
                "px",
                "em",
                "rem",
                "vh",
                "vw"
            ]
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
                    "name": "System Font",
                    "slug": "system-font"
                }
           ],
            "fluid": true,
            "fontSizes": [
                {
                    "fluid": {
                        "max": "22.5px",
                        "min": "20.0px"
                    },
                    "name": "Normal",
                    "size": "22.5px",
                    "slug": "normal"
                }
            ]
        }
    },
    "templateParts": [
        {
            "area": "header",
            "name": "header"
        },
        {
            "area": "footer",
            "name": "footer"
        }
    ],
    "version": 2
}

Edit: It also seems that setting the minimum size as the "size" is better than setting the largest (max) number as "size".

[t-hamano]

@ScribbleGhost

I also tested your code and could not reproduce it. How about closing this issue? If the problem remains, we can reopen this issue or submit a new one.

[ScribbleGhost]

Closing this issue as we are unable to replicate it for now.