Drag blocks into other blocks to create patterns and layouts

[mapk]

Problem:

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.

Solution:

Dragging and dropping a simple block onto another simple block produces an already existing core complex block.

Example:

Drag and drop a simple text block onto a simple image block, and you get a complex Media+Text block.

---

[ZebulanStanphill]

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 (flex-direction: row) Container blocks that wrap the 2 blocks involved in the drag-and-drop action, allowing for more generic (anything beside anything) and more powerful page building functionality, similar to how you can do stuff in plugins like Beaver Builder. In fact, this idea could potentially even replace the Media & Text block entirely.

[ZebulanStanphill]

I just found the old mockups I was referring to; they were in #219:

[mapk]

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.

This is correct. The gif was meant to just convey the experience, not the actual UI.

keep in mind that people may want to reverse this conversion later on.

You bring up a good point. I hadn't thought of that.

[kjellr]

Sharing a couple other animations to get this idea across:

Creating a Cover
https://cloudup.com/cZvhyKK6YS1

Creating a Media + Text block
https://cloudup.com/cBYXErSlphk

(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.)

[mapk]

Here's a couple ways in which this interaction is done with other software applications.

Paper

Medium

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:

[kjellr]

I like that. The "drag two images together to make a gallery" example is probably the clearest first iteration of this.

[talldan]

This could potentially be something handled by the transform system. At the moment, most transforms are for a single block to another single block type. Multiple blocks of a single type can also be transformed to a single block (multiple images to a gallery) using the isMultiBlock option.

This could be considered a combination transform. Something like:

// 'from' transform for media-text block
{
	type: 'block',
	blocks: [ 'core/image' ],
	combinedWith: [ 'core/paragraph' ],
	transform: ( imageBlockAttributes, paragraphBlockAttributes ) => ( // ... create media-text block )
}

Multiselecting the two blocks and using the transform menu as well as drag and drop could be considered valid ways of performing the transform.

[aristath]

Looking at all the drag-n-drop examples above, I get the feeling that they could all be accomplished using columns. So not by converting 2 simple blocks to 1 complex block, but by wrapping these 2 blocks in columns.
For example the example where the user drags text on top of an image: Internally we could figure out if they dropped the text on the left side or right side of the image. That will tell us which will go first, the text or the image. Then we create a new columns block, move inside it the image and the text ordering them accordingly.
So it looks like all we need in order to accomplish this is a smart-columns block, one where we can auto-calc the number of columns. This will allow us to auto-reduce the number of columns when dragging an image from inside a column to below the columns.
Reordering elements inside that smart-columns block could be done if we limit it to say 1 block per column only. In that case, dragging the a block inside the smart-columns will add a new column. Dragging an element outside it will reduce the number of columns, and dragging an element to another place inside the smart-columns will reorder the columns.

[mapk]

For example the example where the user drags text on top of an image: Internally we could figure out if they dropped the text on the left side or right side of the image.

But what if the user was trying to create a layout that had the text on top of the image? Say, like the Cover block?

I do like the idea of smart columns, but I'd love to see some simple block conversion happen. An flow that recognizes there's a more complex block that can be substituted based on the user's interaction.

[tellthemachines]

With #56186 merged, I think we're good to finally close this one!