Open slocker3 opened 3 years ago
Something to consider. Should we set margin-bottom: 0;
for each of these?
Should spacing be reduce for smaller viewports? Especially large
and huge
.
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...
zero
, small
, medium
, and large
by default.baseline
property in the case it takes off.small
, medium
, and large
custom theme.json properties.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:
larger
setting and filtering the plugin in projects where we're using it.margin-bottom:0
as we should be able to assume anything added in the cascade is intentional.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>
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 of1.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.