Zoom out: Add keyboard shortcut in block editor

WordPress · Oct 24, 2024 · efa08f6 · efa08f6
1 parent e9fb510
commit efa08f6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -70,7 +70,7 @@ export default function BlockTools( {
 		getSelectedBlockClientIds,
 		getBlockRootClientId,
 		isGroupable,
-	} = useSelect( blockEditorStore );
+	} = unlock( useSelect( blockEditorStore ) );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
 		useShowBlockTools();
@@ -85,6 +85,8 @@ export default function BlockTools( {
 		moveBlocksUp,
 		moveBlocksDown,
 		expandBlock,
+		setZoomLevel,
+		resetZoomLevel,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -175,6 +177,12 @@ export default function BlockTools( {
 				replaceBlocks( clientIds, newBlocks );
 				speak( __( 'Selected blocks are grouped.' ) );
 			}
+		} else if ( isMatch( 'core/block-editor/zoom', event ) ) {
+			if ( isZoomOutMode ) {
+				resetZoomLevel();
+			} else {
+				setZoomLevel( 'auto-scaled' );
+			}
 		}
 	}
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );

diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -155,6 +155,15 @@ function KeyboardShortcutsRegister() {
 				character: 'g',
 			},
 		} );
+		registerShortcut( {
+			name: 'core/block-editor/zoom',
+			category: 'global',
+			description: __( 'Toggle zoom out.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: 'z',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;