Refactor click redirect (and avoid div) (#27253)

* Refactor click redirect(and avoid div)

* Remove padding if there are meta boxes

* Polish

* Use mouse down

* Add comment

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

@@ -119,6 +119,7 @@ export {
 } from './typewriter';
 export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
+export { useCanvasClickRedirect as __unstableUseCanvasClickRedirect } from './use-canvas-click-redirect';
 
 /*
  * State Related Components

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

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { overEvery, findLast } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
+
+/**
+ * Given an element, returns true if the element is a tabbable text field, or
+ * false otherwise.
+ *
+ * @param {Element} element Element to test.
+ *
+ * @return {boolean} Whether element is a tabbable text field.
+ */
+const isTabbableTextField = overEvery( [
+	isTextField,
+	focus.tabbable.isTabbableIndex,
+] );
+
+export function useCanvasClickRedirect( ref ) {
+	useEffect( () => {
+		function onMouseDown( event ) {
+			// Only handle clicks on the canvas, not the content.
+			if ( event.target !== ref.current ) {
+				return;
+			}
+
+			const focusableNodes = focus.focusable.find( ref.current );
+			const target = findLast( focusableNodes, isTabbableTextField );
+
+			if ( ! target ) {
+				return;
+			}
+
+			placeCaretAtHorizontalEdge( target, true );
+			event.preventDefault();
+		}
+
+		ref.current.addEventListener( 'mousedown', onMouseDown );
+
+		return () => {
+			ref.current.addEventListener( 'mousedown', onMouseDown );
+		};
+	}, [] );
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { overEvery, find, findLast, reverse, first, last } from 'lodash';
+import { find, reverse, first, last } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -49,19 +49,6 @@ function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
 
-/**
- * Given an element, returns true if the element is a tabbable text field, or
- * false otherwise.
- *
- * @param {Element} element Element to test.
- *
- * @return {boolean} Whether element is a tabbable text field.
- */
-const isTabbableTextField = overEvery( [
-	isTextField,
-	focus.tabbable.isTabbableIndex,
-] );
-
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
  * event of the given directional key code, or false otherwise.
@@ -684,14 +671,6 @@ export default function WritingFlow( { children } ) {
 		}
 	}
 
-	function focusLastTextField() {
-		const focusableNodes = focus.focusable.find( container.current );
-		const target = findLast( focusableNodes, isTabbableTextField );
-		if ( target ) {
-			placeCaretAtHorizontalEdge( target, true );
-		}
-	}
-
 	useEffect( () => {
 		if ( hasMultiSelection && ! isMultiSelecting ) {
 			multiSelectionContainer.current.focus();
@@ -746,12 +725,6 @@ export default function WritingFlow( { children } ) {
 				multiSelectionContainer={ multiSelectionContainer }
 				isReverse
 			/>
-			<div
-				aria-hidden
-				tabIndex={ -1 }
-				onClick={ focusLastTextField }
-				className="block-editor-writing-flow__click-redirect"
-			/>
 		</>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */

packages/block-editor/src/style.scss

@@ -52,7 +52,6 @@
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
 @import "./components/warning/style.scss";
-@import "./components/writing-flow/style.scss";
 @import "./hooks/anchor.scss";
 
 // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.

packages/block-library/src/block/editor.scss

@@ -1,8 +1,4 @@
 .edit-post-visual-editor .block-library-block__reusable-block-container {
-	.block-editor-writing-flow__click-redirect {
-		min-height: auto;
-	}
-
 	// Unset the padding that root containers get when they're actually root containers.
 	.is-root-container {
 		padding-left: 0;

packages/edit-post/src/components/visual-editor/index.js

@@ -15,6 +15,7 @@ import {
 	__unstableUseScrollMultiSelectionIntoView as useScrollMultiSelectionIntoView,
 	__experimentalBlockSettingsMenuFirstItem,
 	__experimentalUseResizeCanvas as useResizeCanvas,
+	__unstableUseCanvasClickRedirect as useCanvasClickRedirect,
 } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
@@ -30,13 +31,24 @@ export default function VisualEditor() {
 	const deviceType = useSelect( ( select ) => {
 		return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
 	}, [] );
-	const inlineStyles = useResizeCanvas( deviceType );
+	const hasMetaBoxes = useSelect(
+		( select ) => select( 'core/edit-post' ).hasMetaBoxes(),
+		[]
+	);
+	const desktopCanvasStyles = {
+		height: '100%',
+		// Add a constant padding for the typewritter effect. When typing at the
+		// bottom, there needs to be room to scroll up.
+		paddingBottom: hasMetaBoxes ? null : '40vh',
+	};
+	const resizedCanvasStyles = useResizeCanvas( deviceType );
 
 	useScrollMultiSelectionIntoView( ref );
 	useBlockSelectionClearer( ref );
 	useTypewriter( ref );
 	useClipboardHandler( ref );
 	useTypingObserver( ref );
+	useCanvasClickRedirect( ref );
 
 	return (
 		<div className="edit-post-visual-editor">
@@ -46,7 +58,7 @@ export default function VisualEditor() {
 				ref={ ref }
 				className="editor-styles-wrapper"
 				tabIndex="-1"
-				style={ inlineStyles }
+				style={ resizedCanvasStyles || desktopCanvasStyles }
 			>
 				<WritingFlow>
 					<div className="edit-post-visual-editor__post-title-wrapper">

packages/edit-post/src/components/visual-editor/style.scss

@@ -27,20 +27,12 @@
 	}
 }
 
-.editor-styles-wrapper,
-.editor-styles-wrapper > .block-editor-writing-flow__click-redirect {
-	height: 100%;
-}
-
-.edit-post-visual-editor .block-editor-writing-flow__click-redirect {
-	// Allow the page to be scrolled with the last block in the middle.
-	min-height: 40vh;
-	width: 100%;
-}
+.editor-styles-wrapper {
+	cursor: text;
 
-// Hide the extra space when there are metaboxes.
-.has-metaboxes .edit-post-visual-editor .block-editor-writing-flow__click-redirect {
-	height: 0;
+	> * {
+		cursor: auto;
+	}
 }
 
 // Ideally this wrapper div is not needed but if we want to match the positioning of blocks