Typography: minimum font size constraint bugfix

[ramonjd]

This PR backports the typography bugfix from WordPress/gutenberg#44993

It:

• adds default minimum font size limits so that min font size, where provided, does not become smaller than 14px/0.875rem/0.875em.
• For font sizes of < 14px that have no defined minimum sizes, uses the font size to set the floor of the clamp() value.

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

Gutenberg bug issue: WordPress/gutenberg#44957
Gutenberg PR: WordPress/gutenberg#44993

Reasons for backporting:

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backwards compatibility and accessibility.

Testing

See WordPress/gutenberg#44993 for comprehensive testing instructions.

❗ This only affects the frontend.

Enable TT3 theme

In the editor reduce a text block's font size to 10px

Publish and inspect the element on the frontend. The font-size should be font-size: clamp(10px, 0.625rem + ((1vw - 7.68px) * 0.601), 15px);

Edit the theme.json to include a font size preset whose min font size is <14px/0.875rem

				{
					"fluid": {
						"min": "0.3rem",
						"max": "40px"
					},
					"size": "1rem",
					"slug": "small"
				},

The generated preset's min value in the clamp() function should not be <14px/0.875rem:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 3.125), 40px);

[ramonjd]

cc @tellthemachines @noisysocks @andrewserong to check things out and make sure there's nothing missing 😄

[tellthemachines]

Code looks good to me! All the PHP changes from WordPress/gutenberg#44993 are here.

Tested on Chrome, Firefox and Safari with different browser settings for font size, as well as browser zoom. Everything works as expected ✅

[andrewserong]

This is testing well for me, too, thanks for getting this backport up 👍

✅ Individual custom font-sizes < 14px are allowed, and the value is used as the floor of the clamp() calculation
✅ For font sizes greater than 14px, the floor of 14px is used for the min value of the clamp() calculation
✅ min values in font size presets correctly have a floor of 14px or the appropriate em/rem equivalent of 0.875

LGTM! ✨

[ockham]

[Committer double-signoff]

Confirming that this tests as described, and prevents text formatted with fluid font sizes to go tiny ✅

Also confirming that the PHP code changes match the Gutenberg PR that was already approved for backporting ✅

LGTM! Thank you 😊

[SergeyBiryukov]

Thanks for the PR! Merged in r54646, backported to the 6.1 branch in r54647.

[ramonjd]

I'm very grateful for the quick reviews and commit. Thank you!

[Mamaduka]

@SergeyBiryukov, do you know if r54647 was reverted from 6.1 branch?

[Mamaduka]

Good, the commit hasn't been reverted. We'll ship the client-side code in 6.1.1.

[SergeyBiryukov]

Good, the commit hasn't been reverted. We'll ship the client-side code in 6.1.1.

Yeah, I remember a Slack discussion about this with the consensus to revert, but it looks like the code is still in the branch, so I guess the revert was missed somehow 😅

[Mamaduka]

That saves us work for the minor release 😄

[ramonjd]

Thanks folks. There are (potentially) incoming changes for 6.1.1 stemming from WordPress/gutenberg#45536... I'll create a core patch and see how far we get 😄

[Mamaduka]

Thank you, @ramonjd. I've already cherry-picked WordPress/gutenberg#44993 for 6.1.1.

[ramonjd]

PHP backport for WordPress/gutenberg#45536 here:

• Backport: Fluid typography - adjust font size min and max rules (#45536) #3602

This updates the logic and tests since the changes in WordPress/gutenberg#44993