Buttons block: fix focus on insert (#39684)

WordPress · Mar 23, 2022 · 8abde21 · 8abde21
1 parent 383c9b5
commit 8abde21
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
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
@@ -73,8 +73,14 @@ function isFormElement( element ) {
 export function useFocusFirstElement( clientId ) {
 	const ref = useRef();
 	const initialPosition = useInitialPosition( clientId );
+	const { isBlockSelected } = useSelect( blockEditorStore );
 
 	useEffect( () => {
+		// Check if the block is still selected at the time this effect runs.
+		if ( ! isBlockSelected( clientId ) ) {
+			return;
+		}
+
 		if ( initialPosition === undefined || initialPosition === null ) {
 			return;
 		}
@@ -127,7 +133,7 @@ export function useFocusFirstElement( clientId ) {
 		setContentEditableWrapper( ref.current, false );
 
 		placeCaretAtHorizontalEdge( target, isReverse );
-	}, [ initialPosition ] );
+	}, [ initialPosition, clientId ] );
 
 	return ref;
 }
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
@@ -16,6 +16,14 @@ exports[`Buttons dismisses link editor when escape is pressed 1`] = `
 <!-- /wp:buttons -->"
 `;
 
+exports[`Buttons has focus on button content (slash inserter) 1`] = `
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons has focus on button content 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->

diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
@@ -6,6 +6,7 @@ import {
 	getEditedPostContent,
 	createNewPost,
 	pressKeyWithModifier,
+	clickBlockAppender,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Buttons', () => {
@@ -20,6 +21,15 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'has focus on button content (slash inserter)', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '/buttons' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Content' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'dismisses link editor when escape is pressed', async () => {
 		// Regression: https://github.com/WordPress/gutenberg/pull/19885
 		await insertBlock( 'Buttons' );