skip to Main Content

Hello Stackoverflow Users,

I’m trying to create a WordPress 6.0 Fullsite Editing Theme. But I am running into a issue which is driving me crazy.

I enabled a color palette in my theme.json file and can select the colors within the gutenberg editor. The Backend is even showing the correct colors.

Correct Colors within Gutenberg Editor

The frontend doesn’t show the chosen colors from the Color pallete though. The Class is applied, but the color doesn’t show up in the CSS.

No Color applied in the Frontend

If I apply a custom color from the color pallette, everything is working fine though.

Custom Colors are working

Custom Colors are working in the frontend

So I suspect, something in my theme.json is wrong.
Does someone has an Idea, what could cause this issue?

    {
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "appearanceTools": true,
        "color": {
            "defaultPalette": false,
            "defaultGradients": false,
            "link": true,
            "custom": true,
            "background": true,
            "duotone": [
            ],
            "palette": [
                {
                    "slug": "white",
                    "color": "#ffffff",
                    "name": "Weiß"
                },
                {
                    "slug": "primary",
                    "color": "#D4B86A",
                    "name": "Akzentfarbe"
                },
                {
                    "slug": "black",
                    "color": "#000",
                    "name": "Schwarz"
                },
                {
                    "slug": "lightgrey",
                    "color": "#ECECEC",
                    "name": "Helles Grau"
                },
                {
                    "slug": "grey",
                    "color": "#D9D9D9",
                    "name": "Grau"
                },
                {
                    "slug": "darkgrey",
                    "color": "#3E3E3E",
                    "name": "Dunkles Grau"
                },
                {
                    "slug": "transparent",
                    "color": "rgba(255, 255, 255, 0)",
                    "name": "Transparent"
                }
            ],
            "gradients": [
                {
                    "slug": "",
                    "gradient": "",
                    "name": ""
                }
            ]
        },
        "spacing": {
            "units": [
                "%",
                "px",
                "em",
                "rem",
                "vh",
                "vw"
            ]
        },
        "layout": {
            "contentSize": "800px",
            "wideSize": "1425px"
        },
        "typography": {
            "dropCap": false,
            "fontFamilies": [
                {
                    "fontFamily": "Jost",
                    "name": "Jost",
                    "slug": "jost",
                    "fontFace": [
                        {
                            "fontFamily": "Jost",
                            "fontWeight": "300 400 700",
                            "fontStyle": "normal",
                            "src": [ "file:./assets/fonts/../fonts/jost-v13-latin-regular.woff2" ]
                        },
                        {
                            "fontFamily": "Jost",
                            "fontWeight": "300 400 700",
                            "fontStyle": "italic",
                            "src": [ "file:./assets/fonts/jost-v13-latin-300italic.woff2" ]
                        }
                    ]
                },
                {
                    "fontFamily": "brandon-grotesque",
                    "name": "Brandon-grotesque",
                    "slug": "brandon-grotesque",
                    "fontFace": [
                        {
                            "fontFamily": "brandon-grotesque",
                            "fontWeight": "400 700",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": [ "https://use.typekit.net/af/XXXXXXXXXXXXX"},
                        {
                            "fontFamily": "brandon-grotesque",
                            "fontWeight": "400 700",
                            "fontStyle": "italic",
                            "fontStretch": "normal",
                            "src": [ "https://use.typekit.net/af/32d3ee/XXXXXXXXXXX" ]
                        }
                    ]
                }
            ],
            "fontSizes": [
                {
                    "size": "0.8rem",
                    "slug": "small",
                    "name": "Kleine Schrift"
                },
                {
                    "size": "clamp(1rem, 1rem + 2px, 1.2rem)",
                    "slug": "normal",
                    "name": "Standard"
                },
                {
                    "size": "clamp(0.8rem, 1rem + 4px, 1.3rem)",
                    "slug": "medium",
                    "name": "Standard"
                },
                {
                    "size": "clamp(1.2rem, 1rem + 1vw, 1.4rem)",
                    "slug": "large",
                    "name": "Große Schrift"
            
                },
                {
                    "size": "clamp(1.2rem, 1rem + 1vw, 1.5rem)",
                    "slug": "x-large",
                    "name": "Sehr große Schrift"
                }
            ],
            "customFontSize": true
        },
        "custom": {
            "spacing": {
                "small": "",
                "medium": "",
                "large": "",
                "outer": "20px"
            },
            "typography": {
                "font-size": {
                    "huge": "clamp(2.25rem, 4vw, 2.75rem)",
                    "gigantic": "clamp(2rem, 45px, 3rem)",
                    "colossal": "clamp(3.25rem, 8vw, 6.25rem)"
                },
                "line-height": {
                    "tiny": 1.0,
                    "small": 1.1,
                    "medium": 1.3,
                    "normal": 1.4,
                    "large": 1.6
                }
            }
        }
    },
    "styles": {
        "spacing":{
            "blockGap": "1.5rem"
        },
        "typography": {
            "fontSize": "var(--wp--custom--typography--font-size--normal",
            "fontFamily": "var(--wp--preset--font-family--jost)",
            "lineHeight": "var(--wp--custom--typography--line-height--normal)"
        },
        "elements": {
            "h1": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--jost)",
                    "fontWeight": "700",
                    "lineHeight": "var(--wp--custom--typography--line-height--medium)",
                    "fontSize": "var(--wp--custom--typography--font-size--gigantic)"
                }
            },
            "h2": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--jost)",
                    "fontWeight": "700",
                    "lineHeight": "var(--wp--custom--typography--line-height--medium)",
                    "fontSize": "var(--wp--custom--typography--font-size--gigantic)"
                }
            },
            "h3": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--jost)",
                    "fontWeight": "700",
                    "lineHeight": "var(--wp--custom--typography--line-height--medium)",
                    "fontSize": "var(--wp--custom--typography--font-size--gigantic)"
                }
            },
            "h4": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--jost)",
                    "fontWeight": "700",
                    "lineHeight": "var(--wp--custom--typography--line-height--medium)",
                    "fontSize": "var(--wp--custom--typography--font-size--gigantic)"
                }
            },
            "h5": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--jost)",
                    "fontWeight": "700",
                    "lineHeight": "var(--wp--custom--typography--line-height--medium)",
                    "fontSize": "var(--wp--custom--typography--font-size--gigantic)"
                }
            },
            "h6": {
                "typography": {
                    "fontFamily": "var(--wp--preset--font-family--jost)",
                    "fontWeight": "700",
                    "lineHeight": "var(--wp--custom--typography--line-height--medium)",
                    "fontSize": "var(--wp--custom--typography--font-size--gigantic)"
                }
            },
            "link": {
                "color": {
                    "text": "var(--wp--preset--color--primary)"
                }
            }
        },
        "blocks": {}
    },
    "templateParts": [
        {
            "name": "header",
            "title": "Header",
            "area": "header"
        },
        {
            "name": "footer",
            "title": "Footer",
            "area": "footer"
        }
    ],
    "customTemplates": [
        {
            "name": "",
            "title": "",
            "postTypes": [ "post","page" ]
        }
    ]
}

2

Answers


  1. Chosen as BEST ANSWER

    I found the issue. The Issue was caused by a syntax error inside of my theme.json.

    The CSS Variables generated from your theme.json will be accessible in your htmls body tag. As I was checking the outputted CSS, i noticed, that the CSS Classes are actually existing, but was loaded in the wrong css property.

    Css Variables within FontSize? Must be wrong!

    So I checked all the fontSize properties, and found a missing bracket!

     "typography": {
                "fontSize": "var(--wp--custom--typography--font-size--normal"**)**,
                "fontFamily": "var(--wp--preset--font-family--jost)",
                "lineHeight": "var(--wp--custom--typography--line-height--normal)"
            },
    

    ... now, everything is working properly!


  2. You actually had a typo in this block:

    {
                    "fontFamily": "brandon-grotesque",
                    "name": "Brandon-grotesque",
                    "slug": "brandon-grotesque",
                    "fontFace": [
                        {
                            "fontFamily": "brandon-grotesque",
                            "fontWeight": "400 700",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": [ "https://use.typekit.net/af/XXXXXXXXXXXXX"},
                        {
                            "fontFamily": "brandon-grotesque",
                            "fontWeight": "400 700",
                            "fontStyle": "italic",
                            "fontStretch": "normal",
                            "src": [ "https://use.typekit.net/af/32d3ee/XXXXXXXXXXX" ]
                        }
                    ]
                }
    

    There’s "}" instead of "]" on the "src" definition of the first normal font that you’re defining.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search