Spacing Presets

Spacing is available in the following steps: 20, 30, 40, 50, 60, 70, 80, 100. Below is the code used to define spacing presets in theme.json:

{
	"settings": {
		"spacing": {
			"defaultSpacingSizes": false,
			"spacingSizes": [
				{ "name": "20", "size": "clamp(15px, 2vw, 20px)", "slug": "20" },
				{ "name": "30", "size": "clamp(25px, 3vw, 30px)", "slug": "30" },
				{ "name": "40", "size": "clamp(30px, 4vw, 40px)", "slug": "40" },
				{ "name": "60", "size": "clamp(40px, 6vw, 60px)", "slug": "60" },
				{ "name": "80", "size": "clamp(60px, 8vw, 80px)", "slug": "80" },
				{ "name": "100", "size": "clamp(70px, 10vw, 100px)", "slug": "100" }
			],
			"units": [ "%", "px", "em", "rem", "vh", "vw" ]
		}
	}
}

This code yields a set of preset variables for spacing:

--wp--preset--spacing--20: clamp(15px, 2vw, 20px);
--wp--preset--spacing--30: clamp(25px, 3vw, 30px);
--wp--preset--spacing--40: clamp(30px, 4vw, 40px);
--wp--preset--spacing--50: clamp(35px, 5vw, 50px);
--wp--preset--spacing--60: clamp(40px, 6vw, 60px);
--wp--preset--spacing--70: clamp(50px, 7vw, 70px);
--wp--preset--spacing--80: clamp(60px, 8vw, 80px);
--wp--preset--spacing--100: clamp(70px, 10vw, 100px);

Fluid Spacing

Spacing in Powder is fluid, and each preset utilizes the clamp() CSS function to define three parameters : a minimum value, a preferred value, and a maximum value. Examples can be seen below: