search

10up / gutenberg-best-practices

Welcome to the 10up Gutenberg Best Practices!
https://gutenberg.10up.com
93 stars 25 forks source link

Create a new Guide for how to handle Vertical Spacing Overrides #77

Closed fabiankaegy closed 1 year ago

fabiankaegy commented 2 years ago

Something that comes up all the time on projects is how to handle vertical spacing overrides for blocks. We should create a guide for how this issue can be solved to refer back to :)

devinle commented 2 years ago

@fabiankaegy just thinking that it would be good to add a set of presets possibly? Like a scale. To at least conform to some type of consistency across blocks and templates? I've seen these types of things implemented using a free-form slider, which essentially can be any number within a range. But I've also seen implementations that include small, medium, large (for example), which are preset. I think the preset option (while it does limit the freedom a bit) is a good compromise for consistency. Thoughts?

fabiankaegy commented 2 years ago

@devinle yeah this should only ever allow editors to select from predefined spacing presets. Never from free Form values

devinle commented 2 years ago

I suppose the question is, what should they be? And what units will they use?

fabiankaegy commented 2 years ago

@devinle what I'm proposing here in this issue is to create a guide for how projects should implement it. Not the actual implementation that is shared across all projects. The recommendation that I would put into this guide here is to use the spacing custom properties as they are used throughout the theme for the presets.

If we were to add something like this to our scaffold or ui-kit it should be powered by spacing presets defined in theme.json. Though that is what Core is currently working on in WordPress/gutenberg#39371. So I'd rather push that effort forward than duplicate efforts with the same outcome.

fabiankaegy commented 1 year ago

Resolved in #102