[Global Styles]: Add support for nameless font sizes

[ntsekouras]

Very recently in this PR we updated the default font sizes - the new defaults have the slugs (small, medium, large, x-large.

With this PR we allow themes to skip the declaration of name of their fontSizes, if they want to support the defaults. What this means is that a theme can now provide their fontSizes like this:

"fontSizes": [
	{
		"slug": "small",
		"size": "1.3rem"
	},
	{
		"slug": "medium",
		"size": "1.75rem"
	},
	{
		"slug": "large",
		"size": "2rem"
	},
	{
		"slug": "x-large",
		"size": "3rem"
	}
],

** Note the missing name field and that the slugs match the default ones.

Notes

• If a theme doesn't provide a name for a slug that isn't among the defaults, it will result to having no name with all the bad implications that entails.
• If a theme uses a slug that is among the defaults, but provides a name, the provided name will be used.

Testing instructions

1. Add to your theme.json nameless font sizes that use the core default slugs (example above)
2. Observe that in font size picker the names from the defaults are shown as labels.

[kjellr]

This seems to work for me. I tried it alongside WordPress/twentytwentytwo#298 (both with and without name defined for each preset), and they both showed the correct names:

In the case of Twenty Twenty-Two, I'm not sure we actually need to update our font sizes though. 🤔 Our current five sizes and provided names work just fine with this setup as is:

I guess the main reason to do it would be to ensure we align with the t-shirt sizes if/when core switches to that.

[jasmussen]

Thanks for the PR! I'm not sure what I'm doing wrong, but it wasn't working for me:

This is with the following in my custom theme.json:

		"typography": {
			"fontSizes": [
				{
					"slug": "small",
					"size": "12px"
				},
				{
					"slug": "medium",
					"size": "14px"
				},
				{
					"slug": "large",
					"size": "18px"
				},
				{
					"slug": "x-large",
					"size": "48px"
				},
				{
					"slug": "xx-large",
					"size": "64px",
					"name": "XX Large"
				}
			],

I feel like there's something I'm messing up with my system, because I'm also seeing the (px) unit next to the title, whereas it seems to be missing in the other screenshots. Is that due to the complex units from TT2?

I guess the main reason to do it would be to ensure we align with the t-shirt sizes if/when core switches to that.

I think "Normal" changing to "Medium" and "Huge" changing to "Extra Large" feel like good reasons to sync up TwentyTwentyTwo as well, since both the defaults and the default theme should showcase best practices.

For the 4 base names, I'd even go so far as to remove the name value from the theme.json, and intentionally fall back to the default names. That is of course, unless I misunderstood how that was meant to work!

[ntsekouras]

I'm not sure what I'm doing wrong, but it wasn't working for me:

Hm... this seems to work for me and I don't see something wrong with your fontSizes.

I feel like there's something I'm messing up with my system, because I'm also seeing the (px) unit next to the title, whereas it seems to be missing in the other screenshots. Is that due to the complex units from TT2?

Yes, it due to the complex units.

[jasmussen]

I'll give this another spin as soon as I get a moment, but just from my understanding this (with your confirmation), this is an important step forward 👍👍

[jasmussen]

Definitely something with my environment. I'm seeing the correct names now:

That's testing with this in my theme.json:

			"fontSizes": [
				{
					"slug": "small",
					"size": "12px"
				},
				{
					"slug": "medium",
					"size": "14px"
				},
				{
					"slug": "large",
					"size": "18px"
				},
				{
					"slug": "x-large",
					"size": "48px"
				},
				{
					"slug": "xxl",
					"size": "64px",
					"name": "XX Large"
				}
			],

[jasmussen]

I would encourage a code review of this, but from a theme.json perspective, thumbs up! Thanks for the work.

[ntsekouras]

I've cherry picked in wp/trunk here and the core patch is here

--cc @tellthemachines

[tellthemachines]

Thanks @ntsekouras , I'll remove the backport label then.