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