Styles Reference

This is a reference to the available style properties that you can apply to the root element (global), individual elements, and individual blocks in theme.json. Please review the Applying Styles documentation to learn how to apply styles to your theme.

Border

There are two methods for working with the border style property. The first is to target all sides of a block or element with the properties shown in the table:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"border": {
			"color": "#000000",
			"style": "solid",
			"width": "1px"
		}
	}
}

The second method is to specifically target the top, right, bottom, and left sides:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"border": {
			"top": {
				"color": "#000000",
				"style": "solid",
				"width": "1px"
			}
		}
	}
}

Color

The color style property lets you define the default text, background, and link colors for a block or element:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/group": {
				"color": {
					"text": "#000000",
					"background": "#ffffff",
					"link": "#777777"
				}
			}
		}
	}
}

Dimensions

The dimensions style property lets you define the minimum height for a block or element:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/cover": {
				"dimensions": {
					"minHeight": "50vh"
				}
			}
		}
	}
}

Filter

The filter style property lets you define filters for a block or element. Currently, you can set a default duotone filter:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/image": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--default-filter)"
				}
			}
		}
	}
}

Shadow

The shadow style property lets you define the default box-shadow style for a block or element:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/heading": {
				"shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
			}
		}
	}
}

Spacing

The spacing style property lets you define the default gap, margin, and padding for a block or element:

You can define any or all of the sides (top, right, bottom, left) for the margin and padding style properties.

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"spacing": {
			"blockGap": "2rem",
			"margin": {
				"top": "2rem",
				"bottom": "2rem"
			},
			"padding": {
				"left": "2rem",
				"right": "2rem"
			}
		}
	}
}

Typography

The typography style property lets you define default font and text-related styles for a block or element:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"fontFamily": "Georgia, serif",
					"fontSize": "1.25rem",
					"fontStyle": "normal",
					"fontWeight": "500",
					"letterSpacing": "0",
					"lineHeight": "1.6",
					"textDecoration": "none"
				}
			}
		}
	}
}

CSS

The css property lets you write custom CSS directly in theme.json for a block or element:

Example usage in theme.json:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/gallery": {
				"css": "--wp--style--gallery-gap-default: 1rem;"
			}
		}
	}
}

For an in-depth look at how to use the css style property, read Per-block CSS with theme.json on the WordPress Developer Blog.