Font Size Picker displays incorrect font-sizes in incorrect order.

[tp-cast-ai]

Description

Font Size Picker seems to be broken since v16.9.0 release. See the issue below.

Step-by-step reproduction instructions

1. Add these font sizes to theme.json:

"fontSizes": [
	{
		"size": "0.5rem",
		"slug": "caption",
		"name": "Caption"
	},
	{
		"size": "1rem",
		"slug": "x-small",
		"name": "XS"
	},
	{
		"size": "2rem",
		"slug": "small",
		"name": "S"
	},
	{
		"size": "3rem",
		"slug": "medium",
		"name": "M"
	},
	{
		"size": "4rem",
		"slug": "large",
		"name": "L"
	},
	{
		"size": "5rem",
		"slug": "x-large",
		"name": "XL"
	},
	{
		"size": "6rem",
		"slug": "xx-large",
		"name": "XXL"
	}
]

2. Try selecting a font size with Gutenberg plugin disabled (or with Gutenberg plugin v16.8.1), you will see Font Size Picker displayed correctly:
   

3. Enable Gutenberg 16.9.0, Font Size Picker displays nonsense - order is incorrect, default sizes displays incorrect values (in pixels, however it still works fine on the frontend)
   

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

[t-hamano]

Thanks for the report. I was also able to confirm the same problem.

[t-hamano]

I identified that this issue was caused by #55219, which decided to merge all origins.

However, regarding font size, I think it should not be merged with the default origin, but should be completely replaced by the theme.json definition.

Also, I found that the same problem occurs with SpacingControl. Here is an example theme.json:

Details

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"spacing": {
			"spacingSizes": [
				{ "name": "XXXS", "size": "1em", "slug": "xxxs" },
				{ "name": "XXS", "size": "2em", "slug": "xxs" },
				{ "name": "XS", "size": "3em", "slug": "xs" },
				{ "name": "S", "size": "4em", "slug": "s" },
				{ "name": "M", "size": "5em", "slug": "m" },
				{ "name": "L", "size": "6em", "slug": "l" },
				{ "name": "XL", "size": "7em", "slug": "xl" },
				{ "name": "XXL", "size": "8em", "slug": "xxl" },
				{ "name": "XXXL", "size": "9em", "slug": "xxxl" },
				{ "name": "XXXXL", "size": "10em", "slug": "xxxxk" }
			]
		}
	}
}

Expected	Actual
Only the space sizes defined in theme.json and the default, zero, are displayed.	Both the space sizes defined in theme.json and the default space size (0, 1, 2...) are displayed.

cc: @matiasbenedetto, @pbking

[iamtakashi]

I’ve noticed this too. I’m glad the cause has been identified.

[hanneslsm]

For spacing, this seems to be the same issue: #55636

[t-hamano]

I'm searching for what solution would be best, but haven't found an answer yet. Therefore, I give it the "Needs Technical Feedback" label.

[t-hamano]

I discovered that a similar problem also occurs with inline highlighting.

WP6.4.1 with Gutenberg trunk enabled (Unexpected behavior)	WP6.4.1 with Gutenberg trunk disabled (Expected behavior)

In TT4, the default palette is displayed even though it is disabled. If you temporarily revert the changes made in ##55219 on the current trunk, this issue will not occur.

[graylaurenm]

Since the suggestion on #55636 is to add settings.spacing.defaultScale perhaps doing a similar settings.typography.defaultFontSizes here would make sense.

[t-hamano]

I think this issue a high priority because I believe this behavior affects many users. So I'll add it to the WP6.5 Editor Tasks board.

[gaambo]

I've got the same problem.
Is there someway I can help with this issue - reproduction steps, testing, development?
Actually there is a defaultFontSizes property in theme.json (see #52200 and theme.json reference) but setting it to false does not provide the expected result.

[gaambo]

An interesting aspect:

1. Add a font size to theme.json > settings > typography > fontSizes that has the same slug as a core default font-size:

{
          "fluid": false,
          "name": "Groß",
          "size": "1.375rem",
          "slug": "large"
},

2. In the font-size picker the core font-size with it's value is displayed and all core-sizes are displayed before the defined ones, therefore appearing out of order.
   
3. The correct font-size (1.375rem) is applied in the frontend

[getdave]

Noting that @ajlende has a PR open for this #58409

[t-hamano]

This issue has been fixed in #58951. #58951 has been given a backport label, so it should be reflected in WP6.5 Beta2.