Add/relative units for font size

[kirilzh]

Description

Fixes: #23323
This PR adds the option to set custom CSS font sizes to font-size-picker component by adding a switch toggle underneath Font sizes dropdown.

Currently, when the user sees a dropdown with the predefined font-sizes, an adjacent custom field which accepts only numbers and shows the font size using pixels for units of measure, and the reset button which clears the custom field and sets font size to default.

To allow for writing more complex sizing formulas in this PR adds a toggle which when activated removes the font-size dropdown and renders a large custom field which in addition accepts string values.

How has this been tested?

This is a draft still so will add tests when changes are accepted.

Screenshots

Toggle OFF.
This is the default state of the toggle.

Toggle ON.

Types of changes

New feature (non-breaking change which adds functionality).

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[joyously]

I have a difficult time determining which is OFF and which is ON, especially since the one you say is OFF has a box that says Custom.

[kirilzh]

@joyously I updated the description. You're right that in both cases it the label is Custom but I kept it only because the text placeholder suggests that the user can write more expressive formulas. I would be happy to change it if you have something more appropriate in mind.

[joyously]

Can you show how it looks now? My main concern is that a rounded box with a circle in it does not indicate ON or OFF to me. How about a checkbox, which is fairly standard and easy to understand? Or just a value for Custom in the dropdown, that then allows input of the custom value.

[kirilzh]

@joyously Here is how the sizing options currently look:

and here's how it looks with the changes from this PR

I think the toggle is fairly standard way of representing the state of the component. For example the "airplane mode" toggle on mobile devices is now ubiquitous, so my assumption is that users will find it familiar and easy to use.

[joyously]

Thanks for the screenshots.
I think checkboxes are more standard than that rounded thingy. Even though you think it's ubiquitous, I don't have much exposure to it. I do have experience with trying to help an elderly man use his phone. He doesn't have a clue what to do. And some time back, I helped a friend configure his replacement phone. We couldn't figure out how to get the mail app to check for new mail since there was nothing to interact with. I asked my nephew who told me to slide down from the top, and that everyone knows that. It did work, but there was no way for the user to figure that out.

The thing you think is standard might be common, but it certainly isn't friendly. It looks to me like a strange button because of the color, but that's only when ON. I can't tell if the blue is indicating the current state or where to click to activate it. It's more cognitive load than is necessary.
I'm no a11y expert, but I thought that things appearing and disappearing was bad for a11y.

[AlexChariyska]

I agree with @kirilzh. I believe that using the toggle button will be more consistent with the current design of the settings box, the Drop cap functionality uses the same type of toggle button as seen in the provided screenshots.

[joyously]

Yes, it's the same as others, which are also bad. But this is the one asking for design feedback so I mentioned it here.

[aristath]

@kirilzh could you please rebase this PR? I wanted to check it out again today and see how we can move it forward, but the font-size-picker has changed a bit since the PR was first submitted so it will have to be updated first 👍

[paaljoachim]

Hi @aristath I believe that @kirilzh is not around any longer which means someone else will need to take the reins of this PR.

[aristath]

Closing this one since it no longer applies.
We still need to do it, but with the introduction of G2 components for font-size, this PR is no longer relevant and we'll need to fix this in G2 instead.