theme.json only displays in backend editor

  • I haven’t used theme.json for at least 6 months. I’m playing around with it again and me and my coworker have run into the issue that it only loads the styles from theme.json in the admin editor (see above screenshot).

    It does not load the styles in the front end.

    If I put my theme.json in twentytwentytwo or twentytwentythree it works fine so I know the issue is not with the json file itself. Additionally, I made sure there were no errors in my json. But there’s nothing in the documentation saying that you need to do anything else to make theme.json work. Just having the file exist should be enough. When I used theme.json in the past it worked like this.

    Just to be safe I added add_theme_support( ‘wp-block-styles’ ); to my theme but it didn’t help either.

    What needs to be added to the theme to make theme.json load on the front end?

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi, do u have a templates/index.html file?

    Thread Starter pinksharpii

    (@pinksharpii)

    I did not have a templates/index.html file

    I created one but it didn’t change the front end.

    Try adding this in yourtheme/functions.php

    add_action( 'wp_enqueue_scripts', 'mytheme_add_style' );
function mytheme_add_style() {
	wp_enqueue_style('theme-css', get_stylesheet_uri(), [], wp_get_theme()->get('Version'));
}
    Thread Starter pinksharpii

    (@pinksharpii)

    the issue isn’t that my theme style.css isn’t being output. It’s that theme.json isn’t outputting the CSS it’s supposed to on the front end.

    Can you share your theme.json? (To be clear, you miss typography and colors for instance?)

    Most settings from theme.json can be overidden via the wp FSE backoffice (https://ezoulou.com/wp-admin/site-editor.php) > theme options (moon like icon). Did you check there?

    Thread Starter pinksharpii

    (@pinksharpii)

    The Site Editor isn’t available on my site. I don’t have my theme setup as a Block Theme. When theme.json first came out this wasn’t a requirement – as long as the file existed, the styles that were declared in it were output on the front end. Is it expected that to use theme.json fully the theme needs to be a block theme now? I don’t see anything in the documentation for theme.json saying it needs to be a Block Theme.

    {
    "version": 2,
    "settings": {
        "color": {
            "custom": false,
            "defaultPalette": false,
            "duotone": [],
            "gradients": [],
            "palette": [
                {
                    "slug": "black",
                    "color": "#24242D",
                    "name": "Black"
                },
                {
                    "slug": "white",
                    "color": "#ffffff",
                    "name": "White"
                },
                {
                    "slug": "maroon",
                    "color": "#4d191f",
                    "name": "Maroon"
                }
            ]
        },
        "spacing": {
            "blockGap": true
        },
        "typography": {
            "dropCap": false,
            "customFontSize": false,
            "textTransform": false,
            "fontWeight": false,
            "fontStyle": false,
            "letterSpacing": false,
            "lineHeight": false,
            "fontSizes": []
        },
        "layout": {
            "contentSize": "1200px",
            "wideSize": "1400px"
        },
        "blocks": {
            "core/paragraph": {
                "color": {
                    "palette": [],
                    "background": false
                }
            },
            "core/heading": {
                "color": {
                    "palette": [],
                    "background": false
                },
                "typography": {
                    "fontSizes": []
                }
            },
            "core/button": {
                "border": {
                    "radius": false
                }
            }
        }
    },
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--maroon)",
            "text": "var(--wp--preset--color--white)"
        },
        "typography": {
            "fontSize": "18px",
            "lineHeight": "1.6em"
        },
        "spacing": {
            "blockGap": "3rem"
        },
        "elements": {
            "link": {
                "color": {
                    "text": "var(--wp--preset--color--white)"
                }
            },
            "h1": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-1)",
                    "lineHeight": "1.1em"
                }
            },
            "h2": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-2)",
                    "lineHeight": "1.2em"
                }
            },
            "h3": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-3)",
                    "lineHeight": "1.3em"
                }
            },
            "h4": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-4)",
                    "lineHeight": "1.4em"
                }
            },
            "h5": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-5)",
                    "lineHeight": "1.5em"
                }
            },
            "h6": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--h-6)",
                    "lineHeight": "1.6em"
                }
            }
        }
    }
}

    There must be some sort of conflict somewhere then.
    How about either convert your theme into a block theme OR keep your theme but define your styles in a simple style.css file?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘theme.json only displays in backend editor’ is closed to new replies.