Skip to content

fontSizes labels in editor #39643

@ooksanen

Description

@ooksanen

At the moment editor shows fontSizes as a number without unit, so 24px = "24" and 1.5rem = "1.5", which can be quite unclear for users.

For example a scenario I have at the moment is that I have two custom font-sizes on top of the default value, 1.25rem. Small font-size, which is 1rem and large font-size which is 1.5rem so the user only sees 1 and 1.5 (unless I define a size "Default" as well) which might lead the user to think that the value "1" is the default size when in fact it's the small size. And even with a "default" size defined in theme.json, I think it's pretty unclear that in this situation the 1.25 is the default value. I believe a lot of users would still think 1 is the default, 1.25 is 25% larger etc. I know the options have a tooltip, but imho it's not clear enough for the end user.

For this reason I think the fontSizes should be presented by their Name such as "Large" / "Small", not the value without a unit. That way the selection value would be clear for a user who has no idea of ems, rems, etc. or what is the default font-size of the site. This would also make the select work better with responsive font-sizes, such as clamp(), which now just show 1, 2, 3 which tells the user nothing.

Also, I think that clicking the selected font size value should unselect the value and reset the font size to default value. At the moment there is no way that I could find except "Reset all" under the Typography [+] dropdown, to reset the font size back to default, which it is before making a selection.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions