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

components/drop-zone/index.js

@@ -62,7 +62,7 @@ class DropZone extends Component {
 
 	render() {
 		const { className, label } = this.props;
-		const { isDraggingOverDocument, isDraggingOverElement, position } = this.state;
+		const { isDraggingOverDocument, isDraggingOverElement, position, isReorderingInProgress } = this.state;
 		const classes = classnames( 'components-drop-zone', className, {
 			'is-active': isDraggingOverDocument || isDraggingOverElement,
 			'is-dragging-over-document': isDraggingOverDocument,
@@ -71,6 +71,7 @@ class DropZone extends Component {
 			'is-close-to-bottom': position && position.y === 'bottom',
 			'is-close-to-left': position && position.x === 'left',
 			'is-close-to-right': position && position.x === 'right',
+			'is-reordering-in-progress': isReorderingInProgress,
 		} );
 
 		return (

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

@@ -0,0 +1,3 @@
+# withDragAndDrop
+
+// @TODO: CLK

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

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/* Testing... */
+const ModifiedBackend = ( ...args ) => {
+    const instance = new HTML5Backend( ...args );
+
+    const listeners = [
+        'handleTopDragStart',
+        'handleTopDragStartCapture',
+        'handleTopDragEndCapture',
+        'handleTopDragEnter',
+        'handleTopDragEnterCapture',
+        'handleTopDragLeaveCapture',
+        'handleTopDragOver',
+        'handleTopDragOverCapture',
+        'handleTopDrop',
+        'handleTopDropCapture',
+        'handleSelectStart',
+    ];
+
+    const shouldIgnoreTarget = ( target ) => {
+        return target.className.split(' ').indexOf( 'is-reordering-in-progress' );
+    }
+
+    listeners.forEach( name => {
+        const original = instance[ name ];
+
+        instance[ name ] = ( e, ...extraArgs ) => {
+
+            if ( name === 'handleTopDrop' ) {
+                console.log( e.target );
+                console.log( e.target.className );
+            }
+
+            if ( ! shouldIgnoreTarget( e.target ) ) {
+                original( e, ...extraArgs );
+            }
+        };
+    });
+
+    return instance;
+};
+
+
+
+/**
+ * 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( HTML5Backend )( 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-drop-zone/index.js

@@ -16,7 +16,7 @@ import { compose } from '@wordpress/element';
  */
 import { insertBlocks } from '../../actions';
 
-function BlockDropZone( { index, isLocked, ...props } ) {
+function BlockDropZone( { index, isLocked, isReorderingInProgress, ...props } ) {
 	if ( isLocked ) {
 		return null;
 	}
@@ -46,6 +46,7 @@ function BlockDropZone( { index, isLocked, ...props } ) {
 	return (
 		<DropZone
 			onFilesDrop={ dropFiles }
+			isReorderingInProgress={ isReorderingInProgress }
 		/>
 	);
 }

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;
 
@@ -397,7 +401,40 @@ 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>
+				}
+
+
+
+				{ false && ! this.props.isReorderingInProgress &&
+					<BlockDropZone index={ order } isReorderingInProgress={ this.props.isReorderingInProgress } />
+				}
+
+				{ false && <BlockDropZone index={ order } isReorderingInProgress={ this.props.isReorderingInProgress } /> }
+
+
 				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
 				{ ( showUI || isHovered ) && <BlockSettingsMenu uids={ [ block.uid ] } /> }
 				{ showUI && isValid && showContextualToolbar && <BlockContextualToolbar /> }
@@ -467,6 +504,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 +515,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	onSelect() {
 		dispatch( selectBlock( ownProps.uid ) );
 	},
+
 	onDeselect() {
 		dispatch( clearSelectedBlock() );
 	},
@@ -496,6 +535,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 			uid: ownProps.uid,
 		} );
 	},
+
 	onMouseLeave() {
 		dispatch( {
 			type: 'TOGGLE_BLOCK_HOVERED',
@@ -527,9 +567,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 );