Fluid typography in theme.json loads just the default size in the site editor

[matiasbenedetto]

Description

When you use the fluid typography API recently introduced in Gutenberg, the min and max settings are ignored in the editor and it just loads the default value.

Step-by-step reproduction instructions

1. Add a new fluid font size in your fontSizes array (settings.typography.fontSizes) in theme.json and save.

  {
      "size": "1.3rem",
      "fluid": {
          "min": "1.3rem",
          "max": "2.5rem"
      },
      "slug": "default-title",
      "name": "Default Title"
  }

3. Set the fonstSize for a block in your theme.json (styles.blocks).

"core/post-navigation-link": {
      "typography": {
          "fontSize": "var(--wp--preset--font-size--default-title)"
      }
  }

3. Open the editor and add a block to a template and save.
4. Save and navigate the frontend. The block should have a fluid font size.
5. Reload the editor and verify that the font size of the block is NOT fluid.

Screenshots, screen recording, code snippet

Frontend:

Editor:

Environment info

• Wordpress 6
• 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]

Did you add "fluid": true, to settings.typography? I can reproduce this issue only if it is removed.

[matiasbenedetto]

Did you add "fluid": true, to settings.typography? I can reproduce this issue only if it is removed.

Hi @pagelab, thanks for testing. Please try using the template editor as suggested in the step-by-step reproduction instructions.

This seems to be working fine on the post editor but failing on the template editor (Appearance -> Editor from the WP sidebar menu).

[pagelab]

I see. I confirm, it's not working in the template editor, just in the regular post editor.

[ramonjd]

Thanks for registering this bug.

It appears to be an existing bug, unrelated to the fluid typography changes, whereby the font size presets are printed twice to the page:

1. In a style tag in the document's head (global-styles-css-custom-properties-inline-css). The presets are printed before any processing takes place.
2. And again, at the bottom of the page, in wp.editSite.initializeEditor, where the processing has taken place and the clamp values are visible.

The former, at least in the template/site editor, are taking precedence over the latter.

It looks like it's a bug with any preset that defines its value via a value_func. So duotone is exhibiting the same behaviour.

The fluid typography changes do highlight the need for this to be addressed. I'll take a look and see if I can hunt down the cause.

Edit: Oh, it looks like we also need a JS version of the fluid font size algorithm for the site editor only (because it's in an iframe)