You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
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!