block-components icon indicating copy to clipboard operation
block-components copied to clipboard

Try replacing DND-Kit with core `Draggable` component

Open fabiankaegy opened this issue 1 year ago • 6 comments

I just stumbled across the fact that core has a Draggable component. It would be great to not have to include / bundle all of DND-Kit in the block components and instead leverage the bundled solution

fabiankaegy avatar Apr 30 '24 09:04 fabiankaegy

I've tried working in this one last week, then found Draggable does not work inside the block editor.

Sidsector9 avatar Aug 12 '24 06:08 Sidsector9

@Sidsector9 just making sure, I was suggesting we use this component here: https://github.com/WordPress/gutenberg/tree/24f9ca62b0b83d3832233d276fea564b1714a172/packages/components/src/draggable

fabiankaegy avatar Aug 12 '24 07:08 fabiankaegy

@fabiankaegy yep, that's the component I was trying to use.

Sidsector9 avatar Aug 12 '24 08:08 Sidsector9

Hmm okay that is annoying then

fabiankaegy avatar Aug 12 '24 08:08 fabiankaegy

I'm working on a Vanilla JS solution for reordering in React Components. This'll help to not use Dnd-kit. This is working in a simple React App, trying to figure out how best to use it with a component like Repeater.

https://github.com/user-attachments/assets/17157525-ad74-4990-a3fb-cca91c902f35

Sidsector9 avatar Aug 19 '24 07:08 Sidsector9

Update

This is working well within Inspector Controls, but not within blocks.

Note: There's something weird going on. Whenever Yoast is disabled, Repeater (develop branch) breaks. I'm not sure why.

https://github.com/user-attachments/assets/ab90cf5b-e62d-4d2f-9aa5-b0b556f57513

Sidsector9 avatar Aug 19 '24 12:08 Sidsector9