Block List: Show insertion point prior to block

Better compatibility with high z-index of sibling inserter conflicting with hover behavior of block.
WordPress · Mar 22, 2018 · 6203d2c · 6203d2c
1 parent 381fa4c
commit 6203d2c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 27 deletions.
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -438,11 +438,11 @@ export class BlockListBlock extends Component {
 
 		// 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 last block in the top-level list rendering.
+		// is the first block in the top-level list rendering.
 		const shouldShowInsertionPoint = (
-			( ! isMultiSelected && ! isLast ) ||
+			( ! isMultiSelected && ! isFirst ) ||
 			( isMultiSelected && isLastInSelection ) ||
-			( isLast && ! rootUID && ! isEmptyDefaultBlock )
+			( isFirst && ! rootUID && ! isEmptyDefaultBlock )
 		);
 
 		// Generate the wrapper class names handling the different states of the block.
@@ -493,6 +493,13 @@ export class BlockListBlock extends Component {
 				] }
 				{ ...wrapperProps }
 			>
+				{ shouldShowInsertionPoint && (
+					<BlockInsertionPoint
+						uid={ block.uid }
+						rootUID={ rootUID }
+						layout={ layout }
+					/>
+				) }
 				<BlockDropZone
 					index={ order }
 					rootUID={ rootUID }
@@ -561,13 +568,6 @@ export class BlockListBlock extends Component {
 					) }
 				</IgnoreNestedEvents>
 				{ !! error && <BlockCrashWarning /> }
-				{ shouldShowInsertionPoint && (
-					<BlockInsertionPoint
-						uid={ block.uid }
-						rootUID={ rootUID }
-						layout={ layout }
-					/>
-				) }
 				{ showSideInserter && (
 					<Fragment>
 						<div className="editor-block-list__side-inserter">

diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
@@ -60,7 +60,7 @@ export default compose(
 	connect(
 		( state, { uid, rootUID } ) => {
 			const blockIndex = uid ? getBlockIndex( state, uid, rootUID ) : -1;
-			const insertIndex = blockIndex + 1;
+			const insertIndex = blockIndex;
 			const insertionPoint = getBlockInsertionPoint( state );
 			const block = uid ? getBlock( state, uid ) : null;
 

diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js
@@ -24,7 +24,6 @@ import { Component } from '@wordpress/element';
  */
 import './style.scss';
 import BlockListBlock from './block';
-import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from './ignore-nested-events';
 import DefaultBlockAppender from '../default-block-appender';
 import {
@@ -216,7 +215,6 @@ class BlockListLayout extends Component {
 
 		return (
 			<div className={ classes }>
-				{ !! blockUIDs.length && <BlockInsertionPoint rootUID={ rootUID } layout={ defaultLayout } /> }
 				{ map( blockUIDs, ( uid, blockIndex ) => (
 					<BlockListBlock
 						key={ 'block-' + uid }

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -493,22 +493,11 @@
 	}
 }
 
-// In between blocks
 .editor-block-list__block > .editor-block-list__insertion-point {
 	position: absolute;
-	bottom: -$block-padding;
-	height: $block-padding * 2; // Matches the whole empty space between two blocks
-	top: auto;
-	left: 0;
-	right: 0;
-}
-
-// Before the first block
-.editor-block-list__layout > .editor-block-list__insertion-point {
-	position: relative;
 	top: -$block-padding;
-	margin-left: auto;
-	margin-right: auto;
+	height: $block-padding * 2; // Matches the whole empty space between two blocks
+	bottom: auto;
 	left: 0;
 	right: 0;
 }

diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js
@@ -26,7 +26,7 @@ describe( 'Adding blocks', () => {
 		// Using the between inserter
 		cy.document().trigger( 'mousemove', { clientX: 200, clientY: 300 } );
 		cy.document().trigger( 'mousemove', { clientX: 250, clientY: 350 } );
-		cy.get( '[data-type="core/paragraph"] .editor-block-list__insertion-point-inserter' ).click();
+		cy.get( '[data-type="core/code"] .editor-block-list__insertion-point-inserter' ).click();
 		cy.focused().type( 'Second paragraph' );
 
 		// Switch to Text Mode to check HTML Output