Move back to BlockListBlock but in Fragment

WordPress · Dec 5, 2019 · 0c8971f · 0c8971f
1 parent 4961e21
commit 0c8971f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -45,6 +45,7 @@ import BlockHtml from './block-html';
 import BlockBreadcrumb from './breadcrumb';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import BlockMultiControls from './multi-controls';
+import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from '../ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
 import Inserter from '../inserter';
@@ -447,11 +448,14 @@ function BlockListBlock( {
 			isFirstMultiSelected
 		);
 
-	const shouldRenderDropzone = ! isMultiSelecting && (
+	// 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 = ! isMultiSelecting && (
 		( isPartOfMultiSelection && isFirstMultiSelected ) ||
 		! isPartOfMultiSelection
 	);
 
+	const shouldRenderDropzone = shouldShowInsertionPoint;
 	const isDragging = isDraggingBlocks && ( isSelected || isPartOfMultiSelection );
 
 	// The wp-block className is important for editor styles.
@@ -512,7 +516,13 @@ function BlockListBlock( {
 		blockEdit = <div style={ { display: 'none' } }>{ blockEdit }</div>;
 	}
 
-	return (
+	return <>
+		{ shouldShowInsertionPoint && (
+			<BlockInsertionPoint
+				clientId={ clientId }
+				rootClientId={ rootClientId }
+			/>
+		) }
 		<IgnoreNestedEvents
 			id={ blockElementId }
 			ref={ wrapper }
@@ -631,7 +641,7 @@ function BlockListBlock( {
 				</div>
 			) }
 		</IgnoreNestedEvents>
-	);
+	</>;
 }
 
 const applyWithSelect = withSelect(

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -21,7 +21,6 @@ import BlockAsyncModeProvider from './block-async-mode-provider';
 import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import __experimentalBlockListFooter from '../block-list-footer';
-import BlockInsertionPoint from './insertion-point';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
@@ -248,24 +247,13 @@ class BlockList extends Component {
 					const isBlockInSelection = hasMultiSelection ?
 						multiSelectedBlockClientIds.includes( clientId ) :
 						selectedBlockClientId === clientId;
-					const isFirstMultiSelected = multiSelectedBlockClientIds[ 0 ] === clientId;
-					const shouldShowInsertionPoint = ! isMultiSelecting && (
-						( isBlockInSelection && isFirstMultiSelected ) ||
-						! isBlockInSelection
-					);
 
 					return (
 						<BlockAsyncModeProvider
 							key={ 'block-' + clientId }
 							clientId={ clientId }
 							isBlockInSelection={ isBlockInSelection }
 						>
-							{ shouldShowInsertionPoint && (
-								<BlockInsertionPoint
-									clientId={ clientId }
-									rootClientId={ rootClientId }
-								/>
-							) }
 							<BlockListBlock
 								rootClientId={ rootClientId }
 								clientId={ clientId }