This should work but doesn't...

WordPress · Apr 15, 2020 · 8c72840 · 8c72840
1 parent 2db9e8e
commit 8c72840
Showing 1 changed file with 28 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -60,19 +60,27 @@ export default function InsertionPoint( {
 	const [ inserterElement, setInserterElement ] = useState( null );
 	const [ inserterClientId, setInserterClientId ] = useState( null );
 	const ref = useRef();
-	const { multiSelectedBlockClientIds, isInserterVisible } = useSelect(
-		( select ) => {
-			const {
-				getMultiSelectedBlockClientIds,
-				isBlockInsertionPointVisible,
-			} = select( 'core/block-editor' );
-
-			return {
-				multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
-				isInserterVisible: isBlockInsertionPointVisible(),
-			};
-		}
-	);
+	const {
+		multiSelectedBlockClientIds,
+		isInserterVisible,
+		selectedClientId,
+	} = useSelect( ( select ) => {
+		const {
+			getMultiSelectedBlockClientIds,
+			isBlockInsertionPointVisible,
+			getBlockInsertionPoint,
+			getBlockOrder,
+		} = select( 'core/block-editor' );
+
+		const insertionPoint = getBlockInsertionPoint();
+		const order = getBlockOrder( insertionPoint.rootClientId );
+
+		return {
+			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
+			isInserterVisible: isBlockInsertionPointVisible(),
+			selectedClientId: order[ insertionPoint.index ],
+		};
+	} );
 
 	function onMouseMove( event ) {
 		if (
@@ -146,14 +154,16 @@ export default function InsertionPoint( {
 		? multiSelectedBlockClientIds.includes( inserterClientId )
 		: inserterClientId === selectedBlockClientId;
 	const isVisible = isInserterShown || isInserterForced || isInserterVisible;
+	const selectedElement =
+		inserterElement || getBlockDOMNode( selectedClientId );
 
 	return (
 		<>
 			{ ! isMultiSelecting && isVisible && (
 				<Popover
 					noArrow
 					animate={ false }
-					anchorRef={ inserterElement }
+					anchorRef={ selectedElement }
 					position="top right left"
 					focusOnMount={ false }
 					className="block-editor-block-list__insertion-point-popover"
@@ -162,9 +172,11 @@ export default function InsertionPoint( {
 				>
 					<div
 						className="block-editor-block-list__insertion-point"
-						style={ { width: inserterElement.offsetWidth } }
+						style={ { width: selectedElement.offsetWidth } }
 					>
-						<Indicator clientId={ inserterClientId } />
+						<Indicator
+							clientId={ inserterClientId || selectedClientId }
+						/>
 						{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
 						<div
 							ref={ ref }