Address feedback

packages/block-editor/package.json

@@ -60,6 +60,7 @@
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
+		"react-merge-refs": "^1.0.0",
 		"react-spring": "^8.0.19",
 		"reakit": "1.1.0",
 		"redux-multi": "^0.1.12",

packages/block-editor/src/components/iframe/index.js

@@ -1,7 +1,17 @@
+/**
+ * External dependencies
+ */
+import mergeRefs from 'react-merge-refs';
+
 /**
  * WordPress dependencies
  */
-import { useState, createPortal, useCallback } from '@wordpress/element';
+import {
+	useState,
+	createPortal,
+	useCallback,
+	forwardRef,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
@@ -126,7 +136,7 @@ function setHead( doc, head ) {
 		'<style>body{margin:0}</style>' + head;
 }
 
-export default function Iframe( { contentRef, children, head, ...props } ) {
+function Iframe( { contentRef, children, head, ...props }, ref ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
 	const setRef = useCallback( ( node ) => {
@@ -158,7 +168,7 @@ export default function Iframe( { contentRef, children, head, ...props } ) {
 	return (
 		<iframe
 			{ ...props }
-			ref={ setRef }
+			ref={ mergeRefs( [ ref, setRef ] ) }
 			tabIndex="0"
 			title={ __( 'Editor canvas' ) }
 			name="editor-canvas"
@@ -167,3 +177,5 @@ export default function Iframe( { contentRef, children, head, ...props } ) {
 		</iframe>
 	);
 }
+
+export default forwardRef( Iframe );

packages/block-editor/src/components/index.js

@@ -108,6 +108,7 @@ export { default as NavigableToolbar } from './navigable-toolbar';
 export {
 	default as ObserveTyping,
 	useTypingObserver as __unstableUseTypingObserver,
+	useMouseMoveTypingReset as __unstableUseMouseMoveTypingReset,
 } from './observe-typing';
 export { default as PreserveScrollInReorder } from './preserve-scroll-in-reorder';
 export { default as SkipToSelectedBlock } from './skip-to-selected-block';

packages/block-editor/src/components/observe-typing/index.js

@@ -43,12 +43,62 @@ function isKeyDownEligibleForStartTyping( event ) {
 	return ! shiftKey && KEY_DOWN_ELIGIBLE_KEY_CODES.has( keyCode );
 }
 
+export function useMouseMoveTypingReset( ref ) {
+	const isTyping = useSelect( ( select ) =>
+		select( 'core/block-editor' ).isTyping()
+	);
+	const { stopTyping } = useDispatch( 'core/block-editor' );
+
+	useEffect( () => {
+		if ( ! isTyping ) {
+			return;
+		}
+
+		const element = ref.current;
+		const { ownerDocument } = element;
+		let lastClientX;
+		let lastClientY;
+
+		/**
+		 * On mouse move, unset typing flag if user has moved cursor.
+		 *
+		 * @param {MouseEvent} event Mousemove event.
+		 */
+		function stopTypingOnMouseMove( event ) {
+			const { clientX, clientY } = event;
+
+			// We need to check that the mouse really moved because Safari
+			// triggers mousemove events when shift or ctrl are pressed.
+			if (
+				lastClientX &&
+				lastClientY &&
+				( lastClientX !== clientX || lastClientY !== clientY )
+			) {
+				stopTyping();
+			}
+
+			lastClientX = clientX;
+			lastClientY = clientY;
+		}
+
+		ownerDocument.addEventListener( 'mousemove', stopTypingOnMouseMove );
+
+		return () => {
+			ownerDocument.removeEventListener(
+				'mousemove',
+				stopTypingOnMouseMove
+			);
+		};
+	}, [ isTyping, stopTyping ] );
+}
+
 export function useTypingObserver( ref ) {
 	const isTyping = useSelect( ( select ) =>
 		select( 'core/block-editor' ).isTyping()
 	);
 	const { startTyping, stopTyping } = useDispatch( 'core/block-editor' );
 
+	useMouseMoveTypingReset( ref );
 	useEffect( () => {
 		const element = ref.current;
 		const { ownerDocument } = element;
@@ -108,41 +158,12 @@ export function useTypingObserver( ref ) {
 				}
 			}
 
-			let lastClientX;
-			let lastClientY;
-
-			/**
-			 * On mouse move, unset typing flag if user has moved cursor.
-			 *
-			 * @param {MouseEvent} event Mousemove event.
-			 */
-			function stopTypingOnMouseMove( event ) {
-				const { clientX, clientY } = event;
-
-				// We need to check that the mouse really moved because Safari
-				// triggers mousemove events when shift or ctrl are pressed.
-				if (
-					lastClientX &&
-					lastClientY &&
-					( lastClientX !== clientX || lastClientY !== clientY )
-				) {
-					stopTyping();
-				}
-
-				lastClientX = clientX;
-				lastClientY = clientY;
-			}
-
 			element.addEventListener( 'focus', stopTypingOnNonTextField );
 			element.addEventListener( 'keydown', stopTypingOnEscapeKey );
 			ownerDocument.addEventListener(
 				'selectionchange',
 				stopTypingOnSelectionUncollapse
 			);
-			ownerDocument.addEventListener(
-				'mousemove',
-				stopTypingOnMouseMove
-			);
 
 			return () => {
 				defaultView.clearTimeout( timerId );
@@ -155,10 +176,6 @@ export function useTypingObserver( ref ) {
 					'selectionchange',
 					stopTypingOnSelectionUncollapse
 				);
-				ownerDocument.removeEventListener(
-					'mousemove',
-					stopTypingOnMouseMove
-				);
 			};
 		}
 

packages/block-editor/src/components/use-resize-canvas/index.js

@@ -11,14 +11,14 @@ import { default as useSimulatedMediaQuery } from '../../components/use-simulate
 /**
  * Function to resize the editor window.
  *
- * @param {string}  deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
- * @param {boolean} __unstableDisableSimulate
+ * @param {string}  deviceType                  Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
+ * @param {boolean} __unstableDisableSimulation Whether to disable media query simulation.
  *
  * @return {Object} Inline styles to be added to resizable container.
  */
 export default function useResizeCanvas(
 	deviceType,
-	__unstableDisableSimulate
+	__unstableDisableSimulation
 ) {
 	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
 
@@ -73,7 +73,7 @@ export default function useResizeCanvas(
 		}
 	};
 
-	const width = __unstableDisableSimulate
+	const width = __unstableDisableSimulation
 		? null
 		: getCanvasWidth( deviceType );
 

packages/components/src/popover/index.js

@@ -434,6 +434,8 @@ const Popover = ( {
 
 		const anchorDocument = getAnchorDocument( anchorRef );
 
+		// If the anchor is within an iframe, the popover position also needs
+		// to refrest when the iframe content is scrolled or resized.
 		if ( anchorDocument && anchorDocument !== ownerDocument ) {
 			anchorDocument.defaultView.addEventListener( 'resize', refresh );
 			anchorDocument.defaultView.addEventListener(

packages/e2e-test-utils/src/show-block-toolbar.js

@@ -3,9 +3,7 @@
  * Call this function to reveal it.
  */
 export async function showBlockToolbar() {
-	const content = await page.$( '.interface-interface-skeleton__content' );
-	const { x, y } = await content.boundingBox();
 	// Move the mouse to disable the isTyping mode
-	await page.mouse.move( x + 50, y + 50 );
-	await page.mouse.move( x + 100, y + 100 );
+	await page.mouse.move( 50, 50 );
+	await page.mouse.move( 100, 100 );
 }

packages/e2e-tests/specs/experiments/multi-entity-editing.test.js

@@ -51,8 +51,8 @@ const createTemplatePart = async (
 	await page.keyboard.type( templatePartName );
 };
 
-const editTemplatePart = async ( textToAdd, isNested = false, p = page ) => {
-	await p.click(
+const editTemplatePart = async ( textToAdd, isNested = false ) => {
+	await page.click(
 		`${
 			isNested
 				? '.wp-block-template-part .wp-block-template-part'

packages/edit-site/src/components/block-editor/index.js

@@ -14,6 +14,7 @@ import {
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 	__unstableUseTypingObserver as useTypingObserver,
+	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	__unstableUseEditorStyles as useEditorStyles,
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
@@ -65,8 +66,11 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const { setPage } = useDispatch( 'core/edit-site' );
 
 	const resizedCanvasStyles = useResizeCanvas( deviceType, true );
+	const ref = useRef();
 	const contentRef = useRef();
 
+	useMouseMoveTypingReset( ref );
+
 	// Allow scrolling "through" popovers over the canvas. This is only called
 	// for as long as the pointer is over a popover.
 	function onWheel( { deltaX, deltaY } ) {
@@ -103,6 +107,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<Iframe
 					style={ resizedCanvasStyles }
 					head={ window.__editorStyles.html }
+					ref={ ref }
 					contentRef={ contentRef }
 				>
 					<Canvas body={ contentRef } styles={ settings.styles } />