Make WordPress Core

Opened 10 months ago

Last modified 10 months ago

#58984 new defect (bug)

WordPress FontSizePicker Default Label issue

Reported by: paulpooka's profile paulpooka Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.2.2
Component: Editor Keywords:
Focuses: Cc:

Description (last modified by sabernhardt)

If you have five or fewer font sizes, the WordPress FontSizePicker component will default to the labels 'S / M / L / XL / XXL'.

There doesn't appear to be a way to change these labels, which can problematic, for example if your names begin XS rather than S, or you use numbers for names e.g. 10 / 30 / 50.

To recreate the issue, within theme.json, add the following (or another) example of 5 or fewer default typography sizes to settings.typography.fontSizes:

"fontSizes": [
	{
		"size": "clamp(0.625rem, 0.3438rem + 0.75vw, 1rem)",
		"slug": "10",
		"name": "10"
	},
	{
		"size": "clamp(1rem, 0.7188rem + 0.75vw, 1.375rem)",
		"slug": "20",
		"name": "20"
	},
	{
		"size": "clamp(1.25rem, 0.9688rem + 0.75vw, 1.625rem)",
		"slug": "30",
		"name": "30"
	},
	{
		"size": "clamp(1.5rem, 1.2188rem + 0.75vw, 1.875rem)",
		"slug": "40",
		"name": "40"
	},
	{
		"size": "clamp(1.875rem, 1.5938rem + 0.75vw, 2.25rem)",
		"slug": "50",
		"name": "50"
	}
]

Then when editing any page, attempt to amend the paragraph size of text (or any other block that uses your font sizes). You'll see that the labels within the FontSizePicker component are 'S / M / L / XL / XXL', which have no relationship to the names that you'd set in theme.json.

Part of a solution could be to add a 'shortLabel' field to theme.json settings.typography.fontSizes, which would be used instead of the defaults by the FontSizePicker react component, when five or fewer font sizes are used.

An alternative solution would be to provide a slider, similar to padding and margin resizing.

Change History (3)

#1 @sabernhardt
10 months ago

#58985 was marked as a duplicate.

#2 @sabernhardt
10 months ago

  • Component changed from Formatting to Editor
  • Description modified (diff)
Note: See TracTickets for help on using tickets.