Gallery Drag and Drop Reordering [Using Draggable alternative]

packages/block-library/src/gallery/edit.js

@@ -14,6 +14,7 @@ import {
 	FormFileUpload,
 	PanelBody,
 	RangeControl,
+	ReorderZone,
 	SelectControl,
 	ToggleControl,
 	Toolbar,
@@ -57,17 +58,18 @@ class GalleryEdit extends Component {
 		this.setImageAttributes = this.setImageAttributes.bind( this );
 		this.addFiles = this.addFiles.bind( this );
 		this.uploadFromFiles = this.uploadFromFiles.bind( this );
+		this.handleDrop = this.handleDrop.bind( this );
 
 		this.state = {
 			selectedImage: null,
 		};
 	}
 
-	onSelectImage( index ) {
+	onSelectImage( imageId ) {
 		return () => {
-			if ( this.state.selectedImage !== index ) {
+			if ( this.state.selectedImage !== imageId ) {
 				this.setState( {
-					selectedImage: index,
+					selectedImage: imageId,
 				} );
 			}
 		};
@@ -143,6 +145,29 @@ class GalleryEdit extends Component {
 		} );
 	}
 
+	arrayMove( arr, previousIndex, newIndex ) {
+		const array = arr.slice( 0 );
+		array.splice( newIndex, 0, array.splice( previousIndex, 1 )[ 0 ] );
+		return array;
+	}
+
+	handleDrop( oldIndex, newIndex ) {
+		// Don't do anything if dropping on adjacent zone
+		if ( newIndex === oldIndex || newIndex === oldIndex + 1 ) {
+			return;
+		}
+		// Set the correct index when dragging to the right
+		if ( newIndex > oldIndex ) {
+			newIndex -= 1;
+		}
+		const images = this.props.attributes.images;
+		const { setAttributes } = this.props;
+		const reorderedImages = this.arrayMove( images, oldIndex, newIndex );
+		setAttributes( {
+			images: reorderedImages,
+		} );
+	}
+
 	componentDidUpdate( prevProps ) {
 		// Deselect images when deselecting the block
 		if ( ! this.props.isSelected && prevProps.isSelected ) {
@@ -154,7 +179,7 @@ class GalleryEdit extends Component {
 	}
 
 	render() {
-		const { attributes, isSelected, className, noticeOperations, noticeUI } = this.props;
+		const { attributes, isSelected, className, noticeOperations, noticeUI, clientId } = this.props;
 		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
 
 		const dropZone = (
@@ -238,20 +263,26 @@ class GalleryEdit extends Component {
 				{ noticeUI }
 				<ul className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 					{ dropZone }
-					{ images.map( ( img, index ) => (
-						<li className="blocks-gallery-item" key={ img.id || img.url }>
+					{ images.map( ( img, index ) => {
+						const imageId = `gallery_image_${ clientId }_${ img.id }`;
+						return <li className="blocks-gallery-item" key={ img.id || img.url }>
+							<ReorderZone index={ index } handleDrop={ this.handleDrop } />
 							<GalleryImage
 								url={ img.url }
 								alt={ img.alt }
 								id={ img.id }
-								isSelected={ isSelected && this.state.selectedImage === index }
+								dragId={ imageId }
+								isSelected={ isSelected && this.state.selectedImage === imageId }
+								index={ index }
 								onRemove={ this.onRemoveImage( index ) }
-								onSelect={ this.onSelectImage( index ) }
+								onSelect={ this.onSelectImage( imageId ) }
 								setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
 								caption={ img.caption }
 							/>
-						</li>
-					) ) }
+							{ index === images.length - 1 &&
+							<ReorderZone index={ images.length } handleDrop={ this.handleDrop } last /> }
+						</li>;
+					} ) }
 					{ isSelected &&
 						<li className="blocks-gallery-item has-add-item-button">
 							<FormFileUpload

packages/block-library/src/gallery/editor.scss

@@ -104,10 +104,25 @@
 	}
 }
 
+.block-library-gallery-item__inline-move {
+	padding: 2px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: theme(primary);
+	display: inline-flex;
+	z-index: z-index(".block-library-gallery-item__inline-menu");
+}
+
 .blocks-gallery-item__remove {
 	padding: 0;
 }
 
+.blocks-gallery-item__move {
+	color: $white;
+	cursor: grab;
+}
+
 .blocks-gallery-item .components-spinner {
 	position: absolute;
 	top: 50%;

packages/block-library/src/gallery/gallery-image.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress Dependencies
  */
 import { Component } from '@wordpress/element';
-import { IconButton, Spinner } from '@wordpress/components';
+import { IconButton, Spinner, Dashicon, Draggable } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { withSelect } from '@wordpress/data';
@@ -85,7 +85,9 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes } = this.props;
+		const { url, alt, id, dragId, linkTo, link, isSelected, index, caption, onRemove, setAttributes } = this.props;
+
+		const transferData = { oldIndex: index };
 
 		let href;
 
@@ -101,7 +103,7 @@ class GalleryImage extends Component {
 		// Disable reason: Image itself is not meant to be
 		// interactive, but should direct image selection and unfocus caption fields
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-		const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } /> : <Spinner />;
+		const img = url ? <img id={ dragId }src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } /> : <Spinner />;
 
 		const className = classnames( {
 			'is-selected': isSelected,
@@ -113,13 +115,36 @@ class GalleryImage extends Component {
 		return (
 			<figure className={ className } tabIndex="-1" onKeyDown={ this.onKeyDown } ref={ this.bindContainer }>
 				{ isSelected &&
-					<div className="block-library-gallery-item__inline-menu">
-						<IconButton
-							icon="no-alt"
-							onClick={ onRemove }
-							className="blocks-gallery-item__remove"
-							label={ __( 'Remove Image' ) }
-						/>
+					<div>
+						<div className="block-library-gallery-item__inline-menu">
+							<IconButton
+								icon="no-alt"
+								onClick={ onRemove }
+								className="blocks-gallery-item__remove"
+								label={ __( 'Remove Image' ) }
+							/>
+						</div>
+						<div className="block-library-gallery-item__inline-move">
+							<Draggable
+								elementId={ dragId }
+								transferData={ transferData }
+							>
+								{
+									( { onDraggableStart, onDraggableEnd } ) => (
+										<span
+											draggable
+											onDragStart={ onDraggableStart }
+											onDragEnd={ onDraggableEnd }
+										>
+											<Dashicon
+												icon="move"
+												className="blocks-gallery-item__move"
+											/>
+										</span>
+									)
+								}
+							</Draggable>
+						</div>
 					</div>
 				}
 				{ href ? <a href={ href }>{ img }</a> : img }

packages/components/src/index.js

@@ -44,6 +44,7 @@ export { default as QueryControls } from './query-controls';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
+export { default as ReorderZone } from './reorder-zone';
 export { default as SandBox } from './sandbox';
 export { default as SelectControl } from './select-control';
 export { default as Spinner } from './spinner';

packages/components/src/reorder-zone/index.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+class ReorderZone extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.handleDrop = this.handleDrop.bind( this );
+		this.handleDragEnter = this.handleDragEnter.bind( this );
+		this.handleDragLeave = this.handleDragLeave.bind( this );
+	}
+
+	handleDrop( event ) {
+		event.preventDefault();
+		const { handleDrop, index } = this.props;
+		this.handleDragLeave( event );
+		const transferData = JSON.parse( event.dataTransfer.getData( 'text' ) );
+		handleDrop( transferData.oldIndex, index );
+	}
+
+	handleDragEnter( event ) {
+		event.target.classList.add( 'hovering' );
+	}
+
+	handleDragLeave( event ) {
+		event.target.classList.remove( 'hovering' );
+	}
+
+	render() {
+		const { last } = this.props;
+		const className = classnames( 'block-gallery__reorder-zone', { last } );
+		return (
+			<div className={ className } onDrop={ this.handleDrop } onDragEnter={ this.handleDragEnter }
+				onDragLeave={ this.handleDragLeave }>
+			</div>
+		);
+	}
+}
+
+export default ReorderZone;

packages/components/src/reorder-zone/style.scss

@@ -0,0 +1,16 @@
+.block-gallery__reorder-zone {
+	height: 183px;
+	width: 8px;
+	left: -12px;
+	position: absolute;
+	z-index: 101;
+
+	&.last {
+		left: auto;
+		right: -12px;
+	}
+
+	&.hovering {
+		background-color: #0085ba;
+	}
+}

packages/editor/src/components/block-list/block.js

@@ -259,8 +259,8 @@ export class BlockListBlock extends Component {
 	 *
 	 * @return {void}
 	 */
-	preventDrag( event ) {
-		event.preventDefault();
+	preventDrag() {
+		// event.preventDefault();
 	}
 
 	/**