Drag and drop from inserter to post

[jwold]

Interested in options for adding drag and drop in the following situations:

1. Drag from insert modal to desired location on screen between existing blocks

2. Drag blocks above/below each other by dragging the gray borders covered by #38

Annotations:

Note: This may have already been discussed, if so we can close this out.

[mtias]

Related #38.

[jwold]

@mtias thanks! That covers item #2 so we can ignore that. What about #1?

[mtias]

Sounds interesting as a progressive enhancement :)

[buzztone]

We've found that Drag from insert modal to desired location on screen between existing blocks is still not well developed within the currently available React based npm modules.

Drag blocks above/below each other by dragging the gray borders is by contrast well supported & very solid.

[buzztone]

Another way to give insert modal to desired location on screen between existing blocks could be to allow positioning of the + icon via arrows & vertical dragging.

If I could position the + icon where I want before I click it or Insert, I could add each block where I want.

[folletto]

If I could position the + icon where I want before I click it or Insert, I could add each block where I want.

This should already be working – just not with the + icon: it inserts below the block you've currently selected (or in other words: where the cursor is). Does it work for you?

[buzztone]

Does it work for you?

Yes. Though I wasn't previously aware of this, I can see it when I go looking for it based on your explanation.

It's pretty well hidden. To see it I had to:

1. Select a Block
2. Click on the + icon
3. Hover over an item in the Inserter

[jwold]

If I could position the + icon where I want before I click it or Insert, I could add each block where I want.

Since this is already working do you feel it offsets the need for drag and drop?

[buzztone]

Since this is already working do you feel it offsets the need for drag and drop?

No - not at all.

[jeffpaul]

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.

[mapk]

The Inserter is now a sidebar that slides out when activated. As a sidebar, the ability to drag and drop blocks directly to the document feels much more natural. I'd like to look into how we can make this happen.

Current Inserter

[gziolo]

It didn't take me much time to come to the same idea after the inserter was refactored :) It would make it so much easier to put a block or pattern in the nested context at the specific level. In addition, it feels more natural to drag and drop items rather than use the in-between the blocks inserter:

By the way, have you considered changing the way in-between the blocks works with drag & drop from the inserter? At the moment it's very difficult to trigger (I'm using Safari), but regardless, it could maybe set the selection in the editor accordingly to the placement clicked and open the sidebar with the inserter?

[mapk]

I agree, the sibling is SUPER difficult to activate right now. I'm not sure why.

Having it trigger the sidebar Inserter is an interesting solution. Will pushing the focus to the Inserter sidebar have any a11y ramifications?

I remember, at one time, we talked about the sibling Inserter opening the Patterns tab by default too.

Getting drag and drop right is going to be enough for this particular issue. It would be great to get some development help on it.

[mapk]

Being able to drag from the Inserter panel into the editor is also becoming a frequently requested item for the new Widget Screen. People would like to drag blocks directly into specific widget areas.

From the call for testing post: https://make.wordpress.org/core/2020/09/30/call-for-testing-the-widgets-screen-in-gutenberg-9-1/#comment-40042

Would be a nice touch to allow drag and drop of new blocks from the left block menu into the widget sections as widget users are accustom to the drag-drop from the legacy system.

[shaunandrews]

Drag-and-drop could help resolve some common confusion around adding blocks: #26404

[talldan]

I don't think drag and drop from the block library would be technically difficult. When blocks are dragged and dropped currently, a dataTransfer value is set with some data about the block (client ids of the blocks, where the block is dragged from, and a type, which is always block for blocks etc):

gutenberg/packages/block-editor/src/components/block-draggable/index.js

Lines 63 to 67 in 05ee652

	const transferData = {
	type: 'block',
	srcClientIds: clientIds,
	srcRootClientId,
	};

That's then used in the drop event:

gutenberg/packages/block-editor/src/components/use-on-block-drop/index.js

Lines 64 to 73 in 05ee652

	const {
	srcRootClientId: sourceRootClientId,
	srcClientIds: sourceClientIds,
	type: dropType,
	} = parseDropEvent( event );
	// If the user isn't dropping a block, return early.
	if ( dropType !== 'block' ) {
	return;
	}

For dragging from the inserter I imagine this would be a slightly different bit of data. The type would probably be something like insert-block or create-block, and the block type would be passed. Similar could be done for patterns, a type of insert-pattern and the pattern markup.

There are some a11y considerations. Previously there's been some feedback against a button that can be clicked and dragged when we tried that on the block toolbar.

Secondly, if the block is selected after being dropped, the block library panel will close as it's a popover. That probably makes this a little less useful, but it's the same at the moment when clicking a block in the library.

[mtias]

Secondly, if the block is selected after being dropped, the block library panel will close as it's a popover.

For what is worth, there's been some feedback about changing this behaviour.