Escape as Select/Edit mode Toggle (#58637)

* Escape while in navigation mode resets to edit mode Right now an Enter keypress moves from navigation mode into edit mode, and an Escape keypress resets focus back to the top of the document. It feels like a focus loss to me. This change makes an Escape keypress in navgation mode return to edit mode. * Remove unused code * Replace deselect block test with toggle navigation and edit mode test * Remove unnecessary test, fix related test
WordPress · Feb 5, 2024 · 331532c · 331532c
1 parent 4a16dd2
commit 331532c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 55 deletions.
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -131,6 +131,11 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		const isEnter = keyCode === ENTER;
 		const isSpace = keyCode === SPACE;
 		const isShift = event.shiftKey;
+		if ( isEscape && editorMode === 'navigation' ) {
+			setNavigationMode( false );
+			event.preventDefault();
+			return;
+		}
 
 		if ( keyCode === BACKSPACE || keyCode === DELETE ) {
 			removeBlock( clientId );

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -99,7 +99,6 @@ export default function BlockTools( {
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		clearSelectedBlock,
 		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
@@ -157,21 +156,12 @@ export default function BlockTools( {
 			}
 
 			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length ) {
+			if ( clientIds.length > 1 ) {
 				event.preventDefault();
-
 				// If there is more than one block selected, select the first
 				// block so that focus is directed back to the beginning of the selection.
 				// In effect, to the user this feels like deselecting the multi-selection.
-				if ( clientIds.length > 1 ) {
-					selectBlock( clientIds[ 0 ] );
-				} else {
-					clearSelectedBlock();
-				}
-				event.target.ownerDocument.defaultView
-					.getSelection()
-					.removeAllRanges();
-				__unstableContentRef?.current.focus();
+				selectBlock( clientIds[ 0 ] );
 			}
 		}
 	}

diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js
@@ -221,7 +221,7 @@ test.describe( 'Multi-block selection', () => {
 		pageUtils,
 		multiBlockSelectionUtils,
 	} ) => {
-		for ( let i = 1; i <= 2; i += 1 ) {
+		for ( let i = 1; i <= 3; i += 1 ) {
 			await editor.insertBlock( {
 				name: 'core/paragraph',
 				attributes: { content: `${ i }` },
@@ -232,14 +232,13 @@ test.describe( 'Multi-block selection', () => {
 
 		await expect
 			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
-			.toEqual( [ 1, 2 ] );
+			.toEqual( [ 1, 2, 3 ] );
 
 		await page.keyboard.press( 'Escape' );
 
-		// FIXME: This doesn't seem to work anymore.
-		// await expect
-		// 	.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
-		// 	.toEqual( [] );
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1 ] );
 	} );
 
 	test( 'should select with shift + click', async ( {
@@ -877,35 +876,6 @@ test.describe( 'Multi-block selection', () => {
 			] );
 	} );
 
-	test( 'should select all from empty selection', async ( {
-		page,
-		editor,
-		pageUtils,
-		multiBlockSelectionUtils,
-	} ) => {
-		for ( let i = 1; i <= 2; i += 1 ) {
-			await editor.insertBlock( {
-				name: 'core/paragraph',
-				attributes: { content: `${ i }` },
-			} );
-		}
-
-		// Clear the selected block.
-		await page.keyboard.press( 'Escape' );
-		await page.keyboard.press( 'Escape' );
-
-		await expect
-			.poll( multiBlockSelectionUtils.getSelectedBlocks )
-			.toEqual( [] );
-
-		await pageUtils.pressKeys( 'primary+a' );
-
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect both paragraphs to be deleted.
-		await expect.poll( editor.getBlocks ).toEqual( [] );
-	} );
-
 	test( 'should select title if the cursor is on title', async ( {
 		editor,
 		pageUtils,

diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -927,28 +927,32 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 <!-- /wp:table -->` );
 	} );
 
-	test( 'should unselect all blocks when hitting double escape', async ( {
+	test( 'escape should toggle between edit and navigation modes', async ( {
 		page,
 		writingFlowUtils,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'Random Paragraph' );
 
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-
-		// First escape enters navigaiton mode.
+		// First escape enters navigation mode.
 		await page.keyboard.press( 'Escape' );
+		const navigationButton = page.getByLabel(
+			'Paragraph Block. Row 1. Random Paragraph'
+		);
+		await expect( navigationButton ).toBeVisible();
 		await expect
 			.poll( writingFlowUtils.getActiveBlockName )
 			.toBe( 'core/paragraph' );
 
-		// Second escape unselects the blocks.
+		// Second escape Toggles back to Edit Mode
 		await page.keyboard.press( 'Escape' );
+		await expect( navigationButton ).toBeHidden();
+		const blockToolbar = page.getByLabel( 'Block tools' );
+
+		await expect( blockToolbar ).toBeVisible();
 		await expect
 			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( undefined );
+			.toBe( 'core/paragraph' );
 	} );
 
 	// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.