Fluid typography: custom font sizes should be converted to fluid font sizes values

[ramonjd]

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.

Here is a sample 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

2022-10-07.09.14.14.mp4

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

[ramonjd]

@scruffian could you/themes folks spare any time to test the ongoing bugfix PRs for this issue? 🙇

cc/ @priethor

[jasmussen]

Definitely a bug, otherwise the boolean would be unnecessary. Thank you for working on this. 🙏

[priethor]

Definitely a bug, otherwise the boolean would be unnecessary.

💯 This is a bug indeed and a good way to summarize it. Thanks for addressing this!

As a matter of fact, this is a very important bug to fix, considering fluid typography is among the top highlighted features in WP 6.1. The individual PRs are already approved and ready to merge & backport, so I'm flagging them to Editor Tech Leads @michalczaplinski, @ockham, @c4rl0sbr4v0, and Core Tech Leads @getsource, @jeffpaul, @dream-encode, for awareness and last-minute reviews before merging.

[andrewserong]

I've opened up a backport PR in WordPress/wordpress-develop#3431 to cover the PHP parts of the following 3 PRs:

• Fluid typography: convert server-side block support values #44762
• Fluid typography: convert font size inline style attributes to fluid values #44764
• Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values #44761

I believe the PHP changes in the block-library directory will be picked up by the backport process for the JS side of things / NPM packages. And the remaining PHP changes appear to be covered in WordPress/wordpress-develop#3428. But it'd be good to double-check just in case I've missed anything!

Update: the backport PR now also includes:

• Fluid typography: covert font size number values to pixels #44807
• The adjustments to the above change proposed in Backport fix for fluid typography/convert font size number to pixels GB PR 44807 wordpress-develop#3428
• The PHP changes from Fluid typography: ensure fontsizes are strings or integers #44847

[ramonjd]

I've opened up a backport PR in WordPress/wordpress-develop#3431 to cover the PHP parts of the following 3 PRs:

Thanks @andrewserong I'm testing #44847 right now. I think we could add those changes as well if it's not going to blow up your day. I'll help as well.

[ramonjd]

Closing this issue now that everything is merged and committed. Thanks everyone 🍺

[ramonjd]

I've added a tracking issue to consolidate all the work on fluid typography so far and to track ongoing enhancements:

• Tracking: fluid typography  #44888