theme.json
trunkSchema URL
Properties
Version of theme.json to use.
JSON schema URI for theme.json.
Title of the styles variation. If not defined, the file name will be used.
Slug of the styles variation. If not defined, the kebab-case title will be used.
Description of the styles variation.
List of block types that can use the block style variation this theme.json file represents.
Settings for the block editor and individual blocks. These include things like:
- Which customization options should be available to the user.
- The default colors, font sizes... available to the user.
- CSS custom properties and class names used in styles.
- And the default layout of the editor (widths and available alignments).
Organized way to set CSS properties. Styles in the top-level will be added in the body selector.
Additional metadata for custom templates defined in the templates folder.
Additional metadata for template parts defined in the parts folder.
An array of pattern slugs to be registered from the Pattern Directory.
Definitions
A reference to another property value. e.g. styles.color.text
Setting that enables the following UI tools:
- background: backgroundImage, backgroundSize
- border: color, radius, style, width
- color: link, heading, button, caption
- dimensions: aspectRatio, height, minHeight, width
- position: sticky
- spacing: blockGap, margin, padding
- typography: lineHeight
Settings related to background.
3 nested properties
Allow users to set a background image.
Allow users to set values related to the size of a background image, including size, position, and repeat controls.
Allow users to set a gradient background.
Settings related to borders.
5 nested properties
Allow users to set custom border colors.
Allow users to set custom border radius.
Allow users to set custom border styles.
Allow users to set custom border widths.
Border radius size presets for the border radius selector.
Generates a custom property (--wp--preset--border-radius--{slug}) per preset value.
Settings related to colors.
15 nested properties
Allow users to set background colors.
Allow users to select custom colors.
Allow users to create custom duotone filters.
Allow users to create custom gradients.
Allow users to choose filters from the default duotone filter presets.
Allow users to choose colors from the default gradients.
Allow users to choose colors from the default palette.
Duotone presets for the duotone picker. Doesn't generate classes or properties.
Gradient presets for the gradient picker.
Generates a single class (.has-{slug}-background) and custom property (--wp--preset--gradient--{slug}) per preset value.
Allow users to set link colors in a block.
Color palette presets for the color picker.
Generates three classes (.has-{slug}-color, .has-{slug}-background-color, and .has-{slug}-border-color) and a single custom property (--wp--preset--color--{slug}) per preset value.
Allow users to set text colors in a block.
Allow users to set heading colors in a block.
Allow users to set button colors in a block.
Allow users to set caption colors in a block.
Settings related to dimensions.
7 nested properties
Allow users to set an aspect ratio.
Allow users to choose aspect ratios from the default set of aspect ratios.
Allow users to define aspect ratios for some blocks.
Allow users to set custom height.
Allow users to set custom minimum height.
Allow users to set custom width.
Dimension size presets for dimension block supports.
Generates a custom property (--wp--preset--dimension--{slug}) per preset value.
Settings related to layout.
4 nested properties
Sets the max-width of the content.
Sets the max-width of wide (.alignwide) content. Also used as the maximum viewport when calculating fluid font sizes
Disable the layout UI controls.
Enable or disable the custom content and wide size controls.
Settings related to the lightbox.
2 nested properties
Defines whether the lightbox is enabled or not.
Defines whether to show the Lightbox UI in the block editor. If set to false, the user won't be able to change the lightbox settings in the block editor.
Settings related to position.
1 nested properties
Allow users to set sticky position.
Settings related to shadows.
2 nested properties
Allow users to choose shadows from the default shadow presets.
Shadow presets for the shadow picker.
Generates a single custom property (--wp--preset--shadow--{slug}) per preset value.
Settings related to spacing.
8 nested properties
Enables --wp--style--block-gap to be generated from styles.spacing.blockGap.
A value of null instead of false further disables layout styles from being generated.
Allow users to set a custom margin.
Allow users to set a custom padding.
List of units the user can use for spacing values.
[
"px",
"em",
"rem",
"vh",
"vw",
"%"
]Allow users to set custom space sizes.
Allow users to choose space sizes from the default space size presets.
Space size presets for the space size selector.
Generates a custom property (--wp--preset--spacing--{slug}) per preset value.
Settings to auto-generate space size presets for the space size selector. Generates a custom property (--wp--preset--spacing--{slug}`) per preset value.
5 nested properties
With + or * depending on whether scale is generated by increment or multiplier.
The amount to increment each step by.
Number of steps to generate in scale.
The value to medium setting in the scale.
Unit that the scale uses, eg. rem, em, px.
Settings related to typography.
16 nested properties
Allow users to choose font sizes from the default font size presets.
Allow users to set custom font sizes.
Allow users to set custom font styles.
Allow users to set custom font weights.
Enables fluid typography and allows users to set global fluid typography parameters.
Allow users to set custom letter spacing.
Allow users to set custom line height.
Allow users to set custom line indent.
Allow users to set the text align.
Allow users to set the number of text columns.
Allow users to set custom text decorations.
Allow users to set the writing mode.
Allow users to set custom text transforms.
Enable drop cap.
Font size presets for the font size selector.
Generates a single class (.has-{slug}-color) and custom property (--wp--preset--font-size--{slug}) per preset value.
Font family presets for the font family selector.
Generates a single custom property (--wp--preset--font-family--{slug}) per preset value.
Generate custom CSS custom properties of the form --wp--custom--{key}--{nested-key}: {value};. camelCased keys are transformed to kebab-case as to follow the CSS property naming schema. Keys at different depth levels are separated by --, so keys should not include -- in the name.
Settings defined on a per-block basis.
Generate custom CSS custom properties of the form --wp--custom--{key}--{nested-key}: {value};. camelCased keys are transformed to kebab-case as to follow the CSS property naming schema. Keys at different depth levels are separated by --, so keys should not include -- in the name.
Background styles.
5 nested properties
Sets the background-image CSS property.
Sets the background-position CSS property.
Sets the background-repeat CSS property.
Sets the background-size CSS property.
Sets the background-attachment CSS property.
Border styles.
8 nested properties
Sets the border-color CSS property.
Sets the border-radius CSS property.
Sets the border-style CSS property.
Sets the border-width CSS property.
3 nested properties
Sets the border-top-color CSS property.
Sets the border-top-style CSS property.
Sets the border-top-width CSS property.
3 nested properties
Sets the border-right-color CSS property.
Sets the border-right-style CSS property.
Sets the border-right-width CSS property.
3 nested properties
Sets the border-bottom-color CSS property.
Sets the border-bottom-style CSS property.
Sets the border-bottom-width CSS property.
3 nested properties
Sets the border-left-color CSS property.
Sets the border-left-style CSS property.
Sets the border-left-width CSS property.
Color styles.
3 nested properties
Sets the background-color CSS property.
Sets the background CSS property.
Sets the color CSS property.
Sets custom CSS to apply styling not covered by other theme.json properties.
Dimensions styles.
4 nested properties
Sets the aspect-ratio CSS property.
Sets the height CSS property.
Sets the min-height CSS property.
Sets the width CSS property.
CSS and SVG filter styles.
1 nested properties
Sets the duotone filter.
Outline styles.
4 nested properties
Sets the outline-color CSS property.
Sets the outline-offset CSS property.
Sets the outline-style CSS property.
Sets the outline-width CSS property.
Box shadow styles.
Spacing styles.
3 nested properties
Sets the --wp--style--block-gap CSS custom property when settings.spacing.blockGap is true.
Margin styles.
4 nested properties
Sets the margin-top CSS property.
Sets the margin-right CSS property.
Sets the margin-bottom CSS property.
Sets the margin-left CSS property.
Padding styles.
4 nested properties
Sets the padding-top CSS property.
Sets the padding-right CSS property.
Sets the padding-bottom CSS property.
Sets the padding-left CSS property.
Typography styles.
12 nested properties
Sets the font-family CSS property.
Sets the font-size CSS property.
Sets the font-style CSS property.
Sets the font-weight CSS property.
Sets the letter-spacing CSS property.
Sets the line-height CSS property.
Sets the text-indent CSS property.
Sets the text-align CSS property.
Sets the column-count CSS property.
Sets the text-decoration CSS property.
Sets the writing-mode CSS property.
Sets the text-transform CSS property.
Custom class-based block states using the '@' prefix. Each state supports style properties as well as the same pseudo-selectors available to the block.
Styles applied to the current/active item (e.g. .current-menu-item in navigation).
Styles defined on a per-element basis using the element's selector.
Styles defined on a per-block basis using the block's selector.