Gutenberg: Add gutter, margin, and padding controls to the columns block

[LevinMedia]

Limitations with the columns block:

As it stands, a user is somewhat limited in what they can achieve with the columns block. This is problematic, as it's fundamental building block for constructing a page's layout. Let's look at an example: the screen shot below is a design I made in Figma. It's a single row with a light yellow background, on top of which sits a simple three column layout. The two outer columns have images, and there's some text and a button in the middle column.

The row (parent container) should be the full width of the site. It should have no margin or padding. There are no gutters between the columns. The content in the columns should be aligned to the middle the of row vertically. The columns which contain the images should have no margin or padding. However, the column in the middle should have a healthy amount of padding on the left and right sides to keep the headline more condensed and in the center of the column.

This is the best I could do using the the blocks in core:

• The parent container (The columns block) has padding automatically applied to it. There are no controls to change or remove it.
• A user is unable to add or remove margin to the parent block as well. This becomes problematic if you wish to stack multiple rows directly on top of each other, with no space in-between them.
• There's no ability to control the gutters between the columns, or remove them.
• There's no ability to control the margin or padding that's applied to the individual columns.

Solutions:

• Remove the padding that's automatically applied to the columns block
• Add margin and padding controls to the columns block (parent block)
• Add gutter controls to the columns block (parent block)
• Add margin and padding controls to individual columns blocks (child blocks)

One small detail to keep in mind: at the moment, when a background color is added to many types of blocks (paragraph, headline, column etc) padding is automatically added as well. This behavior should either be eliminated, _or_ the auto padding value should appear in the new padding control component, there by allowing the user to refine it further, or remove it.

Controls for the "columns block" (parent) and "column block" (child) would look something like this:

both of these are using the new box control component, which was recently included on the cover block.

Bigger picture, and out of scope for this particular issue:

Essentially every block should have these margin and padding controls by default.

Describe alternatives you've considered:

Using Elementor with no prior experience, I was able to re-create this layout in about 10 minutes. Screen shot below:

Elementor uses the same principle which I've described in the solutions above. There's no margin or padding applied to the parent container by default. The parent container has controls for the gutters. Each of the elements (Parent block, and child column blocks) have their own margin and padding controls.

cc @jameskoster

[jameskoster]

One small detail to keep in mind: at the moment, when a background color is added numerous block (paragraph, headline, column etc) padding is automatically added to it. This behavior should either be eliminated, or the auto padding value should appear in the new padding control component, there by allowing the user to refine it further, or remove it.

One of the key considerations here is what happens to existing instances of the block upon update. To avoid disruption on the frontend, wherever folks are currently using the background color option with the static auto-padding applied, that auto-padding value should probably be migrated to the new dedicated padding control.

[richtabor]

I've found margin to be very tricky to implement in blocks. Padding is great, but margin is difficult because it interacts with the space _outside_ of the block, whereas padding is inside. When interacting outside, it becomes tricky to emulate one-to-one with the front-end, and creates confusion on how to manipulate that spacing (as not every block has margin controls - rightfully so). I lean towards using Spacer blocks for "margin" control.

Gutter is tricky for mobile implementation, but it's not impossible. We (CoBlocks) figured out some creative solutions for gutters in a few blocks; including using custom gutter spacing values (with inline CSS vars).

[aristath]

Would converting blocks to css-grid with a flex fallback for old browsers be out of the question?
It would solve pretty much all issues regarding gutters, responsive etc.