Gallery Drag and Drop Reordering [Using Draggable alternative]

[caxco93]

Description

[IN PROGRESS]
This PR looks to implement drag and drop reordering for the Gallery Block items.
This alternative tries to accomplish this by using the Draggable component.

Alternative to #7946
Addresses Issue #743

Known Issues:

The mouse down behaviour sticks after dropping an element. You have to click somewhere to have it behave like normal

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[oandregal]

@caxco93 @ehg Going to wrap up for the day but wanted to post here what I've found after trying this PR:

• Drag a gallery image by grabbing the move dashicon. To be specific: mousedown and mousemove events, not mousedown and mouseup events.
• Draggable's componentWillUnmount is called, which executes the resetDragState.
• Draggable's dragStart handler is fired after that.

It seems like the next step would be to understand what causes Draggable to unmount while GalleryImage hasn't been updated or unmounted. I'm not familiar with the Gallery code, but an idea worth looking into is reviewing any CSS that may change the DOM nodes of the gallery elements (its visibility, pointer-events properties, etc).

[oandregal]

Actually, forget about what I said yesterday - I was confused by two different Draggable instances. This is what is happening:

• The Draggable component attached to the gallery image is correctly bound and its dragStart method starts correctly.
• At some point later, the block itself prevents any further dragging events from firing.

Removing the preventDrag handler makes this work:

I'm unsure about the rationale for the preventDrag handler and the component that bounds it (IgnoreNestedEvents) is quite obscure. I'll need some time to understand why is there and how can we do things differently. In the meantime, I hope this unblocks this PR and work can continue to implement the actual dropping mechanism.

[oandregal]

@caxco93 I've just reviewed my workload for the coming days/weeks and I've realized I need to focus on other tasks first. Would you mind taking over from what I've left and investigating how to fix the IgnoreNestedEvents thing?

[caxco93]

Yes @nosolosw absolutely I will continue this. Thank you very much for all the info!

[caxco93]

Hey @nosolosw, would you mind taking over this now that it's on scope as of #13113? I won't be able to work on this for now.

[oandregal]

Hey Benjamin, thanks for your work so far. No worries about this, it will be taken care of.

[oandregal]

Going to close this at the moment as there is a master issue for this #743. We can always reopen later.