spacingSizes: Missing Spacing/70 and Spacing/80 spacing presets

Question

spacingSizes: Missing Spacing/70 and Spacing/80 spacing presets

Closed this issue a year ago · 2 comments

Twenty Twenty-Three supports the following spacing presets:

"spacingSizes": [
	{
		"size": "clamp(1.5rem, 5vw, 2rem)",
		"slug": "30",
		"name": "1"
	},
	{
		"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
		"slug": "40",
		"name": "2"
	},
	{
		"size": "clamp(2.5rem, 8vw, 4.5rem)",
		"slug": "50",
		"name": "3"
	},
	{
		"size": "clamp(3.75rem, 10vw, 7rem)",
		"slug": "60",
		"name": "4"
	},
	{
		"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
		"slug": "70",
		"name": "5"
	},
	{
		"size": "clamp(7rem, 14vw, 11rem)",
		"slug": "80",
		"name": "6"
	}
],

Twenty Twenty-Four supports the following spacing presets:

"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"
	}
],

I totally understand why the decision was made to start the preset scale from slug 10 instead of 30. This however creates an issue for all existing block patterns that utilize: --wp--preset--spacing--70 and --wp--preset--spacing--80 presets.

For example our Footer with 3 Menus pattern in WooCommerce Blocks: woocommerce/woocommerce-blocks#11295 (comment)

The spacing will be broken when switching to Twenty Twenty-Four.

In theory, adding the 70 and 80 slug presets would solve this issue:

"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"
	},
	{
		"name": "7",
		"size": "min(6.5rem, 8vw)",
		"slug": "70"
	},
	{
		"name": "8",
		"size": "min(10.5rem, 13vw)",
		"slug": "80"
	}
],

This however will create a bad experience for new users, where the 7 value will be lower than 6.

I don't know what the ideal solution is here.

I am happy to submit a PR when a solution is agreed upon :)

Answer 1 · 2023-10-31T06:50:15.000Z

The spacing will be broken when switching to Twenty Twenty-Four.

Themes can disable most, if not all, presets in theme.json. There is no way for plugins to rely on these, unless WordPress core decides to always make these default CSS variables and values available even when they are disabled in the UI.

What I mean is that this is definitely not up to a single theme to solve, because the next theme the user installs may have similar problems.

Answer 2 · 2023-10-31T08:24:06.000Z

Like Carolina said, this is hard to fix in the theme. Adding more spacing presets changes the UI controls and makes them go from this:

To this:

after we add a certain amount of elements to the array. My suggestion for plugins is to make sure those variables exist. CSS already accounts for this, and you can account for a fallback if a CSS variable is not defined and do something like this:

var(--wp--preset--spacing--80, 5rem);

You can even nest this and have the fallback be another variable, but that second variable will also need a fallback that is a static value, like so:

var(--wp--preset--spacing--80, var(--wp--custom--spacing--80, 5rem) );

I hope this helps!