Fix insertion point showing up unexpectedly (#44702)

WordPress · Oct 5, 2022 · 65456f6 · 65456f6
1 parent ca045f1
commit 65456f6
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 41 deletions.
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
@@ -1191,10 +1191,6 @@ _Parameters_
 
 Action that hides the insertion point.
 
-_Returns_
-
--   `Object`: Action object.
-
 ### insertAfterBlock
 
 Action that inserts an empty block after a given block.

diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/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,14 +140,11 @@ 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,
 				} );
 			}

diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -149,13 +149,13 @@ function InsertionPointPopover( {
 			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: isInserterShown ? 0.1 : 0, type: 'tween' },
+			transition: { delay: isInserterShown ? 0.5 : 0, type: 'tween' },
 		},
 		hover: {
 			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: 0.1, type: 'tween' },
+			transition: { delay: 0.5, type: 'tween' },
 		},
 	};
 
@@ -165,7 +165,7 @@ function InsertionPointPopover( {
 		},
 		rest: {
 			scale: 1,
-			transition: { type: 'tween' },
+			transition: { delay: 0.4, type: 'tween' },
 		},
 	};
 

diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
@@ -644,17 +644,19 @@ export function showInsertionPoint(
 		__unstableWithInserter,
 	};
 }
-
 /**
  * Action that hides the insertion point.
- *
- * @return {Object} Action object.
  */
-export function hideInsertionPoint() {
-	return {
-		type: 'HIDE_INSERTION_POINT',
+export const hideInsertionPoint =
+	() =>
+	( { select, dispatch } ) => {
+		if ( ! select.isBlockInsertionPointVisible() ) {
+			return;
+		}
+		dispatch( {
+			type: 'HIDE_INSERTION_POINT',
+		} );
 	};
-}
 
 /**
  * Action that resets the template validity.

diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js
@@ -27,7 +27,6 @@ const noop = () => {};
 
 const {
 	clearSelectedBlock,
-	hideInsertionPoint,
 	insertBlock,
 	insertBlocks,
 	mergeBlocks,
@@ -610,14 +609,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'hideInsertionPoint', () => {
-		it( 'should return the HIDE_INSERTION_POINT action', () => {
-			expect( hideInsertionPoint() ).toEqual( {
-				type: 'HIDE_INSERTION_POINT',
-			} );
-		} );
-	} );
-
 	describe( 'removeBlocks', () => {
 		it( 'should dispatch REMOVE_BLOCKS action', () => {
 			const clientId = 'clientId';