Adding an inserter next to the last block

editor/components/block-list/block.js

@@ -34,6 +34,7 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import BlockMultiControls from './multi-controls';
 import BlockMobileToolbar from './block-mobile-toolbar';
 import BlockListSiblingInserter from './sibling-inserter';
+import BlockListInsertionPoint from './insertion-point';
 import {
 	clearSelectedBlock,
 	editPost,
@@ -63,6 +64,7 @@ import {
 	isSelectionEnabled,
 	isTyping,
 	getBlockMode,
+	getBlockCount,
 } from '../../store/selectors';
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
@@ -357,7 +359,7 @@ export class BlockListBlock extends Component {
 	}
 
 	render() {
-		const { block, order, mode, showContextualToolbar, isLocked } = this.props;
+		const { block, order, mode, showContextualToolbar, isLocked, isLast } = this.props;
 		const { name: blockName, isValid } = block;
 		const blockType = getBlockType( blockName );
 		// translators: %s: Type of block (i.e. Text, Image etc)
@@ -375,6 +377,7 @@ export class BlockListBlock extends Component {
 			'is-multi-selected': isMultiSelected,
 			'is-hovered': isHovered,
 			'is-reusable': isReusableBlock( blockType ),
+			'is-last': isLast,
 		} );
 
 		const { onMouseLeave, onFocus, onReplace } = this.props;
@@ -448,27 +451,33 @@ export class BlockListBlock extends Component {
 				</div>
 				{ !! error && <BlockCrashWarning /> }
 				<BlockListSiblingInserter uid={ block.uid } />
+				<BlockListInsertionPoint uid={ block.uid } />
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	}
 }
 
-const mapStateToProps = ( state, { uid } ) => ( {
-	previousBlock: getPreviousBlock( state, uid ),
-	nextBlock: getNextBlock( state, uid ),
-	block: getBlock( state, uid ),
-	isSelected: isBlockSelected( state, uid ),
-	isMultiSelected: isBlockMultiSelected( state, uid ),
-	isFirstMultiSelected: isFirstMultiSelectedBlock( state, uid ),
-	isHovered: isBlockHovered( state, uid ) && ! isMultiSelecting( state ),
-	focus: getBlockFocus( state, uid ),
-	isTyping: isTyping( state ),
-	order: getBlockIndex( state, uid ),
-	meta: getEditedPostAttribute( state, 'meta' ),
-	mode: getBlockMode( state, uid ),
-	isSelectionEnabled: isSelectionEnabled( state ),
-} );
+const mapStateToProps = ( state, { uid } ) => {
+	const index = getBlockIndex( state, uid );
+
+	return {
+		previousBlock: getPreviousBlock( state, uid ),
+		nextBlock: getNextBlock( state, uid ),
+		block: getBlock( state, uid ),
+		isSelected: isBlockSelected( state, uid ),
+		isMultiSelected: isBlockMultiSelected( state, uid ),
+		isFirstMultiSelected: isFirstMultiSelectedBlock( state, uid ),
+		isHovered: isBlockHovered( state, uid ) && ! isMultiSelecting( state ),
+		focus: getBlockFocus( state, uid ),
+		isTyping: isTyping( state ),
+		order: index,
+		meta: getEditedPostAttribute( state, 'meta' ),
+		mode: getBlockMode( state, uid ),
+		isSelectionEnabled: isSelectionEnabled( state ),
+		isLast: index === getBlockCount( state ) - 1,
+	};
+};
 
 const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	onChange( uid, attributes ) {

editor/components/block-list/insertion-point.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockUids,
+	getBlockInsertionPoint,
+	isBlockInsertionPointVisible,
+} from '../../store/selectors';
+import {
+	clearSelectedBlock,
+} from '../../store/actions';
+
+/**
+ * Component showing the block's insertion point.
+ *
+ * @param   {Object}       props  React props passed to the component.
+ * @returns {Object|false}        Rendered insertion point.
+ */
+function BlockListInsertionPoint( { showInsertionPoint } ) {
+	return showInsertionPoint && (
+		<div className="editor-block-list__insertion-point" />
+	);
+}
+
+export default connect(
+	( state, { uid } ) => {
+		const blockIndex = uid ? getBlockUids( state ).indexOf( uid ) : -1;
+		const insertIndex = blockIndex > -1 ? blockIndex + 1 : 0;
+
+		return {
+			showInsertionPoint: (
+				isBlockInsertionPointVisible( state ) &&
+				getBlockInsertionPoint( state ) === insertIndex
+			),
+		};
+	},
+	{
+		clearSelectedBlock,
+	}
+)( BlockListInsertionPoint );

editor/components/block-list/sibling-inserter.js

@@ -15,8 +15,6 @@ import { Component } from '@wordpress/element';
 import Inserter from '../inserter';
 import {
 	getBlockUids,
-	getBlockInsertionPoint,
-	isBlockInsertionPointVisible,
 	isBlockWithinSelection,
 } from '../../store/selectors';
 import {
@@ -49,21 +47,18 @@ class BlockListSiblingInserter extends Component {
 			return null;
 		}
 
-		const { insertIndex, showInsertionPoint } = this.props;
+		const { insertIndex } = this.props;
 		const { isForcedVisible } = this.state;
 
 		const classes = classnames( 'editor-block-list__sibling-inserter', {
-			'is-forced-visible': isForcedVisible || showInsertionPoint,
+			'is-forced-visible': isForcedVisible,
 		} );
 
 		return (
 			<div
 				ref={ this.bindNode }
 				data-insert-index={ insertIndex }
 				className={ classes }>
-				{ showInsertionPoint && (
-					<div className="editor-block-list__insertion-point" />
-				) }
 				<Inserter
 					key="inserter"
 					position="bottom"
@@ -83,10 +78,6 @@ export default connect(
 		return {
 			shouldDisable: isBlockWithinSelection( state, uid ),
 			insertIndex,
-			showInsertionPoint: (
-				isBlockInsertionPointVisible( state ) &&
-				getBlockInsertionPoint( state ) === insertIndex
-			),
 		};
 	},
 	{

editor/components/block-list/style.scss

@@ -356,7 +356,16 @@
 }
 
 .editor-block-list__insertion-point {
-	position: relative;
+	position: absolute;
+	bottom: 0;
+	top: auto;
+	left: 0;
+	right: 0;
+
+	@include break-small {
+		left: $block-mover-padding-visible;
+		right: $block-mover-padding-visible;
+	}
 
 	&:before {
 		position: absolute;
@@ -452,6 +461,22 @@
 	}
 }
 
+.editor-block-list__block.is-last > .editor-block-mover {
+	display: none;
+}
+
+.editor-block-list__block.is-last > .editor-block-list__sibling-inserter {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: $block-mover-padding-visible;
+}
+
+.editor-block-list__block.is-last.is-selected > .editor-block-list__sibling-inserter .editor-inserter__toggle {
+	opacity: 1;
+}
+
 .editor-block-list__block > .editor-block-list__sibling-inserter {
 	position: absolute;
 	bottom: 0;

editor/components/inserter/index.js

@@ -36,7 +36,7 @@ class Inserter extends Component {
 			insertIndex,
 			onToggle,
 		} = this.props;
-
+		console.log( 'isOpen', isOpen );
 		if ( isOpen ) {
 			this.props.showInsertionPoint( insertIndex );
 		} else {