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 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
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!
... now, everything is working properly!
You actually had a typo in this block:
There’s "}" instead of "]" on the "src" definition of the first normal font that you’re defining.