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

Question

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:

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

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.

Answer 1

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

Eg. Using px

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

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.