Spacing in theme.json

Content and wide settings

"settings": {
	"layout": {
		"contentSize": "840px",
		"wideSize": "1100px"
	}
}

Other examples:

  • Default (wp-includes/theme.json) Not set
  • 2024 Theme – 620 & 1280
  • Ollie theme – 740 & 1260

Default spacing amounts

Default settings:

"spacing": {
	"blockGap": null,
	"margin": false,
	"padding": false,
	"customSpacingSize": true,
	"defaultSpacingSizes": true,
	"units": [ "px", "em", "rem", "vh", "vw", "%" ],
	"spacingScale": {
		"operator": "*",
		"increment": 1.5,
		"steps": 7,
		"mediumStep": 1.5,
		"unit": "rem"
	}
},

Notes:

Default spacing is off if your theme is not overriding it.


2024 Theme:

"spacing": {
	"spacingScale": {
		"steps": 0
	},
	"spacingSizes": [
		{
			"name": "1",
			"size": "1rem",
			"slug": "10"
		},
		{
			"name": "2",
			"size": "min(1.5rem, 2vw)",
			"slug": "20"
		},
		{
			"name": "3",
			"size": "min(2.5rem, 3vw)",
			"slug": "30"
		},
		{
			"name": "4",
			"size": "min(4rem, 5vw)",
			"slug": "40"
		},
		{
			"name": "5",
			"size": "min(6.5rem, 8vw)",
			"slug": "50"
		},
		{
			"name": "6",
			"size": "min(10.5rem, 13vw)",
			"slug": "60"
		}
	],
	"units": ["%", "px", "em", "rem", "vh", "vw"]
},

Notes:

min(1.5rem, 2vw); means whatever is smaller 1.5rem or 2vw, so after viewport width is bigger than 1200 the measurement is 1.5rem

as there are 6 steps the vars are:

--wp--preset--spacing--10: 1rem;
--wp--preset--spacing--20: min(1.5rem, 2vw);
--wp--preset--spacing--30: min(2.5rem, 3vw);
--wp--preset--spacing--40: min(4rem, 5vw);
--wp--preset--spacing--50: min(6.5rem, 8vw);
--wp--preset--spacing--60: min(10.5rem, 13vw);
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;

Ollie Theme:

"spacing": {
	"spacingSizes": [
		{
			"name": "Small",
			"size": "clamp(.5rem, 2.5vw, 1rem)",
			"slug": "small"
		},
		{
			"name": "Medium",
			"size": "clamp(1.5rem, 4vw, 2rem)",
			"slug": "medium"
		},
		{
			"name": "Large",
			"size": "clamp(2rem, 5vw, 3rem)",
			"slug": "large"
		},
		{
			"name": "Extra Large",
			"size": "clamp(3rem, 7vw, 5rem)",
			"slug": "x-large"
		},
		{
			"name": "2xl",
			"size": "clamp(4rem, 9vw, 7rem)",
			"slug": "xx-large"
		},
		{
			"name": "3xl",
			"size": "clamp(5rem, 12vw, 9rem)",
			"slug": "xxx-large"
		},
		{
			"name": "4xl",
			"size": "clamp(6rem, 14vw, 13rem)",
			"slug": "xxxx-large"
		}
	],
	"units": [
		"px",
		"em",
		"rem",
		"vh",
		"vw",
		"%"
	],
	"blockGap": true,
	"padding": true,
	"margin": true
},

Notes:

Names make more sense here: –wp–preset–spacing–medium

Clamp has a minamount eg 24 px a max of 32 px so between 600wide and 800wide it is 4vw eg 700 wide is 28px

2025 seem to be using this naming format and uses clamp but frustratingly has gone with regular instead of medium

For more on clamp https://utopia.fyi/

I think my preference would probably be:

"spacing": {
	"spacingSizes": [
		{
			"name": "Tiny",
			"size": "clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem)",
			"slug": "tiny"
		},
		{
			"name": "Extra Small",
			"size": "clamp(0.5rem, 0.413rem + 0.4348vw, 0.75rem)",
			"slug": "x-small"
		},
		{
			"name": "Small",
			"size": "clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem)",
			"slug": "small"
		},
		{
			"name": "Medium",
			"size": "clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem)",
			"slug": "medium"
		},
		{
			"name": "Large",
			"size": "clamp(2rem, 1.6522rem + 1.7391vw, 3rem)",
			"slug": "large"
		},
		{
			"name": "Extra Large",
			"size": "clamp(2.5rem, 2.0652rem + 2.1739vw, 3.75rem)",
			"slug": "x-large"
		},
		{
			"name": "2xl",
			"size": "clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem)",
			"slug": "xx-large"
		},
		{
			"name": "3xl",
			"size": "clamp(4rem, 3.3043rem + 3.4783vw, 6rem)",
			"slug": "xxx-large"
		},
		{
			"name": "4xl",
			"size": "clamp(5rem, 4.1304rem + 4.3478vw, 7.5rem)",
			"slug": "xxxx-large"
		}
	],
	"units": [
		"px",
		"em",
		"rem",
		"vh",
		"vw",
		"%"
	],
	"blockGap": true,
	"padding": true,
	"margin": true
},
--wp--preset--spacing--tiny: clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem);
--wp--preset--spacing--x-small: clamp(0.5rem, 0.413rem + 0.4348vw, 0.75rem);
--wp--preset--spacing--small: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);
--wp--preset--spacing--medium: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
--wp--preset--spacing--large: clamp(2rem, 1.6522rem + 1.7391vw, 3rem);
--wp--preset--spacing--x-large: clamp(2.5rem, 2.0652rem + 2.1739vw, 3.75rem);
--wp--preset--spacing--xx-large: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
--wp--preset--spacing--xxx-large: clamp(4rem, 3.3043rem + 3.4783vw, 6rem);
--wp--preset--spacing--xxxx-large: clamp(5rem, 4.1304rem + 4.3478vw, 7.5rem);