I am creating some {custom} blocks within the new Gutenberg editor expertise, and I am wrestle to grasp the best way to use some build-in elements, principally the Draggable elements.
What I wish to obtain is an inventory of things (as an instance many li
in a ul
) and I need them to be orderable with a drag & drop function.
Right here is my code:
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Draggable, Dashicon } from '@wordpress/elements';
import './model.scss';
import './editor.scss';
registerBlockType( 'namespace/my-custom-block',
{
title: __( 'Customized block', 'namespace'),
description: __( 'Description of the {custom} block', 'namespace' ),
class: 'frequent',
icon: 'clipboard',
key phrases: [
__( 'list', 'namespace' ),
__( 'item', 'namespace' ),
__( 'order', 'namespace' )
],
helps: {
html: false,
a number of: false,
},
attributes: {
objects: {
kind: 'array',
default: [ 'One' ,'Two' ,'Tree' ,'Four' ,'Five' ,'Six' ,'Seven' ,'Eight' ,'Nine' ,'Ten' ]
}
},
edit: props => {
return (
<ul>
{ props.attributes.objects.map( (itemLabel, id) => (
<li id={ `li_${id}` } draggable>
<Draggable
elementId={ `li_${id}` }
transferData={ {} }>
{
({ onDraggableStart, onDraggableEnd }) => (
<Dashicon
icon="transfer"
onDragStart={ onDraggableStart }
onDragEnd={ onDraggableEnd }
draggable
/>
)
}
</Draggable>
{ itemLabel }
</li>
))
}
</ul>
)
},
save: () => {
// Return null to be rendered on the server
return null;
}
}
)
On the backend aspect it’s appropriately rendered however the objects aren’t draggable
Sadly the gutenberg developer handbook would not give a lot data
https://wordpress.org/gutenberg/handbook/designers-developers/builders/elements/draggable/ and I am not seeing how ought to I do it.
Thanks and cheers