Apply order by Flexbox order property

Author: aduth

editor/modes/visual-editor/block.js

@@ -4,7 +4,7 @@
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { Slot } from 'react-slot-fill';
-import { partial } from 'lodash';
+import { partial, get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -130,7 +130,15 @@ class VisualEditorBlock extends wp.element.Component {
 			'is-hovered': isHovered
 		} );
 
-		const { onSelect, onStartTyping, onHover, onMouseLeave, onFocus, onInsertAfter } = this.props;
+		const {
+			onSelect,
+			onStartTyping,
+			onHover,
+			onMouseLeave,
+			onFocus,
+			onInsertAfter,
+			order
+		} = this.props;
 
 		// Determine whether the block has props to apply to the wrapper
 		let wrapperProps;
@@ -155,6 +163,7 @@ class VisualEditorBlock extends wp.element.Component {
 				className={ className }
 				data-type={ block.blockType }
 				{ ...wrapperProps }
+				style={ { ...get( wrapperProps, 'style' ), order } }
 			>
 				{ ( ( isSelected && ! isTyping ) || isHovered ) && <BlockMover uid={ block.uid } /> }
 				{ isSelected && ! isTyping &&

editor/modes/visual-editor/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import { map } from 'lodash';
 
 /**
  * Internal dependencies
@@ -10,17 +11,23 @@ import './style.scss';
 import Inserter from 'components/inserter';
 import VisualEditorBlock from './block';
 
-function VisualEditor( { blocks } ) {
+function VisualEditor( { blocks, blockOrder } ) {
 	return (
 		<div className="editor-visual-editor">
-			{ blocks.map( ( uid ) => (
-				<VisualEditorBlock key={ uid } uid={ uid } />
-			) ) }
+			<div className="editor-visual-editor__blocks">
+				{ map( blocks, ( block, uid ) => (
+					<VisualEditorBlock
+						key={ uid }
+						uid={ uid }
+						order={ blockOrder.indexOf( uid ) } />
+				) ) }
+			</div>
 			<Inserter />
 		</div>
 	);
 }
 
 export default connect( ( state ) => ( {
-	blocks: state.blocks.order
+	blocks: state.blocks.byUid,
+	blockOrder: state.blocks.order
 } ) )( VisualEditor );

editor/modes/visual-editor/style.scss

@@ -10,6 +10,11 @@
 	}
 }
 
+.editor-visual-editor__blocks {
+	display: flex;
+	flex-direction: column;
+}
+
 .editor-visual-editor__block {
 	position: relative;
 	border: 2px solid transparent;