diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index 9b97a37a172a9b..18e4e90799c6e9 100644
--- a/editor/modes/visual-editor/block.js
+++ b/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 ) && }
{ isSelected && ! isTyping &&
diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
index 561a7c53a9f08f..9cdc05e646822a 100644
--- a/editor/modes/visual-editor/index.js
+++ b/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 (
- { blocks.map( ( uid ) => (
-
- ) ) }
+
+ { map( blocks, ( block, uid ) => (
+
+ ) ) }
+
);
}
export default connect( ( state ) => ( {
- blocks: getBlockUids( state ),
+ blocks: state.editor.blocksByUid,
} ) )( VisualEditor );
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 5e4793d7ec90b1..bcc42ef4e97d10 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/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 */