HTML Guides for custom properties

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.

The validator also reports this error for a length minus a number multiplied by another variable, such as calc(100vw - 2 * var(--wp--style--root--padding-left)). Browsers accept that expression because the padding variable holds a length, but the validator can't see what var() contains. Subtracting each padding variable on its own gives the same width when the left and right paddings are equal, and the validator accepts it.

To fix the error, edit contentSize in theme.json (or the content width in the Site Editor): add the missing unit, or replace the multiplication with separate subtractions.

A unitless number subtracted from a length

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>

A multiplied variable subtracted from a length

Invalid example

<style>

body {

--wp--style--global--content-size: min(calc(100vw - 2 * var(--wp--style--root--padding-left)), 720px);

}

</style>

Valid example

<style>

body {

--wp--style--global--content-size: min(calc(100vw - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right)), 720px);

}

</style>