register the shortcut in ZoomOutToggle

WordPress · Oct 24, 2024 · fc50e88 · fc50e88
1 parent 226ef00
commit fc50e88
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 26 deletions.
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/index.js b/packages/editor/src/components/global-keyboard-shortcuts/index.js
@@ -10,7 +10,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
 /**
  * Handles the keyboard shortcuts for the editor.
@@ -25,12 +24,7 @@ export default function EditorKeyboardShortcuts() {
 			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
-	const { getBlockSelectionStart, isZoomOut } = unlock(
-		useSelect( blockEditorStore )
-	);
-	const { setZoomLevel, resetZoomLevel } = unlock(
-		useDispatch( blockEditorStore )
-	);
+	const { getBlockSelectionStart } = useSelect( blockEditorStore );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
@@ -124,13 +118,5 @@ export default function EditorKeyboardShortcuts() {
 		}
 	} );
 
-	useShortcut( 'core/editor/zoom', () => {
-		if ( isZoomOut() ) {
-			resetZoomLevel();
-		} else {
-			setZoomLevel( 'auto-scaled' );
-		}
-	} );
-
 	return null;
 }
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
@@ -144,16 +144,6 @@ function EditorKeyboardShortcutsRegister() {
 				},
 			],
 		} );
-
-		registerShortcut( {
-			name: 'core/editor/zoom',
-			category: 'global',
-			description: __( 'Enter or exit zoom out.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'z',
-			},
-		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;

diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -3,11 +3,15 @@
  */
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
+import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { square as zoomOutIcon } from '@wordpress/icons';
 import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -26,6 +30,32 @@ const ZoomOutToggle = ( { disabled } ) => {
 	const { resetZoomLevel, setZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/zoom',
+			category: 'global',
+			description: __( 'Enter or exit zoom out.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: 'z',
+			},
+		} );
+		return () => {
+			unregisterShortcut( 'core/editor/zoom' );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/editor/zoom', () => {
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 'auto-scaled' );
+		}
+	} );
 
 	const handleZoomOut = () => {
 		if ( isZoomOut ) {