Add visual cue when dragging a block into an empty Group block

[richtabor]

While we actually can drag and drop another block into an empty Group block, there's no visual to indicate that its possible.

Proposal

Add a design visual when dragging another block over an empty group (or columns) block. We can use the same DropZone styling and animations to "fill" the empty inserter and add the + icon.

Visuals

Proposal

CleanShot.2023-05-05.at.15.25.50.mp4

Current

For reference, here is what we have today (no visual indicator):

CleanShot.2022-02-24.at.12.30.09.mp4

[richtabor]

As an aside, we also need a drop indicator for when you're dropping a block into a closed Group/Columns block. It's possible today to do that, but there's no visual indicating it so. Adding this here as it's related design wise.

[paaljoachim]

Looks good Rich!

Any additional feedback here @jasmussen Joen?

[annezazu]

@paaljoachim Joen is on sabbatical right now just so this doesn't hold things up.

[paaljoachim]

Great! Thanks for letting me know @annezazu

The method we have right now is consistent with the current UX method for drag and drop.
I believe we can move forward and add the label "Needs dev" and get this drag and drop method for the Group block in place.

[nickfmc]

this will be nice to have, after training people for the past 2 years on Gutenberg when handing over sites, I can say the biggest complaint I get is how bad the drag and drop UX is.

[paaljoachim]

Hey @richtabor and @jasmussen
Let's get movement in this issue.
It would be great to get a PR in place and get the visual cue in for the empty Group block.

[richtabor]

I updated the issue with more up-to-date visuals and its been added to the Polish board. Let's get this going. 🚀