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


Use react-sortable-hoc Draggable is lacking documentation and I did not had the time to dig into it. But the above is for you. I used it to create the sidebar Entry Content/Primary Sidebar control - used to reorder my theme content/sidebar! 2

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.