Gutenberg: Allow media upload using drag and drop

[swissspidy]

In the current editor, you can simply drop some media files on it and the media modal opens to upload them.

That's currently not possible with Gutenberg.

[jasmussen]

We could make this work really well without ever using the media modal.

Drag a single item into the editor, to upload and insert an image block.

Drag multiple items into the editor, to upload and insert them all as a gallery block.

The "drop zone" could be the same blue line we use to indicate where a block is inserted with the inserter:

[swissspidy]

That sounds interesting. I know people who don't mean to insert a gallery when uploading multiple images though, so this would be helpful to have user tests for.

[mkaz]

The image block now supports drag and drop, the gallery block does not. I had opened #2130 to address that but we can use this issue.

Do we want to combine Image & Gallery block as @jasmussen suggested, having it determined by how many images a person selects?

[jasmussen]

Do we want to combine Image & Gallery block as @jasmussen suggested, having it determined by how many images a person selects?

We'll always want both an image block, and a gallery block, simply so it's easy to insert them. However one could be an _alias_ for the other, if they can truly share the same UI. I know currently, the media modal is different for galleries vs. images. CC: @karmatosed as I suspect you'll have some insights here.

The ideal flow for a "unifiedy gallery/image" block (with just aliases), I imagine, would be this:

• Upload, insert from media library, or drag and drop a single image onto a placeholder and it becomes a single image
• Upload, insert from media library, or drag and drop multiple images onto a placeholder and it becomes a gallery
• Drag and drop a single (or multiple) image(s) onto another image and it becomes a gallery
• Always an edit button available to add or remove from either an image or a gallery

Does that make sense?

[mkaz]

I think it makes sense, but I think we can get it well defined before start making code changes, the two blocks share a lot of the same code so shouldn't be too big of a deal, but a few minor differences that would need clearing up

I'm not quite sure about the placeholder, would that be there without needed to insert a block - would there always be a drop zone between blocks if an image is dragged into editor?

Other Questions:

1. Do we use the same css classes or switch them depending on multiple?

2. Different inspector controls, for example Crop in Gallery, alt text in Image

3. When inserting from Media modal, from Gallery tapping images selects multiple, when inserting from Image Block tapping images only selects last one tapped

[jasmussen]

I think we should look at this as two separate tasks.

First task, highest priority, is bringing the upload button to the gallery. We should get this done as part of the milestones in this week or the next.

Second task, low priority, could be exploring the merger of the two blocks, and drag and drop improvements. This is really slick polish, but not critical for V1.

[mkaz]

Agreed and (1) is already in progress at #2294

[mtias]

I think we can close this as we have a working example in images and galleries, as well as in progress work for general drag and drop of media.