Dragging content from sidebar

[SofiaSousa]

Since gutenberg editor already has the drag and drop feature for blocks inside the page, I think would be great to apply the same concept for the content of the blocks.

Here is an example for what we have in StoryPage (which is a prototype using standalone-gutenberg editor)

(Try it here https://storypage.devz.no/pages/new?template=minerva)

I'm available to share our approach and hope we can have a produtive discuss. What are your thoughts about this?

[mtias]

Also related #1511

[chrisvanpatten]

@SofiaSousa I can think of a few cases where I'd use this. Would be very interested to see how you accomplished this.

[perandre]

I guess this is a question not about introducing it into core, but providing a cleaner way to accomplish a similar result. Currently, some messy overrides are needed to make it work.

[SofiaSousa]

We've tried 2 different options for drag and drop from the sidebar scenario:

1. Inserting a new block
2. Updating an existing block

StoryPage is using Gutenberg@3.2.0 via gutenberg-js@1.2.1 (where we implemented the overrides). Many changes have been made in code so far, but the flow is the same.

First we've created the PostItemDraggable, which was inspired in BlockDraggable component, and added a list of those items to sidebar.

1. Inserting a new block

• We used createdBlock to create the new block inside PostItemDraggable and passed it through a new blocks property in transferDataobject
• Overrided onDrop in BlockDropZone and check if blocks come with dataTransfer before insertBlocks

2. Updating an existing block

• Instead of creating a block, we only had to add attributes to transferDataobject
• Overrided BlockListBlock to pass uid to BlockDropZone
• Overrided onDrop in BlockDropZone and check if attributes come with dataTransfer before updateBlockAttributes

[brentjett]

Has there been any movement on this? It appears BlockDropZone is no longer a component (looking at 7.8 codebase) and has been replaced by an experimental useBlockDropZone() hook. Its unclear if there's a way to listen for onDrop calls anywhere.

As an aside, the block-editor/src/components/block-drop-zone/README.md could use an update as it doesn't appear there's any support for the editor.BlockDropZone hook any longer.

[t-hamano]

We believe that the proposal in this issue can be achieved in the current Gutenberg API by using the following two components:

• DropZone: https://wordpress.github.io/gutenberg/?path=/story/components-dropzone--default
• Draggable: https://wordpress.github.io/gutenberg/?path=/story/components-draggable--default

The video below shows how to drag and drop an element wrapped in a Draggable component into a DropZone component.

205f97af8a3a6bcce013710d6e4a1558.mp4

Specifically, the implementation should be as follows:

• Inject some content into the sidebar via registerPlugin or similar.
• Add the elements you want to make draggable to it, and wrap them in the Draggable component.
• Create a custom block.
• Add the DrozZone component into the Edit component.
• When a file is dragged and dropped, perform some processing via the onDrop prop or similar.

I would like to close this issue, but please leave a comment if there is anything that can't be achieved with the current API.