diff --git a/packages/editor/src/components/global-keyboard-shortcuts/index.js b/packages/editor/src/components/global-keyboard-shortcuts/index.js index 1837529c1694d..a46d4b55a7bfd 100644 --- 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 index c4bbec42ed950..26a07166c106c 100644 --- 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 ; diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index 619cc06c689c0..423a58b2167ea 100644 --- 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 ) {