Dropping a block into an empty Group/Column block from the List view

[richtabor]

What problem does this address?

In an effort to explore how we can continue to improve the List view experience, I found that it's not currently possible to drag another block into an empty Group, or Column, block from the List view.

What is your proposed solution?

Perhaps empty Group and Column blocks should be treated differently within the List view, where when dragged above, a visual cue indicates we can drop a block into the "empty" one — and on release, the block is added inside the Group/Column block.

Design

We currently have the thin line that indicates where a block should be dropped. We should consider either extending that border around the designated drop-zone, or alternatively setting the background of the drop-zone to the selected state (accent-color).

Attempting to drop a block into an empty Group block (current)

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

Note that I've intentionally omitted the Columns block (without a variation assigned). I'd consider that block a different animal, as we'd have to think through what should happen variant wise (like perhaps it sets the 50/50 variant, or 100).

[talldan]

@richtabor It is a little hard to find, but if you drag to the bottom-right of a column or group you can nest a block and the drop indicator should shift to show the nested position.

[annezazu]

Noting that I found this as part of trying to determine another issue for the sixteenth FSE Outreach Program call for testing:

unable.to.use.list.view.to.add.image.to.column.block.mov

This definitely feels very buggy and strange, especially considering you can generally drag/drop using the mover tools.

[talldan]

@annezazu As mentioned above, you need to drag to the right side of a block to nest under it.

The reason it works this way is that List View needs a way to determine if you want to drop the block after the column or inside the column. I think the particular situation is confusing, because a user can't drop an imagine after a column. But it makes more sense with other blocks like empty groups.

I don't think this is a bug, the feature is working as intended, but it could absolutely do with some improvement.

Perhaps it's clearer if there's a red drop indicator showing that an image can't be a sibling of a column.

[annezazu]

Ah apologies. I thought you were simply describing a workaround rather than an intended functionality. I'll list it as an enhancement. I'd be curious what @WordPress/gutenberg-design might do here.

[jasmussen]

It's very clear the drag and drop experience in list view is not great, and the suggestion to highlight the container when dragging on top of it seems like it could work, especially if it's easy to implement.

My mind goes back to #34022, though, which implemented a vastly superior dragging experience:

CleanShot.2021-10-04.at.09.12.57.mp4

In this experience, the reactivity makes it clearer which nesting level you're about to drop an item on. There could still be "drop on top of container" added to this one, but even as is, it would likely be an improvement. Performance was a concern at a time, but the implementation of windowing seemed to solve that. It would be neat if someone could revisit that PR, see if it can be resurfaced and brought home.

[talldan]

It's very clear the drag and drop experience in list view is not great, and the suggestion to highlight the container when dragging on top of it seems like it could work, especially if it's easy to implement.

It seems like it would require a lot of precision from a user, as we'd essentially be packing in three drop zones vertically per row. (if that makes sense). A row is only 36px, so that means 12px high drop zones.

#34022 worked a bit better, I think because of the way it allows a clearer visualization of where the block is being dropped to. It still essentially used a similar mechanic of dragging left and right to nest, but felt more natural because you could see where the block would end up.

It'd be good to find a way to land it in bitesized chunks. It's a lot to rebase and review, and also I'm unfamiliar with framer-motion, so have no idea what much of it is doing 😄

[richtabor]

This is now resolved ✅