Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Simple block + Simple block = Complex block #13202
In many of the user research videos of Gutenberg, the users tended to try and align items by dragging and dropping them in the editor. They'd want to display two images side-by-side by dragging them next to each other.
Dragging and dropping a simple block onto another simple block produces an already existing core complex block.
Drag and drop a simple text block onto a simple image block, and you get a complex Media+Text block.
Notably, if this were actually implemented, you would have to be dragging blocks from the drag handle on their side, not the middle of the block as shown in the mockup GIF. You couldn't drag a text block like the GIF shows because it would just select the text inside it.
It is also important to keep in mind that people may want to reverse this conversion later on. The most obvious way to handle this would be the block switcher, but its UI is designed around converting one block to one block, multiple blocks to one block, or one block to multiple of the same type of block. It does not currently account for situations where you want to convert one block to multiple different types of blocks, e.g. going from a Media & Text block to a Paragraph block followed by an Image block. The UI would have to be tweaked for conversion options like this to be clearly displayed/communicated to the user.
I also recall an old mockup where the blue lines that appear between blocks when drag-and-dropping also appeared to the left and right of blocks. This could potentially allow for different conversions involving the Media & Text block where the order of image and text is determined when the drag-and-drop action happens, meaning the user does not have to manually discover and then use the toolbar option to change the text/image order.
On the other hand, the left/right blue lines idea may be better reserved for creating column or CSS Flex (
This is correct. The gif was meant to just convey the experience, not the actual UI.
You bring up a good point. I hadn't thought of that.
Sharing a couple other animations to get this idea across:
Creating a Cover
Creating a Media + Text block
(Note that these both happen to place the drag handle on the right, and a layout grid during resize, which aren't necessarily part of the core concept here.)
Here's a couple ways in which this interaction is done with other software applications.
In Gutenberg we already use a blue line pattern for dragging and dropping blocks above or below other blocks. We just need to extend this to a side-by-side drop position now too. Something like this: