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]

Thanks for adding this issue Rich!
(There was an earlier issue related to drop zones but I am not able to locate it.)

We should use similar drop zones that exist in Gutenberg today. Looking at drag and drop of image.

Here is an example where I only added the blue background color to the Group block.

@annezazu
I added a drag and drop as a comment here https://make.wordpress.org/test/2022/03/31/fse-program-testing-call-13-authoring-an-author-template/#comment-2394

[richtabor]

I also think it's a good idea to match the current drag-and-drop UX — I made a couple adjustments based on your feedback @paaljoachim:

[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.