Zoom out: Add keyboard shortcut in editor (#66400)

Co-authored-by: ntsekouras <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: stokesman <[email protected]>
WordPress · Oct 25, 2024 · 5b30321 · 5b30321
1 parent 268b0fe
commit 5b30321
Showing 1 changed file with 31 additions and 1 deletion.
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: '0',
+			},
+		} );
+		return () => {
+			unregisterShortcut( 'core/editor/zoom' );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/editor/zoom', () => {
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 'auto-scaled' );
+		}
+	} );
 
 	const handleZoomOut = () => {
 		if ( isZoomOut ) {