From eb4c52278b83d2f5433e383c864bd1c2c5872c57 Mon Sep 17 00:00:00 2001
From: caxco93 <caxco93@gmail.com>
Date: Mon, 17 Sep 2018 00:02:33 -0500
Subject: [PATCH 1/7] Added Draggable handle to Gallery Images

---
 packages/block-library/src/gallery/edit.js    | 12 +++---
 .../block-library/src/gallery/editor.scss     | 12 ++++++
 .../src/gallery/gallery-image.js              | 40 ++++++++++++++-----
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index ae9e54d8be27d..ce4887e7f6fce 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -154,7 +154,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 +238,22 @@ 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 id={ imageId } className="blocks-gallery-item" key={ img.id || img.url }>
 							<GalleryImage
 								url={ img.url }
 								alt={ img.alt }
 								id={ img.id }
+								dragId={ imageId }
 								isSelected={ isSelected && this.state.selectedImage === index }
 								onRemove={ this.onRemoveImage( index ) }
 								onSelect={ this.onSelectImage( index ) }
 								setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
 								caption={ img.caption }
 							/>
-						</li>
-					) ) }
+						</li>;
+					} ) }
 					{ isSelected &&
 						<li className="blocks-gallery-item has-add-item-button">
 							<FormFileUpload
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index e4b82f3c4e59d..fc0505d6ac204 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -104,7 +104,19 @@
 	}
 }
 
+.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 {
+	color: $white;
+	cursor: grab;
 	padding: 0;
 }
 
diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index d2a3ad4f22e49..bfedfb154ce7e 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/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, caption, onRemove, setAttributes } = this.props;
+
+		const transferData = { message: 'message' };
 
 		let href;
 
@@ -113,13 +115,33 @@ 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 } ) => (
+										<Dashicon
+											icon="move"
+											onDragStart={ onDraggableStart }
+											onDragEnd={ onDraggableEnd }
+											className="blocks-gallery-item__remove"
+											draggable
+										/>
+									)
+								}
+							</Draggable>
+						</div>
 					</div>
 				}
 				{ href ? <a href={ href }>{ img }</a> : img }

From 635bbcdc1d753d4d84e6b597245e84783a0cd75e Mon Sep 17 00:00:00 2001
From: caxco93 <caxco93@gmail.com>
Date: Thu, 20 Sep 2018 23:05:20 -0500
Subject: [PATCH 2/7] Wrapped Dashicon with a `span`

---
 packages/block-library/src/gallery/gallery-image.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index bfedfb154ce7e..0f2f1b5a5797c 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -131,13 +131,16 @@ class GalleryImage extends Component {
 							>
 								{
 									( { onDraggableStart, onDraggableEnd } ) => (
-										<Dashicon
-											icon="move"
+										<span
+											draggable
 											onDragStart={ onDraggableStart }
 											onDragEnd={ onDraggableEnd }
-											className="blocks-gallery-item__remove"
-											draggable
-										/>
+										>
+											<Dashicon
+												icon="move"
+												className="blocks-gallery-item__remove"
+											/>
+										</span>
 									)
 								}
 							</Draggable>

From 8ed52aa6beb51c30875666904315706e96d7f493 Mon Sep 17 00:00:00 2001
From: caxco93 <caxco93@gmail.com>
Date: Sun, 30 Sep 2018 02:34:35 -0500
Subject: [PATCH 3/7] Implemented and added Reorder Dropzones

There are now Reorder Dropzones around the Gallery Items.
These require a `handleDrop` prop which perform the reordering.
---
 packages/block-library/src/gallery/edit.js    | 29 +++++++++++
 .../src/gallery/gallery-image.js              |  4 +-
 packages/components/src/index.js              |  1 +
 packages/components/src/reorder-zone/index.js | 52 +++++++++++++++++++
 .../components/src/reorder-zone/style.scss    | 16 ++++++
 5 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/reorder-zone/index.js
 create mode 100644 packages/components/src/reorder-zone/style.scss

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index ce4887e7f6fce..77451778cc29b 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -14,6 +14,7 @@ import {
 	FormFileUpload,
 	PanelBody,
 	RangeControl,
+	ReorderZone,
 	SelectControl,
 	ToggleControl,
 	Toolbar,
@@ -57,6 +58,7 @@ 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,
@@ -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 ) {
@@ -241,17 +266,21 @@ class GalleryEdit extends Component {
 					{ images.map( ( img, index ) => {
 						const imageId = `gallery_image_${ clientId }_${ img.id }`;
 						return <li id={ imageId } 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 }
 								dragId={ imageId }
 								isSelected={ isSelected && this.state.selectedImage === index }
+								index={ index }
 								onRemove={ this.onRemoveImage( index ) }
 								onSelect={ this.onSelectImage( index ) }
 								setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
 								caption={ img.caption }
 							/>
+							{ index === images.length - 1 &&
+							<ReorderZone index={ images.length } handleDrop={ this.handleDrop } last /> }
 						</li>;
 					} ) }
 					{ isSelected &&
diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index 0f2f1b5a5797c..c6d16212a69c9 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -85,9 +85,9 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const { url, alt, id, dragId, linkTo, link, isSelected, caption, onRemove, setAttributes } = this.props;
+		const { url, alt, id, dragId, linkTo, link, isSelected, index, caption, onRemove, setAttributes } = this.props;
 
-		const transferData = { message: 'message' };
+		const transferData = { oldIndex: index };
 
 		let href;
 
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 6a3578f58dfb2..9458788c4fa54 100644
--- a/packages/components/src/index.js
+++ b/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';
diff --git a/packages/components/src/reorder-zone/index.js b/packages/components/src/reorder-zone/index.js
new file mode 100644
index 0000000000000..fa370daad1d93
--- /dev/null
+++ b/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;
diff --git a/packages/components/src/reorder-zone/style.scss b/packages/components/src/reorder-zone/style.scss
new file mode 100644
index 0000000000000..adc36d7d5c6e9
--- /dev/null
+++ b/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;
+	}
+}

From fff6f874713bddbab7bdc3513c56817d2e148389 Mon Sep 17 00:00:00 2001
From: caxco93 <caxco93@gmail.com>
Date: Sun, 30 Sep 2018 03:31:45 -0500
Subject: [PATCH 4/7] Removed only to try out the changes

This commit must not be present when merging!
---
 packages/editor/src/components/block-list/block.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
index e417996f4e01a..f6a5f5bd5a655 100644
--- a/packages/editor/src/components/block-list/block.js
+++ b/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();
 	}
 
 	/**

From f070fafe4cd6ac50547487d91d68c96e4588d8e0 Mon Sep 17 00:00:00 2001
From: caxco93 <caxco93@gmail.com>
Date: Sun, 30 Sep 2018 03:42:22 -0500
Subject: [PATCH 5/7] Changed selectedImage from index based to id based

This helps keep the selection after reordering
---
 packages/block-library/src/gallery/edit.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 77451778cc29b..6d04a8ed4b8ee 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -65,11 +65,11 @@ class GalleryEdit extends Component {
 		};
 	}
 
-	onSelectImage( index ) {
+	onSelectImage( imageId ) {
 		return () => {
-			if ( this.state.selectedImage !== index ) {
+			if ( this.state.selectedImage !== imageId ) {
 				this.setState( {
-					selectedImage: index,
+					selectedImage: imageId,
 				} );
 			}
 		};
@@ -272,10 +272,10 @@ class GalleryEdit extends Component {
 								alt={ img.alt }
 								id={ img.id }
 								dragId={ imageId }
-								isSelected={ isSelected && this.state.selectedImage === index }
+								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 }
 							/>

From c6aa7206ba8ecd43e68eddc42da96d7614603207 Mon Sep 17 00:00:00 2001
From: caxco93 <caxco93@gmail.com>
Date: Sun, 30 Sep 2018 04:28:59 -0500
Subject: [PATCH 6/7] Changed the id reference for the draggable clone

It now uses the Gallery Image itself instead of the
whole Gallery Item because of styling issues
---
 packages/block-library/src/gallery/edit.js          | 2 +-
 packages/block-library/src/gallery/gallery-image.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 6d04a8ed4b8ee..c52b1e342d39d 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -265,7 +265,7 @@ class GalleryEdit extends Component {
 					{ dropZone }
 					{ images.map( ( img, index ) => {
 						const imageId = `gallery_image_${ clientId }_${ img.id }`;
-						return <li id={ imageId } className="blocks-gallery-item" key={ img.id || img.url }>
+						return <li className="blocks-gallery-item" key={ img.id || img.url }>
 							<ReorderZone index={ index } handleDrop={ this.handleDrop } />
 							<GalleryImage
 								url={ img.url }
diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index c6d16212a69c9..ce1902609f17d 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -103,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,

From 2a94a77221270ec876b7916f0ca01fa84cffe27e Mon Sep 17 00:00:00 2001
From: caxco93 <caxco93@gmail.com>
Date: Fri, 5 Oct 2018 18:21:42 -0500
Subject: [PATCH 7/7] Set the correct styling for the Drag Handle Icon

---
 packages/block-library/src/gallery/editor.scss      | 5 ++++-
 packages/block-library/src/gallery/gallery-image.js | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index fc0505d6ac204..68b1b5922dd4f 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -115,9 +115,12 @@
 }
 
 .blocks-gallery-item__remove {
+	padding: 0;
+}
+
+.blocks-gallery-item__move {
 	color: $white;
 	cursor: grab;
-	padding: 0;
 }
 
 .blocks-gallery-item .components-spinner {
diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index ce1902609f17d..1b7e2d127b518 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -138,7 +138,7 @@ class GalleryImage extends Component {
 										>
 											<Dashicon
 												icon="move"
-												className="blocks-gallery-item__remove"
+												className="blocks-gallery-item__move"
 											/>
 										</span>
 									)