spacingSizes: Missing Spacing/70 and Spacing/80 spacing presets #710
Description
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)
<!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"var:preset|spacing|70","left":"var:preset|spacing|80"}}}} -->
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 :)