Draggable item in custom gutenberg block
I'm developing some custom blocks in the new Gutenberg editor experience, and I'm struggle to understand how to use some build-in components, mostly the Draggable components.
What I would like to achieve is a list of items (let's say many li
in a ul
) and I want them to be orderable with a drag drop feature.
Here is my code:
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Draggable, Dashicon } from '@wordpress/components';
import './style.scss';
import './editor.scss';
registerBlockType( 'namespace/my-custom-block',
{
title: __( 'Custom block', 'namespace'),
description: __( 'Description of the custom block', 'namespace' ),
category: 'common',
icon: 'clipboard',
keywords: [
__( 'list', 'namespace' ),
__( 'item', 'namespace' ),
__( 'order', 'namespace' )
],
supports: {
html: false,
multiple: false,
},
attributes: {
items: {
type: 'array',
default: [ 'One' ,'Two' ,'Tree' ,'Four' ,'Five' ,'Six' ,'Seven' ,'Eight' ,'Nine' ,'Ten' ]
}
},
edit: props = {
return (
ul
{ props.attributes.items.map( (itemLabel, id) = (
li id={ `li_${id}` } draggable
Draggable
elementId={ `li_${id}` }
transferData={ {} }
{
({ onDraggableStart, onDraggableEnd }) = (
Dashicon
icon="move"
onDragStart={ onDraggableStart }
onDragEnd={ onDraggableEnd }
draggable
/
)
}
/Draggable
{ itemLabel }
/li
))
}
/ul
)
},
save: () = {
// Return null to be rendered on the server
return null;
}
}
)
On the backend side it is correctly rendered but the items are not draggable
Unfortunately the gutenberg developer handbook doesn't give much info https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/draggable/ and I'm not seeing how should I do it.
Thanks and cheers
Topic block-editor drag-drop jquery Wordpress javascript
Category Web