Fix: Sync fluid typography size with fluid.max (#789)

[Omcodes23]

Fix: Sync fluid typography size with fluid.max

Summary

Fixes a bug where the size property in theme.json would retain its old value when editing Custom Fluid Typography in the Site Editor. The fluid.min and fluid.max values would update correctly, but the size property (which represents the maximum fluid size fallback) would remain stale.

Fixes

• Bug: Fluid typography edits leave stale size value in theme.json #789

Changes

• includes/create-theme/theme-fluid-typography.php (new file)

  • New CBT_Theme_Fluid_Typography class that syncs the size property with fluid.max whenever fluid typography settings are updated.
  • Hooks into rest_pre_insert_wp_global_styles filter to intercept global styles before they're saved.
  • Automatically updates size to match fluid.max for any font size with fluid settings.

• includes/class-create-block-theme-api.php

  • Added require statement to load the new theme-fluid-typography.php file.

• tests/test-fluid-typography.php (new file)

  • Added Test_Create_Block_Theme_Fluid_Typography test class with 5 unit tests:
    • test_sync_fluid_typography_sizes() - Verifies fluid sizes are synced while non-fluid remain unchanged.
    • test_sync_global_styles_fluid_typography() - Verifies the REST filter works correctly.
    • test_sync_with_no_typography() - Verifies handling of missing typography.
    • test_sync_with_no_font_sizes() - Verifies handling of missing fontSizes.
    • test_sync_global_styles_with_invalid_json() - Verifies graceful error handling.

Rationale

When editing Custom Fluid Typography in the Site Editor (Styles → Typography), WordPress updates the global styles JSON. However, the size property (which serves as a fallback for the maximum fluid size) wasn't being updated to match the new fluid.max value. This resulted in inconsistent typography definitions where the fluid values were current but the fallback size was stale.

The fix intercepts the global styles save operation and automatically syncs size with fluid.max for any font size that has fluid settings defined.

Risk/Compatibility

• Scoped change: Only affects global styles updates for typography font sizes with fluid settings.
• Uses WordPress REST API filter (rest_pre_insert_wp_global_styles) which has been available since WordPress 5.9.
• Gracefully handles edge cases (missing typography, missing fontSizes, invalid JSON).
• No changes to existing functionality or APIs.

Test Coverage

• 5 new unit tests covering the sync logic, global styles filter, and edge cases.
• Tests verify that:
  • Fluid font sizes are synced to their fluid.max value
  • Non-fluid sizes remain unchanged
  • Missing typography/fontSizes don't cause errors
  • Invalid JSON is handled gracefully

Behavior After Fix

Before

{
  "fontSizes": [
    {
      "slug": "custom-fluid",
      "name": "Custom Fluid",
      "fluid": {
        "min": "1.5rem",
        "max": "5.63rem"
      },
      "size": "3rem"
    }
  ]
}

After

{
  "fontSizes": [
    {
      "slug": "custom-fluid",
      "name": "Custom Fluid",
      "fluid": {
        "min": "1.5rem",
        "max": "5.63rem"
      },
      "size": "5.63rem"
    }
  ]
}

[Omcodes23]

@stephdau @rawrly @rmccue @nb any one is free for review of the pr ?

[Omcodes23]

hey @scruffian i got the info about from @henriqueiamarino to review my prs

[Omcodes23]

@scruffian any updates ?

[Omcodes23]

@scruffian please also check this pr 😢

[scruffian]

I think this should be fixed in the Gutenberg repo, not in Create Block Theme.

[Omcodes23]

@scruffian Thanks for the review! I understand this ideally belongs in Gutenberg core.

However, I'd like to suggest keeping this as a temporary workaround in Create Block Theme while we report and wait for the fix upstream in Gutenberg. This way, CBT users won't be affected by the stale size values until Gutenberg core fixes it.

My proposal:

1. Merge this PR in Create Block Theme as a workaround fix
2. Close issue Bug: Fluid typography edits leave stale size value in theme.json #789 here
3. Open a new issue in WordPress/Gutenberg repo with the same details so the core team can fix it properly

This benefits both projects - CBT users get a fix now, and Gutenberg gets the proper fix long-term. What do you think?

I can handle opening the Gutenberg issue if you approve.

[Omcodes23]

@scruffian any suggestions or updates ?

[t-hamano]

I think this should be fixed in the Gutenberg repo, not in Create Block Theme.

I agree with this.

the size property in theme.json would retain its old value when editing Custom Fluid Typography in the Site Editor.

Does this actually cause any problems?

[scruffian]

I don't think it will take a long time to fix in Gutenberg. It would be better to put the fix there than to patch it in CBT, which would then mean there would be no pressure to fix it in Gutenberg! I'm happy to review a Gutenberg PR.