Font Size Picker Hint: Fallback to font size slug if name is undefined

[mikachan]

What?

This PR tweaks the headerHint function so that the font size preset slug is used when name is missing/undefined. I believe name is optional, so this may be a common occurrence.

Why?

When a theme sets custom font sizes but does not include a name for a preset, the font picker displays 'undefined' as the size label:

Addresses this comment: #44791 (comment).

How?

This changes the logic so that instead of always trying to use the name from the font size preset, it will attempt to use name if it exists, and if it doesn't, it will use slug instead. I believe the font size slug is required, so this should be a safe fallback.

Here's an example from the Canary variation in TT3, which defines the font sizes with no name keys. I've added a name to the first size to show how this is currently used.

theme.json

"typography": {
	"fontSizes": [
		{
			"name": "Smallish",
			"size": "0.75rem",
			"slug": "small"
		},
		{
			"size": "1.125rem",
			"slug": "medium"
		},
		{
			"size": "1.75rem",
			"slug": "large"
		},
		{
			"size": "2.25rem",
			"slug": "x-large"
		},
		{
			"size": "10rem",
			"slug": "xx-large"
		}
	]
}

Before:

Screen.Recording.2022-10-17.at.16.50.15.mov

After:

Screen.Recording.2022-10-17.at.16.52.21.mov

Testing Instructions

1. Add the above theme.json fontSizes array to a theme
2. Go to the Site Editor and use the editor to change the font size of a text element/block
3. Toggle between the available sizes and notice the label/hint value next to the 'Size' label

(I've not worked in this area before, so I'm not sure if this is correct/the best solution!)

[ramonjd]

Thanks for catching this. I think it was reverted in the washing machine while working on #44761

✅ Slugs appear where there are no names in the post and site editors for both the option buttons (<=5 presets) and the dropdown (with 5++)
✅ Also tested with fluid typography toggled on and undefined is gone!

This is an improvement so LGTM!

[andrewserong]

Nice one, thanks for fixing this up @mikachan! This is testing nicely for me, too.

I wonder if one of the reasons we didn't catch this sooner is that it turns out for the presets that match ones provided in Gutenberg's base theme.json file, if we don't include .name in our theme's font sizes, then it picks up the .name from the base theme.json's preset. E.g. in the provided theme.json in the PR description, "Medium", "Large", "Extra Large" all display correctly because they exist in the base file. That was a TIL for me! 😀

Falling back to the slug sounds good to me, and because presets can only work if there is a slug, it sounds like we don't need to worry about selectedOption.slug being undefined, either.

LGTM! ✨

[michalczaplinski]

I just cherry-picked this PR to the wp/6.1-rc-2 branch to get it included in the next release: 8a00f6a

[ciampo]

Heya! Would it be possible to add a CHANGELOG entry for this PR? Thank you 🙏

Ideally, when we work on a bug fix like this one, it would be great if we could also add a unit test to prevent future regressions

[ramonjd]

Heya! Would it be possible to add a CHANGELOG entry for this PR? Thank you 🙏

Ideally, when we work on a bug fix like this one, it would be great if we could also add a unit test to prevent future regressions

I have a PR up for the changelog here:

• Font Size Picker: update changelog for #45041 #45180

Can also add a unit test to it.