Improve the performance of the keyboard shortcuts binding (#23394)

WordPress · Jun 26, 2020 · 2f427af · 2f427af
1 parent a41914a
commit 2f427af
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 38 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -15,7 +15,7 @@ import {
 	forwardRef,
 } from '@wordpress/element';
 import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
-import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
+import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -75,9 +75,7 @@ const BlockComponent = forwardRef(
 			},
 			[ isSelected ]
 		);
-		const { removeBlock, insertDefaultBlock } = useDispatch(
-			'core/block-editor'
-		);
+		const { insertDefaultBlock } = useDispatch( 'core/block-editor' );
 		const fallbackRef = useRef();
 		const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
 		wrapper = wrapper || fallbackRef;
@@ -171,11 +169,7 @@ const BlockComponent = forwardRef(
 				props.onKeyDown( event );
 			}
 
-			if (
-				keyCode !== ENTER &&
-				keyCode !== BACKSPACE &&
-				keyCode !== DELETE
-			) {
+			if ( keyCode !== ENTER ) {
 				return;
 			}
 
@@ -187,8 +181,6 @@ const BlockComponent = forwardRef(
 
 			if ( keyCode === ENTER ) {
 				insertDefaultBlock( {}, rootClientId, index + 1 );
-			} else {
-				removeBlock( clientId );
 			}
 		};
 

diff --git a/packages/block-editor/src/components/rich-text/shortcut.js b/packages/block-editor/src/components/rich-text/shortcut.js
@@ -1,32 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { KeyboardShortcuts } from '@wordpress/components';
+import { useKeyboardShortcut } from '@wordpress/compose';
 import { rawShortcut } from '@wordpress/keycodes';
 
-export class RichTextShortcut extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onUse = this.onUse.bind( this );
-	}
-
-	onUse() {
-		this.props.onUse();
+export function RichTextShortcut( { character, type, onUse } ) {
+	const callback = () => {
+		onUse();
 		return false;
-	}
-
-	render() {
-		const { character, type } = this.props;
+	};
+	useKeyboardShortcut( rawShortcut[ type ]( character ), callback, {
+		bindGlobal: true,
+	} );
 
-		return (
-			<KeyboardShortcuts
-				bindGlobal
-				shortcuts={ {
-					[ rawShortcut[ type ]( character ) ]: this.onUse,
-				} }
-			/>
-		);
-	}
+	return null;
 }
diff --git a/packages/compose/src/hooks/use-keyboard-shortcut/index.js b/packages/compose/src/hooks/use-keyboard-shortcut/index.js
@@ -8,7 +8,7 @@ import { includes, castArray } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * A block selection object.
@@ -54,6 +54,11 @@ function useKeyboardShortcut(
 		target,
 	} = {}
 ) {
+	const currentCallback = useRef( callback );
+	useEffect( () => {
+		currentCallback.current = callback;
+	}, [ callback ] );
+
 	useEffect( () => {
 		if ( isDisabled ) {
 			return;
@@ -82,13 +87,17 @@ function useKeyboardShortcut(
 			}
 
 			const bindFn = bindGlobal ? 'bindGlobal' : 'bind';
-			mousetrap[ bindFn ]( shortcut, callback, eventName );
+			mousetrap[ bindFn ](
+				shortcut,
+				( ...args ) => currentCallback.current( ...args ),
+				eventName
+			);
 		} );
 
 		return () => {
 			mousetrap.reset();
 		};
-	}, [ shortcuts, bindGlobal, eventName, callback, target, isDisabled ] );
+	}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );
 }
 
 export default useKeyboardShortcut;