[wp-trac] [WordPress Trac] #58984: WordPress FontSizePicker Default Label issue

[WordPress Trac]

#58984: WordPress FontSizePicker Default Label issue
--------------------------+------------------------------
 Reporter:  paulpooka     |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Editor        |     Version:  6.2.2
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Changes (by sabernhardt):

 * component:  Formatting => Editor


Old description:

> If you have five or fewer font sizes, the WordPress FontSizePicker
> component will default to the labels 'S / M / L / XL / XXL'.
>
> There doesn't appear to be a way to change these labels, which can
> problematic, for example if your names begin XS rather than S, or you use
> numbers for names e.g. 10 / 30 / 50.
>
> To recreate the issue, within theme.json, add the following (or another)
> example of 5 or fewer default typography sizes to
> settings.typography.fontSizes:
>

> "fontSizes": [
>                         {
>                                 "size": "clamp(0.625rem, 0.3438rem +
> 0.75vw, 1rem)",
>                                 "slug": "10",
>                                 "name": "10"
>                         },
>                         {
>                                 "size": "clamp(1rem, 0.7188rem + 0.75vw,
> 1.375rem)",
>                                 "slug": "20",
>                                 "name": "20"
>                         },
>                         {
>                                 "size": "clamp(1.25rem, 0.9688rem +
> 0.75vw, 1.625rem)",
>                                 "slug": "30",
>                                 "name": "30"
>                         },
>                         {
>                                 "size": "clamp(1.5rem, 1.2188rem +
> 0.75vw, 1.875rem)",
>                                 "slug": "40",
>                                 "name": "40"
>                         },
>                         {
>                                 "size": "clamp(1.875rem, 1.5938rem +
> 0.75vw, 2.25rem)",
>                                 "slug": "50",
>                                 "name": "50"
>                         }
>                 ]
>

> Then when editing any page, attempt to amend the paragraph size of text
> (or any other block that uses your font sizes). You'll see that the
> labels within the FontSizePicker component are 'S / M / L / XL / XXL',
> which have no relationship to the names that you'd set in theme.json.
>
> Part of a solution could be to add a 'shortLabel' field to theme.json
> settings.typography.fontSizes, which would be used instead of the
> defaults by the FontSizePicker react component, when five or fewer font
> sizes are used.
>
> An alternative solution would be to provide a slider, similar to padding
> and margin resizing.

New description:

 If you have five or fewer font sizes, the WordPress `FontSizePicker`
 component will default to the labels 'S / M / L / XL / XXL'.

 There doesn't appear to be a way to change these labels, which can
 problematic, for example if your names begin XS rather than S, or you use
 numbers for names e.g. 10 / 30 / 50.

 To recreate the issue, within `theme.json`, add the following (or another)
 example of 5 or fewer default typography sizes to
 `settings.typography.fontSizes`:

 {{{
 "fontSizes": [
         {
                 "size": "clamp(0.625rem, 0.3438rem + 0.75vw, 1rem)",
                 "slug": "10",
                 "name": "10"
         },
         {
                 "size": "clamp(1rem, 0.7188rem + 0.75vw, 1.375rem)",
                 "slug": "20",
                 "name": "20"
         },
         {
                 "size": "clamp(1.25rem, 0.9688rem + 0.75vw, 1.625rem)",
                 "slug": "30",
                 "name": "30"
         },
         {
                 "size": "clamp(1.5rem, 1.2188rem + 0.75vw, 1.875rem)",
                 "slug": "40",
                 "name": "40"
         },
         {
                 "size": "clamp(1.875rem, 1.5938rem + 0.75vw, 2.25rem)",
                 "slug": "50",
                 "name": "50"
         }
 ]
 }}}

 Then when editing any page, attempt to amend the paragraph size of text
 (or any other block that uses your font sizes). You'll see that the labels
 within the `FontSizePicker` component are 'S / M / L / XL / XXL', which
 have no relationship to the names that you'd set in `theme.json`.

 Part of a solution could be to add a 'shortLabel' field to `theme.json`
 `settings.typography.fontSizes`, which would be used instead of the
 defaults by the `FontSizePicker` react component, when five or fewer font
 sizes are used.

 An alternative solution would be to provide a slider, similar to padding
 and margin resizing.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58984#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform