Add relative units for font size option

[iamtakashi]

The custom font size option is really useful, but the lack of relative units has been a problem to make patterns work well in both large and small screens.

It'd be great if we could have some the relative units, just like the cover block height control.

With the vw unit, this sort of type treatment would be possible, I think.

I've seen this topic has come up before, and I'll apologise if there is a better thread to discuss this. If there is please point me at there.

[carolinan]

Related: https://make.wordpress.org/themes/2020/05/20/block-based-theme-meeting-notes-20-may-2020/

https://github.com/WordPress/gutenberg/pull/22505

[aristath]

Expanding on this one, it would be useful to just have a freeform option. Values don't necessarily need to be 10px, 2em, 3vw etc... Some cases require more elaborate values. Maybe I want to use calc(14px + 0.5vw) and have responsive typography. Or maybe I just want to use clamp(). Or even just use a css-variable and type var(--base-font-size).

Forcing users to pick a numeric value and a unit will cover a lot of cases, but not all. It will still limit things and prevent valid use-cases that make sense.

[jorgefilipecosta]

I agree with what is being said here. Ideally, the font size picker component would be expanded to support string values. When it can parse things like "1em" it would render relevant pickers with the correct units. If it can not parse because it is a complex value like calc(14px + 0.5vw) it would show a simple input field with the string.

The same would happen for all controls where we accept value/units or more complex CSS.

[mtias]

This is supported now.

[iamtakashi]

This is supported now.

@mtias I can see px, em, and rem units available now, but vw and vh aren't yet available. Am I missing something?

It depends on #24480, but if that will take more time, I think it's worth considering adding vw and vh as well. What do you think?

[mtias]

Ah, sorry, I misread :)

[iamtakashi]

That's ok. Thanks for reopening!

[flabernardez]

This option will be added soon?

I really need vw vh and calc or var options to fonts size 😄

[carolinan]

@iamtakashi @flabernardez @beafialho @WordPress/block-themers @WordPress/outreach Would having vw and vh units in the custom font size picker* be useful even if it is not combined with clamp()?

(*The control in the Typography panel where you select a completely custom font size instead of using a preset)

[iamtakashi]

Would having vw and vh units in the custom font size picker* be useful even if it is not combined with clamp()?

It can be useful. Here's a recent example of using the vw unit for this theme: https://surrealist.mystagingwebsite.com/. I see this kind of design treatment, a single word spanning the screen, more often in the wild lately. When the editor recognises the unit, the user can adjust the size easily depending on their content.

However, while working on the theme, I realised that the editor already recognises the vw unit if it's first added in the code editor. I was pleasantly surprised!

<!-- wp:site-title {"textAlign":"center","isLink":false,"style":{"typography":{"fontSize":"20vw"}}} /-->