Improve drag & drop support in the blocks engine

[sneridagh]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Víctor Fernández de Alba (@sneridagh)

Seconder:

Abstract

Refactor the current Volto drag and drop infrastructure and components to use react-aria library. Extend the feature set to being able to support move blocks between the main blocks stream and block containers (row block, grid block, group block, etc).

Motivation

The current drag & drop infrastructure in Volto is using the library react-beautiful-dnd (https://github.com/atlassian/react-beautiful-dnd), which is currently in maintenance mode, and not actively developed anymore. It also uses the render props pattern and it's difficult to split the implementation in several components, maintaining the functionality. Although it does support nested draggables, the implementation is a bit cumbersome and difficult to adapt for our use case.

Adobe's react-aria library is actively maintained and makes use of React hooks extensively and it can be split across multiple components.

The idea is to replace the current implementation with one using react-aria drag and drop hooks.

While we are on it, the refactor should be able to support move blocks between block containers and the stream and vice versa. Move block between several block containers should be possible as well.

Assumptions

Proposal & Implementation

There is a PoC PR in the making: https://github.com/plone/volto/pull/3547

It needs to be polished and completed.

The current implementation uses a de-centralised context for all the drag and drop elements, not being possible to cross work between them. The DragDropList is a component that is used as base to create drag and drop UX across Volto. It's used in the main blocks engine too.

https://github.com/plone/volto/blob/master/src/components/manage/DragDropList/DragDropList.jsx

Problem with this implementation is that every component that uses it creates a new isolated drag and drop context, making impossible to drop any draggable from outside this context.

Deliverables

• [ ] Create a unique, detached main blocks engine context that will control all draggables and droppables inside the engine. See: https://github.com/plone/volto/blob/0b3fed4aad71a1d6ac8e01d5d3ef1dfaece50106/src/components/manage/BlocksDnD/BlocksDnDContainer.jsx
• [ ] Refactor BlocksForm and the EditBlockWrapper accordingly to match the dnd-kit library
• [ ] Create an alternate DragDropList component using dnd-kit for being able to continue creating component UXs
• [ ] Leave DragDropList as deprecated and BBB for now.
• [ ] Improve the collision detection and the drag snapshot (DragOverlay) for an optimal UX
• [ ] Improve the animations for an optimal UX
• [ ] Try to explore different approaches with the drag snapshot (eg. use a lighter visual indicator, like a line for the drop position), right now, due to the different block heights using the usual animation for the whole block seems a bit cumbersome and the block are "jumping" all the time. A more simpler and steady approach would be more desirable.

Risks

We will leave the original DragDropList for BBB compatibility, deprecating it and react-beautiful-dnd as a dependency using the normal deprecation policy.

It could be a breaking change, since blocks container add-ons are usually shadowing/reusing some key components. We have to study it when it's done.

Participants

@sneridagh: I can champion, mentor and guide the efforts, and occasionally help with it, but I can't take care of the implementation itself.

[tiberiuichim]

I would include "virtualized list" as highly desirable feature with the new implementation. This would improve performance on big edit pages.

The DragDropList replacement is a low priority, from my perspective.

[sneridagh]

@Darkcoder011 thanks for pointing it out, fixed.

[sneridagh]

@arup1221 @Darkcoder011 https://community.plone.org/t/gsoc-students-please-focus-on-your-application-restrictions-on-developer-team-access-on-github/17041

[tisto]

@sneridagh @robgietema what's the status of this PLIP? I know that @robgietema worked on this during Beethoven Sprint. The PLIP is currently marked with Volto 18. Does that mean it won't make it into Plone 6.1 and is rather something for Plone 6.2?

[sneridagh]

@tisto yeah, I think Rob did good progress on this one, but nothing complete. It's something complex that we won't have ready for 6.1... That's why I slated it for 18.

[tisto]

@sneridagh I was under the assumption that @robgietema changed the Drag & Drop to use a line instead of calculating the entire block (which causes issues). Wasn't this separated from the full replacement of the D&D library?

[sneridagh]

@tisto unfortunatelly, the current library does not allow to customize the drag overlay properly, you have to use the new one. So, yes, all the work (in progress) is right now (as far as I know) in https://github.com/plone/volto/commits/newDandDBlueLine