KeyboardShortcuts: Update delete shortcut to use shift + Backspace (#68164)

* KeyboardShortcuts: Update delete shortcut to use Shift + Delete and add Backspace alias

* KeyboardShortcuts: Add Shift modifier for Backspace alias

* KeyboardShortcuts: Update delete shortcut character from 'del' to 'delete'

* KeyboardShortcuts: Update delete shortcut to use Shift + Delete

* KeyboardShortcuts: Change delete shortcut to platformAlt + Backspace

* KeyboardShortcuts: Update delete shortcut to use primaryShift + Delete

* KeyboardShortcuts: Update Block Locking spec to use the proper key shortcut

* KeyboardShortcuts: Change delete shortcut to primaryShift + Backspace

* KeyboardShortcuts: Update delete shortcut to use `shift + Backspace`

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jarekmorawski <jarekmorawski@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

Author: 7 people

packages/block-editor/src/components/keyboard-shortcuts/index.js

@@ -29,8 +29,8 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'access',
-				character: 'z',
+				modifier: 'shift',
+				character: 'backspace',
 			},
 		} );
 

packages/block-editor/src/components/rich-text/event-listeners/delete.js

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode } = event;
+		const { keyCode, shiftKey } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,6 +30,11 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
+			// Exclude shift+backspace as they are shortcuts for deleting blocks.
+			if ( shiftKey ) {
+				return;
+			}
+
 			if ( onMerge ) {
 				onMerge( ! isReverse );
 			}

test/e2e/specs/editor/blocks/navigation.spec.js

@@ -276,7 +276,7 @@ test.describe( 'Navigation block', () => {
 			await pageUtils.pressKeys( 'ArrowDown' );
 
 			// remove the child link
-			await pageUtils.pressKeys( 'access+z' );
+			await pageUtils.pressKeys( 'shift+Backspace' );
 
 			const submenuBlock2 = editor.canvas.getByRole( 'document', {
 				name: 'Block: Submenu',
@@ -494,7 +494,7 @@ test.describe( 'Navigation block', () => {
 		await pageUtils.pressKeys( 'ArrowDown', { times: 4 } );
 		await navigation.checkLabelFocus( 'wordpress.org' );
 		// Delete the nav link
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		// Focus moved to sibling
 		await navigation.checkLabelFocus( 'Dog' );
 		// Add a link back so we can delete the first submenu link and see if focus returns to the parent submenu item
@@ -507,15 +507,15 @@ test.describe( 'Navigation block', () => {
 		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
 		await navigation.checkLabelFocus( 'Dog' );
 		// Delete the nav link
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		await pageUtils.pressKeys( 'ArrowDown' );
 		// Focus moved to parent submenu item
 		await navigation.checkLabelFocus( 'example.com' );
 		// Deleting this should move focus to the sibling item
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		await navigation.checkLabelFocus( 'Cat' );
 		// Deleting with no more siblings should focus the navigation block again
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		await expect( navBlock ).toBeFocused();
 		// Wait until the nav block inserter is visible before we continue.
 		await expect( navBlockInserter ).toBeVisible();

test/e2e/specs/editor/various/block-deletion.spec.js

@@ -134,7 +134,7 @@ test.describe( 'Block deletion', () => {
 		).toBeFocused();
 
 		// Remove the current paragraph via dedicated keyboard shortcut.
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 
 		// Ensure the last block was removed.
 		await expect.poll( editor.getBlocks ).toMatchObject( [

test/e2e/specs/editor/various/block-locking.spec.js

@@ -133,7 +133,7 @@ test.describe( 'Block Locking', () => {
 		).toBeVisible();
 
 		await paragraph.click();
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{

test/e2e/specs/editor/various/list-view.spec.js

@@ -809,8 +809,8 @@ test.describe( 'List View', () => {
 
 		// Delete remaining blocks.
 		// Keyboard shortcut should also work.
-		await pageUtils.pressKeys( 'access+z' );
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -842,7 +842,7 @@ test.describe( 'List View', () => {
 				{ name: 'core/heading', selected: false },
 			] );
 
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -865,7 +865,7 @@ test.describe( 'List View', () => {
 			.getByRole( 'gridcell', { name: 'File' } )
 			.getByRole( 'link' )
 			.focus();
-		for ( const keys of [ 'Delete', 'Backspace', 'access+z' ] ) {
+		for ( const keys of [ 'Delete', 'Backspace', 'shift+Backspace' ] ) {
 			await pageUtils.pressKeys( keys );
 			await expect
 				.poll(
@@ -1133,7 +1133,7 @@ test.describe( 'List View', () => {
 			optionsForFileMenu,
 			'Pressing Space should also open the menu dropdown'
 		).toBeVisible();
-		await pageUtils.pressKeys( 'access+z' ); // Keyboard shortcut for Delete.
+		await pageUtils.pressKeys( 'shift+Backspace' ); // Keyboard shortcut for Delete.
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -1153,7 +1153,7 @@ test.describe( 'List View', () => {
 			optionsForFileMenu.getByRole( 'menuitem', { name: 'Delete' } ),
 			'The delete menu item should be hidden for locked blocks'
 		).toBeHidden();
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,

test/e2e/specs/site-editor/template-part.spec.js

@@ -375,7 +375,7 @@ test.describe( 'Template Part', () => {
 		await editor.selectBlocks( siteTitle );
 
 		// Remove the default site title block.
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 
 		// Insert a group block with a Site Title block inside.
 		await editor.insertBlock( {

test/e2e/specs/widgets/editing-widgets.spec.js

@@ -573,7 +573,7 @@ test.describe( 'Widgets screen', () => {
 			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: 'Second Paragraph' } )
 			.focus();
-		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'shift+Backspace' );
 		await widgetsScreen.saveWidgets();
 
 		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {