From da2456e3db36e487dc5b08ca2871fc3b5842eed8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?=
 <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 22 Jul 2021 18:42:16 +0300
Subject: [PATCH] Block editor: remove focus stopPropagation from appender
 (#32003)

---
 .../src/components/block-list-appender/index.js     | 11 -----------
 .../use-block-props/use-focus-first-element.js      |  6 +-----
 packages/block-editor/src/utils/dom.js              | 13 ++++++++-----
 3 files changed, 9 insertions(+), 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
index 28b96308abd781..b6c6ac0b8d1a38 100644
--- 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
index 5ac6be5aab0681..a3e522b080af8b 100644
--- 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
index 4416f8eb4861e8..6de80b24dac4bc 100644
--- 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;
 }