Add default spacing styles

[slocker3]

Potential default styles for the plugin. The 2021 theme for WordPress uses the variable --global--spacing-unit to set a default spacing to apply to margins and paddings. If a theme has --global--spacing-unit set then that will be used by the plugin. If not, then a fallback of 1.25rem (20px on most browsers, unless changed by the themes CSS) will be used as the base for plugin. Each option will use a multiple of the set spacing.

:root {
   --hpmb-spacing: var(--global--spacing-unit), 1.25rem);

   --hpmb-spacing-small: var(--hpmb-spacing);
   --hpmb-spacing-medium: calc(var(--hpmb-spacing) * 2);
   --hpmb-spacing-large: calc(var(--hpmb-spacing) * 4);
   --hpmb-spacing-huge: calc(var(--hpmb-spacing) * 6);
}

.has-zero-margin-top {
	margin-top: 0;
}

.has-small-margin-top {
	margin-top: var(--hpmb-spacing-small);
}

.has-medium-margin-top {
	margin-top: var(--hpmb-spacing-medium);
}

.has-large-margin-top {
	margin-top: var(--hpmb-spacing-large);
}

.has-huge-margin-top {
	margin-top: var(--hpmb-spacing-huge);
}

[slocker3]

Something to consider. Should we set margin-bottom: 0; for each of these?

[slocker3]

Should spacing be reduce for smaller viewports? Especially large and huge.

[jeremyfelt]

FSE themes are able to declare custom spacing in theme.json. In that linked example, Twenty Twenty-Two provides small, medium, large, and outer, which generates variables like --wp--custom--spacing--small, etc... This (so far) will replace the pattern that was part of Twenty Twenty-One.

Rich Tabor proposed a custom baseline style, which would have been interesting. It does seem that themes, even his , have started to adopt the Twenty Twenty-Two approach. It does not seem like many (I looked at 6) are setting their own variables apart from the custom variables generated by WP.

So, my guess...

1. Provide zero, small, medium, and large by default.
2. Support a baseline property in the case it takes off.
3. Support small, medium, and large custom theme.json properties.
4. Update our stylesheet to adapt to other common patterns as needed.

I think that looks something like this:

:root {
  --hpbm-spacing-baseline: var( --wp--custom--spacing--baseline, 1.25rem );
  --hpbm-spacing-zero: 0;
  --hpbm-spacing-small: var( --wp--custom--spacing--small, calc( var(--hpbm-spacing-baseline) * 1.25 ) );
  --hpbm-spacing-medium: var( --wp--custom--spacing--medium, calc( var(--hpbm-spacing-baseline) * 2 ) );
  --hpbm-spacing-large: var( --wp--custom--spacing--large, calc( var( --hpbm-spacing-baseline) * 4 ) );
}

.has-zero-margin-top {
	margin-top: 0;
}

.has-small-margin-top {
	margin-top: var(--hpbm-spacing-small);
}

.has-medium-margin-top {
	margin-top: var(--hpbm-spacing-medium);
}

.has-large-margin-top {
	margin-top: var(--hpbm-spacing-large);
}

Other notes:

• I think this also means removing the current larger setting and filtering the plugin in projects where we're using it.
• I could see changing our default baseline on smaller viewports, but allowing themes to adjust the custom vars as needed themselves.
• My inclination is to not add margin-bottom:0 as we should be able to assume anything added in the cascade is intentional.

[jeremyfelt]

It seems like there may be an opportunity to start assuming that theme.json is available in many cases. If so, then we can take advantage of spacing options defined by themes.

WordPress uses those spacing options to set variables for --wp-preset--spacing--{20,30,40,50,60,70,80}. A theme can choose which of the 20,30,40... to include and define names and values for each.

TT3 includes 30,40,50,60,70,80, though unfortunately names them as 1,2,3,4,5,6.

Still - I think we can adapt the default naming structure provided by WordPress:

CSS custom property	Value	Editor label
–wp–preset–spacing–20	0.44rem	2X-Small
–wp–preset–spacing–30	0.67rem	X-Small
–wp–preset–spacing–40	1rem	Small
–wp–preset–spacing–50	1.5rem	Medium
–wp–preset–spacing–60	2.25rem	Large
–wp–preset–spacing–70	3.38rem	X-Large
–wp–preset–spacing–80	5.06rem	2X-Large

We can then loop through the available sizes with useSetting( 'spacing.spacingSizes' ) and if the name is numeric, then use the default editor label matching the slug. If the name is not numeric, then use the actual name.

So, this:

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

Becomes a list of options for X-Small, Small, and Medium, while:

"spacingSizes": [
{
	"size": "clamp(1.5rem, 5vw, 2rem)",
	"slug": "30",
	"name": "Little"
},
{
	"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
	"slug": "40",
	"name": "Less Little"
},
{
	"size": "clamp(2.5rem, 8vw, 4.5rem)",
	"slug": "50",
	"name": "Huge"
},

becomes a list of Little, Less Little, and Huge.

I also think we should consider changing the class name to has-margin-top-{slug} or hpbm-has-margin-top-{slug} and then providing CSS for each of those by default with:

<style>
.hpbm-has-margin-top-0 { margin-top: 0; }
.hpbm-has-margin-top-20 { margin-top: --wp--preset--spacing--20; }
.hpbm-has-margin-top-30 { margin-top: --wp--preset--spacing--30; }
.hpbm-has-margin-top-40 { margin-top: --wp--preset--spacing--40; }
.hpbm-has-margin-top-50 { margin-top: --wp--preset--spacing--50; }
.hpbm-has-margin-top-60 { margin-top: --wp--preset--spacing--60; }
.hpbm-has-margin-top-70 { margin-top: --wp--preset--spacing--70; }
.hpbm-has-margin-top-80 { margin-top: --wp--preset--spacing--80; }
</style>