Gutenberg Bugfix PRs

• Fluid typography: convert server-side block support values #44762
• Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values #44761
• Fluid typography: convert font size inline style attributes to fluid values #44764
• Make custom font sizes appear fluid in the block editor when fluid typography is enabled #44765
• Fluid typography: covert font size number values to pixels #44807
• Fluid typography: ensure fontsizes are strings or integers #44847
• Search block: ensure font sizes values are converted to fluid in the editor #44852 (JS only)

wp/6.1 Gutenberg backport PR

• WP 6.1: backport fluid typography #44868

Core Backport PRs

• Fluid Typography: Backport PHP changes for custom font sizes wordpress-develop#3431
• Backport fix for fluid typography/convert font size number to pixels GB PR 44807 wordpress-develop#3428 (likely superseded by Fluid Typography: Backport PHP changes for custom font sizes wordpress-develop#3431)

Description

In Gutenberg 13.8 Fluid Typography for font size presets was introduced:

• Block supports: add fluid typography #39529

This allows themers to generate fluid font size presets in theme.json, which can then be applied to other elements in theme.json or via the FontSizePicker in the editor.

However for fluid font sizes to be considered a complete feature, when "settings.typography.fluid" is set to true, custom font sizes should also be automatically converted to fluid values.

This applies both to font size values set:

1. on individual block typography in the site and post editors (block supports)
2. on global typography styles, including elements, in the site editor (should be fixed by Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values #44761)
3. on "styles", including blocks and elements, in theme.json (should also be fixed by Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values #44761)

At present, with fluid typography enabled, font size values set by the user or otherwise are not fluid, and are applied to the target elements exactly as they are represented in the value fields.

For that reason it should be considered a "Bug".

Implementation

The functions to generate clamp values from static font size values are available since #39529

The follow high-level tasks probably need addressing:

• Ensuring that blocks rendered by the server have their custom font values converted using gutenberg_get_typography_font_size_value (PHP)
  -In the editor (JS), ensure that block style attribute style.typography.fontSize is converted and applied correctly to the block's inline styles using getTypographyFontSizeValue. The value represented in the control field is to be decided: either the raw value or some indication that it is "fluid". Add responsive font sizes #33543 may provide some clues.
• Ensure that global/block font size values are converted and saved correctly in the global styles settings. Also that they're correctly output on the frontend.
• ...

Step-by-step reproduction instructions

Enable fluid font sizes in your theme.json.

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"typography": {
			"fluid": true,
			"fontSizes": [
				{
					"size": ".9rem",
					"fluid": {
						"min": "0.9rem",
						"max": "1.1"
					},
					"slug": "small",
					"name": "Small"
				},
				{
					"size": "1rem",
					"fluid": {
						"min": "1rem",
						"max": "1.3rem"
					},
					"slug": "medium",
					"name": "Medium"
				},
				{
					"size": "1.75rem",
					"slug": "large",
					"name": "Large"
				},
				{
					"size": "2.25rem",
					"slug": "x-large",
					"name": "Extra large"
				},
				{
					"size": "3.5rem",
					"slug": "huge",
					"name": "Huge"
				},
				{
					"size": "4.25rem",
					"slug": "gigantic",
					"name": "Gigantic"
				},
				{
					"size": "5.75rem",
					"slug": "colossal",
					"name": "Colossal"
				}
			]
		}
	}
}

In the post or site editor, apply a preset font size to a text element.

Observe that the text reacts in size to changes to the view port, that is, that it is "fluid".

For the same element, apply a custom font size. The element now has the static custom font size value and it is not fluid.

This is true for both the editor and the frontend.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.1 (without Gutenberg activated)
• Gutenberg 14.3

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