Writing flow: restore click redirect between blocks

packages/block-editor/src/components/block-popover/inbetween.js

@@ -179,7 +179,7 @@ function BlockPopoverInbetween( {
 			key={ nextClientId + '--' + rootClientId }
 			{ ...props }
 			className={ classnames(
-				'block-editor-block-popover',
+				'block-editor-block-popover block-editor-block-popover-in-between',
 				props.className
 			) }
 			__unstableForcePosition

packages/block-editor/src/components/block-tools/insertion-point.js

@@ -24,7 +24,7 @@ function InsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
+	const { hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
 	const {
@@ -74,12 +74,6 @@ function InsertionPointPopover( {
 
 	const disableMotion = useReducedMotion();
 
-	function onClick( event ) {
-		if ( event.target === ref.current && nextClientId ) {
-			selectBlock( nextClientId, -1 );
-		}
-	}
-
 	function onFocus( event ) {
 		// Only handle click on the wrapper specifically, and not an event
 		// bubbled from the inserter itself.
@@ -190,11 +184,8 @@ function InsertionPointPopover( {
 				exit="start"
 				ref={ ref }
 				tabIndex={ -1 }
-				onClick={ onClick }
 				onFocus={ onFocus }
-				className={ classnames( className, {
-					'is-with-inserter': isInserterShown,
-				} ) }
+				className={ className }
 				onHoverEnd={ maybeHideInserterPoint }
 			>
 				<motion.div
@@ -205,7 +196,10 @@ function InsertionPointPopover( {
 					<motion.div
 						variants={ inserterVariants }
 						className={ classnames(
-							'block-editor-block-list__insertion-point-inserter'
+							'block-editor-block-list__insertion-point-inserter',
+							{
+								'is-with-inserter': isInserterShown,
+							}
 						) }
 					>
 						<Inserter

packages/block-editor/src/components/block-tools/style.scss

@@ -2,6 +2,11 @@
  * Insertion Point.
  */
 
+.components-popover.block-editor-block-popover.block-editor-block-popover-in-between,
+.components-popover.block-editor-block-popover.block-editor-block-popover-in-between .components-popover__content > * {
+	pointer-events: none;
+}
+
 .block-editor-block-list__insertion-point {
 	position: absolute;
 	top: 0;
@@ -29,6 +34,7 @@
 
 // This is the clickable plus.
 .block-editor-block-list__insertion-point-inserter {
+	pointer-events: all;
 	// Don't show on mobile.
 	display: none;
 	position: absolute;

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

@@ -21,6 +21,7 @@ import useSelectAll from './use-select-all';
 import useDragSelection from './use-drag-selection';
 import useSelectionObserver from './use-selection-observer';
 import useClickSelection from './use-click-selection';
+import useClickRedirect from './use-click-redirect';
 import useInput from './use-input';
 import { store as blockEditorStore } from '../../store';
 
@@ -39,6 +40,7 @@ export function useWritingFlow() {
 			useDragSelection(),
 			useSelectionObserver(),
 			useClickSelection(),
+			useClickRedirect(),
 			useMultiSelection(),
 			useSelectAll(),
 			useArrowNav(),

packages/block-editor/src/components/writing-flow/use-click-redirect.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+export default function useClickSelection() {
+	return useRefEffect( ( node ) => {
+		function onMouseDown() {
+			node.contentEditable = true;
+			// Firefox doesn't automatically move focus.
+			node.focus();
+			// The selection observer will turn off contentEditable after a
+			// selection change.
+		}
+
+		node.addEventListener( 'mousedown', onMouseDown );
+
+		return () => {
+			node.removeEventListener( 'mousedown', onMouseDown );
+		};
+	}, [] );
+}