jQuery – draggable item in custom Gutenberg block

I’m developing some custom blocks in the new Gutenberg editor experience, and I’m struggling to figure out how to use some of the build-in components, mostly draggable components.

What I want to achieve is a list of objects (let’s say several li one in ul) and I want them to be orderable with drag and 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 backend it is rendered correctly but items are not draggable

Unfortunately the Gutenberg Developer Handbook doesn’t give much information https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/draggable/ and I’m not seeing how I should be doing this.

thanks and cheers

Leave a Comment