Reorder blocks via drag & drop (v1. using React-dnd).

components/higher-order/with-dnd/README.md

@@ -0,0 +1,3 @@
+# withDragAndDrop
+
+// @todo :clk:doc

components/higher-order/with-dnd/index.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
+import MixedHTML5Backend from 'react-dnd-html5-mixed-backend';
+// import HTML5Backend from 'react-dnd-html5-backend';
+
+/**
+ * A wrapper around react-dnd DragDropContext higher order component.
+ * @param  { Function } WrappedComponent Component to be wrapped with drag & drop context.
+ * @return { Function }                  A component wrapped with the react-dnd HOC.
+ */
+export default function withDragAndDropContext( WrappedComponent ) {
+	return DragDropContext( MixedHTML5Backend )( WrappedComponent );
+}
+
+/**
+ * @todo :clk:doc
+ * A wrapper around react-dnd DragSource higher order component.
+ * @param  {[type]} itemType      [description]
+ * @param  {[type]} sourceSpec    [description]
+ * @param  {[type]} sourceCollect [description]
+ * @return {[type]}               [description]
+ */
+export function withDragSource( itemType, sourceSpec, sourceCollect ) {
+	return ( WrappedComponent ) => {
+		return DragSource( itemType, sourceSpec, sourceCollect )( WrappedComponent );
+	};
+}
+
+/**
+ * @todo :clk:doc
+ * A wrapper around react-dnd DropTarget higher order component.
+ * @param  {[type]} itemType      [description]
+ * @param  {[type]} targetSpec    [description]
+ * @param  {[type]} targetCollect [description]
+ * @return {[type]}               [description]
+ */
+export function withDropTarget( itemType, targetSpec, targetCollect ) {
+	return ( WrappedComponent ) => {
+		return DropTarget( itemType, targetSpec, targetCollect )( WrappedComponent );
+	};
+}

components/higher-order/with-dnd/test/index.js

@@ -0,0 +1 @@
+// @todo :clk:tests

components/index.js

@@ -45,3 +45,4 @@ export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withInstanceId } from './higher-order/with-instance-id';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export { default as withState } from './higher-order/with-state';
+export { default as withDragAndDropContext, withDragSource, withDropTarget } from './higher-order/with-dnd';

editor/actions.js

@@ -177,6 +177,20 @@ export function replaceBlock( uid, block ) {
 	return replaceBlocks( uid, block );
 }
 
+/**
+ * @todo :clk:doc
+ * @param  {[type]} uid   [description]
+ * @param  {[type]} index [description]
+ * @return {[type]}       [description]
+ */
+export function moveBlockToIndex( uid, index ) {
+	return {
+		type: 'MOVE_BLOCK_TO_INDEX',
+		uid,
+		index,
+	};
+}
+
 export function insertBlock( block, position ) {
 	return insertBlocks( [ block ], position );
 }
@@ -599,3 +613,25 @@ export function appendDefaultBlock() {
 		type: 'APPEND_DEFAULT_BLOCK',
 	};
 }
+
+/**
+ * @todo :clk:doc
+ * [startReordering description]
+ * @return {[type]} [description]
+ */
+export function startReordering( ) {
+	return {
+		type: 'START_DRAG_AND_DROP',
+	};
+}
+
+/**
+ * @todo :clk:doc
+ * [stopReordering description]
+ * @return {[type]} [description]
+ */
+export function stopReordering( ) {
+	return {
+		type: 'STOP_DRAG_AND_DROP',
+	};
+}

editor/components/block-list/block.js

@@ -24,6 +24,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { DragAndDropSource, DragAndDropTarget } from '../draggable';
 import BlockMover from '../block-mover';
 import BlockDropZone from '../block-drop-zone';
 import BlockSettingsMenu from '../block-settings-menu';
@@ -46,6 +47,7 @@ import {
 	stopTyping,
 	updateBlockAttributes,
 	toggleSelection,
+	moveBlockToIndex,
 } from '../../actions';
 import {
 	getBlock,
@@ -62,7 +64,9 @@ import {
 	isSelectionEnabled,
 	isTyping,
 	getBlockMode,
+	isReorderingInProgress,
 } from '../../selectors';
+import { DRAGGABLE_BLOCK } from '../../constants';
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
 
@@ -349,7 +353,7 @@ export class BlockListBlock extends Component {
 	}
 
 	render() {
-		const { block, order, mode, showContextualToolbar, isLocked } = this.props;
+		const { block, order, mode, showContextualToolbar, isLocked, isReorderingInProgress } = this.props;
 		const { name: blockName, isValid } = block;
 		const blockType = getBlockType( blockName );
 		// translators: %s: Type of block (i.e. Text, Image etc)
@@ -397,7 +401,32 @@ export class BlockListBlock extends Component {
 				onClick={ this.onClick }
 				{ ...wrapperProps }
 			>
-				<BlockDropZone index={ order } />
+
+
+				{ true &&
+					<DragAndDropSource
+						draggableType={ DRAGGABLE_BLOCK }
+						dragSourceUid={ this.props.uid }
+						index={ order }
+					>
+						<div>DRAG</div>
+					</DragAndDropSource>
+				}
+
+				{ true &&
+					<DragAndDropTarget
+						draggableType={ DRAGGABLE_BLOCK }
+						dropTargetUid={ this.props.uid }
+						index={ order }
+						hoverIndexBreakpoint={ false }
+						reIndexCallback={ this.props.onMoveBlockToIndex }
+					>
+						<div>DROP HERE</div>
+					</DragAndDropTarget>
+				}
+
+				{ ! this.props.isReorderingInProgress && <BlockDropZone index={ order } /> }
+
 				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
 				{ ( showUI || isHovered ) && <BlockSettingsMenu uids={ [ block.uid ] } /> }
 				{ showUI && isValid && showContextualToolbar && <BlockContextualToolbar /> }
@@ -447,6 +476,7 @@ export class BlockListBlock extends Component {
 					</BlockCrashBoundary>
 				</div>
 				{ !! error && <BlockCrashWarning /> }
+
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
@@ -467,6 +497,7 @@ const mapStateToProps = ( state, { uid } ) => ( {
 	meta: getEditedPostAttribute( state, 'meta' ),
 	mode: getBlockMode( state, uid ),
 	isSelectionEnabled: isSelectionEnabled( state ),
+	isReorderingInProgress: isReorderingInProgress( state ),
 } );
 
 const mapDispatchToProps = ( dispatch, ownProps ) => ( {
@@ -477,6 +508,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	onSelect() {
 		dispatch( selectBlock( ownProps.uid ) );
 	},
+
 	onDeselect() {
 		dispatch( clearSelectedBlock() );
 	},
@@ -496,6 +528,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 			uid: ownProps.uid,
 		} );
 	},
+
 	onMouseLeave() {
 		dispatch( {
 			type: 'TOGGLE_BLOCK_HOVERED',
@@ -527,9 +560,14 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	onMetaChange( meta ) {
 		dispatch( editPost( { meta } ) );
 	},
+
 	toggleSelection( selectionEnabled ) {
 		dispatch( toggleSelection( selectionEnabled ) );
 	},
+
+	onMoveBlockToIndex( uid, index ) {
+		dispatch( moveBlockToIndex( uid, index ) );
+	},
 } );
 
 BlockListBlock.className = 'editor-block-list__block-edit';

editor/components/block-list/index.js

@@ -17,8 +17,9 @@ import 'element-closest';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
 import { serialize } from '@wordpress/blocks';
+import { withDragAndDropContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -230,31 +231,34 @@ class BlockList extends Component {
 	}
 }
 
-export default connect(
-	( state ) => ( {
-		blocks: getBlockUids( state ),
-		selectionStart: getMultiSelectedBlocksStartUid( state ),
-		selectionEnd: getMultiSelectedBlocksEndUid( state ),
-		multiSelectedBlocks: getMultiSelectedBlocks( state ),
-		multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
-		selectedBlock: getSelectedBlock( state ),
-		isSelectionEnabled: isSelectionEnabled( state ),
-	} ),
-	( dispatch ) => ( {
-		onStartMultiSelect() {
-			dispatch( startMultiSelect() );
-		},
-		onStopMultiSelect() {
-			dispatch( stopMultiSelect() );
-		},
-		onMultiSelect( start, end ) {
-			dispatch( multiSelect( start, end ) );
-		},
-		onSelect( uid ) {
-			dispatch( selectBlock( uid ) );
-		},
-		onRemove( uids ) {
-			dispatch( { type: 'REMOVE_BLOCKS', uids } );
-		},
-	} )
+export default compose(
+	withDragAndDropContext,
+	connect(
+		( state ) => ( {
+			blocks: getBlockUids( state ),
+			selectionStart: getMultiSelectedBlocksStartUid( state ),
+			selectionEnd: getMultiSelectedBlocksEndUid( state ),
+			multiSelectedBlocks: getMultiSelectedBlocks( state ),
+			multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
+			selectedBlock: getSelectedBlock( state ),
+			isSelectionEnabled: isSelectionEnabled( state ),
+		} ),
+		( dispatch ) => ( {
+			onStartMultiSelect() {
+				dispatch( startMultiSelect() );
+			},
+			onStopMultiSelect() {
+				dispatch( stopMultiSelect() );
+			},
+			onMultiSelect( start, end ) {
+				dispatch( multiSelect( start, end ) );
+			},
+			onSelect( uid ) {
+				dispatch( selectBlock( uid ) );
+			},
+			onRemove( uids ) {
+				dispatch( { type: 'REMOVE_BLOCKS', uids } );
+			},
+		} )
+	)
 )( BlockList );

editor/components/draggable/drag-source.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, compose } from '@wordpress/element';
+import { withDragSource } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { startReordering, stopReordering } from '../../actions';
+
+
+/**
+ * @todo :clk:doc
+ * Collector - properties to inject in the wrapped component
+ * @param  {[type]} connect [description]
+ * @param  {[type]} monitor [description]
+ * @return {[type]}         [description]
+ */
+function sourceCollect( connect, monitor ) {
+	return {
+		connectDragSource: connect.dragSource(),
+		isDragging: monitor.isDragging()
+	};
+}
+
+/**
+ * @todo :clk:doc
+ * [sourceSpec description]
+ * @type {Object}
+ */
+const sourceSpec = {
+	beginDrag( props ) {
+		props.startReordering();
+
+		return {
+			dragSourceUid: props.dragSourceUid,
+			index: props.index,
+		};
+	},
+
+	// every drag is [guaranteed] to fire this endDrag callback
+	endDrag( props ) {
+		setTimeout( props.stopReordering, 500 );
+		// props.hideDropIndicator();
+	},
+
+};
+
+class DragSource extends Component {
+	constructor( props ) {
+		super( props );
+	}
+
+	render() {
+		const classes = classnames( 'draggable-drag-source');
+
+		return this.props.connectDragSource(
+			<div className={ classes }>
+				{ this.props.children }
+			</div>
+		);
+	}
+}
+
+const mapDispatchToProps = ( dispatch ) => ( {
+	startReordering() {
+		dispatch( startReordering() );
+	},
+
+	stopReordering() {
+		dispatch( stopReordering() );
+	},
+
+} );
+
+export default compose(
+	connect( undefined, mapDispatchToProps ),
+	withDragSource( props => props.draggableType, sourceSpec, sourceCollect ),
+)( DragSource );