Block List: Use default Inserter for sibling insertion

docs/data/data-core-editor.md

@@ -707,7 +707,7 @@ otherwise.
 
 *Returns*
 
-Whether block is first in mult-selection.
+Whether block is first in multi-selection.
 
 ### isBlockMultiSelected
 
@@ -1534,14 +1534,20 @@ be inserted, optionally at a specific index respective a root block list.
 
  * blocks: Block objects to insert.
  * index: Index at which block should be inserted.
- * rootClientId: Optional root cliente ID of block list on
+ * rootClientId: Optional root client ID of block list on
                                which to insert.
 
 ### showInsertionPoint
 
 Returns an action object used in signalling that the insertion point should
 be shown.
 
+*Parameters*
+
+ * rootClientId: Optional root client ID of block list on
+                              which to insert.
+ * index: Index at which block should be inserted.
+
 ### hideInsertionPoint
 
 Returns an action object hiding the insertion point.

packages/editor/src/components/block-list/block.js

@@ -412,10 +412,9 @@ export class BlockListBlock extends Component {
 		const shouldShowMobileToolbar = shouldAppearSelected;
 		const { error, dragging } = this.state;
 
-		// Insertion point can only be made visible when the side inserter is
-		// not present, and either the block is at the extent of a selection or
-		// is the first block in the top-level list rendering.
-		const shouldShowInsertionPoint = ( isPartOfMultiSelection && isFirst ) || ! isPartOfMultiSelection;
+		// Insertion point can only be made visible if the block is at the
+		// the extent of a multi-selection, or not in a multi-selection.
+		const shouldShowInsertionPoint = ( isPartOfMultiSelection && isFirstMultiSelected ) || ! isPartOfMultiSelection;
 		const canShowInBetweenInserter = ! isEmptyDefaultBlock && ! isPreviousBlockADefaultEmptyBlock;
 
 		// The wp-block className is important for editor styles.
@@ -501,7 +500,6 @@ export class BlockListBlock extends Component {
 						clientId={ clientId }
 						rootClientId={ rootClientId }
 						canShowInserter={ canShowInBetweenInserter }
-						onInsert={ this.hideHoverEffects }
 					/>
 				) }
 				<BlockDropZone

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

@@ -6,12 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
-import { IconButton } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ifCondition, compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from '../inserter';
 
 class BlockInsertionPoint extends Component {
 	constructor() {
@@ -22,12 +24,12 @@ class BlockInsertionPoint extends Component {
 
 		this.onBlurInserter = this.onBlurInserter.bind( this );
 		this.onFocusInserter = this.onFocusInserter.bind( this );
-		this.onClick = this.onClick.bind( this );
 	}
 
 	onFocusInserter( event ) {
-		// We stop propagation of the focus event to avoid selecting the current block
-		// While we're trying to insert a new block
+		// Stop propagation of the focus event to avoid selecting the current
+		// block while inserting a new block, as it is not relevant to sibling
+		// insertion and conflicts with contextual toolbar placement.
 		event.stopPropagation();
 
 		this.setState( {
@@ -41,77 +43,57 @@ class BlockInsertionPoint extends Component {
 		} );
 	}
 
-	onClick() {
-		const { rootClientId, index, ...props } = this.props;
-		props.insertDefaultBlock( undefined, rootClientId, index );
-		props.startTyping();
-		this.onBlurInserter();
-		if ( props.onInsert ) {
-			this.props.onInsert();
-		}
-	}
-
 	render() {
 		const { isInserterFocused } = this.state;
-		const { showInsertionPoint, showInserter } = this.props;
+		const {
+			showInsertionPoint,
+			canShowInserter,
+			rootClientId,
+			insertIndex,
+		} = this.props;
 
 		return (
 			<div className="editor-block-list__insertion-point">
-				{ showInsertionPoint && <div className="editor-block-list__insertion-point-indicator" /> }
-				{ showInserter && (
-					<div className={ classnames( 'editor-block-list__insertion-point-inserter', { 'is-visible': isInserterFocused } ) }>
-						<IconButton
-							icon="insert"
-							className="editor-block-list__insertion-point-button"
-							onClick={ this.onClick }
-							label={ __( 'Insert block' ) }
-							onFocus={ this.onFocusInserter }
-							onBlur={ this.onBlurInserter }
+				{ showInsertionPoint && (
+					<div className="editor-block-list__insertion-point-indicator" />
+				) }
+				{ canShowInserter && (
+					<div
+						onFocus={ this.onFocusInserter }
+						onBlur={ this.onBlurInserter }
+						className={
+							classnames( 'editor-block-list__insertion-point-inserter', {
+								'is-visible': isInserterFocused,
+							} )
+						}
+					>
+						<Inserter
+							rootClientId={ rootClientId }
+							index={ insertIndex }
 						/>
 					</div>
 				) }
 			</div>
 		);
 	}
 }
-export default compose(
-	withSelect( ( select, { clientId, rootClientId, canShowInserter } ) => {
-		const {
-			canInsertBlockType,
-			getBlockIndex,
-			getBlockInsertionPoint,
-			getBlock,
-			isBlockInsertionPointVisible,
-			isTyping,
-		} = select( 'core/editor' );
-		const {
-			getDefaultBlockName,
-		} = select( 'core/blocks' );
-		const blockIndex = clientId ? getBlockIndex( clientId, rootClientId ) : -1;
-		const insertIndex = blockIndex;
-		const insertionPoint = getBlockInsertionPoint();
-		const block = clientId ? getBlock( clientId ) : null;
-		const showInsertionPoint = (
-			isBlockInsertionPointVisible() &&
-			insertionPoint.index === insertIndex &&
-			insertionPoint.rootClientId === rootClientId &&
-			( ! block || ! isUnmodifiedDefaultBlock( block ) )
-		);
+export default withSelect( ( select, { clientId, rootClientId } ) => {
+	const {
+		getBlockIndex,
+		getBlockInsertionPoint,
+		getBlock,
+		isBlockInsertionPointVisible,
+	} = select( 'core/editor' );
+	const blockIndex = getBlockIndex( clientId, rootClientId );
+	const insertIndex = blockIndex;
+	const insertionPoint = getBlockInsertionPoint();
+	const block = getBlock( clientId );
+	const showInsertionPoint = (
+		isBlockInsertionPointVisible() &&
+		insertionPoint.index === insertIndex &&
+		insertionPoint.rootClientId === rootClientId &&
+		! isUnmodifiedDefaultBlock( block )
+	);
 
-		const defaultBlockName = getDefaultBlockName();
-		return {
-			canInsertDefaultBlock: canInsertBlockType( defaultBlockName, rootClientId ),
-			showInserter: ! isTyping() && canShowInserter,
-			index: insertIndex,
-			showInsertionPoint,
-		};
-	} ),
-	ifCondition( ( { canInsertDefaultBlock } ) => canInsertDefaultBlock ),
-	withDispatch( ( dispatch ) => {
-		const { insertDefaultBlock, startTyping } = dispatch( 'core/editor' );
-		return {
-			insertDefaultBlock,
-			startTyping,
-		};
-	} )
-)( BlockInsertionPoint );
+	return { showInsertionPoint, insertIndex };
+} )( BlockInsertionPoint );

packages/editor/src/components/block-list/style.scss

@@ -640,7 +640,7 @@
 	justify-content: center;
 
 	// Show a clickable plus.
-	.editor-block-list__insertion-point-button {
+	.editor-inserter__toggle {
 		margin-top: -4px;
 		border-radius: 50%;
 		color: $blue-medium-focus;
@@ -666,7 +666,7 @@
 // Don't show the sibling inserter before the selected block.
 .edit-post-layout:not(.has-fixed-toolbar) {
 	// The child selector is necessary for this to work properly in nested contexts.
-	.is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter {
+	.is-selected > .editor-block-list__insertion-point .editor-inserter__toggle {
 		opacity: 0;
 		pointer-events: none;
 

packages/editor/src/components/inserter/index.js

@@ -99,15 +99,14 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { rootClientId } ) => {
+	withSelect( ( select, { rootClientId, index } ) => {
 		const {
 			getEditedPostAttribute,
 			getBlockInsertionPoint,
 			getInserterItems,
 		} = select( 'core/editor' );
 
-		let index;
-		if ( rootClientId === undefined ) {
+		if ( rootClientId === undefined && index === undefined ) {
 			// Unless explicitly provided, the default insertion point provided
 			// by the store occurs immediately following the selected block.
 			// Otherwise, the default behavior for an undefined index is to

packages/editor/src/components/inserter/menu.js

@@ -130,10 +130,12 @@ export class InserterMenu extends Component {
 			hoveredItem: item,
 		} );
 
+		const { showInsertionPoint, hideInsertionPoint } = this.props;
 		if ( item ) {
-			this.props.showInsertionPoint();
+			const { rootClientId, index } = this.props;
+			showInsertionPoint( rootClientId, index );
 		} else {
-			this.props.hideInsertionPoint();
+			hideInsertionPoint();
 		}
 	}
 

packages/editor/src/store/actions.js

@@ -312,7 +312,7 @@ export function insertBlock( block, index, rootClientId ) {
  *
  * @param {Object[]} blocks       Block objects to insert.
  * @param {?number}  index        Index at which block should be inserted.
- * @param {?string}  rootClientId Optional root cliente ID of block list on
+ * @param {?string}  rootClientId Optional root client ID of block list on
  *                                which to insert.
  *
  * @return {Object} Action object.
@@ -331,11 +331,17 @@ export function insertBlocks( blocks, index, rootClientId ) {
  * Returns an action object used in signalling that the insertion point should
  * be shown.
  *
+ * @param {?string} rootClientId Optional root client ID of block list on
+ *                               which to insert.
+ * @param {?number} index        Index at which block should be inserted.
+ *
  * @return {Object} Action object.
  */
-export function showInsertionPoint() {
+export function showInsertionPoint( rootClientId, index ) {
 	return {
 		type: 'SHOW_INSERTION_POINT',
+		rootClientId,
+		index,
 	};
 }
 

packages/editor/src/store/reducer.js

@@ -710,21 +710,23 @@ export function blocksMode( state = {}, action ) {
 }
 
 /**
- * Reducer returning the block insertion point visibility, a boolean value
- * reflecting whether the insertion point should be shown.
+ * Reducer returning the block insertion point visibility, either null if there
+ * is not an explicit insertion point assigned, or an object of its `index` and
+ * `rootClientId`.
  *
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
  *
  * @return {Object} Updated state.
  */
-export function isInsertionPointVisible( state = false, action ) {
+export function insertionPoint( state = null, action ) {
 	switch ( action.type ) {
 		case 'SHOW_INSERTION_POINT':
-			return true;
+			const { rootClientId, index } = action;
+			return { rootClientId, index };
 
 		case 'HIDE_INSERTION_POINT':
-			return false;
+			return null;
 	}
 
 	return state;
@@ -1100,7 +1102,7 @@ export default optimist( combineReducers( {
 	blockSelection,
 	blocksMode,
 	blockListSettings,
-	isInsertionPointVisible,
+	insertionPoint,
 	preferences,
 	saving,
 	postLock,

packages/editor/src/store/selectors.js

@@ -1016,10 +1016,10 @@ export function getLastMultiSelectedBlockClientId( state ) {
  * specified client ID is the first block of the multi-selection set, or false
  * otherwise.
  *
- * @param {Object} state      Editor state.
- * @param {string} clientId   Block client ID.
+ * @param {Object} state    Editor state.
+ * @param {string} clientId Block client ID.
  *
- * @return {boolean} Whether block is first in mult-selection.
+ * @return {boolean} Whether block is first in multi-selection.
  */
 export function isFirstMultiSelectedBlock( state, clientId ) {
 	return getFirstMultiSelectedBlockClientId( state ) === clientId;
@@ -1277,7 +1277,12 @@ export function isCaretWithinFormattedText( state ) {
 export function getBlockInsertionPoint( state ) {
 	let rootClientId, index;
 
-	const { end } = state.blockSelection;
+	const { insertionPoint, blockSelection } = state;
+	if ( insertionPoint !== null ) {
+		return insertionPoint;
+	}
+
+	const { end } = blockSelection;
 	if ( end ) {
 		rootClientId = getBlockRootClientId( state, end ) || undefined;
 		index = getBlockIndex( state, end, rootClientId ) + 1;
@@ -1296,7 +1301,7 @@ export function getBlockInsertionPoint( state ) {
  * @return {?boolean} Whether the insertion point is visible or not.
  */
 export function isBlockInsertionPointVisible( state ) {
-	return state.isInsertionPointVisible;
+	return state.insertionPoint !== null;
 }
 
 /**