Gutenberg: Drag and drop broken in Safari

[jasmussen]

While working on #22673, I noted that drag and drop did not work in Safari.

Steps to reproduce:

• Use Safari
• Insert more than one block
• Hover the block switcher to revealthe mover
• Drag and drop the block

Observe that it doesn't work.

There's no error in the console.

[jasmussen]

CC: @WordPress/gutenberg-core

[jasmussen]

While you're here, I noticed this CSS: https://github.com/WordPress/gutenberg/blob/master/packages/components/src/draggable/style.scss#L1

body.is-dragging-components-draggable {
    cursor: move;/* Fallback for IE/Edge < 14 */
    cursor: grabbing !important;
}

The intent seems to be to show the "grabbing" cursor while you are performing a drag operation. But this doesn't work, and it seems like it's not possible to change the cursor _during a drag operation_ without JavaScript. This SO post suggests to use dropEffect, which appears to work in this fiddle.

[diegohaz]

I've done some investigation and it seems that this is a regression introduced by the Reakit Toolbar. Working on it.

[ellatrix]

@diegohaz I don't see this fixed in Gutenberg. It seems it's only been fixed upstream?

[ellatrix]

Oh, I see the PR now. But for me, drag and drop is still broken in Safari.

[ellatrix]

Maybe related to the new movers? Cc @jasmussen

[jasmussen]

I had to do an npm install and build to get it working. Worked for me with the new movers.

[diegohaz]

@ellatrix I think it's what @jasmussen said. It works for me locally and on https://wordpress.github.io/gutenberg/?path=/story/playground-block-editor--default

[ellatrix]

Duh, stupid of me :) Sorry for the false alarm