Select Many Blocks Via Dragging

[adamziel]

Selecting multiple blocks by drag&drop seems like a natural interaction to have:

https://user-images.githubusercontent.com/205419/134696866-22aaf33a-acd7-4a5c-bcd2-eaa574391544.mp4

The idea was initially explored in a quick&dirty way in https://github.com/WordPress/gutenberg/pull/35117. The PR is closed now in favor of this issue. It is worth noting that @jasmussen proposed with a number of great improvements there:

First off, the multi-select style which paints a browser selection across multiple blocks is misleading and doesn't look very good. We likely need a new design for multi selection. So instead of this:

it could be this:

That might work better with the dragging motion as well, as that makes it even more obvious you are selecting blocks, not text:

Secondly, deselecting blocks at the moment is a bit fiddly. Simply addressing #5803 would be a good start.

Thirdly, it opens up the conversation about non consecutive block selection (#16797) — what happens when you hold shift and select after you've made an initial selection?

Finally, and this is something @jameskoster has talked about for a while: it could make sense to let select mode be default. We might need to make it easier to stay in edit mode for longer — but the key benefit would be that we could enhance the Escape key behavior: making the first press of Escape deselect the block.

While these are all separate issues, they do speak of some challenges we have around selection at the moment, which might be good to look at in case we add more complexity with this one.

cc @jasmussen @tellthemachines @talldan @noisysocks @ellatrix @talldan @getdave @kevin940726 @javierarce @draganescu

[jameskoster]

It's also important to figure out the interaction with containers. Oftentimes in design software, the container must be fully inside the selection box for it to be included, otherwise its children are selected.

[mtias]

It'd be good to revisit this. I'd consider trying it in select mode only at first.

[noisysocks]

Definitely think would make select mode a lot more useful. Any Craft fans here? It has a pretty nice implementation of this. It feels very natural to press Esc to enter visual mode, make a selection, do something (transform, delete, indent, group), then click twice to go back to edit mode.

https://user-images.githubusercontent.com/612155/176335591-5e6d5c4a-49cc-4a00-83a4-e8070ecc70de.mp4

Admittedly our needs are a lot more complex though as we support nested blocks as @jameskoster says.

[mrfoxtalbot]

Hey @adamziel. I run into this issue while looking for something different I believe this has already been implemented, right?. I recorded a video of how it is now possible to select multiple blocks just by clicking and dragging:

https://user-images.githubusercontent.com/4452464/227868108-44dcf332-11f1-4aab-b604-8654595735c1.mp4

Would this make sense? Were you referring to this?

Interestingly enough, @mtias suggested implementing this in "select" mode first but we went the opposite route.

[adamziel]

@mrfoxtalbot kind of, it's not the same visual rectangular selection and it wouldn't do that well in a visual mode where editing is disabled

[ellatrix]

Related: #23290