Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Add support for font size presets in global styles #43443

Open
ghost opened this issue Aug 19, 2022 · 4 comments
Open

Feature request: Add support for font size presets in global styles #43443

ghost opened this issue Aug 19, 2022 · 4 comments
Labels
[Feature] Typography Font and typography-related issues and PRs Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.

Comments

@ghost
Copy link

ghost commented Aug 19, 2022

Related to: #34345

What problem does this address?

Currently we can: edit/rename/add color and spacing presets in theme.json or global styles sidebar.

Currently, we can edit/rename/add font size presets only in theme.json.

Problem 1:
Font size presets added in theme.json as custom values are not accessible in the dropdown control.

Example from Twenty Twenty-Two theme:

"custom": {
	"typography": {
		"font-size": {
			"huge": "clamp(2.25rem, 4vw, 2.75rem)",
			"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
			"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
		}
}

❌ These font size presets (huge, gigantic and colossal), printed as --custom--typography--font-size-{name} variables, can't be used in the paragraph block.


Problem 2:
If these font sizes were to be added in theme.json as if they were default font size presets, for example: --wp--preset--font-size--{name},

"fontSizes": [
	{
		"name": "Huge",
		"size": "clamp(2.25rem, 4vw, 2.75rem)",
		"slug": "huge"
	},
	{
		"name": "Gigantic",
		"size": "clamp(2.75rem, 6vw, 3.25rem)",
		"slug": "gigantic"
	},
	{
		"name": "Colossal",
		"size": "clamp(3.25rem, 8vw, 6.25rem)",
		"slug": "colossal"
	},
]

✔️ then we would be able to select these font size presets in the dropdown control,
❌ but we still wouldn't be able to edit their values in the global styles sidebar.
❌ And it seems the nomenclature would become wrong. They are not --wp--preset--font-size--{name} . Instead they are --wp--preset--font-size--custom--{name}


Problem 3:
Related to: #43197
in the current scenario, when we set in a paragraph block a custom font size which happens to be the same size as a preset font size, the value is saved as if we had selected the preset font size. If someday this value of the preset font size is changed in theme.json, many paragraph sizes which we wanted to be custom, and not preset, in the first place, are going to be affected. This demonstrates that even when the preset font sizes aren't needed in a theme, there is still a need to adjust preset font sizes easily and with confidence in the global styles - not achieved by manually editing theme.json.

What is your proposed solution?

Please add the possibility to: edit/rename/add font size presets in the global styles sidebar.

Mockup:
grafik

@t-hamano t-hamano added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Aug 28, 2022
@ZebulanStanphill ZebulanStanphill added the [Feature] Typography Font and typography-related issues and PRs label Sep 17, 2022
@annezazu annezazu moved this to 🎨 Needs design in Gutenberg Phase 2: Customization Mar 22, 2023
@annezazu annezazu added the Needs Design Needs design efforts. label Mar 22, 2023
@annezazu
Copy link
Contributor

Adding to the phase 2 board after it was raised in this issue: #48443

@SaxonF
Copy link
Contributor

SaxonF commented Mar 28, 2023

Attached a possible design below.

image

@annezazu
Copy link
Contributor

annezazu commented Apr 27, 2023

This came up as part of the FSE Outreach Program's Build a Block Theme exploration and it impacts more than just font size presets so we need to consider a scalable solution across the different preset options:

What I found confusing is that for typography, there’s the preset font sizes (S, M, L, XL) but there’s no interface to change those preset sizes globally from the editor. Same for the defaults of Padding, Margin, Block Spacing and similar items.

@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Sep 1, 2023
@fabiankaegy
Copy link
Member

Related: #66932

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Typography Font and typography-related issues and PRs Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
Status: 🎨 Needs design
Development

No branches or pull requests

6 participants