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 <[email protected]>

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 }
 		/>
 	);
 }

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' );
+		}
+	);
 } );

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>

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>

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 }
 							/>