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"
    }
  ]
}