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';
 
 /**
  * WordPress dependencies
@@ -186,7 +186,14 @@ class VisualEditorBlock extends wp.element.Component {
 			'is-hovered': isHovered,
 		} );
 
-		const { onSelect, onHover, onMouseLeave, onFocus, onInsertAfter } = this.props;
+		const {
+			onSelect,
+			onHover,
+			onMouseLeave,
+			onFocus,
+			onInsertAfter,
+			order,
+		} = this.props;
 
 		// Determine whether the block has props to apply to the wrapper
 		let wrapperProps;
@@ -209,8 +216,9 @@ class VisualEditorBlock extends wp.element.Component {
 				onMouseLeave={ onMouseLeave }
 				className={ className }
 				data-type={ block.blockType }
-				tabIndex="0"
+				tabIndex={ order }
 				{ ...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,20 +11,21 @@ import './style.scss';
 import Inserter from '../../inserter';
 import VisualEditorBlock from './block';
 import PostTitle from '../../post-title';
-import { getBlockUids } from '../../selectors';
 
 function VisualEditor( { blocks } ) {
 	return (
 		<div className="editor-visual-editor">
 			<PostTitle />
-			{ blocks.map( ( uid ) => (
-				<VisualEditorBlock key={ uid } uid={ uid } />
-			) ) }
+			<div className="editor-visual-editor__blocks">
+				{ map( blocks, ( block, uid ) => (
+					<VisualEditorBlock key={ uid } uid={ uid } />
+				) ) }
+			</div>
 			<Inserter />
 		</div>
 	);
 }
 
 export default connect( ( state ) => ( {
-	blocks: getBlockUids( state ),
+	blocks: state.editor.blocksByUid,
 } ) )( VisualEditor );

editor/modes/visual-editor/style.scss

@@ -25,6 +25,11 @@
 	margin-right: auto;
 }
 
+.editor-visual-editor__blocks {
+	display: flex;
+	flex-direction: column;
+}
+
 .editor-visual-editor__block {
 	position: relative;
 	left: -#{ $block-padding + $block-mover-margin };	/* Make room for the mover */