Reorder blocks via drag & drop (v2. using editor dropzones).

components/draggable/README.md

@@ -0,0 +1,37 @@
+# Draggable
+
+`Draggable` is a ReactComponent that can wrap any React element to make it draggable. When used, a cross-browser (including IE) customisable drag image is created. The component clones the specified element on drag-start and uses the clone as a drag image during drag-over. Discards the clone on drag-end.
+
+## Props
+
+The component accepts the following props:
+
+### elementId
+
+The HTML id of the element to clone on drag
+
+- Type: `string`
+- Required: Yes
+
+### transferData
+
+The data object attached to the drag and drop event.
+
+- Type: `Object`
+- Required: Yes
+
+### onDragStart
+
+The function called when dragging starts.
+
+- Type: `Function`
+- Required: No
+- Default: `noop`
+
+### onDragEnd
+
+The function called when dragging ends.
+
+- Type: `Function`
+- Required: No
+- Default: `noop`

components/draggable/index.js

@@ -0,0 +1,152 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress Dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal Dependencies
+ */
+import withSafeTimeout from '../higher-order/with-safe-timeout';
+import './style.scss';
+
+const dragImageClass = 'components-draggable__invisible-drag-image';
+const cloneWrapperClass = 'components-draggable__clone';
+const cloneHeightTransformationBreakpoint = 700;
+const clonePadding = 20;
+
+class Draggable extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onDragStart = this.onDragStart.bind( this );
+		this.onDragOver = this.onDragOver.bind( this );
+		this.onDragEnd = this.onDragEnd.bind( this );
+	}
+
+	/**
+	 * Removes the element clone, resets cursor, and removes drag listener.
+	 * @param  {Object} event     The non-custom DragEvent.
+	 */
+	onDragEnd( event ) {
+		const { onDragEnd = noop } = this.props;
+		this.removeDragClone();
+		// Reset cursor.
+		document.body.classList.remove( 'dragging' );
+		event.preventDefault();
+
+		this.props.setTimeout( onDragEnd );
+	}
+
+	/*
+	 * Updates positioning of element clone based on mouse movement during dragging.
+	 * @param  {Object} event     The non-custom DragEvent.
+	 */
+	onDragOver( event ) {
+		this.cloneWrapper.style.top =
+			`${ parseInt( this.cloneWrapper.style.top, 10 ) + event.clientY - this.cursorTop }px`;
+		this.cloneWrapper.style.left =
+			`${ parseInt( this.cloneWrapper.style.left, 10 ) + event.clientX - this.cursorLeft }px`;
+
+		// Update cursor coordinates.
+		this.cursorLeft = event.clientX;
+		this.cursorTop = event.clientY;
+	}
+
+	/**
+	 *  - Clones the current element and spawns clone over original element.
+	 *  - Adds a fake temporary drag image to avoid browser defaults.
+	 *  - Sets transfer data.
+	 *  - Adds dragover listener.
+	 * @param  {Object} event					The non-custom DragEvent.
+	 * @param  {string} elementId				The HTML id of the element to be dragged.
+	 * @param  {Object} transferData			The data to be set to the event's dataTransfer - to be accessible in any later drop logic.
+	 */
+	onDragStart( event ) {
+		const { elementId, transferData, onDragStart = noop } = this.props;
+		const element = document.getElementById( elementId );
+		const elementWrapper = element.parentNode;
+		const elementRect = element.getBoundingClientRect();
+		const elementTopOffset = parseInt( elementRect.top, 10 );
+		const elementLeftOffset = parseInt( elementRect.left, 10 );
+		const clone = element.cloneNode( true );
+		const dragImage = document.createElement( 'div' );
+
+		// Set a fake drag image to avoid browser defaults. Remove from DOM right after.
+		if ( 'function' === typeof event.dataTransfer.setDragImage ) {
+			dragImage.id = `drag-image-${ elementId }`;
+			dragImage.classList.add( dragImageClass );
+			document.body.appendChild( dragImage );
+			event.dataTransfer.setDragImage( dragImage, 0, 0 );
+			this.props.setTimeout( ( ( _dragImage ) => () => {
+				document.body.removeChild( _dragImage );
+			} )( dragImage ), 0 );
+		}
+
+		event.dataTransfer.setData( 'text', JSON.stringify( transferData ) );
+
+		// Prepare element clone and append to element wrapper.
+		clone.id = `clone-${ elementId }`;
+		this.cloneWrapper = document.createElement( 'div' );
+		this.cloneWrapper.classList.add( cloneWrapperClass );
+		this.cloneWrapper.style.width = `${ elementRect.width + ( clonePadding * 2 ) }px`;
+
+		if ( elementRect.height > cloneHeightTransformationBreakpoint ) {
+			// Scale down clone if original element is larger than 700px.
+			this.cloneWrapper.style.transform = 'scale(0.5)';
+			this.cloneWrapper.style.transformOrigin = 'top left';
+			// Position clone near the cursor.
+			this.cloneWrapper.style.top = `${ event.clientY - 100 }px`;
+			this.cloneWrapper.style.left = `${ event.clientX }px`;
+		} else {
+			// Position clone right over the original element (20px padding).
+			this.cloneWrapper.style.top = `${ elementTopOffset - clonePadding }px`;
+			this.cloneWrapper.style.left = `${ elementLeftOffset - clonePadding }px`;
+		}
+
+		this.cloneWrapper.appendChild( clone );
+		elementWrapper.appendChild( this.cloneWrapper );
+
+		// Mark the current cursor coordinates.
+		this.cursorLeft = event.clientX;
+		this.cursorTop = event.clientY;
+		// Update cursor to 'grabbing', document wide.
+		document.body.classList.add( 'dragging' );
+		document.addEventListener( 'dragover', this.onDragOver );
+
+		this.props.setTimeout( onDragStart );
+	}
+
+	componentWillUnmount() {
+		this.removeDragClone();
+	}
+
+	removeDragClone() {
+		document.removeEventListener( 'dragover', this.onDragOver );
+		if ( this.cloneWrapper && this.cloneWrapper.parentElement ) {
+			// Remove clone.
+			this.cloneWrapper.remove();
+			this.cloneWrapper = null;
+		}
+	}
+
+	render() {
+		const { children, className } = this.props;
+		return (
+			<div
+				className={ classnames( 'components-draggable', className ) }
+				onDragStart={ this.onDragStart }
+				onDragEnd={ this.onDragEnd }
+				draggable
+			>
+				{ children }
+			</div>
+		);
+	}
+}
+
+export default withSafeTimeout( Draggable );

components/draggable/style.scss

@@ -0,0 +1,19 @@
+body.dragging {
+	cursor: move;/* Fallback for IE/Edge < 14 */
+	cursor: grabbing !important;
+}
+
+.components-draggable__invisible-drag-image {
+	position: fixed;
+	left: -1000px;
+	height: 50px;
+	width: 50px;
+}
+
+.components-draggable__clone {
+	position: fixed;
+	padding: 20px;
+	background: transparent;
+	pointer-events: none;
+	z-index: z-index( '.components-draggable__clone' );
+}

components/index.js

@@ -10,6 +10,7 @@ export { default as CodeEditor } from './code-editor';
 export { default as Dashicon } from './dashicon';
 export { DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as Disabled } from './disabled';
+export { default as Draggable } from './draggable';
 export { default as DropZone } from './drop-zone';
 export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';

components/placeholder/style.scss

@@ -30,6 +30,7 @@
 	width: 100%;
 	max-width: 280px;
 	flex-wrap: wrap;
+	z-index: z-index( '.components-placeholder__fieldset' );
 
 	p {
 		font-family: $default-font;

edit-post/assets/stylesheets/_z-index.scss

@@ -29,6 +29,17 @@ $z-layers: (
 	'.edit-post-header': 30,
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
 
+	// Should have lower index than anything else positioned inside the block containers
+	'.editor-block-list__block-drag-inset': 0,
+	// Should have higher index than anything else positioned inside the block containers
+	'.editor-block-list__block-drag-inset.is-visible > .inner': 1000000000,
+
+	'.components-draggable__clone': 1000000000,
+
+	// Should have higher index than the inset/underlay used for dragging
+	'.components-placeholder__fieldset': 1,
+	'.editor-block-list__block-edit .reusable-block-edit-panel *': 1,
+
 	// Show drop zone above most standard content, but below any overlays
 	'.components-drop-zone': 100,
 	'.components-drop-zone__content': 110,

editor/components/block-drop-zone/index.js

@@ -19,7 +19,7 @@ import { compose } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { insertBlocks, updateBlockAttributes } from '../../store/actions';
+import { insertBlocks, updateBlockAttributes, moveBlockToPosition } from '../../store/actions';
 
 function BlockDropZone( { index, isLocked, ...props } ) {
 	if ( isLocked ) {
@@ -53,10 +53,32 @@ function BlockDropZone( { index, isLocked, ...props } ) {
 		}
 	};
 
+	const onDrop = ( event, position ) => {
+		if ( ! event.dataTransfer ) {
+			return;
+		}
+
+		let uid, type, rootUID, fromIndex;
+
+		try {
+			( { uid, type, rootUID, fromIndex } = JSON.parse( event.dataTransfer.getData( 'text' ) ) );
+		} catch ( err ) {
+			return;
+		}
+
+		if ( type !== 'block' ) {
+			return;
+		}
+		const positionIndex = getInsertIndex( position );
+		const insertIndex = index && fromIndex < index && rootUID === props.rootUID ? positionIndex - 1 : positionIndex;
+		props.moveBlockToPosition( uid, rootUID, insertIndex );
+	};
+
 	return (
 		<DropZone
 			onFilesDrop={ onDropFiles }
 			onHTMLDrop={ onHTMLDrop }
+			onDrop={ onDrop }
 		/>
 	);
 }
@@ -84,8 +106,12 @@ export default compose(
 				updateBlockAttributes( ...args ) {
 					dispatch( updateBlockAttributes( ...args ) );
 				},
+				moveBlockToPosition( uid, fromRootUID, index ) {
+					const { rootUID, layout } = ownProps;
+					dispatch( moveBlockToPosition( uid, fromRootUID, rootUID, layout, index ) );
+				},
 			};
-		}
+		},
 	),
 	withContext( 'editor' )( ( settings ) => {
 		const { templateLock } = settings;

editor/components/block-list/block-draggable.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Draggable } from '@wordpress/components';
+
+function BlockDraggable( { rootUID, index, uid, layout, isDragging, ...props } ) {
+	const blockDragInsetClassName = classnames( 'editor-block-list__block-draggable', {
+		'is-visible': isDragging,
+	} );
+
+	const transferData = {
+		type: 'block',
+		rootUID: rootUID,
+		fromIndex: index,
+		uid: uid,
+		layout,
+	};
+
+	return (
+		<Draggable className={ blockDragInsetClassName } transferData={ transferData } { ...props }>
+			<div className="inner" ></div>
+		</Draggable>
+	);
+}
+
+export default BlockDraggable;