Gutenberg: Preview feels disconnected from Block inserter

[paaljoachim]

I slept in class. I know Joen @jasmussen and I also believe @enriquesanchez worked on what I am going to mention below. Anyhow here goes.

The gap between selecting the Columns block and the preview makes it feel disconnected.

Here is one where I placed the preview right next to the Most used area.

It is right up to the Blocks area. It covers the full Most used area. Not background gap is seen between Block icons and the preview. They feel tight and they should be tight...:)

[jasmussen]

I personally disagree :) — I think of it as a tooltip, and tooltips are disconnected. However, I noticed a lack of border radius and shadow on the preview which I'll look into fixing!

[draganescu]

It is kind of floating out there. I don't know, maybe it's simply a reaction to entrenched patterns, but that small arrow that tool tips have does a great job of connecting the information. Just my 2 cents :) It reminds me of those floating windows of Gimp and other software ported from Gnome to OSX.

[enriquesanchez]

The gap could certainly be reduced, but I think an important part here is the hover interaction. To me, the fact that when you hover a block the preview popover appears is enough to communicate that the two elements are related.

I did a quick attempt at reducing the gap size. It currently is 20px wide.

Here's at 12px:

And here's at 16px:

Both feel good to me.

[paaljoachim]

Hey Enrique

Good idea!

Having it closer really helps. It creates a proximity association between elements.
I liked the 12 px gap the most. Then Joen can add some shadow and round the corners.

[enriquesanchez]

@jasmussen I attempted a quick PR to reduce the gap and also add the missing border radius and box shadow. I'll appreciate a review.