Fix behavior of in-between inserter

WordPress · Jan 14, 2021 · 7640ad4 · 7640ad4
1 parent da85251
commit 7640ad4
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 46 deletions.
diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -7,60 +7,21 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { Popover } from '@wordpress/components';
-import { placeCaretAtVerticalEdge } from '@wordpress/dom';
 import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Inserter from '../inserter';
-import { getClosestTabbable } from '../writing-flow';
 import { getBlockDOMNode } from '../../utils/dom';
 
-function InsertionPointInserter( {
-	clientId,
-	setIsInserterForced,
-	containerRef,
-} ) {
-	const ref = useRef();
-
-	function focusClosestTabbable( event ) {
-		const { clientX, clientY, target } = event;
-
-		// Only handle click on the wrapper specifically, and not an event
-		// bubbled from the inserter itself.
-		if ( target !== ref.current ) {
-			return;
-		}
-
-		const { ownerDocument } = containerRef.current;
-		const targetRect = target.getBoundingClientRect();
-		const isReverse = clientY < targetRect.top + targetRect.height / 2;
-		const blockNode = getBlockDOMNode( clientId, ownerDocument );
-		const container = isReverse ? containerRef.current : blockNode;
-		const closest =
-			getClosestTabbable( blockNode, true, container ) || blockNode;
-		const rect = new window.DOMRect( clientX, clientY, 0, 16 );
-
-		placeCaretAtVerticalEdge( closest, isReverse, rect, false );
-	}
-
+function InsertionPointInserter( { clientId, setIsInserterForced } ) {
 	return (
 		/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 		<div
-			ref={ ref }
 			onFocus={ () => setIsInserterForced( true ) }
-			onBlur={ () => setIsInserterForced( false ) }
-			onClick={ focusClosestTabbable }
-			// While ideally it would be enough to capture the
-			// bubbling focus event from the Inserter, due to the
-			// characteristics of click focusing of `button`s in
-			// Firefox and Safari, it is not reliable.
-			//
-			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-			tabIndex={ -1 }
 			className={ classnames(
 				'block-editor-block-list__insertion-point-inserter'
 			) }
@@ -69,6 +30,8 @@ function InsertionPointInserter( {
 				position="bottom center"
 				clientId={ clientId }
 				__experimentalIsQuick
+				onToggle={ setIsInserterForced }
+				onSelectOrClose={ () => setIsInserterForced( false ) }
 			/>
 		</div>
 	);
@@ -192,7 +155,6 @@ function InsertionPointPopover( {
 					<InsertionPointInserter
 						clientId={ clientId }
 						setIsInserterForced={ setIsInserterForced }
-						containerRef={ containerRef }
 					/>
 				) }
 			</div>
@@ -330,7 +292,12 @@ export default function useInsertionPoint( ref ) {
 				rootClientId={ selectedRootClientId }
 				isInserterShown={ isInserterShown }
 				isInserterForced={ isInserterForced }
-				setIsInserterForced={ setIsInserterForced }
+				setIsInserterForced={ ( value ) => {
+					setIsInserterForced( value );
+					if ( ! value ) {
+						setIsInserterShown( value );
+					}
+				} }
 				containerRef={ ref }
 				showInsertionPoint={ isInserterVisible }
 			/>

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -141,7 +141,9 @@ class Inserter extends Component {
 		if ( isQuick ) {
 			return (
 				<QuickInserter
-					onSelect={ onClose }
+					onSelect={ () => {
+						onClose();
+					} }
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
@@ -152,7 +154,9 @@ class Inserter extends Component {
 
 		return (
 			<InserterMenu
-				onSelect={ onClose }
+				onSelect={ () => {
+					onClose();
+				} }
 				rootClientId={ rootClientId }
 				clientId={ clientId }
 				isAppender={ isAppender }
@@ -168,6 +172,7 @@ class Inserter extends Component {
 			hasSingleBlockType,
 			insertOnlyAllowedBlock,
 			__experimentalIsQuick: isQuick,
+			onSelectOrClose,
 		} = this.props;
 
 		if ( hasSingleBlockType ) {
@@ -187,6 +192,7 @@ class Inserter extends Component {
 				headerTitle={ __( 'Add a block' ) }
 				renderToggle={ this.renderToggle }
 				renderContent={ this.renderContent }
+				onClose={ onSelectOrClose }
 			/>
 		);
 	}
@@ -228,7 +234,12 @@ export default compose( [
 	withDispatch( ( dispatch, ownProps, { select } ) => {
 		return {
 			insertOnlyAllowedBlock() {
-				const { rootClientId, clientId, isAppender } = ownProps;
+				const {
+					rootClientId,
+					clientId,
+					isAppender,
+					onSelectOrClose,
+				} = ownProps;
 				const {
 					hasSingleBlockType,
 					allowedBlockType,
@@ -272,6 +283,10 @@ export default compose( [
 					selectBlockOnInsert
 				);
 
+				if ( onSelectOrClose ) {
+					onSelectOrClose();
+				}
+
 				if ( ! selectBlockOnInsert ) {
 					const message = sprintf(
 						// translators: %s: the name of the block that has been added