From 226ef00084fe0cbc2b2f4c37988637d442a57c04 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 24 Oct 2024 13:37:39 +0300 Subject: [PATCH 1/5] Zoom out: Add keyboard shortcut in editor --- .../global-keyboard-shortcuts/index.js | 16 +++++++++++++++- .../register-shortcuts.js | 10 ++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/global-keyboard-shortcuts/index.js b/packages/editor/src/components/global-keyboard-shortcuts/index.js index a46d4b55a7bfd8..1837529c1694da 100644 --- a/packages/editor/src/components/global-keyboard-shortcuts/index.js +++ b/packages/editor/src/components/global-keyboard-shortcuts/index.js @@ -10,6 +10,7 @@ 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. @@ -24,7 +25,12 @@ export default function EditorKeyboardShortcuts() { select( editorStore ).getEditorSettings(); return ! richEditingEnabled || ! codeEditingEnabled; }, [] ); - const { getBlockSelectionStart } = useSelect( blockEditorStore ); + const { getBlockSelectionStart, isZoomOut } = unlock( + useSelect( blockEditorStore ) + ); + const { setZoomLevel, resetZoomLevel } = unlock( + useDispatch( blockEditorStore ) + ); const { getActiveComplementaryArea } = useSelect( interfaceStore ); const { enableComplementaryArea, disableComplementaryArea } = useDispatch( interfaceStore ); @@ -118,5 +124,13 @@ 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 26a07166c106c4..c4bbec42ed9503 100644 --- a/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js +++ b/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js @@ -144,6 +144,16 @@ function EditorKeyboardShortcutsRegister() { }, ], } ); + + registerShortcut( { + name: 'core/editor/zoom', + category: 'global', + description: __( 'Enter or exit zoom out.' ), + keyCombination: { + modifier: 'primaryShift', + character: 'z', + }, + } ); }, [ registerShortcut ] ); return ; From fc50e88e3fa71c07e11964c17d6743009701ad6f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 24 Oct 2024 15:23:36 +0300 Subject: [PATCH 2/5] register the shortcut in ZoomOutToggle --- .../global-keyboard-shortcuts/index.js | 16 +--------- .../register-shortcuts.js | 10 ------ .../src/components/zoom-out-toggle/index.js | 32 ++++++++++++++++++- 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/packages/editor/src/components/global-keyboard-shortcuts/index.js b/packages/editor/src/components/global-keyboard-shortcuts/index.js index 1837529c1694da..a46d4b55a7bfd8 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 c4bbec42ed9503..26a07166c106c4 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 619cc06c689c0b..423a58b2167eaa 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 ) { From 045b418fc3f667d0c25cfe551467b3776adb1923 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 24 Oct 2024 15:50:48 +0300 Subject: [PATCH 3/5] change shortcut --- packages/editor/src/components/zoom-out-toggle/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index 423a58b2167eaa..c2487e3580de11 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -40,7 +40,7 @@ const ZoomOutToggle = ( { disabled } ) => { category: 'global', description: __( 'Enter or exit zoom out.' ), keyCombination: { - modifier: 'primaryShift', + modifier: 'access', character: 'z', }, } ); From d6450790f456e430d3f1109b662adbd87b53c3ef Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 24 Oct 2024 16:22:07 +0300 Subject: [PATCH 4/5] change shortcut --- packages/editor/src/components/zoom-out-toggle/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index c2487e3580de11..5b868b28756fe8 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -40,7 +40,7 @@ const ZoomOutToggle = ( { disabled } ) => { category: 'global', description: __( 'Enter or exit zoom out.' ), keyCombination: { - modifier: 'access', + modifier: 'secondary', character: 'z', }, } ); From 01cffcde51f4334390450af37a0a5118d04c4b80 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 25 Oct 2024 08:57:24 +0300 Subject: [PATCH 5/5] change shortcut again --- packages/editor/src/components/zoom-out-toggle/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js index 5b868b28756fe8..81506add699c97 100644 --- a/packages/editor/src/components/zoom-out-toggle/index.js +++ b/packages/editor/src/components/zoom-out-toggle/index.js @@ -40,8 +40,8 @@ const ZoomOutToggle = ( { disabled } ) => { category: 'global', description: __( 'Enter or exit zoom out.' ), keyCombination: { - modifier: 'secondary', - character: 'z', + modifier: 'primaryShift', + character: '0', }, } ); return () => {