Block editor: remove focus stopPropagation from appender (#32003)

WordPress · Jul 22, 2021 · da2456e · da2456e
1 parent 5c0b338
commit da2456e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createContext } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
 
@@ -18,13 +17,6 @@ import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
 
-// A Context to store the map of the appender map.
-export const AppenderNodesContext = createContext();
-
-function stopPropagation( event ) {
-	event.stopPropagation();
-}
-
 function BlockListAppender( {
 	blockClientIds,
 	rootClientId,
@@ -91,9 +83,6 @@ function BlockListAppender( {
 			//
 			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 			tabIndex={ -1 }
-			// Prevent the block from being selected when the appender is
-			// clicked.
-			onFocus={ stopPropagation }
 			className={ classnames( 'block-list-appender', className ) }
 		>
 			{ appender }

diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
@@ -90,11 +90,7 @@ export function useFocusFirstElement( clientId ) {
 		const target =
 			( isReverse ? last : first )( textInputs ) || ref.current;
 
-		if (
-			// Don't focus inner block or block appenders.
-			! isInsideRootBlock( ref.current, target ) ||
-			target.closest( '.block-list-appender' )
-		) {
+		if ( ! isInsideRootBlock( ref.current, target ) ) {
 			ref.current.focus();
 			return;
 		}

diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
@@ -1,4 +1,5 @@
 const BLOCK_SELECTOR = '.block-editor-block-list__block';
+const APPENDER_SELECTOR = '.block-list-appender';
 
 /**
  * Returns true if two elements are contained within the same block.
@@ -13,17 +14,19 @@ export function isInSameBlock( a, b ) {
 }
 
 /**
- * Returns true if an element is considered part of the block and not its
- * children.
+ * Returns true if an element is considered part of the block and not its inner
+ * blocks or appender.
  *
  * @param {Element} blockElement Block container element.
  * @param {Element} element      Element.
  *
- * @return {boolean} Whether element is in the block Element but not its
- *                   children.
+ * @return {boolean} Whether an element is considered part of the block and not
+ *                   its inner blocks or appender.
  */
 export function isInsideRootBlock( blockElement, element ) {
-	const parentBlock = element.closest( BLOCK_SELECTOR );
+	const parentBlock = element.closest(
+		[ BLOCK_SELECTOR, APPENDER_SELECTOR ].join( ',' )
+	);
 	return parentBlock === blockElement;
 }