Hide all floating block UI when typing (#44083)

WordPress · Sep 20, 2022 · e5f21d0 · e5f21d0
1 parent 8988319
commit e5f21d0
Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -20,6 +20,17 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
+function selector( select ) {
+	const { __unstableGetEditorMode, getSettings, isTyping } =
+		select( blockEditorStore );
+
+	return {
+		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		hasFixedToolbar: getSettings().hasFixedToolbar,
+		isTyping: isTyping(),
+	};
+}
+
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
  * insertion point and a slot for the inline rich text toolbar). Must be wrapped
@@ -35,15 +46,10 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode } = useSelect( ( select ) => {
-		const { __unstableGetEditorMode, getSettings } =
-			select( blockEditorStore );
-
-		return {
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			hasFixedToolbar: getSettings().hasFixedToolbar,
-		};
-	}, [] );
+	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
+		selector,
+		[]
+	);
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -118,7 +124,7 @@ export default function BlockTools( {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-				{ ! isZoomOutMode && (
+				{ ! isTyping && ! isZoomOutMode && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }
 					/>

diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -700,6 +700,9 @@ test.describe( 'Writing Flow', () => {
 		const x = paragraphRect.x + ( 2 * paragraphRect.width ) / 3;
 		const y = paragraphRect.y + paragraphRect.height + 1;
 
+		// The typing observer requires two mouse moves to dectect and actual
+		// move.
+		await page.mouse.move( x - 1, y - 1 );
 		await page.mouse.move( x, y );
 
 		const inserter = page.locator( 'role=button[name="Add block"i]' );