Try uncollapsing margins on the columns block.

[jasmussen]

This is a first stab at fixing #7766.

It does not address it fully, I believe further work is necessary, including that of #7694. However this should at least improve the collapsing of the parent container.

In the following screenshots, I've selected all blocks, as this highlights using transparency and overlay effects, the boundaries and how they overlap. Here's what's in master:

Here's with this PR applied:

As you can see, there are zeroed out margins on the first and last container children inside the columns block. This is there to make the columns block flow more directly with the surrounding content, but this can be revisited, and as noted, #7694 might help here.

Noting that if we were to remove zeroed out margins on the first and last container children, here's what it would look like:

[aduth]

This seems like a small improvement over master, at least as far as overlapping goes. We should stop considering this as a "Columns" issue, and address it as generally affecting any block with inner blocks. In that sense, these changes do nothing for any other block with inner blocks.

[aduth]

Would 0.1px be a better value here? While it's not valid in the sense of a fraction of a pixel, it achieves the same effect while not having a visual difference (since it will round to 0).

[jasmussen]

Thanks for the review, forgot to mention that before.

A better solution might exist in the process outlined below: #8283 (comment)

I pushed a fix to use the 0.1px as you suggested. Because although it had visual side effects on the Classic Block toolbar on retina screens (the rounding math glitched out every once in a while causing flickering when scrolling), it doesn't appear to have any side effects here.

However a different approach is to simply accept that flex containers margins do not collapse and stop compensating for it. That is — we don't need to prevent the parent block margins from collapsing (can remove the padding hack), but we also remove these two lines:

https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/block-list/style.scss#L130

The net result is this:

GIF:

As you can see the margins on paragraphs inside are now doubled before and after, because we don't compensate. We probably want to do this as part of #8283 (comment), depending on what you think of that.

[jasmussen]

We should stop considering this as a "Columns" issue, and address it as generally affecting any block with inner blocks. In that sense, these changes do nothing for any other block with inner blocks.

Step one of making margins collapse was to ensure that the block "foot print" was accurate in the backend, compared to the front-end, specifically to ensure that the UI we paint around each block — borders, multi select squares, toolbars, side UI — did not affect the foot print at all.

Step two is actually adding margins to each and every block, on a per-block basis. Essentially, like a front-end styleseheet, a paragraph needs one margin, a list needs another. Perhaps a columns block doesn't need any margins at all.

Right now we are applying the same margins in a blanket statement, to all blocks. This happens here: https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/block-list/style.scss#L140

Removing that rule removes any artificial margins added to all the blocks (with the added notes that we have some negative margins to compensate for this).

In other words, I would suggest that the next step in improving this, and addressing your comment, is to remove those artificial margins, and then rebuild them block by block. Do you agree this is the right approach?