Block List: Render BlockInsertionPoint with explicit inserter values

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

@@ -369,13 +369,13 @@ export class BlockListBlock extends Component {
 			isSelected,
 			isPartOfMultiSelection,
 			isFirstMultiSelected,
-			isLastMultiSelected,
 			isTypingWithinBlock,
 			isCaretWithinFormattedText,
 			isMultiSelecting,
 			hoverArea,
 			isEmptyDefaultBlock,
 			isMovable,
+			isPreviousBlockADefaultEmptyBlock,
 			isParentOfSelectedBlock,
 			isDraggable,
 		} = this.props;
@@ -404,8 +404,8 @@ export class BlockListBlock extends Component {
 
 		// 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 && isLastMultiSelected ) || ! isPartOfMultiSelection;
-		const canShowInBetweenInserter = ! isEmptyDefaultBlock;
+		const shouldShowInsertionPoint = ( isPartOfMultiSelection && isFirstMultiSelected ) || ! isPartOfMultiSelection;
+		const canShowInBetweenInserter = ! isEmptyDefaultBlock && ! isPreviousBlockADefaultEmptyBlock;
 
 		// The wp-block className is important for editor styles.
 		// Generate the wrapper class names handling the different states of the block.
@@ -485,6 +485,13 @@ export class BlockListBlock extends Component {
 				] }
 				{ ...wrapperProps }
 			>
+				{ shouldShowInsertionPoint && (
+					<BlockInsertionPoint
+						clientId={ clientId }
+						rootClientId={ rootClientId }
+						canShowInserter={ canShowInBetweenInserter }
+					/>
+				) }
 				<BlockDropZone
 					index={ order }
 					clientId={ clientId }
@@ -558,13 +565,6 @@ export class BlockListBlock extends Component {
 						</div>
 					</Fragment>
 				) }
-				{ shouldShowInsertionPoint && (
-					<BlockInsertionPoint
-						clientId={ clientId }
-						rootClientId={ rootClientId }
-						canShowInserter={ canShowInBetweenInserter }
-					/>
-				) }
 			</IgnoreNestedEvents>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
@@ -580,7 +580,6 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV
 		isAncestorMultiSelected,
 		isBlockMultiSelected,
 		isFirstMultiSelectedBlock,
-		isLastMultiSelectedBlock,
 		isMultiSelecting,
 		isTyping,
 		isCaretWithinFormattedText,
@@ -597,14 +596,14 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV
 	const { hasFixedToolbar, focusMode } = getEditorSettings();
 	const block = getBlock( clientId );
 	const previousBlockClientId = getPreviousBlockClientId( clientId );
+	const previousBlock = getBlock( previousBlockClientId );
 	const templateLock = getTemplateLock( rootClientId );
 	const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true );
 
 	return {
 		nextBlockClientId: getNextBlockClientId( clientId ),
 		isPartOfMultiSelection: isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
 		isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),
-		isLastMultiSelected: isLastMultiSelectedBlock( clientId ),
 		isMultiSelecting: isMultiSelecting(),
 		// We only care about this prop when the block is selected
 		// Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
@@ -616,6 +615,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV
 		isSelectionEnabled: isSelectionEnabled(),
 		initialPosition: getSelectedBlocksInitialCaretPosition(),
 		isEmptyDefaultBlock: block && isUnmodifiedDefaultBlock( block ),
+		isPreviousBlockADefaultEmptyBlock: previousBlock && isUnmodifiedDefaultBlock( previousBlock ),
 		isMovable: 'all' !== templateLock,
 		isLocked: !! templateLock,
 		isFocusMode: focusMode && isLargeViewport,

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

@@ -26,7 +26,12 @@ class BlockInsertionPoint extends Component {
 		this.onFocusInserter = this.onFocusInserter.bind( this );
 	}
 
-	onFocusInserter() {
+	onFocusInserter( event ) {
+		// 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( {
 			isInserterFocused: true,
 		} );
@@ -40,11 +45,18 @@ class BlockInsertionPoint extends Component {
 
 	render() {
 		const { isInserterFocused } = this.state;
-		const { showInsertionPoint, canShowInserter } = 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" /> }
+				{ showInsertionPoint && (
+					<div className="editor-block-list__insertion-point-indicator" />
+				) }
 				{ canShowInserter && (
 					<div
 						onFocus={ this.onFocusInserter }
@@ -55,7 +67,10 @@ class BlockInsertionPoint extends Component {
 							} )
 						}
 					>
-						<Inserter />
+						<Inserter
+							rootClientId={ rootClientId }
+							index={ insertIndex }
+						/>
 					</div>
 				) }
 			</div>
@@ -70,7 +85,7 @@ export default withSelect( ( select, { clientId, rootClientId } ) => {
 		isBlockInsertionPointVisible,
 	} = select( 'core/editor' );
 	const blockIndex = getBlockIndex( clientId, rootClientId );
-	const insertIndex = blockIndex + 1;
+	const insertIndex = blockIndex;
 	const insertionPoint = getBlockInsertionPoint();
 	const block = getBlock( clientId );
 	const showInsertionPoint = (
@@ -80,5 +95,5 @@ export default withSelect( ( select, { clientId, rootClientId } ) => {
 		! isUnmodifiedDefaultBlock( block )
 	);
 
-	return { showInsertionPoint };
+	return { showInsertionPoint, insertIndex };
 } )( BlockInsertionPoint );

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

@@ -613,7 +613,7 @@
 .editor-block-list__insertion-point {
 	position: relative;
 	z-index: z-index(".editor-block-list__insertion-point");
-	margin-bottom: -$block-padding;
+	margin-top: -$block-padding;
 }
 
 .editor-block-list__insertion-point-indicator {
@@ -663,14 +663,30 @@
 	}
 }
 
+// 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-inserter__toggle {
+		opacity: 0;
+		pointer-events: none;
+
+		&:hover,
+		&.is-visible {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+}
+
 // This is the edge-to-edge hover area that contains the plus.
 .editor-block-list__block {
 	> .editor-block-list__insertion-point {
 		position: absolute;
-		bottom: -$block-padding - $block-spacing / 2;
+		top: -$block-padding - $block-spacing / 2;
 
 		// Matches the whole empty space between two blocks.
 		height: $block-padding * 2;
+		bottom: auto;
 
 		// Go edge to edge on mobile.
 		left: 0;

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

@@ -88,16 +88,15 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { rootClientId } ) => {
+	withSelect( ( select, { rootClientId, index } ) => {
 		const {
 			getEditedPostAttribute,
 			getBlockInsertionPoint,
 			getSelectedBlock,
 			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/store/selectors.js

@@ -1025,20 +1025,6 @@ export function isFirstMultiSelectedBlock( state, clientId ) {
 	return getFirstMultiSelectedBlockClientId( state ) === clientId;
 }
 
-/**
- * Returns true if a multi-selection exists, and the block corresponding to the
- * specified client ID is the last block of the multi-selection set, or false
- * otherwise.
- *
- * @param {Object} state    Editor state.
- * @param {string} clientId Block client ID.
- *
- * @return {boolean} Whether block is last in mult-selection.
- */
-export function isLastMultiSelectedBlock( state, clientId ) {
-	return getLastMultiSelectedBlockClientId( state ) === clientId;
-}
-
 /**
  * Returns true if the client ID occurs within the block multi-selection, or
  * false otherwise.