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

[WordPress Trac]

#58985: WordPress FontSizePicker Default Label issue
--------------------------+-----------------------------
 Reporter:  paulpooka     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Formatting    |    Version:  6.2.2
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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/58985>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform