Question 30380 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Font size names and defaults from theme.json for paragraph blocks in WordPress

I am using theme.json to set font sizes for paragraph blocks, like so…

...
"core/paragraph": {
    "typography": {
        "customFontSize": false,
        "customLineHeight": false,
        "dropCap": true,
        "fontSizes": [
            {
                "name": "Small",
                "slug": "small",
                "size": "clamp(14px, 1.25, 28px)"
            },
            {
                "name": "Medium",
                "slug": "medium",
                "size": "18px"
            }
        ]
    }
},
...

This works fine and the font sizes are selectable when a paragraph is added to the page, but the font size names come through as integers, 1 & 2:

paragraph font sizes

When I change the value of small to be a pixel size like 14px then the names are the pixel sizes without ‘px’:

paragraph font sizes

Two questions:

  • How can I set meaningful font size names to appear in the editor sidebar?
  • How can I set a default font size that is pre-selected?

Thanks.

Tags:

2

Answers


  1. 0

    In your example with "small" set to clamp(14px, 1.25, 28px) the Font Size Picker component attempts to convert the value to an integer but unfortunately, parseInt() does not like "clamp". Instead, the index of the selected font size is displayed in the UI. If you use sizes that are px or em it will display an integer value as expected.

    Eg. Using clamp

    Using clamp

    Eg. Using px

    Using pixels

    If you have more than five font sizes set, the component will instead render a drop down list / select of the font size names:

    More than five font sizes

    It’s potentially an oversight in the way "clamp" is handled, but also there are many changes happening to theme.json and building block based themes is still very much in development, so this could change..

    Tested in WordPress 5.9.2, no Gutenberg plugin.

    Login or Signup to reply.
  2. 0

    I like the direction that Gutenberg is heading, but it’s unpolished things like this that really highlight that it’s still beta software. I had a client email me today who had accidentally changed the font size of a paragraph, and wasn’t sure how to fix it up – all she could see were some font size buttons labeled "1", "2" and "3". Sure, hovering over the buttons shows the label as a tooltip but this is a pretty broken user interface.

    I added a bit of hacky CSS to sort it out for now (I’m sure this will break with the next Gutenberg release…):

    /* use the font size name as the button label */
.components-font-size-picker__controls button::after {
    content: attr(aria-label);
}

/* hide the original label ("1", "2", ...) and the tooltip */
.components-font-size-picker__controls button div,
.components-font-size-picker__controls button span {
        display: none;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search