Drag and drop is known for being one of the most intuitive interaction patterns there is. One behavior that users might expect to find in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue #13202 and perhaps elsewhere!

The Current Behavior

Right now in Gutenberg, you can drag an image on top of an existing Image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., 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.

Image block and Gallery block with drop zone overlay shown at 75% opacity.

The drop zone looks exactly the same on the Gallery block, covering the full area of the block, but the behavior is slightly different there. Instead of replacing, the new image is added to the gallery.

The current overlay behavior works great for each of these singular interactions. The key design challenge is finding a way to offer both options so that a user can replace an image or add another image within a single drag motion.

Transforming an Image block into a Gallery block

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 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. A snack bar offers the opportunity to undo the transform, and could also be a way to call more attention to the new block type through the use of a block icon.

Adding and replacing images in the Gallery block

It would be nice to extend the same behavior to the Gallery block so that a user can seamlessly go from one image to two images, and from two images to three images, using the exact same interaction pattern. This could be a part of larger efforts to unify the Image block and Gallery block more closely.

Implementation

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

Another option that would introduce slightly more friction to this interaction would be for the transform-related drop zones to only “unlock” after a long hover over the area. In this scenario, a quick drag and drop would always default to an image replacement with a longer hover opening up additional options (but I think the simpler interaction described above is closer to the expected behavior).

On GitHub

• Use drag and drop to transform an Image block → Gallery block #32819
• Unify drag and drop behavior across Image block and Gallery block #32820

Thoughts?

Please feel free to leave a comment below or drop a message in the #design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Looking forward to hearing your feedback, thanks for reading!

#blocks, #design, #gutenberg