Block Styles: Remove the block margin in the style selector

[scruffian]

Description

This removes margins on the block preview when used in the styles selector.

This is being added here:

gutenberg/packages/block-library/src/editor.scss

Line 56 in 17e5c2d

.editor-styles-wrapper .block-editor-block-list__block {

but it doesn't make much sense for previews in the block style selector.

How has this been tested?

In chrome

Screenshots

Before:

After:

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[scruffian]

I added stye variations to the media and text block and tested with and without this patch:

before:

after:

The patch reduces the space at the top.

[scruffian]

I also tested this for the columns block, which behaves similarly:

before:

after:

[pento]

This looks good to me, but I'd like design feedback on it. @jasmussen, do you have thoughts?

[jasmussen]

Yeah, this is kind of an unfortunate challenge of this. The preview is literally the block, identical to what it is in the post content. And right now the baseline of margin is just applied to every single block, affecting this preview as well. Which is kind of unfortunate.

The thing we want to continue to move towards, is a place where no such baseline margin exists at all, and is instead applied by each block individually. This requires a lighter DOM with fewer React fragments, which Ella is working on. And it's actually coming down the pike.

That's a long-winded way of saying: yes, I think it's fine to ship this PR as is (👍 👍) — but also that there's a very high probability that this particular CSS will at some point grow stale/die off and need to be changed. If you need to merge this, then it looks like a good improvement, but please keep an eye on Ella's doing, notably PRs like this one: #19912

[pento]

🎉