Inserter: Add a visual placeholder at the position where the block is going to be inserted

editor/actions.js

@@ -28,6 +28,27 @@ export function replaceBlocks( uids, blocks ) {
 	};
 }
 
+export function insertBlock( block, after ) {
+	return {
+		type: 'INSERT_BLOCK',
+		block,
+		after,
+	};
+}
+
+export function setInsertionPoint( uid ) {
+	return {
+		type: 'SET_INSERTION_POINT',
+		uid,
+	};
+}
+
+export function clearInsertionPoint() {
+	return {
+		type: 'CLEAR_INSERTION_POINT',
+	};
+}
+
 export function editPost( edits ) {
 	return {
 		type: 'EDIT_POST',

editor/inserter/index.js

@@ -13,6 +13,8 @@ import IconButton from 'components/icon-button';
  * Internal dependencies
  */
 import InserterMenu from './menu';
+import { getSelectedBlock } from '../selectors';
+import { insertBlock, clearInsertionPoint } from '../actions';
 
 class Inserter extends wp.element.Component {
 	constructor() {
@@ -45,7 +47,11 @@ class Inserter extends wp.element.Component {
 
 	insertBlock( slug ) {
 		if ( slug ) {
-			this.props.onInsertBlock( slug );
+			const { selectedBlock, onInsertBlock } = this.props;
+			onInsertBlock(
+				slug,
+				selectedBlock ? selectedBlock.uid : null
+			);
 		} else if ( this.toggleNode ) {
 			// When menu is closed by pressing escape, restore focus to the
 			// original opening active element before menu closes
@@ -88,13 +94,18 @@ class Inserter extends wp.element.Component {
 }
 
 export default connect(
-	undefined,
+	( state ) => {
+		return {
+			selectedBlock: getSelectedBlock( state ),
+		};
+	},
 	( dispatch ) => ( {
-		onInsertBlock( slug ) {
-			dispatch( {
-				type: 'INSERT_BLOCK',
-				block: wp.blocks.createBlock( slug ),
-			} );
+		onInsertBlock( slug, after ) {
+			dispatch( clearInsertionPoint() );
+			dispatch( insertBlock(
+				wp.blocks.createBlock( slug ),
+				after
+			) );
 		},
 	} )
 )( clickOutside( Inserter ) );

editor/inserter/menu.js

@@ -3,6 +3,7 @@
  */
 import { flow, groupBy, sortBy, findIndex, filter } from 'lodash';
 import classnames from 'classnames';
+import { connect } from 'react-redux';
 
 /**
  * WordPress dependencies
@@ -13,6 +14,8 @@ import Dashicon from 'components/dashicon';
  * Internal dependencies
  */
 import './style.scss';
+import { getSelectedBlock } from '../selectors';
+import { setInsertionPoint, clearInsertionPoint } from '../actions';
 
 class InserterMenu extends wp.element.Component {
 	constructor() {
@@ -63,6 +66,18 @@ class InserterMenu extends wp.element.Component {
 		};
 	}
 
+	hoverBlock() {
+		return () => {
+			this.props.setInsertionPoint(
+				this.props.selectedBlock ? this.props.selectedBlock.uid : null
+			);
+		};
+	}
+
+	unhoverBlock() {
+		return () => this.props.clearInsertionPoint();
+	}
+
 	getVisibleBlocks( blockTypes ) {
 		return filter( blockTypes, this.isShownBlock );
 	}
@@ -254,6 +269,8 @@ class InserterMenu extends wp.element.Component {
 											onClick={ this.selectBlock( slug ) }
 											ref={ this.bindReferenceNode( slug ) }
 											tabIndex="-1"
+											onMouseEnter={ this.hoverBlock() }
+											onMouseLeave={ this.unhoverBlock() }
 										>
 											<Dashicon icon={ icon } />
 											{ title }
@@ -284,4 +301,11 @@ class InserterMenu extends wp.element.Component {
 
 InserterMenu.instances = 0;
 
-export default InserterMenu;
+export default connect(
+	( state ) => {
+		return {
+			selectedBlock: getSelectedBlock( state ),
+		};
+	},
+	{ setInsertionPoint, clearInsertionPoint }
+)( InserterMenu );

editor/inserter/style.scss

@@ -148,13 +148,13 @@ input[type=search].editor-inserter__search {
 	padding: 8px;
 	align-items: center;
 	cursor: pointer;
-	border: 1px solid transparent;
+	border: none;
 	background: none;
 	line-height: 20px;
 
 	&:hover,
 	&:focus {
-		border: 1px solid $dark-gray-500;
+		color: $blue-medium;
 		outline: none;
 		position: relative;
 	}

editor/modes/visual-editor/block.js

@@ -20,6 +20,7 @@ import {
 	deselectBlock,
 	focusBlock,
 	mergeBlocks,
+	insertBlock,
 } from '../../actions';
 import {
 	getPreviousBlock,
@@ -281,11 +282,7 @@ export default connect(
 		},
 
 		onInsertAfter( block ) {
-			dispatch( {
-				type: 'INSERT_BLOCK',
-				after: ownProps.uid,
-				block,
-			} );
+			dispatch( insertBlock( block, ownProps.uid ) );
 		},
 
 		onFocus( ...args ) {

editor/modes/visual-editor/index.js

@@ -15,9 +15,19 @@ import './style.scss';
 import Inserter from '../../inserter';
 import VisualEditorBlock from './block';
 import PostTitle from '../../post-title';
-import { getBlockUids } from '../../selectors';
+import { getBlockUids, getBlockInsertionPoint } from '../../selectors';
 
-function VisualEditor( { blocks, clearSelectedBlock } ) {
+const INSERTION_POINT_PLACEHOLDER = '[[insertion-point]]';
+
+function VisualEditor( { blocks, insertionPoint, clearSelectedBlock } ) {
+	const insertionPointIndex = blocks.indexOf( insertionPoint );
+	const blocksWithInsertionPoint = insertionPoint
+		? [
+			...blocks.slice( 0, insertionPointIndex + 1 ),
+			INSERTION_POINT_PLACEHOLDER,
+			...blocks.slice( insertionPointIndex + 1 ),
+		]
+		: blocks;
 	// Disable reason: Focus transfer between blocks and key events are handled
 	// by focused block element. Consider unhandled click bubbling as unselect.
 
@@ -29,9 +39,12 @@ function VisualEditor( { blocks, clearSelectedBlock } ) {
 			onClick={ clearSelectedBlock }
 			className="editor-visual-editor">
 			<PostTitle />
-			{ blocks.map( ( uid ) => (
-				<VisualEditorBlock key={ uid } uid={ uid } />
-			) ) }
+			{ blocksWithInsertionPoint.map( ( uid ) => {
+				if ( uid === INSERTION_POINT_PLACEHOLDER ) {
+					return <div key={ INSERTION_POINT_PLACEHOLDER } className="editor-visual-editor__insertion-point" />;
+				}
+				return <VisualEditorBlock key={ uid } uid={ uid } />;
+			} ) }
 			<Inserter position="top right" />
 		</div>
 	);
@@ -41,8 +54,8 @@ function VisualEditor( { blocks, clearSelectedBlock } ) {
 export default connect(
 	( state ) => ( {
 		blocks: getBlockUids( state ),
+		insertionPoint: getBlockInsertionPoint( state ),
 	} ),
 	( dispatch ) => ( {
 		clearSelectedBlock: () => dispatch( { type: 'CLEAR_SELECTED_BLOCK' } ),
-	} )
-)( VisualEditor );
+	} ) )( VisualEditor );

editor/modes/visual-editor/style.scss

@@ -112,3 +112,17 @@
 .editor-visual-editor .editor-inserter {
 	margin: $item-spacing $item-spacing $item-spacing calc( 50% - #{ $visual-editor-max-width / 2 } );	// account for full-width trick
 }
+
+.editor-visual-editor > .editor-visual-editor__insertion-point {
+	position: relative;
+
+	&:before {
+		position: absolute;
+		top: 6px;
+		right: #{ $block-padding + $block-mover-margin };
+		left: 0;
+		height: 3px;
+		background: $blue-medium;
+		content: '';
+	}
+}

editor/selectors.js

@@ -132,6 +132,15 @@ export function isTypingInBlock( state, uid ) {
 	return state.selectedBlock.uid === uid ? state.selectedBlock.typing : false;
 }
 
+export function getBlockInsertionPoint( state ) {
+	if ( ! state.insertionPoint.show ) {
+		return null;
+	}
+	const blockToInsertAfter = state.insertionPoint.uid;
+
+	return blockToInsertAfter || last( state.editor.blockOrder );
+}
+
 export function isSavingPost( state ) {
 	return state.saving.requesting;
 }

editor/state.js

@@ -281,6 +281,29 @@ export function hoveredBlock( state = null, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the block insertion point
+ *
+ * @param  {Object} state  Current state
+ * @param  {Object} action Dispatched action
+ * @return {Object}        Updated state
+ */
+export function insertionPoint( state = { show: false }, action ) {
+	switch ( action.type ) {
+		case 'SET_INSERTION_POINT':
+			return {
+				show: true,
+				uid: action.uid,
+			};
+		case 'CLEAR_INSERTION_POINT':
+			return {
+				show: false,
+			};
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning current editor mode, either "visual" or "text".
  *
@@ -355,6 +378,7 @@ export function createReduxStore() {
 		currentPost,
 		selectedBlock,
 		hoveredBlock,
+		insertionPoint,
 		mode,
 		isSidebarOpened,
 		saving,

editor/test/selectors.js

@@ -31,6 +31,7 @@ import {
 	isBlockHovered,
 	getBlockFocus,
 	isTypingInBlock,
+	getBlockInsertionPoint,
 	isSavingPost,
 	didPostSaveRequestSucceed,
 	didPostSaveRequestFail,
@@ -580,6 +581,43 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getBlockInsertionPoint', () => {
+		it( 'should return the uid of the insertion point', () => {
+			const state = {
+				insertionPoint: {
+					show: true,
+					uid: 123,
+				},
+			};
+
+			expect( getBlockInsertionPoint( state ) ).to.equal( 123 );
+		} );
+
+		it( 'should return return the last block uid if the insertion point is null', () => {
+			const state = {
+				insertionPoint: {
+					show: true,
+					uid: null,
+				},
+				editor: {
+					blockOrder: [ 34, 23 ],
+				},
+			};
+
+			expect( getBlockInsertionPoint( state ) ).to.equal( 23 );
+		} );
+
+		it( 'should return null if the insertion point is not shown', () => {
+			const state = {
+				insertionPoint: {
+					show: false,
+				},
+			};
+
+			expect( getBlockInsertionPoint( state, 23 ) ).to.be.null();
+		} );
+	} );
+
 	describe( 'isSavingPost', () => {
 		it( 'should return true if the post is currently being saved', () => {
 			const state = {

editor/test/state.js

@@ -16,6 +16,7 @@ import {
 	mode,
 	isSidebarOpened,
 	saving,
+	insertionPoint,
 	createReduxStore,
 } from '../state';
 
@@ -397,6 +398,30 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'insertionPoint', () => {
+		it( 'should set the insertion point', () => {
+			const state = insertionPoint( {}, {
+				type: 'SET_INSERTION_POINT',
+				uid: 'kumquat',
+			} );
+
+			expect( state ).to.eql( {
+				show: true,
+				uid: 'kumquat',
+			} );
+		} );
+
+		it( 'should clear the insertion point', () => {
+			const state = insertionPoint( {}, {
+				type: 'CLEAR_INSERTION_POINT',
+			} );
+
+			expect( state ).to.eql( {
+				show: false,
+			} );
+		} );
+	} );
+
 	describe( 'selectedBlock()', () => {
 		it( 'should return with block uid as selected', () => {
 			const state = selectedBlock( undefined, {
@@ -675,6 +700,7 @@ describe( 'state', () => {
 				'mode',
 				'isSidebarOpened',
 				'saving',
+				'insertionPoint',
 			] );
 		} );
 	} );