HTML Guides for WordPress
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
The value of the --wp--style--global--content-size custom property has a math expression that combines values of incompatible types.
WordPress block themes create this variable from the content width in theme.json (settings.layout.contentSize), or from the layout width set in the Site Editor. WordPress copies that value into a <style> element without changing it, so the validator checks exactly what the theme or the site settings contain.
A custom property can hold almost any value, so the validator doesn't care whether the result is a length. It does check the math inside calc(), min(), max() and clamp(): when you add or subtract two values, both must have the same type. Subtracting a unitless number from a length, as in calc(720px - 40), triggers this error. Browsers reject that expression too. Every property that reads the variable through var() becomes invalid at computed-value time and behaves as if it were unset, so the content width setting stops working.
To fix the error, edit contentSize in theme.json (or the content width in the Site Editor) and add the missing unit.
Invalid example
<style>
body {
--wp--style--global--content-size: calc(720px - 40);
}
</style>
Valid example
<style>
body {
--wp--style--global--content-size: calc(720px - 40px);
}
</style>
The value of the --wp--style--global--wide-size custom property has a math expression that combines values of incompatible types.
WordPress block themes create this variable from the wide width in theme.json (settings.layout.wideSize), or from the wide width set in the Site Editor. It controls how far blocks with the "Wide width" alignment can stretch. WordPress copies the value into a <style> element as is, so the validator checks exactly what the theme or the site settings contain.
A custom property can hold almost any value, and the validator doesn't check whether the result is a length. It does check the math inside calc(), min(), max() and clamp(), where every value you add, subtract or compare must have the same type. A unitless number next to a length breaks that rule, as in calc(1200px - 40) or clamp(800px, 90vw, 1200). Browsers reject those expressions too: any property that reads the variable through var() becomes invalid at computed-value time and acts as if it were unset. Wide blocks then lose their maximum width.
To fix the error, edit wideSize in theme.json (or the wide width in the Site Editor) and add the missing unit.
Invalid example
<style>
body {
--wp--style--global--wide-size: calc(1200px - 40);
}
</style>
Valid example
<style>
body {
--wp--style--global--wide-size: calc(1200px - 40px);
}
</style>
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
1K Weekly
1,000 monthly checks. Cancel anytime.
Get 1K Weekly →Join teams across 40+ countries