From 99aa61eec19a1bf7760dd350778180027db43d27 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 25 Feb 2021 18:54:04 +0100
Subject: [PATCH] Fix mobile inserter focus behavior (#29342)

On mobile, the focus actually never moves back to the newly inserter block in the inserter. So this means the change in behavior in the block selection behavior (selected used to mean focus), cause the focus to just stay where it was in mobile when inserting blocks.

Co-authored-by: Bernie Reiter <ockham@raz.or.at>
---
 .../src/components/inserter/library.js        |  3 +-
 .../specs/editor/various/inserter.test.js     | 30 +++++++++++--------
 .../edit-post/src/components/layout/index.js  |  6 +---
 .../edit-site/src/components/editor/index.js  | 12 ++------
 .../src/components/layout/interface.js        |  6 +---
 5 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index fc69a8f6d82e74..d881cad5c27da0 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -22,6 +22,7 @@ function InserterLibrary( {
 	showMostUsedBlocks = false,
 	__experimentalInsertionIndex,
 	onSelect = noop,
+	shouldFocusBlock = false,
 } ) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
@@ -43,7 +44,7 @@ function InserterLibrary( {
 			showInserterHelpPanel={ showInserterHelpPanel }
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
-			shouldFocusBlock={ false }
+			shouldFocusBlock={ shouldFocusBlock }
 		/>
 	);
 }
diff --git a/packages/e2e-tests/specs/editor/various/inserter.test.js b/packages/e2e-tests/specs/editor/various/inserter.test.js
index 2bece61f9b5684..2a115bda09d69b 100644
--- a/packages/e2e-tests/specs/editor/various/inserter.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserter.test.js
@@ -5,6 +5,7 @@ import {
 	createNewPost,
 	openGlobalBlockInserter,
 	insertBlock,
+	setBrowserViewport,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Inserter', () => {
@@ -25,20 +26,25 @@ describe( 'Inserter', () => {
 		expect( isPreviewVisible ).toBe( true );
 	} );
 
-	it( 'last-inserted block should be given and keep the focus', async () => {
-		await page.type(
-			'.block-editor-default-block-appender__content',
-			'Testing inserted block focus'
-		);
+	it.each( [ 'large', 'small' ] )(
+		'last-inserted block should be given and keep the focus (%s viewport)',
+		async ( viewport ) => {
+			await setBrowserViewport( viewport );
 
-		await insertBlock( 'Image' );
+			await page.type(
+				'.block-editor-default-block-appender__content',
+				'Testing inserted block focus'
+			);
 
-		await page.waitForSelector( 'figure[data-type="core/image"]' );
+			await insertBlock( 'Image' );
 
-		const selectedBlock = await page.evaluate( () => {
-			return wp.data.select( 'core/block-editor' ).getSelectedBlock();
-		} );
+			await page.waitForSelector( 'figure[data-type="core/image"]' );
 
-		expect( selectedBlock.name ).toBe( 'core/image' );
-	} );
+			const selectedBlock = await page.evaluate( () => {
+				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
+			} );
+
+			expect( selectedBlock.name ).toBe( 'core/image' );
+		}
+	);
 } );
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 1a7f1faf578af6..5837dc8c41df8d 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -220,11 +220,7 @@ function Layout( { styles } ) {
 								<Library
 									showMostUsedBlocks={ showMostUsedBlocks }
 									showInserterHelpPanel
-									onSelect={ () => {
-										if ( isMobileViewport ) {
-											setIsInserterOpened( false );
-										}
-									} }
+									shouldFocusBlock={ isMobileViewport }
 								/>
 							</div>
 						</div>
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index f7dfacb8824b42..1c056ab93be4bc 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -219,15 +219,9 @@ function Editor( { initialSettings } ) {
 														<div className="edit-site-editor__inserter-panel-content">
 															<Library
 																showInserterHelpPanel
-																onSelect={ () => {
-																	if (
-																		isMobile
-																	) {
-																		setIsInserterOpened(
-																			false
-																		);
-																	}
-																} }
+																shouldFocusBlock={
+																	isMobile
+																}
 															/>
 														</div>
 													</div>
diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index 3955abd4269469..22320cac6b1f0e 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -89,11 +89,7 @@ function Interface( { blockEditorSettings } ) {
 						<div className="edit-widgets-layout__inserter-panel-content">
 							<Library
 								showInserterHelpPanel
-								onSelect={ () => {
-									if ( isMobileViewport ) {
-										setIsInserterOpened( false );
-									}
-								} }
+								shouldFocusBlock={ isMobileViewport }
 								rootClientId={ rootClientId }
 								__experimentalInsertionIndex={ insertionIndex }
 							/>