block editor – Setting font sizes in theme.json

Question

Just diving into setting some styles with theme.json. I’m having trouble getting my preferred font sizes to show up in the editor. Here’s the code:

{
    "version": 2,
    "settings": {
        "typography": {
            "fontSizes": [
                {
                    "slug": "small",
                    "size": ".875em",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "1em",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "1.125em",
                    "name": "Large"
                },
                {
                    "slug": "x-large",
                    "size:": "1.25em",
                    "name": "X Large"
                }
            ]
        }
    }
}

But the block editor panel shows this:

enter image description here

I’m confused about why it shows both “Default” and “X Large” for the final value, and why the number disappears rather than showing as selected (the other three sizes will be highlighted appropriately when selected).

Additionally, rather than applying the X Large font size, it applies the Medium font size (presumably the “default”, which I haven’t set elsewhere in theme.json to my knowledge).

0
nickfindley 1 month 2022-07-16T05:04:49-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse