Appender element in non-edited, placed reusable blocks

[strarsis]

Describe the bug
The appender element (with block-list-appender class) is added to placed, reusable blocks that aren't even currently edited. This results in a transparent vertical space at the bottom of the reusable block, which causes visual vertical gaps between blocks.

To reproduce
Steps to reproduce the behavior:

1. Insert a new block, make it reusable or place a reusable block.
2. Notice that there is now a visual space at the bottom of that reusable block. Upon careful inspection of the elements inside the reusable block, one notices it is the appender element.

Expected behavior
The appender element in a reusable block is only inserted/displayed when it is actually added (where it makes sense).

[adamziel]

I have tested this and discovered there is in fact some vertical spacing between the reusable blocks and other blocks. However, the appender block remains invisible. The root source of the problem is WritingFlow component which nested in reusable blocks. It has display CSS property set to flex, which breaks collapsing the margin-top from the bottom block into margin-bottom of the top block. Once display: flex is removed, the spacing is gone.

Before:

After:

The question here is - is this extra spacing intentional? Should it be there? I'll needs design feedback so we can get more input

[strarsis]

@adamziel: When the appender element is hidden (of unedited blocks) using CSS,
empty space below the block is disappearing, you can try this yourself by adding these styles:

.components-disabled .block-list-appender {
  display: none;
}

[adamziel]

@strarsis The extra spacing is definitely there:

When I inspect the appender, it looks like this:

However, adding the CSS rule doesn't seem to fix it:

I even tried removing all appender elements but no dice as well. Only when I remove display: flex from .block-editor-writing-flow the extra spacing disappears as vertical margins are getting collapsed into previous and next blocks:

Hence I wonder, if it was added intentionally to indicate that reusable block is different from other blocks. For example, when I select it, here's how it looks like:

Design feedback appreciated!

[strarsis]

Does this PR fix this issue? It seems to be related?

[noisysocks]

This seems OK to me now.

Not selected:

Selected:

There's some extra padding at the top when the block is selected but I think this is desirable as it creates spacing in between the reusable block toolbar and the reusable block content.