Use drag and drop to transform an Image block → Gallery block

[critterverse]

One behavior that users might expect to find in Gutenberg is the ability to create side-by-side images by dragging and dropping an image next to an existing one.

Note: This behavior has previously been explored in #13202 and perhaps elsewhere!

image-transform.mp4

Current behavior
You can drag an image on top of an existing Image block, which will upload the new image and replace the current one. The drop zone covers the full area of the block and is indicated by a blue overlay color with a CTA.

Proposed behavior

The blue overlay color could be reserved for replacing an image, with a new treatment introduced for transforming the Image block into a Gallery block to achieve a side-by-side effect. I used a 4px vertical line to indicate the position of the new image — this is the same visual treatment used for the “move to” indicator (but I can also see a conceptual argument for using a 1px line like the sibling inserter).

We could potentially show a snack bar after the user completes the transform via drag and drop, as it’s not explicitly clear that this action will change the block type. This would offer the opportunity to undo the transform. (It's also very easy to transform a Gallery block to Image blocks via the transform menu in the block toolbar, in case the user wants to reverse this change later.)

I imagine this could work by identifying separate drag zones within the area of the existing block for replacing/transforming but it would be helpful to play around with this in a PR to see what feels right!

[talldan]

@critterverse I think this might be the same idea as #9783

[annezazu]

This came up in the sixteenth call for testing for the FSE Outreach program for using drag & drop along with the "move to" option. Noting here as the "move to" option is something to consider when trying to address this problem too:

Moving images is done successfully both by drag & drop the blocks in the List View, and by using the move up/down chevrons in the image’s Block Toolbar. But the image movement is failed when I use the Move to option in the image’s Block Toolbar. Or perhaps my expectation isn’t inline with its designated usage.

Here's a video showing the current experience with GB 14.0.2 and WordPress 6.0.2:

no.way.to.place.side.by.side.with.move.to.drag.drop.mp4

[tellthemachines]

Closing as this has been implemented in #56186.