Customized the editor font sizes

  • Hello,

    I am not using the default twenty twenty two theme, but I am using a custom theme that I have built, so it doesn’t have the full site editing features. I am using the Gutenberg editor to create pages and have created some Blocks using ACF Pro.

    I have customized the editor font sizes using the code below:

    add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'platetheme' ),
        'shortName' => __( 'S', 'platetheme' ),
        'size' => "1rem",
        'slug' => 'small'
    ),
    array(
        'name' => __( 'regular', 'platetheme' ),
        'shortName' => __( 'M', 'platetheme' ),
        'size' => "1.125rem",
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'large', 'platetheme' ),
        'shortName' => __( 'L', 'platetheme' ),
        'size' => "1.75rem",
        'slug' => 'large'
    ),
    array(
        'name' => __( 'larger', 'platetheme' ),
        'shortName' => __( 'XL', 'platetheme' ),
        'size' =>  "2rem",
        'slug' => 'larger'
    )
) );

    This works and it’s showing the updates in the editor page, but the ‘shortName’ parameter isn’t working.
    From this screenshot (https://snipboard.io/8PRDsX.jpg), you can see that the Typography sizes are using the updated font sizes as the label, but I would like to use S, M, L and XL as the labels. I thought using the shortName parameters will do that, but it doesn’t work. What should I use to change the label to use the letters instead of the font sizes?

    Thank you!

Viewing 1 replies (of 1 total)
  • Thread Starter rose18

    (@rose18)

    Thank you @kathiecs ! But I am not looking to change the font size in the WordPress posts or pages. I want to change the labels on the Typography sizes to S,M,L,XL (see screenshot : https://snipboard.io/8PRDsX.jpg).
    This is an additional block support feature for Gutenberg blocks when you add in the code from above and when you add in this code to where you register your custom wp blocks:

    supports => [
    'typography' =>  [
        // Enable support and UI control for font-size.
        'fontSize'=> true,
        // Enable support and UI control for line-height.
        'lineHeight'=> true,
    ],
]

    The font size UI is showing up, but just want to change the label to S,M,L,XL instead of using the font-sizes as the label. (screenshot: https://snipboard.io/8PRDsX.jpg)

Viewing 1 replies (of 1 total)
  • The topic ‘Customized the editor font sizes’ is closed to new replies.