search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.36k stars 4.13k forks source link

Fluid typography: UI controls to enable/disable fluid font sizes for custom values #45502

Closed ramonjd closed 11 months ago

ramonjd commented 1 year ago

Parent issue:

What problem does this address?

Fluid font sizes, when turned on, has global effect. That is, it will convert all preset and custom font sizes to clamp() value.

Editor users, therefore, have no control over when and where fluid font size is applied.

For theme.json presets, fluid font sizes can be turned on and off individually in theme.json.

It could be useful for have controls in the editor to choose whether custom font sizes are fluid or not.

What is your proposed solution?

Have a UI in the editor to control whether fluid font size is enabled.

We might like to start at the individual block level for custom font sizes.

It might be an on/off "toggle" for custom font sizes:

Screen Shot 2022-11-03 at 1 13 01 pm

Further down the line we could investigate the possibility of allowing toggling in global styles (a universal switch), and/or elements and/or block global styles.

Furthermore, there are plans to allow configurable values in theme.json. We might like to allow such values to be edited in global styles as well.

PH4NTOMiki commented 1 year ago

That would be really great

richtabor commented 11 months ago

I was thinking about this while working on Twenty Twenty-Four. I think a better solution would be to not allow fluid font sizes to scale super tiny. For example, perhaps the min size it can scale down to is 12px (if the font size is above 12 of course).

This way we wouldn't need a toggle here.

ramonjd commented 11 months ago

Thanks for thinking about this @richtabor!

There's already a default, minimum limit of 14px, which can be overridden in theme.json:

https://github.com/WordPress/gutenberg/assets/6458278/cd917cd7-cc98-42ca-8311-682628525398

The idea here was to allow folks to turn fluid font sizing off for a text block. I'm not sure that's a useful feature though 😄

richtabor commented 11 months ago

Hm, I'm sure I had a small font size value that went lower than 14px. I need to look up what happened. I think it was with TT4.

richtabor commented 11 months ago

The idea here was to allow folks to turn fluid font sizing off for a text block. I'm not sure that's a useful feature though.

The general issue is that font sizes scale too small when they're a custom value in the editor (but perhaps that has been fixed?). I don't think it's necessary to have a separate control to otherwise turn off fluidity.

ramonjd commented 11 months ago

Hm, I'm sure I had a small font size value that went lower than 14px. I need to look up what happened. I think it was with TT4.

The only exception I'm aware of is when a preset font size defines its own minimum font size, e.g., 2px pixels. The code will honour that. Only where there's no user-defined min font size will the 14px kick in.

don't think it's necessary to have a separate control to otherwise turn off fluidity.

Yeah, the more I think about it the less convinced I am too. This issue has been open for a while with no real call for its implementation. I think I'll close for now and reopen as new ideas come in.

I appreciate the feedback! 🙇🏻

ramonjd commented 11 months ago

Oh wait, I can see in TT4 that it's not adhering to the min font size boundary 🤔

Interesting. Thanks, I'll look into it.

I take that back, I think I was hallucinating.

TT4 behaves as expected.

https://github.com/WordPress/gutenberg/assets/6458278/61698964-b1b6-422d-912d-bdc206d04bbf

richtabor commented 11 months ago

Good deal, thanks! I'll go ahead and close this for now.