From 27ec15c8744bc47e34488142662756cf1180aad4 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Mon, 20 Nov 2017 09:29:59 -0500
Subject: [PATCH] Editor: Extract BlockList as reusable component

---
 blocks/editable/index.js                      |   2 +-
 blocks/library/button/editor.scss             |   2 +-
 blocks/library/categories/editor.scss         |   4 +-
 blocks/library/cover-image/editor.scss        |   2 +-
 blocks/library/freeform/editor.scss           |   2 +-
 blocks/library/gallery/editor.scss            |   2 +-
 blocks/library/heading/editor.scss            |   2 +-
 blocks/library/image/editor.scss              |   6 +-
 blocks/library/latest-posts/editor.scss       |   2 +-
 blocks/library/more/editor.scss               |   6 +-
 blocks/library/pullquote/editor.scss          |   2 +-
 blocks/library/table/editor.scss              |   2 +-
 editor/assets/stylesheets/_z-index.scss       |   8 +-
 editor/assets/stylesheets/main.scss           |   2 +-
 .../block-list}/block-contextual-toolbar.js   |   2 +-
 .../block-list}/block-crash-boundary.js       |   0
 .../block-list}/block-crash-warning.js        |   2 +-
 .../block-list}/block-drop-zone.js            |   0
 .../block-list}/block-html.js                 |   2 +-
 .../block-list}/block.js                      |  12 +-
 .../block-list/index.js}                      |  17 +-
 .../block-list}/invalid-block-warning.js      |   8 +-
 .../block-list}/multi-controls.js             |   8 +-
 .../block-list}/sibling-inserter.js           |  10 +-
 editor/components/block-list/style.scss       | 493 ++++++++++++++++++
 editor/components/index.js                    |   3 +
 editor/components/writing-flow/index.js       |   4 +-
 editor/modes/visual-editor/index.js           |   5 +-
 editor/modes/visual-editor/style.scss         | 462 +---------------
 editor/navigable-toolbar/index.js             |   2 +-
 test/e2e/integration/002-adding-blocks.js     |   2 +-
 .../integration/003-multi-block-selection.js  |   6 +-
 32 files changed, 558 insertions(+), 524 deletions(-)
 rename editor/{modes/visual-editor => components/block-list}/block-contextual-toolbar.js (93%)
 rename editor/{modes/visual-editor => components/block-list}/block-crash-boundary.js (100%)
 rename editor/{modes/visual-editor => components/block-list}/block-crash-warning.js (85%)
 rename editor/{modes/visual-editor => components/block-list}/block-drop-zone.js (100%)
 rename editor/{modes/visual-editor => components/block-list}/block-html.js (96%)
 rename editor/{modes/visual-editor => components/block-list}/block.js (97%)
 rename editor/{modes/visual-editor/block-list.js => components/block-list/index.js} (95%)
 rename editor/{modes/visual-editor => components/block-list}/invalid-block-warning.js (93%)
 rename editor/{modes/visual-editor => components/block-list}/multi-controls.js (69%)
 rename editor/{modes/visual-editor => components/block-list}/sibling-inserter.js (92%)
 create mode 100644 editor/components/block-list/style.scss

diff --git a/blocks/editable/index.js b/blocks/editable/index.js
index 58875845230a6c..1f87da1609920e 100644
--- a/blocks/editable/index.js
+++ b/blocks/editable/index.js
@@ -361,7 +361,7 @@ export default class Editable extends Component {
 		// Find the parent "relative" positioned container
 		const container = this.props.inlineToolbar ?
 			this.editor.getBody().closest( '.blocks-editable' ) :
-			this.editor.getBody().closest( '.editor-visual-editor__block' );
+			this.editor.getBody().closest( '.editor-block-list__block' );
 		const containerPosition = container.getBoundingClientRect();
 		const blockPadding = 14;
 		const blockMoverMargin = 18;
diff --git a/blocks/library/button/editor.scss b/blocks/library/button/editor.scss
index 1a7551cee2194c..0ef5b887497157 100644
--- a/blocks/library/button/editor.scss
+++ b/blocks/library/button/editor.scss
@@ -1,6 +1,6 @@
 $blocks-button__height: 46px;
 
-.editor-visual-editor__block[data-type="core/button"] {
+.editor-block-list__block[data-type="core/button"] {
 	&[data-align="center"] {
 		text-align: center;
 	}
diff --git a/blocks/library/categories/editor.scss b/blocks/library/categories/editor.scss
index d40346c0b43f9d..3cdcae84815275 100644
--- a/blocks/library/categories/editor.scss
+++ b/blocks/library/categories/editor.scss
@@ -1,6 +1,4 @@
-
-.editor-visual-editor__block[data-type="core/categories"] {
-
+.editor-block-list__block[data-type="core/categories"] {
 	.wp-block-categories ul {
 		padding-left: 2.5em;
 
diff --git a/blocks/library/cover-image/editor.scss b/blocks/library/cover-image/editor.scss
index 80fa2f17294ff3..84164588c1a58a 100644
--- a/blocks/library/cover-image/editor.scss
+++ b/blocks/library/cover-image/editor.scss
@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/cover-image"] {
+.editor-block-list__block[data-type="core/cover-image"] {
 	.blocks-editable__tinymce[data-is-empty="true"]:before {
 		position: inherit;
 	}
diff --git a/blocks/library/freeform/editor.scss b/blocks/library/freeform/editor.scss
index 6b921969c645e4..f2a39d42b2da4a 100644
--- a/blocks/library/freeform/editor.scss
+++ b/blocks/library/freeform/editor.scss
@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/freeform"] .blocks-editable__tinymce {
+.editor-block-list__block[data-type="core/freeform"] .blocks-editable__tinymce {
 	margin-top: $item-spacing;
 
 	p {
diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss
index 5a2f09add7d5c9..151c856d1d81c9 100644
--- a/blocks/library/gallery/editor.scss
+++ b/blocks/library/gallery/editor.scss
@@ -3,7 +3,7 @@
 	margin-bottom: -16px;
 }
 
-.editor-visual-editor__block[data-type="core/gallery"] .editor-visual-editor__block-edit {
+.editor-block-list__block[data-type="core/gallery"] .editor-block-list__block-edit {
 	overflow: hidden;
 }
 
diff --git a/blocks/library/heading/editor.scss b/blocks/library/heading/editor.scss
index cf488f8916887f..722abc33ae49a9 100644
--- a/blocks/library/heading/editor.scss
+++ b/blocks/library/heading/editor.scss
@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/heading"] {
+.editor-block-list__block[data-type="core/heading"] {
 	h1,
 	h2,
 	h3,
diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
index 3fcf4e79e2b8a8..d5858bb067c471 100644
--- a/blocks/library/image/editor.scss
+++ b/blocks/library/image/editor.scss
@@ -52,7 +52,7 @@
 	left: -6px !important;
 }
 
-.editor-visual-editor__block[data-type="core/image"] {
+.editor-block-list__block[data-type="core/image"] {
 	.blocks-format-toolbar__link-modal {
 		top: 0;
 		left: 0;
@@ -73,8 +73,8 @@
 	}
 }
 
-.editor-visual-editor__block[data-type="core/image"][data-align="right"],
-.editor-visual-editor__block[data-type="core/image"][data-align="left"] {
+.editor-block-list__block[data-type="core/image"][data-align="right"],
+.editor-block-list__block[data-type="core/image"][data-align="left"] {
 	max-width: none !important;
 	&[data-resized="false"] {
 		max-width: 370px !important;
diff --git a/blocks/library/latest-posts/editor.scss b/blocks/library/latest-posts/editor.scss
index 1bdc9ca4d7b78c..ba9538ed844aee 100644
--- a/blocks/library/latest-posts/editor.scss
+++ b/blocks/library/latest-posts/editor.scss
@@ -1,5 +1,5 @@
 
-.editor-visual-editor__block[data-type="core/latest-posts"] {
+.editor-block-list__block[data-type="core/latest-posts"] {
 
 	.wp-block-latest-posts {
 		padding-left: 2.5em;
diff --git a/blocks/library/more/editor.scss b/blocks/library/more/editor.scss
index 9fe06ecf878c37..334060fca22af7 100644
--- a/blocks/library/more/editor.scss
+++ b/blocks/library/more/editor.scss
@@ -1,9 +1,9 @@
-.editor-visual-editor__block[data-type="core/more"] {
+.editor-block-list__block[data-type="core/more"] {
 	max-width: 100%;
 	text-align: center;
 }
 
-.editor-visual-editor__block .wp-block-more {
+.editor-block-list__block .wp-block-more {
 	input {
 		font-size: 12px;
 		text-transform: uppercase;
@@ -29,6 +29,6 @@
 		left: $block-mover-padding-visible + $block-padding;
 		right: $block-mover-padding-visible + $block-padding;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-visual-editor__block .wp-block-more:before' );
+		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
 	}
 }
diff --git a/blocks/library/pullquote/editor.scss b/blocks/library/pullquote/editor.scss
index 6deb68c1433006..2924c16cdc075a 100644
--- a/blocks/library/pullquote/editor.scss
+++ b/blocks/library/pullquote/editor.scss
@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/pullquote"] {
+.editor-block-list__block[data-type="core/pullquote"] {
 	&[data-align="left"],
 	&[data-align="right"] {
 		max-width: 400px;
diff --git a/blocks/library/table/editor.scss b/blocks/library/table/editor.scss
index 5f9ed5805bf381..908ecdec9902ee 100644
--- a/blocks/library/table/editor.scss
+++ b/blocks/library/table/editor.scss
@@ -1,4 +1,4 @@
-.editor-visual-editor__block[data-type="core/table"] {
+.editor-block-list__block[data-type="core/table"] {
 
 	.editor-block-toolbar__group > div:not(.editor-block-toolbar__mobile-tools) {
 		display: flex;
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
index c1732644c80894..59e97538ba24c0 100644
--- a/editor/assets/stylesheets/_z-index.scss
+++ b/editor/assets/stylesheets/_z-index.scss
@@ -4,12 +4,12 @@
 
 $z-layers: (
 	'.editor-block-switcher__arrow': 1,
-	'.editor-visual-editor__block:before': -1,
-	'.editor-visual-editor__block .wp-block-more:before': -1,
-	'.editor-visual-editor__block {core/image aligned left or right}': 20,
+	'.editor-block-list__block:before': -1,
+	'.editor-block-list__block .wp-block-more:before': -1,
+	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.freeform-toolbar': 10,
 	'.editor-warning': 1,
-	'.editor-visual-editor__sibling-inserter': 1,
+	'.editor-block-list__sibling-inserter': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-format-list__menu': 1,
 	'.editor-inserter__tabs': 1,
diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss
index f68ee6b43b327c..eac479612217a4 100644
--- a/editor/assets/stylesheets/main.scss
+++ b/editor/assets/stylesheets/main.scss
@@ -90,7 +90,7 @@ body.gutenberg-editor-page {
 }
 
 .editor-post-title,
-.editor-visual-editor__block {
+.editor-block-list__block {
 	input,
 	textarea {
 		border-radius: 4px;
diff --git a/editor/modes/visual-editor/block-contextual-toolbar.js b/editor/components/block-list/block-contextual-toolbar.js
similarity index 93%
rename from editor/modes/visual-editor/block-contextual-toolbar.js
rename to editor/components/block-list/block-contextual-toolbar.js
index 8f28fc6f51339c..ffd5ff0657eee0 100644
--- a/editor/modes/visual-editor/block-contextual-toolbar.js
+++ b/editor/components/block-list/block-contextual-toolbar.js
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigableToolbar from '../../navigable-toolbar';
-import { BlockToolbar } from '../../components';
+import { BlockToolbar } from '../';
 import { isFeatureActive } from '../../selectors';
 
 function BlockContextualToolbar( { hasFixedToolbar } ) {
diff --git a/editor/modes/visual-editor/block-crash-boundary.js b/editor/components/block-list/block-crash-boundary.js
similarity index 100%
rename from editor/modes/visual-editor/block-crash-boundary.js
rename to editor/components/block-list/block-crash-boundary.js
diff --git a/editor/modes/visual-editor/block-crash-warning.js b/editor/components/block-list/block-crash-warning.js
similarity index 85%
rename from editor/modes/visual-editor/block-crash-warning.js
rename to editor/components/block-list/block-crash-warning.js
index 52dcab22852dd7..f712961a4c4dd4 100644
--- a/editor/modes/visual-editor/block-crash-warning.js
+++ b/editor/components/block-list/block-crash-warning.js
@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Warning } from '../../components';
+import Warning from '../warning';
 
 const warning = (
 	<Warning>
diff --git a/editor/modes/visual-editor/block-drop-zone.js b/editor/components/block-list/block-drop-zone.js
similarity index 100%
rename from editor/modes/visual-editor/block-drop-zone.js
rename to editor/components/block-list/block-drop-zone.js
diff --git a/editor/modes/visual-editor/block-html.js b/editor/components/block-list/block-html.js
similarity index 96%
rename from editor/modes/visual-editor/block-html.js
rename to editor/components/block-list/block-html.js
index 4a6e62271d2393..7f155696a8140e 100644
--- a/editor/modes/visual-editor/block-html.js
+++ b/editor/components/block-list/block-html.js
@@ -54,7 +54,7 @@ class BlockHTML extends Component {
 		const { html } = this.state;
 		return (
 			<TextareaAutosize
-				className="blocks-visual-editor__block-html-textarea"
+				className="editor-block-list__block-html-textarea"
 				value={ html }
 				onBlur={ this.onBlur }
 				onChange={ this.onChange }
diff --git a/editor/modes/visual-editor/block.js b/editor/components/block-list/block.js
similarity index 97%
rename from editor/modes/visual-editor/block.js
rename to editor/components/block-list/block.js
index b61b9ec90aadb9..628d8b9954b60d 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/components/block-list/block.js
@@ -16,8 +16,8 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BlockMover from '../../components/block-mover';
-import BlockSettingsMenu from '../../components/block-settings-menu';
+import BlockMover from '../block-mover';
+import BlockSettingsMenu from '../block-settings-menu';
 import InvalidBlockWarning from './invalid-block-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
@@ -56,7 +56,7 @@ import {
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
 
-class VisualEditorBlock extends Component {
+class BlockListBlock extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -324,7 +324,7 @@ class VisualEditorBlock extends Component {
 		const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus } = this.props;
 		const showUI = isSelected && ( ! this.props.isTyping || ( focus && focus.collapsed === false ) );
 		const { error } = this.state;
-		const wrapperClassName = classnames( 'editor-visual-editor__block', {
+		const wrapperClassName = classnames( 'editor-block-list__block', {
 			'has-warning': ! isValid || !! error,
 			'is-selected': showUI,
 			'is-multi-selected': isMultiSelected,
@@ -369,7 +369,7 @@ class VisualEditorBlock extends Component {
 					onMouseDown={ this.onPointerDown }
 					onKeyDown={ this.onKeyDown }
 					onFocus={ this.onFocus }
-					className="editor-visual-editor__block-edit"
+					className="editor-block-list__block-edit"
 					tabIndex="0"
 					aria-label={ blockLabel }
 				>
@@ -487,4 +487,4 @@ export default connect(
 			dispatch( editPost( { meta } ) );
 		},
 	} )
-)( VisualEditorBlock );
+)( BlockListBlock );
diff --git a/editor/modes/visual-editor/block-list.js b/editor/components/block-list/index.js
similarity index 95%
rename from editor/modes/visual-editor/block-list.js
rename to editor/components/block-list/index.js
index 3a4fd2bfb951b8..cc2ba18d53a8b5 100644
--- a/editor/modes/visual-editor/block-list.js
+++ b/editor/components/block-list/index.js
@@ -25,8 +25,9 @@ import { serialize, getDefaultBlockName, createBlock } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import VisualEditorBlock from './block';
-import VisualEditorSiblingInserter from './sibling-inserter';
+import './style.scss';
+import BlockListBlock from './block';
+import BlockListSiblingInserter from './sibling-inserter';
 import BlockDropZone from './block-drop-zone';
 import {
 	getBlockUids,
@@ -38,7 +39,7 @@ import {
 } from '../../selectors';
 import { insertBlock, startMultiSelect, stopMultiSelect, multiSelect, selectBlock } from '../../actions';
 
-class VisualEditorBlockList extends Component {
+class BlockList extends Component {
 	constructor( props ) {
 		super( props );
 
@@ -209,22 +210,22 @@ class VisualEditorBlockList extends Component {
 
 		return (
 			<div>
-				{ !! blocks.length && <VisualEditorSiblingInserter /> }
+				{ !! blocks.length && <BlockListSiblingInserter /> }
 				{ flatMap( blocks, ( uid ) => [
-					<VisualEditorBlock
+					<BlockListBlock
 						key={ 'block-' + uid }
 						uid={ uid }
 						blockRef={ this.setBlockRef }
 						onSelectionStart={ this.onSelectionStart }
 						onShiftSelection={ this.onShiftSelection }
 					/>,
-					<VisualEditorSiblingInserter
+					<BlockListSiblingInserter
 						key={ 'sibling-inserter-' + uid }
 						uid={ uid }
 					/>,
 				] ) }
 				{ ! blocks.length &&
-					<div className="editor-visual-editor__placeholder">
+					<div className="editor-block-list__placeholder">
 						<BlockDropZone />
 						<input
 							type="text"
@@ -270,4 +271,4 @@ export default connect(
 			dispatch( { type: 'REMOVE_BLOCKS', uids } );
 		},
 	} )
-)( VisualEditorBlockList );
+)( BlockList );
diff --git a/editor/modes/visual-editor/invalid-block-warning.js b/editor/components/block-list/invalid-block-warning.js
similarity index 93%
rename from editor/modes/visual-editor/invalid-block-warning.js
rename to editor/components/block-list/invalid-block-warning.js
index 2ac3b64a65046d..08ee76da3aa56e 100644
--- a/editor/modes/visual-editor/invalid-block-warning.js
+++ b/editor/components/block-list/invalid-block-warning.js
@@ -8,11 +8,6 @@ import { connect } from 'react-redux';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { Warning } from '../../components';
 import {
 	getBlockType,
 	getUnknownTypeHandlerName,
@@ -23,6 +18,7 @@ import {
  * Internal dependencies
  */
 import { replaceBlock } from '../../actions';
+import Warning from '../warning';
 
 function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
 	const htmlBlockName = 'core/html';
@@ -37,7 +33,7 @@ function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
 				'Overwrite the external changes or Convert to %s or %s to keep ' +
 				'your changes.'
 			), defaultBlockType.title, htmlBlockType.title ) }</p>
-			<p className="visual-editor__invalid-block-warning-buttons">
+			<p>
 				<Button
 					onClick={ ignoreInvalid }
 					isLarge
diff --git a/editor/modes/visual-editor/multi-controls.js b/editor/components/block-list/multi-controls.js
similarity index 69%
rename from editor/modes/visual-editor/multi-controls.js
rename to editor/components/block-list/multi-controls.js
index e1f5933584c244..a4b48b42ae5bef 100644
--- a/editor/modes/visual-editor/multi-controls.js
+++ b/editor/components/block-list/multi-controls.js
@@ -6,14 +6,14 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import BlockMover from '../../components/block-mover';
-import BlockSettingsMenu from '../../components/block-settings-menu';
+import BlockMover from '../block-mover';
+import BlockSettingsMenu from '../block-settings-menu';
 import {
 	getMultiSelectedBlockUids,
 	isMultiSelecting,
 } from '../../selectors';
 
-function VisualEditorBlockMultiControls( { multiSelectedBlockUids, isSelecting } ) {
+function BlockListMultiControls( { multiSelectedBlockUids, isSelecting } ) {
 	if ( isSelecting ) {
 		return null;
 	}
@@ -36,4 +36,4 @@ export default connect( ( state ) => {
 		multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
 		isSelecting: isMultiSelecting( state ),
 	};
-} )( VisualEditorBlockMultiControls );
+} )( BlockListMultiControls );
diff --git a/editor/modes/visual-editor/sibling-inserter.js b/editor/components/block-list/sibling-inserter.js
similarity index 92%
rename from editor/modes/visual-editor/sibling-inserter.js
rename to editor/components/block-list/sibling-inserter.js
index 5ebea979d87895..1270d92f62e66f 100644
--- a/editor/modes/visual-editor/sibling-inserter.js
+++ b/editor/components/block-list/sibling-inserter.js
@@ -13,7 +13,7 @@ import { focus } from '@wordpress/utils';
 /**
  * Internal dependencies
  */
-import { Inserter } from '../../components';
+import Inserter from '../inserter';
 import {
 	getBlockUids,
 	getBlockInsertionPoint,
@@ -21,7 +21,7 @@ import {
 	isBlockWithinSelection,
 } from '../../selectors';
 
-class VisualEditorSiblingInserter extends Component {
+class BlockListSiblingInserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -96,7 +96,7 @@ class VisualEditorSiblingInserter extends Component {
 		const { insertIndex, showInsertionPoint } = this.props;
 		const { isVisible } = this.state;
 
-		const classes = classnames( 'editor-visual-editor__sibling-inserter', {
+		const classes = classnames( 'editor-block-list__sibling-inserter', {
 			'is-visible': isVisible || showInsertionPoint,
 		} );
 
@@ -111,7 +111,7 @@ class VisualEditorSiblingInserter extends Component {
 				onMouseLeave={ this.hide }
 				tabIndex={ isVisible ? -1 : 0 }>
 				{ showInsertionPoint && (
-					<div className="editor-visual-editor__insertion-point" />
+					<div className="editor-block-list__insertion-point" />
 				) }
 				{ isVisible &&
 					<Inserter
@@ -140,4 +140,4 @@ export default connect(
 			),
 		};
 	}
-)( VisualEditorSiblingInserter );
+)( BlockListSiblingInserter );
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
new file mode 100644
index 00000000000000..5a06ad1916160f
--- /dev/null
+++ b/editor/components/block-list/style.scss
@@ -0,0 +1,493 @@
+.editor-block-list__block {
+	margin-bottom: $block-spacing;
+	position: relative;
+
+	padding: $block-padding;
+
+	@include break-small {
+		// The block mover needs to stay inside the block to allow clicks when hovering the block
+		padding: $block-padding $block-padding + $block-mover-padding-visible;
+	}
+
+	&:before {
+		z-index: z-index( '.editor-block-list__block:before' );
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		outline: 1px solid transparent;
+
+		@include break-small {
+			left: $block-mover-padding-visible;
+			right: $block-mover-padding-visible;
+		}
+	}
+
+	&.has-warning .editor-block-list__block-edit {
+		position: relative;
+		min-height: 250px;
+
+		> :not( .editor-warning ) {
+			pointer-events: none;
+			user-select: none;
+		}
+	}
+
+	&.has-warning .editor-block-list__block-edit:after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-color: rgba( $white, 0.6 );
+	}
+
+	// simpler style for a block that has cursor focus (but hasn't been selected)
+	&.is-selected > .editor-block-mover:before,
+	&.is-hovered > .editor-block-mover:before,
+	&.is-selected > .editor-block-settings-menu:before,
+	&.is-hovered > .editor-block-settings-menu:before {
+		content: '';
+		position: absolute;
+		height: 36px;
+		top: 10px;
+	}
+
+	&.is-selected > .editor-block-mover:before,
+	&.is-hovered > .editor-block-mover:before {
+		border-right: 1px solid $light-gray-500;
+		right: 6px;
+	}
+
+	&.is-selected > .editor-block-settings-menu:before,
+	&.is-hovered > .editor-block-settings-menu:before {
+		border-left: 1px solid $light-gray-500;
+		left: 6px;
+	}
+
+	// focused block-style
+	&.is-selected:before {
+ 		outline: 1px solid $light-gray-500;
+	}
+
+	// selection style for textarea
+	::-moz-selection {
+		background: $blue-medium-highlight;
+	}
+
+	::selection {
+		background: $blue-medium-highlight;
+	}
+
+	// selection style for multiple blocks
+	&.is-multi-selected *::selection {
+		background: transparent;
+	}
+
+	&.is-multi-selected:before {
+		background: $blue-medium-highlight;
+	}
+
+	.iframe-overlay {
+		position: relative;
+	}
+
+	.iframe-overlay:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
+	&.is-selected .iframe-overlay:before {
+		display: none;
+	}
+
+	// Alignments
+	&[data-align="left"],
+	&[data-align="right"] {
+		// Without z-index, won't be clickable as "above" adjacent content
+		z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' );
+		max-width: 370px;
+	}
+
+	&[data-align="left"] {
+		float: left;
+
+		// mobile, and no sidebars
+		margin-right: $block-padding;
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-left: $float-margin;
+			}
+		}
+
+		// sidebar (sticky)
+		.sticky-menu .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) {
+				margin-left: $float-margin;
+			}
+		}
+
+		// sidebar (sticky) and post settings
+		.sticky-menu .editor-layout & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width - $block-padding ) {
+				margin-left: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) {
+				margin-left: $float-margin;
+			}
+		}
+	}
+
+	&[data-align="right"] {
+		float: right;
+
+		// mobile, and no sidebars
+		margin-right: $block-padding;
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-right: $float-margin;
+			}
+		}
+
+		// sidebar (sticky)
+		.sticky-menu .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) {
+				margin-right: $float-margin;
+			}
+		}
+
+		// sidebar (sticky) and post settings
+		.sticky-menu .editor-layout & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width - $block-padding ) {
+				margin-right: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) {
+				margin-right: $float-margin;
+			}
+		}
+	}
+
+	&[data-align="full"] {
+		padding-left: 0;
+		padding-right: 0;
+
+		&:before {
+			left: 0;
+			right: 0;
+			border-left-width: 0;
+			border-right-width: 0;
+		}
+
+		.editor-block-mover {
+			display: none;
+		}
+
+		@include break-wide() {
+			.editor-block-mover {
+				display: block;
+				top: -29px;
+				left: 10px;
+				height: auto;
+
+				&:before {
+					content: none;
+				}
+			}
+
+			.editor-block-mover__control {
+				float: left;
+				margin-right: 8px;
+			}
+		}
+
+		.editor-block-settings-menu__control {
+			float: left;
+			margin-right: 8px;
+		}
+
+		.editor-block-settings-menu {
+			top: -41px;
+			right: 10px;
+			height: auto;
+
+			&:before {
+				content: none;
+			}
+		}
+	}
+
+	&[data-clear="true"] {
+		float: none;
+	}
+
+	& > .components-drop-zone {
+		border: none;
+		top: -4px;
+		bottom: -4px;
+		margin: 0 $block-mover-padding-visible;
+		border-radius: 0;
+
+		.components-drop-zone__content {
+			display: none;
+		}
+
+		&.is-close-to-top {
+			background: none;
+			border-top: 3px solid $blue-medium-500;
+		}
+
+		&.is-close-to-bottom {
+			background: none;
+			border-bottom: 3px solid $blue-medium-500;
+		}
+	}
+
+	> .editor-block-settings-menu {
+		position: absolute;
+		top: 2px;
+		right: 4px;
+		padding: 16px 0 20px 14px; // handles hover area
+
+		// Mobile
+		display: none;
+
+		@include break-small {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	> .editor-block-mover {
+		position: absolute;
+		top: 2px;
+		left: 4px;
+		height: $text-editor-font-size * 4; // same height as an empty paragraph
+		padding: 4px 14px 6px 0; // handles hover area
+		z-index: z-index( '.editor-block-mover' );
+
+		// Mobile, to be revisited
+		display: none;
+		@include break-small {
+			display: block;
+		}
+	}
+}
+
+.editor-block-list .editor-inserter {
+	margin: $item-spacing;
+
+	.editor-inserter__toggle {
+		color: $dark-gray-300;
+		margin: 4px 0 0 -4px;	// align better with text blocks
+	}
+
+	.editor-inserter__toggle.components-icon-button:not(:disabled):hover {
+		@include button-style__hover;
+	}
+}
+
+.editor-block-list .editor-block-list__insertion-point {
+	position: relative;
+	width: $visual-editor-max-width - $block-padding - $block-padding;
+	margin-left: auto;
+	margin-right: auto;
+
+	&:before {
+		position: absolute;
+		top: -1px;
+		height: 2px;
+		left: 0;
+		right: 0;
+		background: $blue-medium-500;
+		content: '';
+	}
+}
+
+.editor-block-list__placeholder {
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	padding: 0;
+	clear: left;
+	margin: 0 auto;
+	position: relative;
+
+	@include break-small() {
+		padding: 0 ( $block-padding + $block-mover-padding-visible );
+	}
+
+	input[type=text] {
+		height: $text-editor-font-size * 4; // same height as an empty paragraph
+		margin: 0px 0px 4px 0px;
+		outline: 1px solid transparent;
+		border: none;
+		background: none;
+		box-shadow: none;
+		display: block;
+		transition: 0.2s outline;
+		text-align: left;
+		width: 100%;
+		color: $dark-gray-300;
+		font-size: $editor-font-size;
+		line-height: $editor-line-height;
+		cursor: text;
+		max-width: none;	// fixes a bleed issue from the admin
+
+		&:hover {
+			outline: 1px solid $light-gray-500;
+		}
+
+		padding: ( $block-padding - 2px ) $block-padding;
+
+		@include break-small() {
+			margin-left: -$block-padding;
+			margin-right: -$block-padding;
+		}
+	}
+}
+
+.editor-block-list__block .blocks-visual-editor__block-html-textarea {
+	display: block;
+	margin: 0;
+	width: 100%;
+	border: none;
+	outline: none;
+	box-shadow: none;
+	resize: none;
+	overflow: hidden;
+	font-family: $editor-html-font;
+	font-size: $text-editor-font-size;
+	line-height: 150%;
+	transition: padding .2s linear;
+
+	&:focus {
+		box-shadow: none;
+	}
+}
+
+.editor-block-list__sibling-inserter {
+	z-index: z-index( '.editor-block-list__sibling-inserter' );
+	position: relative;
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ) - ( 2 * $block-padding );
+	margin: 0 auto;
+	opacity: 0;
+	transition: opacity 0.25s ease-in-out;
+	transition-delay: 0.3s;
+
+	@include break-small {
+		max-width: $visual-editor-max-width - ( 2 * $block-padding );
+	}
+
+	&:not( [data-insert-index="0"] ) {
+		top: #{ -1 * ( $block-spacing / 2 ) };
+	}
+
+	&.is-visible {
+		opacity: 1;
+	}
+
+	&:before {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 44px;
+		transition: 0.1s height;
+		transform: translateY( -50% );
+	}
+
+	&:hover:before {
+		height: 44px;
+	}
+
+	.editor-inserter {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		margin: 0;
+	}
+
+	.editor-inserter__toggle.components-button {
+		margin: 0;
+		padding: 4px;
+		background: $white;
+
+		&:focus {
+			background: $light-gray-300;
+		}
+
+		.dashicon {
+			vertical-align: bottom;
+		}
+	}
+}
+
+$sticky-bottom-offset: 20px;
+
+.editor-block-contextual-toolbar {
+	position: sticky;
+	z-index: z-index( '.editor-block-contextual-toolbar' );
+	margin-top: - $block-toolbar-height - $block-padding - 1px;
+	margin-bottom: $block-padding + $sticky-bottom-offset;
+	white-space: nowrap;
+	text-align: left;
+	pointer-events: none;
+	height: $block-toolbar-height;
+	top: $header-height - 1px;
+
+	.editor-block-toolbar {
+		border: 1px solid $light-gray-500;
+		width: 100%;
+
+		// remove stacked borders in inline toolbar
+		> div:first-child {
+			margin-left: -1px;
+		}
+
+		> .editor-block-switcher:first-child {
+			margin-left: -2px;
+		}
+
+		@include break-small() {
+			width: auto;
+		}
+	}
+
+	// Reset pointer-events on children.
+	& > * {
+		pointer-events: auto;
+	}
+
+	@include break-small() {
+		margin-left: - $block-padding - 1px;
+		margin-right: - $block-padding - 1px;
+	}
+
+	@include break-medium() {
+		top: $item-spacing;
+	}
+}
+
+.editor-block-contextual-toolbar + div {
+	// prevent collapsing margins between block and toolbar, matches the 20px bottom offset		 +		display: flex;
+	margin-top: - $sticky-bottom-offset - 1px;
+	padding-top: 2px;
+}
diff --git a/editor/components/index.js b/editor/components/index.js
index 5da4486c89dde5..0a10d67048c653 100644
--- a/editor/components/index.js
+++ b/editor/components/index.js
@@ -36,6 +36,9 @@ export { default as WordCount } from './word-count';
 
 // Content Related Components
 export { default as BlockInspector } from './block-inspector';
+export { default as BlockList } from './block-list';
+export { default as BlockMover } from './block-mover';
+export { default as BlockSettingsMenu } from './block-settings-menu';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as ErrorBoundary } from './error-boundary';
 export { default as Inserter } from './inserter';
diff --git a/editor/components/writing-flow/index.js b/editor/components/writing-flow/index.js
index 12a870c2e4cc47..6430c589115127 100644
--- a/editor/components/writing-flow/index.js
+++ b/editor/components/writing-flow/index.js
@@ -53,7 +53,7 @@ class WritingFlow extends Component {
 	}
 
 	getEditables( target ) {
-		const outer = target.closest( '.editor-visual-editor__block-edit' );
+		const outer = target.closest( '.editor-block-list__block-edit' );
 		if ( ! outer || target === outer ) {
 			return [ target ];
 		}
@@ -69,7 +69,7 @@ class WritingFlow extends Component {
 				node.nodeName === 'INPUT' ||
 				node.nodeName === 'TEXTAREA' ||
 				node.contentEditable === 'true' ||
-				node.classList.contains( 'editor-visual-editor__block-edit' )
+				node.classList.contains( 'editor-block-list__block-edit' )
 			) );
 	}
 
diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
index e6280fcf9671fe..a6d47b068816e4 100644
--- a/editor/modes/visual-editor/index.js
+++ b/editor/modes/visual-editor/index.js
@@ -14,9 +14,8 @@ import { KeyboardShortcuts } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
-import VisualEditorBlockList from './block-list';
 import VisualEditorInserter from './inserter';
-import { PostTitle, WritingFlow } from '../../components';
+import { BlockList, PostTitle, WritingFlow } from '../../components';
 import { getBlockUids, getMultiSelectedBlockUids } from '../../selectors';
 import { clearSelectedBlock, multiSelect, redo, undo, removeBlocks } from '../../actions';
 
@@ -94,7 +93,7 @@ class VisualEditor extends Component {
 				} } />
 				<WritingFlow>
 					<PostTitle />
-					<VisualEditorBlockList ref={ this.bindBlocksContainer } />
+					<BlockList ref={ this.bindBlocksContainer } />
 				</WritingFlow>
 				<VisualEditorInserter />
 			</div>
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index e624f572bedd36..327eacfef9670e 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -2,6 +2,8 @@
 	position: relative;
 	height: 100%;
 	margin: 0 auto;
+	margin-left: auto;
+	margin-right: auto;
 	padding: 50px 0 0;
 
 	&,
@@ -12,197 +14,10 @@
 	}
 }
 
-.editor-visual-editor__block {
+.editor-visual-editor .editor-block-list__block {
 	margin-left: auto;
 	margin-right: auto;
-	margin-bottom: $block-spacing;
 	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	position: relative;
-
-	padding: $block-padding;
-
-	@include break-small {
-		// The block mover needs to stay inside the block to allow clicks when hovering the block
-		padding: $block-padding $block-padding + $block-mover-padding-visible;
-	}
-
-	&:before {
-		z-index: z-index( '.editor-visual-editor__block:before' );
-		content: '';
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		outline: 1px solid transparent;
-
-		@include break-small {
-			left: $block-mover-padding-visible;
-			right: $block-mover-padding-visible;
-		}
-	}
-
-	&.has-warning .editor-visual-editor__block-edit {
-		position: relative;
-		min-height: 250px;
-
-		> :not( .editor-warning ) {
-			pointer-events: none;
-			user-select: none;
-		}
-	}
-
-	&.has-warning .editor-visual-editor__block-edit:after {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background-color: rgba( $white, 0.6 );
-	}
-
-	// simpler style for a block that has cursor focus (but hasn't been selected)
-	&.is-selected > .editor-block-mover:before,
-	&.is-hovered > .editor-block-mover:before,
-	&.is-selected > .editor-block-settings-menu:before,
-	&.is-hovered > .editor-block-settings-menu:before {
-		content: '';
-		position: absolute;
-		height: 36px;
-		top: 10px;
-	}
-
-	&.is-selected > .editor-block-mover:before,
-	&.is-hovered > .editor-block-mover:before {
-		border-right: 1px solid $light-gray-500;
-		right: 6px;
-	}
-
-	&.is-selected > .editor-block-settings-menu:before,
-	&.is-hovered > .editor-block-settings-menu:before {
-		border-left: 1px solid $light-gray-500;
-		left: 6px;
-	}
-
-	// focused block-style
-	&.is-selected:before {
- 		outline: 1px solid $light-gray-500;
-	}
-
-	// selection style for textarea
-	::-moz-selection {
-		background: $blue-medium-highlight;
-	}
-
-	::selection {
-		background: $blue-medium-highlight;
-	}
-
-	// selection style for multiple blocks
-	&.is-multi-selected *::selection {
-		background: transparent;
-	}
-
-	&.is-multi-selected:before {
-		background: $blue-medium-highlight;
-	}
-
-	.iframe-overlay {
-		position: relative;
-	}
-
-	.iframe-overlay:before {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-
-	&.is-selected .iframe-overlay:before {
-		display: none;
-	}
-
-	// Alignments
-	&[data-align="left"],
-	&[data-align="right"] {
-		// Without z-index, won't be clickable as "above" adjacent content
-		z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' );
-		max-width: 370px;
-	}
-
-	&[data-align="left"] {
-		float: left;
-
-		// mobile, and no sidebars
-		margin-right: $block-padding;
-
-		// sidebar (folded)
-		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
-			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
-				margin-left: $float-margin;
-			}
-		}
-
-		// sidebar (sticky)
-		.sticky-menu .editor-layout:not( .is-sidebar-opened ) & {
-			@include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) {
-				margin-left: $float-margin;
-			}
-		}
-
-		// sidebar (sticky) and post settings
-		.sticky-menu .editor-layout & {
-			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width - $block-padding ) {
-				margin-left: $float-margin;
-			}
-		}
-
-		// sidebar and post settings
-		.auto-fold .is-sidebar-opened & {
-			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) {
-				margin-left: $float-margin;
-			}
-		}
-	}
-
-	&[data-align="right"] {
-		float: right;
-
-		// mobile, and no sidebars
-		margin-right: $block-padding;
-
-		// sidebar (folded)
-		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
-			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
-				margin-right: $float-margin;
-			}
-		}
-
-		// sidebar (sticky)
-		.sticky-menu .editor-layout:not( .is-sidebar-opened ) & {
-			@include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) {
-				margin-right: $float-margin;
-			}
-		}
-
-		// sidebar (sticky) and post settings
-		.sticky-menu .editor-layout & {
-			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width - $block-padding ) {
-				margin-right: $float-margin;
-			}
-		}
-
-		// sidebar and post settings
-		.auto-fold .is-sidebar-opened & {
-			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) {
-				margin-right: $float-margin;
-			}
-		}
-	}
 
 	&[data-align="wide"] {
 		max-width: 1100px;
@@ -210,52 +25,6 @@
 
 	&[data-align="full"] {
 		max-width: 100%;
-		padding-left: 0;
-		padding-right: 0;
-
-		&:before {
-			left: 0;
-			right: 0;
-			border-left-width: 0;
-			border-right-width: 0;
-		}
-
-		.editor-block-mover {
-			display: none;
-		}
-
-		@include break-wide() {
-			.editor-block-mover {
-				display: block;
-				top: -29px;
-				left: 10px;
-				height: auto;
-
-				&:before {
-					content: none;
-				}
-			}
-
-			.editor-block-mover__control {
-				float: left;
-				margin-right: 8px;
-			}
-		}
-
-		.editor-block-settings-menu__control {
-			float: left;
-			margin-right: 8px;
-		}
-
-		.editor-block-settings-menu {
-			top: -41px;
-			right: 10px;
-			height: auto;
-
-			&:before {
-				content: none;
-			}
-		}
 	}
 
 	&[data-align="full"],
@@ -268,62 +37,6 @@
 			margin-right: auto;
 		}
 	}
-
-	&[data-clear="true"] {
-		float: none;
-	}
-
-	& > .components-drop-zone {
-		border: none;
-		top: -4px;
-		bottom: -4px;
-		margin: 0 $block-mover-padding-visible;
-		border-radius: 0;
-
-		.components-drop-zone__content {
-			display: none;
-		}
-
-		&.is-close-to-top {
-			background: none;
-			border-top: 3px solid $blue-medium-500;
-		}
-
-		&.is-close-to-bottom {
-			background: none;
-			border-bottom: 3px solid $blue-medium-500;
-		}
-	}
-
-	> .editor-block-settings-menu {
-		position: absolute;
-		top: 2px;
-		right: 4px;
-		padding: 16px 0 20px 14px; // handles hover area
-
-		// Mobile
-		display: none;
-
-		@include break-small {
-			display: flex;
-			flex-direction: column;
-		}
-	}
-
-	> .editor-block-mover {
-		position: absolute;
-		top: 2px;
-		left: 4px;
-		height: $text-editor-font-size * 4; // same height as an empty paragraph
-		padding: 4px 14px 6px 0; // handles hover area
-		z-index: z-index( '.editor-block-mover' );
-
-		// Mobile, to be revisited
-		display: none;
-		@include break-small {
-			display: block;
-		}
-	}
 }
 
 .editor-visual-editor .editor-inserter {
@@ -356,47 +69,6 @@
 	}
 }
 
-.editor-visual-editor__placeholder {
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	padding: 0;
-	clear: left;
-	margin: 0 auto;
-	position: relative;
-
-	@include break-small() {
-		padding: 0 ( $block-padding + $block-mover-padding-visible );
-	}
-
-	input[type=text] {
-		height: $text-editor-font-size * 4; // same height as an empty paragraph
-		margin: 0px 0px 4px 0px;
-		outline: 1px solid transparent;
-		border: none;
-		background: none;
-		box-shadow: none;
-		display: block;
-		transition: 0.2s outline;
-		text-align: left;
-		width: 100%;
-		color: $dark-gray-300;
-		font-size: $editor-font-size;
-		line-height: $editor-line-height;
-		cursor: text;
-		max-width: none;	// fixes a bleed issue from the admin
-
-		&:hover {
-			outline: 1px solid $light-gray-500;
-		}
-
-		padding: ( $block-padding - 2px ) $block-padding;
-
-		@include break-small() {
-			margin-left: -$block-padding;
-			margin-right: -$block-padding;
-		}
-	}
-}
-
 .editor-visual-editor__inserter {
 	display: flex;
 	align-items: baseline;
@@ -434,134 +106,6 @@
 	height: 20px;
 }
 
-.editor-visual-editor__block .blocks-visual-editor__block-html-textarea {
-	display: block;
-	margin: 0;
-	width: 100%;
-	border: none;
-	outline: none;
-	box-shadow: none;
-	resize: none;
-	overflow: hidden;
-	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
-	line-height: 150%;
-	transition: padding .2s linear;
-
-	&:focus {
-		box-shadow: none;
-	}
-}
-
-.editor-visual-editor__sibling-inserter {
-	z-index: z-index( '.editor-visual-editor__sibling-inserter' );
-	position: relative;
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ) - ( 2 * $block-padding );
-	margin: 0 auto;
-	opacity: 0;
-	transition: opacity 0.25s ease-in-out;
-	transition-delay: 0.3s;
-
-	@include break-small {
-		max-width: $visual-editor-max-width - ( 2 * $block-padding );
-	}
-
-	&:not( [data-insert-index="0"] ) {
-		top: #{ -1 * ( $block-spacing / 2 ) };
-	}
-
-	&.is-visible {
-		opacity: 1;
-	}
-
-	&:before {
-		content: '';
-		position: absolute;
-		width: 100%;
-		height: 44px;
-		transition: 0.1s height;
-		transform: translateY( -50% );
-	}
-
-	&:hover:before {
-		height: 44px;
-	}
-
-	.editor-inserter {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% );
-		margin: 0;
-	}
-
-	.editor-inserter__toggle.components-button {
-		margin: 0;
-		padding: 4px;
-		background: $white;
-
-		&:focus {
-			background: $light-gray-300;
-		}
-
-		.dashicon {
-			vertical-align: bottom;
-		}
-	}
-}
-
-$sticky-bottom-offset: 20px;
-
-.editor-block-contextual-toolbar {
-	position: sticky;
-	z-index: z-index( '.editor-block-contextual-toolbar' );
-	margin-top: - $block-toolbar-height - $block-padding - 1px;
-	margin-bottom: $block-padding + $sticky-bottom-offset;
-	white-space: nowrap;
-	text-align: left;
-	pointer-events: none;
-	height: $block-toolbar-height;
-	top: $header-height - 1px;
-
-	.editor-block-toolbar {
-		border: 1px solid $light-gray-500;
-		width: 100%;
-
-		// remove stacked borders in inline toolbar
-		> div:first-child {
-			margin-left: -1px;
-		}
-
-		> .editor-block-switcher:first-child {
-			margin-left: -2px;
-		}
-
-		@include break-small() {
-			width: auto;
-		}
-	}
-
-	// Reset pointer-events on children.
-	& > * {
-		pointer-events: auto;
-	}
-
-	@include break-small() {
-		margin-left: - $block-padding - 1px;
-		margin-right: - $block-padding - 1px;
-	}
-
-	@include break-medium() {
-		top: $item-spacing;
-	}
-}
-
-.editor-block-contextual-toolbar + div {
-	// prevent collapsing margins between block and toolbar, matches the 20px bottom offset		 +		display: flex;
-	margin-top: - $sticky-bottom-offset - 1px;
-	padding-top: 2px;
-}
-
 .editor-visual-editor .editor-post-title {
 	margin-left: auto;
 	margin-right: auto;
diff --git a/editor/navigable-toolbar/index.js b/editor/navigable-toolbar/index.js
index e68c73f7a6c865..05ee1e41483cbb 100644
--- a/editor/navigable-toolbar/index.js
+++ b/editor/navigable-toolbar/index.js
@@ -39,7 +39,7 @@ class NavigableToolbar extends Component {
 
 		// Is there a better way to focus the selected block
 		// TODO: separate focused/selected block state and use Redux actions instead
-		const selectedBlock = document.querySelector( '.editor-visual-editor__block.is-selected .editor-visual-editor__block-edit' );
+		const selectedBlock = document.querySelector( '.editor-block-list__block.is-selected .editor-block-list__block-edit' );
 		if ( !! selectedBlock ) {
 			event.stopPropagation();
 			selectedBlock.focus();
diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js
index de81ab4176e61c..156c32312f2584 100644
--- a/test/e2e/integration/002-adding-blocks.js
+++ b/test/e2e/integration/002-adding-blocks.js
@@ -4,7 +4,7 @@ describe( 'Adding blocks', () => {
 	} );
 
 	it( 'Should insert content using the placeholder, the quick inserter, the regular inserter', () => {
-		const lastBlockSelector = '.editor-visual-editor__block-edit:last [contenteditable="true"]:first';
+		const lastBlockSelector = '.editor-block-list__block-edit:last [contenteditable="true"]:first';
 
 		// Using the placeholder
 		cy.get( '[value="Write your story"]' ).click();
diff --git a/test/e2e/integration/003-multi-block-selection.js b/test/e2e/integration/003-multi-block-selection.js
index dc721b5f63895b..6437bc510f732b 100644
--- a/test/e2e/integration/003-multi-block-selection.js
+++ b/test/e2e/integration/003-multi-block-selection.js
@@ -4,9 +4,9 @@ describe( 'Multi-block selection', () => {
 	} );
 
 	it( 'Should select/unselect multiple blocks', () => {
-		const lastBlockSelector = '.editor-visual-editor__block-edit:last [contenteditable="true"]:first';
-		const firstBlockContainerSelector = '.editor-visual-editor__block:first';
-		const lastBlockContainerSelector = '.editor-visual-editor__block:last';
+		const lastBlockSelector = '.editor-block-list__block-edit:last [contenteditable="true"]:first';
+		const firstBlockContainerSelector = '.editor-block-list__block:first';
+		const lastBlockContainerSelector = '.editor-block-list__block:last';
 		const multiSelectedCssClass = 'is-multi-selected';
 
 		// Creating test blocks