Fix insertion point showing up unexpectedly

docs/reference-guides/data/data-core-block-editor.md

@@ -1516,10 +1516,6 @@ _Parameters_
 -   _index_ `?number`: Index at which block should be inserted.
 -   _\_\_unstableOptions_ `Object`: Whether or not to show an inserter button.
 
-_Returns_
-
--   `Object`: Action object.
-
 ### startDraggingBlocks
 
 Returns an action object used in signalling that the user has begun to drag blocks.

packages/block-editor/src/components/block-list/use-in-between-inserter.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect, useDebounce } from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 
@@ -32,10 +32,6 @@ export function useInBetweenInserter() {
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
-	const delayedShowInsertionPoint = useDebounce( showInsertionPoint, 500, {
-		trailing: true,
-	} );
-
 	return useRefEffect(
 		( node ) => {
 			if ( isInBetweenInserterDisabled ) {
@@ -56,10 +52,7 @@ export function useInBetweenInserter() {
 						'block-editor-block-list__layout'
 					)
 				) {
-					delayedShowInsertionPoint.cancel();
-					if ( isBlockInsertionPointVisible() ) {
-						hideInsertionPoint();
-					}
+					hideInsertionPoint();
 					return;
 				}
 
@@ -138,10 +131,7 @@ export function useInBetweenInserter() {
 						( event.clientX > elementRect.right ||
 							event.clientX < elementRect.left ) )
 				) {
-					delayedShowInsertionPoint.cancel();
-					if ( isBlockInsertionPointVisible() ) {
-						hideInsertionPoint();
-					}
+					hideInsertionPoint();
 					return;
 				}
 
@@ -150,15 +140,13 @@ export function useInBetweenInserter() {
 				// Don't show the in-between inserter before the first block in
 				// the list (preserves the original behaviour).
 				if ( index === 0 ) {
-					delayedShowInsertionPoint.cancel();
-					if ( isBlockInsertionPointVisible() ) {
-						hideInsertionPoint();
-					}
+					hideInsertionPoint();
 					return;
 				}
 
-				delayedShowInsertionPoint( rootClientId, index, {
+				showInsertionPoint( rootClientId, index, {
 					__unstableWithInserter: true,
+					delay: 500,
 				} );
 			}
 

packages/block-editor/src/store/actions.js

@@ -621,40 +621,56 @@ export const insertBlocks =
 		}
 	};
 
+const delayedInsertionPointCalls = new WeakMap();
+
 /**
  * Action that shows the insertion point.
  *
  * @param {?string} rootClientId      Optional root client ID of block list on
  *                                    which to insert.
  * @param {?number} index             Index at which block should be inserted.
  * @param {Object}  __unstableOptions Whether or not to show an inserter button.
- *
- * @return {Object} Action object.
  */
-export function showInsertionPoint(
-	rootClientId,
-	index,
-	__unstableOptions = {}
-) {
-	const { __unstableWithInserter } = __unstableOptions;
-	return {
-		type: 'SHOW_INSERTION_POINT',
-		rootClientId,
-		index,
-		__unstableWithInserter,
+export const showInsertionPoint =
+	( rootClientId, index, __unstableOptions = {} ) =>
+	( { dispatch, registry } ) => {
+		const previousCall = delayedInsertionPointCalls.get( registry );
+		if ( previousCall ) {
+			clearTimeout( previousCall );
+		}
+		const { __unstableWithInserter, delay } = __unstableOptions;
+		delayedInsertionPointCalls.set(
+			registry,
+			setTimeout( () => {
+				dispatch( {
+					type: 'SHOW_INSERTION_POINT',
+					rootClientId,
+					index,
+					__unstableWithInserter,
+				} );
+			}, delay )
+		);
 	};
-}
 
 /**
  * Action that hides the insertion point.
  *
  * @return {Object} Action object.
  */
-export function hideInsertionPoint() {
-	return {
-		type: 'HIDE_INSERTION_POINT',
+export const hideInsertionPoint =
+	() =>
+	( { select, dispatch, registry } ) => {
+		const previousCall = delayedInsertionPointCalls.get( registry );
+		if ( previousCall ) {
+			clearTimeout( previousCall );
+		}
+		if ( ! select.isBlockInsertionPointVisible() ) {
+			return;
+		}
+		dispatch( {
+			type: 'HIDE_INSERTION_POINT',
+		} );
 	};
-}
 
 /**
  * Action that resets the template validity.