Custom properties in theme.json are key-value pairs that WordPress automatically converts into CSS variables, ensuring they’re always available across your block theme.
Define custom properties under “settings > custom” using a nested object structure. WordPress transforms these into CSS variables with predictable naming: --wp--custom--your-key-structure
with double dashes separating each level.
Organize your custom properties logically – create sections for typography, spacing, colors, or any other design tokens. Use kebab-case for keys (line-height-tiny) rather than camelCase to maintain consistent CSS variable naming.
These variables become available everywhere in your block theme – in theme.json styles, custom CSS, and throughout the editing interface. It’s a clean way to maintain design consistency and create a proper design token system.