Make WordPress Core

Changes between Initial Version and Version 2 of Ticket #58984


Ignore:
Timestamp:
08/05/2023 03:51:50 AM (7 months ago)
Author:
sabernhardt
Comment:

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #58984

    • Property Component changed from Formatting to Editor
  • Ticket #58984 – Description

    initial v2  
    1 If you have five or fewer font sizes, the WordPress FontSizePicker component will default to the labels 'S / M / L / XL / XXL'.
     1If you have five or fewer font sizes, the WordPress `FontSizePicker` component will default to the labels 'S / M / L / XL / XXL'.
    22
    33There 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.
    44
    5 To recreate the issue, within theme.json, add the following (or another) example of 5 or fewer default typography sizes to settings.typography.fontSizes:
     5To recreate the issue, within `theme.json`, add the following (or another) example of 5 or fewer default typography sizes to `settings.typography.fontSizes`:
    66
     7{{{
     8"fontSizes": [
     9        {
     10                "size": "clamp(0.625rem, 0.3438rem + 0.75vw, 1rem)",
     11                "slug": "10",
     12                "name": "10"
     13        },
     14        {
     15                "size": "clamp(1rem, 0.7188rem + 0.75vw, 1.375rem)",
     16                "slug": "20",
     17                "name": "20"
     18        },
     19        {
     20                "size": "clamp(1.25rem, 0.9688rem + 0.75vw, 1.625rem)",
     21                "slug": "30",
     22                "name": "30"
     23        },
     24        {
     25                "size": "clamp(1.5rem, 1.2188rem + 0.75vw, 1.875rem)",
     26                "slug": "40",
     27                "name": "40"
     28        },
     29        {
     30                "size": "clamp(1.875rem, 1.5938rem + 0.75vw, 2.25rem)",
     31                "slug": "50",
     32                "name": "50"
     33        }
     34]
     35}}}
    736
    8 "fontSizes": [
    9                         {
    10                                 "size": "clamp(0.625rem, 0.3438rem + 0.75vw, 1rem)",
    11                                 "slug": "10",
    12                                 "name": "10"
    13                         },
    14                         {
    15                                 "size": "clamp(1rem, 0.7188rem + 0.75vw, 1.375rem)",
    16                                 "slug": "20",
    17                                 "name": "20"
    18                         },
    19                         {
    20                                 "size": "clamp(1.25rem, 0.9688rem + 0.75vw, 1.625rem)",
    21                                 "slug": "30",
    22                                 "name": "30"
    23                         },
    24                         {
    25                                 "size": "clamp(1.5rem, 1.2188rem + 0.75vw, 1.875rem)",
    26                                 "slug": "40",
    27                                 "name": "40"
    28                         },
    29                         {
    30                                 "size": "clamp(1.875rem, 1.5938rem + 0.75vw, 2.25rem)",
    31                                 "slug": "50",
    32                                 "name": "50"
    33                         }
    34                 ]
     37Then 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`.
    3538
    36 
    37 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.
    38 
    39 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.
     39Part 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.
    4040
    4141An alternative solution would be to provide a slider, similar to padding and margin resizing.