Core Backport: Responsive styles: When enabled and a font-size is setting, the corresponding CSS variable remains undefined

[hbhalodia]

Related Gutenberg Issue - ​https://github.com/WordPress/gutenberg/issues/81776
Related Gutenberg PR - ​https://github.com/WordPress/gutenberg/pull/81854

To backport the fix to the core.

Description

While creating a theme.json adding the slug as such for which the preset is generated different and used is different for different states (mobile, desktop). For eg, slug => 3xl, CSS var would be generated as --wp--preset--font-size--3-xl, but for mobile and tablet states the used vars would be --wp--preset--font-size--3xl, hence this variable is marked as undefined and not correctly being used.

Trac ticket: https://core.trac.wordpress.org/ticket/65927

## Description

• Backport PR to core based on the GB PR - ​https://github.com/WordPress/gutenberg/pull/81854
• Upstream Issue - ​https://github.com/WordPress/gutenberg/issues/81776

## Use of AI Tools

• None

[arkaprabhachowdhury]

Before patch: mobile at 430px. Same PR build with the normalization fix reverted; font-size and font-family presets fail to resolve.

[arkaprabhachowdhury]

After patch: mobile at 430px. The 3xl preset resolves to 30.0561px with fluid typography; heavenlyBlue resolves to monospace.

[arkaprabhachowdhury]

After patch: tablet at 640px. The 2xl preset resolves to 23.7632px with fluid typography; heavenlyBlue resolves to monospace.

[arkaprabhachowdhury]

Reproducible before/after Playground Blueprints, PR-specific launch URLs, and PHP fixture for testing PR #13215 at c7377b40fc97182ddd7733f0d64ea6cf1684fbd9.

[arkaprabhachowdhury]

Patch Testing Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/13215 at c7377b40fc97182ddd7733f0d64ea6cf1684fbd9.

This tests whether responsive preset references resolve to the generated CSS custom properties.

Environment

• WordPress: 7.2-alpha-20260824.152609 (PR 13215 preview)
• PHP: 8.3.33
• Server: PHP.wasm / WordPress Playground
• Browser: Google Chrome
• OS: Windows
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None found in the fixture's MU-plugin directory listing
• Plugins: None activated
• Viewports: 430 x 900, 640 x 900, 1280 x 900
• Tested: September 4, 2026

Steps taken

1. Opened ​https://playground.wordpress.net/wordpress.html?pr=13215 and loaded the attached after-patch Blueprint using its supplied launch URL.
2. The fixture supplies theme JSON presets through wp_theme_json_data_theme: 3xl (48px), 2xl (32px), heavenlyBlue (monospace), and accent-1 (rgb(19, 94, 150)).
3. Rendered a core/paragraph using do_blocks(), with a 20px base font size, 2xl for the tablet state, and 3xl for the mobile state. Both responsive states use the font-family and color presets. Theme fluid typography remains enabled.
4. Checked the rendered paragraph, computed styles, and generated CSS at all three viewport widths.
5. Repeated with the before-patch Blueprint, which uses the same PR build and reverts only the changed normalization function body.
6. ✅ The patch resolves the issue. Mobile and tablet use the intended font-size presets and monospace family; desktop matches the control.

Expected result

Responsive preset references should match the generated custom-property names. Existing normalized color references and desktop rendering should remain unchanged.

Actual results

Viewport	Before: font size / family	After: font size / family
430px	23.5539px / Times New Roman	30.0561px / monospace
640px	26.4288px / Times New Roman	23.7632px / monospace
1280px	19.6448px / Times New Roman	19.6448px / Times New Roman

• Before: responsive CSS references undefined --wp--preset--font-size--3xl, --wp--preset--font-size--2xl, and --wp--preset--font-family--heavenlyBlue.
• After: the references use 3-xl, 2-xl, and heavenly-blue, matching the generated custom properties.
• Responsive color remains rgb(19, 94, 150) in both versions.
• The generated media queries target width <= 480px and 480px < width <= 782px.

Additional Notes

The sizes are fluid: the 3xl preset generates clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 1.971), 48px); 2xl generates clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.176), 32px). The patched measurements match these expressions.

The tested states.php Git blob hash is a5bae7aa18766736b4b77700f862ea18b4f3ae4e, matching the file at the PR head.

This covers server-rendered paragraph/CSS behavior. Editor interactions and PHPUnit were not exercised. The control is the PR build with this fix reverted. Overflowing diagnostic lines belong to the fixture's preformatted output.

Screenshots/Screencast with results

• Before patch: mobile​
• After patch: mobile​
• After patch: tablet​

Support Content

Reproduction fixtures​: before/after Blueprint JSON files, complete PR-specific Playground launch URLs, and the PHP fixture.

Hi @peterwilsoncc, Addressed the feedbacks. Can you please re-review the same.

Thanks,

[peterwilsoncc]

In 64117:

Editor: Ensure CSS variable names are generated consistently.

This ensures that CSS variable names generated for responsive styles are consistent with those output by WP_Theme_JSON.

Previously a CSS variable name in responsive styles did not match any Theme JSON preset property, and therefore the theme's preset property value was not being applied.

wp_normalize_state_preset_vars() now kebab-cases the preset slug, mirroring the existing logic in WP_Theme_JSON::convert_custom_properties() so that the CSS variable names are the same.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13215

Props hbhalodia, arkaprabhachowdhury, wildworks.
Fixes #65927.