Add remove block keyboard shortcut (#8805)

Adds the keyboard shortcut Ctrl+Alt+Backspace / Alt+Cmd+Backspace for removing a block

* Add shortcut for Remove Block

* Add shortcut for remove block to shortcut help modal

* Allow event for remove block to bubble from RichText when the shortcut chord is pressed

* Use `isKeyboardEvent` to catch key combination + improve comment

edit-post/components/keyboard-shortcut-help-modal/config.js

@@ -9,6 +9,8 @@ const {
 	primary,
 	// Shift+Cmd+<key> on a mac, Ctrl+Shift+<key> elsewhere
 	primaryShift,
+	// Alt+Cmd+<key> on a mac, Ctrl+Alt+<key> elsewhere
+	primaryAlt,
 	// Shift+Alt+Cmd+<key> on a mac, Ctrl+Shift+Akt+<key> elsewhere
 	secondary,
 	// Ctrl+Alt+<key> on a mac, Shift+Alt+<key> elsewhere
@@ -85,6 +87,10 @@ const blockShortcuts = {
 			keyCombination: primaryShift( 'd' ),
 			description: __( 'Duplicate the selected block(s).' ),
 		},
+		{
+			keyCombination: primaryAlt( 'backspace' ),
+			description: __( 'Remove the selected block(s).' ),
+		},
 		{
 			keyCombination: '/',
 			description: __( `Change the block type after adding a new paragraph.` ),

edit-post/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -160,6 +160,16 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
               "D",
             ],
           },
+          Object {
+            "description": "Remove the selected block(s).",
+            "keyCombination": Array [
+              "Ctrl",
+              "+",
+              "Alt",
+              "+",
+              "Backspace",
+            ],
+          },
           Object {
             "description": "Change the block type after adding a new paragraph.",
             "keyCombination": "/",

packages/editor/src/components/block-settings-menu/index.js

@@ -36,6 +36,10 @@ const shortcuts = {
 		raw: rawShortcut.primaryShift( 'd' ),
 		display: displayShortcut.primaryShift( 'd' ),
 	},
+	removeBlock: {
+		raw: rawShortcut.primaryAlt( 'backspace' ),
+		display: displayShortcut.primaryAlt( 'bksp' ),
+	},
 };
 
 export class BlockSettingsMenu extends Component {
@@ -84,6 +88,10 @@ export class BlockSettingsMenu extends Component {
 						// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
 						// Prevents reposition Chrome devtools pane shortcut when devtools are open.
 						[ shortcuts.duplicate.raw ]: flow( preventDefault, onDuplicate ),
+
+						// Does not clash with any known browser/native shortcuts, but preventDefault
+						// is used to prevent any obscure unknown shortcuts from triggering
+						[ shortcuts.removeBlock.raw ]: flow( preventDefault, onRemove ),
 					} }
 				/>
 				<Dropdown
@@ -163,6 +171,7 @@ export class BlockSettingsMenu extends Component {
 									className="editor-block-settings-menu__control"
 									onClick={ onRemove }
 									icon="trash"
+									shortcut={ shortcuts.removeBlock.display }
 								>
 									{ __( 'Remove Block' ) }
 								</MenuItem>

packages/editor/src/components/rich-text/index.js

@@ -23,7 +23,7 @@ import {
 	getScrollContainer,
 } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
-import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, rawShortcut } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, rawShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { Slot } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { rawHandler, children } from '@wordpress/blocks';
@@ -399,6 +399,13 @@ export class RichText extends Component {
 
 		const { keyCode } = event;
 		const isReverse = keyCode === BACKSPACE;
+
+		// User is using the Remove Block shortcut, so allow the event to bubble
+		// up to the BlockSettingsMenu component
+		if ( isKeyboardEvent.primaryAlt( event, 'Backspace' ) ) {
+			return;
+		}
+
 		const { isCollapsed } = getSelection();
 
 		// Only process delete if the key press occurs at uncollapsed edge.