Drag & Drop using long press.

[paaljoachim]

Is your feature request related to a problem? Please describe.
There is a discoverability issue with drag & drop today. I know it is being improved upon, but I wanted to add another method.

Describe the solution you'd like
This is another method for using drag & drop. It has earlier been discussed but I did not locate an issue for it, so I am adding one here.

Long press (as I see it) is holding down the cursor over a block, link or anything else that can be dragged so that the outline is seen and one can drag & drop the item.

That can mean that long press after a few seconds automatically goes into select mode where the outline is seen.

Drag mode:

Drag mode:

Describe alternatives you've considered
Using the existing method of holding the cursor over the dots in the toolbar and then dragging.

[ItsJonQ]

I took a look at this once today. I'm not too familiar with the "Select" mode, so there may be some things I'm missing.

🎚 Select -> Edit mode switching

While in select mode, I noticed that it would switch back to "Edit" mode the moment I click on something "after" or "below" text content.

For example, if there was a paragraph with the world "Hello".
Clicking + holding on the word or before the word "Hello" is okay. However, clicking after the word "Hello" changes it to Edit mode.

This may make adding this feature tricky.

♾ Couldn't setup BlockDraggable

BlockDraggable appears to be the component used by BlockMovers to handle the drag/move interactions of the block.
For some reason, when I try to use it within block-list/block, it goes into an infinite callstack loop, crashing my browser. I kept trying to debug this. As you can imagine, it's tough when your browser freezes/crashes every time 🙈 .

For context, I tried to do something like this:

(Note: I'm not sure if this should be the final markup. I just wanted to see if it would work)

// packages/block-editor/src/components/block-list/block.js
	} else if ( lightBlockWrapper ) {
		block = blockEdit;
	} else {
		block = <Block { ...wrapperProps }>{ blockEdit }</Block>;
	}

	if ( isNavigationMode ) {
		block = (
			<BlockDraggable
				clientIds={ blockClientIds }
				cloneClassname="block-editor-block-mover__drag-clone"
			>
				{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
					<div
						className="block-editor-block-mover__drag-handle"
						aria-hidden="true"
						// Should not be able to tab to drag handle as this
						// button can only be used with a pointer device.
						tabIndex="-1"
						onDragStart={ onDraggableStart }
						onDragEnd={ onDraggableEnd }
						draggable={ isDraggable }
					>
						{ block }
					</div>
				) }
			</BlockDraggable>
		);
	}

Data via the selector:

blockClientIds -> getSelectedBlockClientIds()
isNavigationMode -> isNavigationMode()

I can try again tomorrow. I'm leaving these notes in case anyone who has more experience with select mode x block-list/block and BlockDraggable may have some ideas.

[mtias]

See #23497 and #24092.

[paaljoachim]

I am not certain how to proceed with this or the other issues/PRs.
Thoughts @mtias and @ItsJonQ ?

@ellatrix @mapk

[talldan]

#23497 has now been reopened, so linking the issue and PR together.

[paaljoachim]

I happen to come across this issue:
Click-and-hold highlighted text to reposition it
#3339

That makes it a bit tricky with longpress to move a block.
(Adding the same comment directly to the PR.)