Convert theme options to theme.json

[thetwopct]

WP5.8 started to use theme.json to control block editor options. This should remove much of the Gutenberg options from the theme and allow for granular control of settings per block.

However the way it works is not compatible with our current design and layout.

• It forces us to set a layout content width, so our width restricted paragraph and headings are misaligned inside it on both frontend and backend
• It breaks align wide and full block options (if content width is not set, those alignment options disappear, even when add_theme_support( 'align-wide' ) is set)
• It breaks the way groups work (full width groups now align content to the edges instead of in a container, using a new inner layout option restricts width but centres all content)

Our group layouts look like this using theme.json

The new group inner layout options

Using the default layout option for a group generates inline CSS which centres all content (see Latest news... title)

To adopt the theme.json option we need to either:

• wait for a fix of add_theme_support( 'align-wide' ) being recognised when using theme.json and we can continue using our current layout
• we change the website design to be a centered design and forget the content width with left align and restricted content width.

Another approach that fails:

• we change all full width groups to have a normal group inside it that restricts content. This does not work as currently child blocks of a full width block don't have alignment options.

Related issue on Github
WordPress/gutenberg#33374

Related on Trac
https://core.trac.wordpress.org/ticket/53563
https://core.trac.wordpress.org/ticket/53748

[thetwopct]

Here's our WIP theme.json file for any future reference:

{
    "version": 1,
    "settings": {
        "layout": {
            "contentSize": "1100px",
            "wideSize": "1200px"
        },
        "color": {
            "custom": false,
            "customDuotone": false,
            "duotone": [],
            "customGradient": false,
            "gradients": [],
            "palette": [
                {
                    "slug": "pink-400",
                    "color": "#ff00aa",
                    "name": "Pink"
                },
                {
                    "slug": "purple-700",
                    "color": "#2a0054",
                    "name": "Purple"
                },
                {
                    "slug": "tertiary-400",
                    "color": "#0088ff",
                    "name": "Blue"
                },
                {
                    "slug": "blue-100",
                    "color": "#f4f4f4",
                    "name": "Blue (Light)"
                },
                {
                    "slug": "white",
                    "color": "#FFFFFF",
                    "name": "White"
                },
                {
                    "slug": "black",
                    "color": "#202020",
                    "name": "Black"
                }
            ]
        },
        "border": {
            "customColor": false,
            "customRadius": false,
            "customStyle": false,
            "customWidth": false
        },
        "typography": {
            "customFontSize": false,
            "customLineHeight": false,
            "dropCap": false,
            "customFontStyle": false,
            "customFontWeight": false,
            "customTextDecorations": false,
            "customTextTransforms": false,
            "fontSizes": [
                {
                    "name": "Smallest",
                    "slug": "smallest",
                    "size": "13px"
                },
                {
                    "name": "small",
                    "slug": "small",
                    "size": "14px"
                },
                {
                    "name": "Normal",
                    "slug": "normal",
                    "size": "16px"
                },
                {
                    "name": "H5 Size",
                    "slug": "header-5",
                    "size": "18px"
                },
                {
                    "name": "H4 Size",
                    "slug": "header-4",
                    "size": "20px"
                },
                {
                    "name": "H3 Size",
                    "slug": "header-3",
                    "size": "24px"
                },
                {
                    "name": "H2 Size",
                    "slug": "header-2",
                    "size": "36px"
                },
                {
                    "name": "Huge",
                    "slug": "huge",
                    "size": "42px"
                }
            ]
        },
        "spacing": {
            "customMargin": false,
            "customPadding": false
        },
        "custom": {
            "font-primary": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto, Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
        },
        "blocks": {
            "core/group": {
                "color": {},
                "custom": {},
                "layout": {},
                "spacing": {},
                "typography": {}
            }
        }
    },
    "styles": {
        "color": {
            "text": "var(--wp--preset--color--purple-700)"
        },
        "typography": {
            "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto, Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
        }
    },
    "customTemplates": {},
    "templateParts": {}
}

[thetwopct]

"its not a bug, it's a feature" is the WP line. So we won't be using theme.json to control the theme until we redesign.

[sdwire]

Let me see if I'm understanding the above conversation correctly. Here's what I think I understand, and I hope I'm wrong...

1. There are some theme behaviors that can be triggered only by including theme.json
2. Only static decisions can be encoded in theme.json, and there's no filter available for a theme to override its contents at runtime.
3. As soon as the static theme.json file exists, WordPress starts ignoring add_theme_support() calls that can be specified in theme.json.

Am I missing something? Does this mean that as soon as I want my theme to start supporting a feature that depends on declaring theme.json, I suddenly lose any ability for my theme to make behavioral decisions at runtime?

Please tell me I've misunderstood.

[thetwopct]

Hey @sdwire let me see if I can help you out

1. Correct. theme.json gives you lots of control over styling and element options that are currently unavailable through filters or functions in WordPress. From what one of their team leads suggested, these options will never be converted to traditional methods as they are so connected with how the theme.json works.
2. Correct. theme.json is the only source of truth, and apart from css variables doesn't appear to be dynamic.
3. Correct. All decisions are pushed to theme.json should it exist, anything in functions.php is simply ignored.

This is why for the CNCF website, which runs on WordPress and uses the Block Editor, there are several styles and layouts that cannot be replicated with theme.json as show above (as it stood the last I looked at it). We are currently redesigning the site (a coincidence) and that "should" allow us to use theme.json. We'll find out in the coming weeks!

[cjyabraham]

Sounds like we are not going this route with our new theme so will close