Add padding and margin for blocks, and get rid of Spacer block.

[shoelaced]

Is your feature request related to a problem? Please describe. Most users are not going to think to look for a block in order to add spacing. Likely they'll end up hitting Return a few times and ending up with blank blocks, which probably won't even render on the frontend, and which don't have a three-dot menu containing a "remove block" option, which means they'll have to figure out to hit backspace or delete to get rid of the empty blocks, then find the spacing block, which turns spacing into a big annoying fiasco. Not only will this happen when needing space between, say, a picture and text, but it'll also happen whenever someone tries to enter a double space.

On a different issue, when adding a background color to a paragraph or button, it often looks better to add or reduce the padding.

Describe the solution you'd like Add "Margin" to the block options for all blocks. This would remove the need for the "Spacer" block, which isn't going to be found by a lot of users anyway. Also add "Padding" to the block options for all blocks that allow a background or a border of some sort.

Describe alternatives you've considered Adding instructions somewhere that say "If you are trying to add space between blocks, look for the 'Spacer' block and insert it into place" is cumbersome and bad design, but that's what I'm going to have to figure out how to do after my clients start complaining about it.

[designsimply]

It's a good problem to solve, and I think both routes have potential pitfalls such as set spacing (either in a spacer block or a margin) likely will not be friendly for all screen sizes. In my experience, most people who want to add such a thing are not thinking about how a margin will affect the view on mobile or for screen sizes different from their own view. The annoying fiasco of trying to add empty lines to add spacing in empty paragraphs is a long-standing issue, and I think the spacer block was a reply to a request to solve that problem. I think adding a margin option would be an equal-but-different solution that would be misused and hard to find in the same way a spacer block may be. It's my personal opinion that the spacer block is nice because it's explicit and should be used quite sparingly anyway—and I think it's actually one of the most popular blocks so far, which I found surprising.

I have seen others make a point that spacing issues for things like space between a picture and text should be handled by the theme. I am not sure how I feel about that completely, but I do think there are some cases where that makes sense.

I think if the spacing is consistently not good for an area we can point to specifically, like what you're saying about buttons, then we should look into trying to solve that directly in the editor even. Do you think it would be good to identify spacing problems, such as bad spacing between images and text or buttons and text, and try to solve them in the editor directly if possible so that fewer problems arise for clients in the first place?

[shoelaced]

Well, perhaps, there are definitely certain blocks that would probably work well with a default top/bottom margin, such as images, which developers could then hopefully overwrite in the theme's CSS if needed, but my concern is that unless the Spacer block is always readily available, users won't think to go searching through the blocks to find it until they've already had to spend a frustrating process learning that it exists. I think the Block options in the sidebar would make sense as a logical place to look for a "spacing" option.

If the issue is dealing with responsive spacing I can understand that, but one or two lines of spacing is a pretty normal minimum that generally works on all screens, so perhaps at least having that available would be helpful.

Some options that might work?:

• "Space above" and "space below" select dropdowns in the Block options with "1 line," "2 lines," etc., that developers could then filter if they want to restrict the maximum available spacing?

• A draggable slider to adjust pixel spacing that, again, developers could filter to limit the min/max?

• An additional icon that appears next to the current "add block" plus sign when hovering over the block, giving the option of "add block" (plus sign) and "add space" (other icon)?

• In the block browser popup, a fixed place for the Spacer block to make sure that users see that it's available?

Just ideas, but ultimately at the moment I foresee people getting annoyed by not being able to figure out how to add space, so that's the problem I'd like to avoid. It just seems like "blocks" equal "types of content" in my mind, so I wouldn't expect people to go looking for a block that just adds empty space.

[shoelaced]

Perhaps padding is a separate issue, but it would be nice to figure out something for that as well.

[mrwweb]

I very much think margin is theme territory. @designsimply's request to come up with some specific example would be really useful to confirm whether that's true or not.

My experience with margin/padding settings is that they end up causing inconsistent layouts and also make it hard for a theme change down the road. At a minimum, they need to be pared with a global default option.

The spacer has its issues (#10081) but I do think that treating space as equivalent to editorial content is a better mental model for helping people make better decisions for the long-term visual "health" of the site.

[jwold]

In general I’m a fan of leaving spacer block in, even with its challenges.

My only thought would be to look at ways of adding margin. However this may also be better for a custom plugin or theme to handle. With that said, I think Divi has a decent solution for the whole mobile/desktop/tablet view with three icons showing margins for each view.

I think we could explore how this would look in Gutenberg, but would also recommend keeping the spacer block for now.

[melchoyce]

FWIW, I rely heavily on spacer blocks when building sites in Squarespace. They can be super useful from an art direction standpoint.

[mrwweb]

@melchoyce Give your experience, getting your feedback on #10081 would be really useful!

[karmatosed]

People definitely are using the spacer block a lot. That said potentially one thing to investigate is per block spacing/margins. For now putting this into phase 2 consideration as something to really start thinking about as move to site building.

[paaljoachim]

It is natural to leave the Spacer block in place and instead begin to experiment with padding/margin in the new Group block. From there it could be added to other blocks as well. As it is good to have various options to either use the Spacer block, or a setting for padding/margin for various blocks, or manually add CSS to create padding/margin.

[greylockglass]

Padding and Margin control at the block level, PLEASE!!!

[rcass]

If you need another example of padding/margin in action, I suggest looking at webflow.

The way they address padding/margin is via a clickable visual of the block in the sidebar (aka think basic box model of the element). On the diagram, a user can pick the side and padding or margin to adjust.

Here is a screenshot:

The benefit of this is that a user doesn't need to understand to box model or the terminology padding/margin to understand where the space is being applied. It also provides a really quick visual of where and which element is creating whitespace.

[shoelaced]

I'm definitely of the camp who thinks that this business of forcing Gutenberg upon us MUST also come with the ability for developers to control it as specifically as possible. Given that, a visual design similar to the above that can be turned off for certain types of blocks seems to me to be the ideal scenario. Themes should be able to disable any of the margin/padding values by block type or globally, or disable the entire thing by block type or globally, or set default values that would be in there when the block is created but still editable by the user, again by block type or globally. Additionally values must be able to be set in all the CSS units - px, em, rem, %, vh, vw, vmin, etc. Themes should also be able to set min/max values for the spacing and supply media queries where the spacing would be, for example, divided in half for smaller screens, some of which should be built in by default. For example a value of 4em around an image might look better at 2em on a phone screen.

The main thing that's annoying about Gutenberg at this point is that it's not good enough to take over for more established block-based builders, but it's getting to be good enough to have some useful features. The above is just brainstorming but something like it would allow developers to give the user some spacing flexibility while encouraging it to match the rest of the spacing in the theme that might align to a grid.

Regardless I don't think simply adding margin and padding settings to every block is the answer either. Any solution needs to be considered from a standpoint of giving the user more design freedom and visual perspective over it, while also giving theme designers the ability to control how much freedom they give away.

[melchoyce]

@shoelaced Do you have any other ideas around how Gutenberg can make it easier for theme designers?

One thing that could be cool re: spacer block, it automatically converting multiple paragraph breaks (say, three or more) into a spacer block.

[paaljoachim]

Hey Mel. That is a very interesting idea! I made an issue for it.

[melchoyce]

Thanks @paaljoachim!

[mapk]

I'll note that work around how we include responsive padding controls is being started on the Group block. https://github.com/WordPress/gutenberg/pull/16730

It would be great to take a look there to see how it's going.

As for removing the Spacer block, I think we leave it in because as mentioned, it's being used in a number of ways.

[greylockglass]

Yes, spacer block is super useful. Great news about Responsive padding controls on group block. Happy new year, all!

On Dec 27, 2019, at 6:57 PM, Mark Uraine notifications@github.com wrote:

 I'll note that work around how we include responsive padding controls is being started on the Group block. #16730

It would be great to take a look there to see how it's going.

As for removing the Spacer block, I think we leave it in because as mentioned, it's being used in a number of ways.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[getdave]

I'll note that work around how we include responsive padding controls is being started on the Group block. #16730 It would be great to take a look there to see how it's going.

@jasmussen has suggested we avoid the per-block approach to responsive margin / padding. However, if we still feel that adding padding/margin support to the Group block (without responsive support for now) is useful I'm still happy to pursue it.

I'd be grateful if folks could voice their support for the feature on the PR otherwise it's likely to get dropped.

[karmatosed]

Unless I am mistaken this issue can be closed as there is work to bring margins/spacing in other issues, also there seems a consensus to not remove the spacer block for now.