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

components/drop-zone/provider.js

@@ -162,9 +162,12 @@ class DropZoneProvider extends Component {
 		// This seemingly useless line has been shown to resolve a Safari issue
 		// where files dragged directly from the dock are not recognized
 		event.dataTransfer && event.dataTransfer.files.length; // eslint-disable-line no-unused-expressions
+
 		const { position, hoveredDropZone } = this.state;
 		const dropzone = hoveredDropZone !== -1 ? this.dropzones[ hoveredDropZone ] : null;
+
 		this.resetDragState();
+
 		if ( !! dropzone && !! dropzone.onDrop ) {
 			dropzone.onDrop( event, position );
 		}
@@ -174,7 +177,13 @@ class DropZoneProvider extends Component {
 			return;
 		}
 
-		if ( event.dataTransfer && !! dropzone && !! dropzone.onFilesDrop ) {
+		if (
+			!! dropzone &&
+			!! dropzone.onFilesDrop &&
+			event.dataTransfer &&
+			event.dataTransfer.files &&
+			event.dataTransfer.files.length
+		) {
 			dropzone.onFilesDrop( Array.prototype.slice.call( event.dataTransfer.files ), position );
 		}
 

components/dropdown/index.js

@@ -68,10 +68,17 @@ class Dropdown extends Component {
 			className,
 			contentClassName,
 			expandOnMobile,
+			...additionalProps,
 		} = this.props;
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
 		return (
-			<div className={ className } ref={ this.bindContainer }>
+			<div
+				className={ className }
+				ref={ this.bindContainer }
+				draggable={ additionalProps.draggable }
+				onDragStart={ additionalProps.onDragStart }
+				onDragEnd={ additionalProps.onDragEnd }
+			>
 				{ renderToggle( args ) }
 				<Popover
 					className={ contentClassName }

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;

editor/assets/stylesheets/_z-index.scss

@@ -27,6 +27,14 @@ $z-layers: (
 	'.editor-header': 30,
 	'.editor-text-editor__formatting': 30,
 
+	// 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,
+
+	// Should have higher index than the inset/underlay used for dragging
+	'.components-placeholder__fieldset': 1,
+
 	// Show drop zone above most standard content, but below any overlays
 	'.components-drop-zone': 100,
 	'.components-drop-zone__content': 110,

editor/assets/stylesheets/main.scss

@@ -1,3 +1,8 @@
+body.dragging .gutenberg > #editor {
+	cursor: move;/* Fallback for IE/Edge < 14 */
+	cursor: grabbing !important;
+}
+
 body.gutenberg-editor-page {
 	background: $white;
 

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

@@ -15,6 +15,7 @@ import { compose } from '@wordpress/element';
  * Internal dependencies
  */
 import { insertBlocks } from '../../store/actions';
+import { BLOCK_REORDER } from '../../store/constants';
 
 function BlockDropZone( { index, isLocked, ...props } ) {
 	if ( isLocked ) {
@@ -43,9 +44,32 @@ function BlockDropZone( { index, isLocked, ...props } ) {
 		}
 	};
 
+	const reorderBlock = ( event, position ) => {
+		if ( index !== undefined && event.dataTransfer ) {
+			try {
+				const { uid, fromIndex, type } = JSON.parse( event.dataTransfer.getData( 'text' ) );
+
+				if ( type !== BLOCK_REORDER ) {
+					return;
+				}
+
+				if ( position.y === 'top' && index > fromIndex ) {
+					props.onDrop( uid, index - 1 );
+					return;
+				} else if ( position.y === 'bottom' && index < fromIndex ) {
+					props.onDrop( uid, index + 1 );
+					return;
+				}
+
+				props.onDrop( uid, index );
+			} catch ( err ) { }
+		}
+	};
+
 	return (
 		<DropZone
 			onFilesDrop={ dropFiles }
+			onDrop={ reorderBlock }
 		/>
 	);
 }

editor/components/block-list/block.js

@@ -46,6 +46,7 @@ import {
 	stopTyping,
 	updateBlockAttributes,
 	toggleSelection,
+	moveBlockToIndex,
 } from '../../store/actions';
 import {
 	getBlock,
@@ -63,6 +64,7 @@ import {
 	isTyping,
 	getBlockMode,
 } from '../../store/selectors';
+import { BLOCK_REORDER } from '../../store/constants';
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
 
@@ -101,19 +103,23 @@ export class BlockListBlock extends Component {
 		this.maybeStartTyping = this.maybeStartTyping.bind( this );
 		this.stopTypingOnMouseMove = this.stopTypingOnMouseMove.bind( this );
 		this.mergeBlocks = this.mergeBlocks.bind( this );
+		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
+		this.reorderBlock = this.reorderBlock.bind( this );
 		this.onFocus = this.onFocus.bind( this );
 		this.onPointerDown = this.onPointerDown.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.onBlockError = this.onBlockError.bind( this );
-		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
 		this.onTouchStart = this.onTouchStart.bind( this );
 		this.onClick = this.onClick.bind( this );
+		this.onDragStart = this.onDragStart.bind( this );
+		this.onDragEnd = this.onDragEnd.bind( this );
 
 		this.previousOffset = null;
 		this.hadTouchStart = false;
 
 		this.state = {
 			error: null,
+			dragging: false,
 		};
 	}
 
@@ -348,6 +354,98 @@ export class BlockListBlock extends Component {
 		this.setState( { error } );
 	}
 
+	onDragStart( event ) {
+		const dragInset = document.getElementById( `block-drag-inset-${ this.props.uid }` );
+		const block = document.getElementById( `block-${ this.props.uid }` );
+
+		// Closure to remove the cloned node from the DOM (fired within timeout below)
+		const removeBlockClone = ( blockList, cloneWrapper ) => {
+			return () => {
+				blockList.removeChild( cloneWrapper );
+			};
+		};
+
+		// Closure to hide the visible block and show inset in its place (fired within timeout below)
+		const showInset = () => {
+			return () => {
+				this.setState( { dragging: true } );
+				document.body.classList.add( 'dragging' );
+			};
+		};
+
+		event.dataTransfer.setData(
+			'text',
+			JSON.stringify( {
+				uid: this.props.uid,
+				fromIndex: this.props.order,
+				type: BLOCK_REORDER,
+			} )
+		);
+
+		if ( 'function' === typeof event.dataTransfer.setDragImage ) {
+			const blockList = block.parentNode;
+			const cloneWrapper = document.createElement( 'div' );
+			const clone = block.cloneNode( true );
+			const blockRect = block.getBoundingClientRect();
+    		const blockTopOffset = parseInt( blockRect.top, 10 );
+    		const blockLeftOffset = parseInt( blockRect.left, 10 );
+
+			// 1. Clone the current block, style it, and spawn over original block.
+
+			clone.id = `clone-${ block.id }`;
+
+			cloneWrapper.classList.add( 'editor-block-list__block-clone' );
+			// 40px padding for the shadow.
+			cloneWrapper.style.width = `${ parseInt( blockRect.width, 10 ) + 40 }px`;
+			// Position clone right over the original block.
+			// 20px padding for the shadow.
+			cloneWrapper.style.top = `${ blockTopOffset - 20 }px`;
+			cloneWrapper.style.left = `${ blockLeftOffset - 20 }px`;
+
+			cloneWrapper.appendChild( clone );
+			blockList.appendChild( cloneWrapper );
+
+			// 2. Set clone as drag image and remove from DOM:
+
+			// Display the drag image right over the block:
+			//   - Coordinates relative to the block and the cursor/
+			//   - Optimisation: if top ends of the block are outside the viewport,
+			//     then revert to top 0 (relative to cursor).
+			const top = blockTopOffset > 0 ?
+				parseInt( event.clientY, 10 ) - blockTopOffset + 20 :
+				parseInt( event.clientY, 10 ) + 20;
+
+			event.dataTransfer.setDragImage(
+				cloneWrapper,
+				parseInt( event.clientX, 10 ) - blockLeftOffset + 20,
+				top
+			);
+
+			setTimeout( removeBlockClone( blockList, cloneWrapper ), 0 );
+		}
+
+		// Hide the visible block and show inset in its place.
+		setTimeout( showInset(), 0 );
+	}
+
+	onDragEnd() {
+		const block = document.getElementById( `block-${ this.props.uid }` );
+		const dragInset = document.getElementById( `block-drag-inset-${ this.props.uid }` );
+
+		const resetBlockDisplay = () => {
+			return () => {
+				this.setState( { dragging: false } );
+				document.body.classList.remove( 'dragging' );
+			};
+		}
+
+		setTimeout( resetBlockDisplay(), 0 );
+	}
+
+	reorderBlock( uid, toIndex ) {
+		this.props.moveBlockToIndex( uid, toIndex );
+	}
+
 	render() {
 		const { block, order, mode, showContextualToolbar, isLocked } = this.props;
 		const { name: blockName, isValid } = block;
@@ -360,13 +458,17 @@ export class BlockListBlock extends Component {
 		// Generate the wrapper class names handling the different states of the block.
 		const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus } = this.props;
 		const showUI = isSelected && ( ! this.props.isTyping || ( focus && focus.collapsed === false ) );
-		const { error } = this.state;
+		const { error, dragging } = this.state;
 		const wrapperClassName = classnames( 'editor-block-list__block', {
 			'has-warning': ! isValid || !! error,
 			'is-selected': showUI,
 			'is-multi-selected': isMultiSelected,
 			'is-hovered': isHovered,
 			'is-reusable': isReusableBlock( blockType ),
+			'is-hidden': dragging,
+		} );
+		const blockDragInsetClassName = classnames( 'editor-block-list__block-drag-inset', {
+			'is-visible': dragging
 		} );
 
 		const { onMouseLeave, onFocus, onReplace } = this.props;
@@ -381,6 +483,7 @@ export class BlockListBlock extends Component {
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return (
 			<div
+				id={ `block-${ this.props.uid }` }
 				ref={ this.setBlockListRef }
 				onMouseMove={ this.maybeHover }
 				onMouseEnter={ this.maybeHover }
@@ -391,9 +494,37 @@ export class BlockListBlock extends Component {
 				onClick={ this.onClick }
 				{ ...wrapperProps }
 			>
-				<BlockDropZone index={ order } />
-				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
-				{ ( showUI || isHovered ) && <BlockSettingsMenu uids={ [ block.uid ] } /> }
+				<div
+					id={ `block-drag-inset-${ this.props.uid }` }
+					draggable={ true }
+					onDragStart={ this.onDragStart }
+					onDragEnd={ this.onDragEnd }
+					className={ blockDragInsetClassName }
+				>
+					<div className="inner" ></div>
+				</div>
+
+				<BlockDropZone
+					index={ order }
+					onDrop={ this.reorderBlock }
+				/>
+
+				{ ( showUI || isHovered ) &&
+					<BlockMover
+						draggable={ true }
+						onDragStart={ this.onDragStart }
+						onDragEnd={ this.onDragEnd }
+						uids={ [ block.uid ] }
+					/>
+				}
+				{ ( showUI || isHovered ) &&
+					<BlockSettingsMenu
+						draggable={ true }
+						onDragStart={ this.onDragStart }
+						onDragEnd={ this.onDragEnd }
+						uids={ [ block.uid ] }
+					/>
+				}
 				{ showUI && isValid && showContextualToolbar && <BlockContextualToolbar /> }
 				{ isFirstMultiSelected && <BlockMultiControls /> }
 				<div
@@ -407,6 +538,7 @@ export class BlockListBlock extends Component {
 					tabIndex="0"
 					aria-label={ blockLabel }
 				>
+
 					<BlockCrashBoundary onError={ this.onBlockError }>
 						{ isValid && mode === 'visual' && (
 							<BlockEdit
@@ -469,6 +601,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	onSelect() {
 		dispatch( selectBlock( ownProps.uid ) );
 	},
+
 	onDeselect() {
 		dispatch( clearSelectedBlock() );
 	},
@@ -488,6 +621,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 			uid: ownProps.uid,
 		} );
 	},
+
 	onMouseLeave() {
 		dispatch( {
 			type: 'TOGGLE_BLOCK_HOVERED',
@@ -519,9 +653,14 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	onMetaChange( meta ) {
 		dispatch( editPost( { meta } ) );
 	},
+
 	toggleSelection( selectionEnabled ) {
 		dispatch( toggleSelection( selectionEnabled ) );
 	},
+
+	moveBlockToIndex( uid, index ) {
+		dispatch( moveBlockToIndex( uid, index ) );
+	},
 } );
 
 BlockListBlock.className = 'editor-block-list__block-edit';