From ffdb465915f65779f547be9e99703fb0147f5b66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 3 Sep 2021 18:15:35 +0300 Subject: [PATCH 01/13] Global shortcuts: use React events (portal bubbles & contextual) --- .../components/block-tools/block-popover.js | 2 - .../src/components/iframe/index.js | 2 +- .../src/components/navigable-toolbar/index.js | 5 +- .../keyboard-shortcut-help-modal/index.js | 4 +- .../components/keyboard-shortcuts/index.js | 36 ++++-------- .../src/components/more-menu/index.js | 5 +- .../src/components/layout/shortcuts.js | 29 +++------- .../keyboard-shortcut-help-modal/index.js | 4 +- .../components/keyboard-shortcuts/index.js | 51 +++++++---------- .../edit-post/src/components/layout/index.js | 20 +++++-- .../edit-site/src/components/editor/index.js | 22 +++++++- .../components/keyboard-shortcuts/index.js | 51 +++++++---------- .../components/keyboard-shortcuts/index.js | 36 ++++-------- .../src/components/more-menu/index.js | 5 +- .../save-shortcut.js | 55 ++++++++----------- .../visual-editor-shortcuts.js | 24 +++----- packages/interface/package.json | 1 + .../components/interface-skeleton/index.js | 12 +++- .../src/hooks/use-shortcut.js | 41 ++++++++++---- packages/keyboard-shortcuts/src/index.js | 2 +- 20 files changed, 184 insertions(+), 223 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js index 3797f68edadff..0b66de45f0286 100644 --- a/packages/block-editor/src/components/block-tools/block-popover.js +++ b/packages/block-editor/src/components/block-tools/block-popover.js @@ -112,8 +112,6 @@ function BlockPopover( { stopTyping( true ); }, [] ), { - bindGlobal: true, - eventName: 'keydown', isDisabled: ! canFocusHiddenToolbar, } ); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index e5dbb6907094b..e1de1591e6a0d 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -134,7 +134,7 @@ function bubbleEvents( doc ) { } } - const eventTypes = [ 'keydown', 'keypress', 'dragover' ]; + const eventTypes = [ 'dragover' ]; for ( const name of eventTypes ) { doc.addEventListener( name, bubbleEvent ); diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js index d010153fb2662..a988fa2c7575f 100644 --- a/packages/block-editor/src/components/navigable-toolbar/index.js +++ b/packages/block-editor/src/components/navigable-toolbar/index.js @@ -100,10 +100,7 @@ function useToolbarFocus( }, [] ); // Focus on toolbar when pressing alt+F10 when the toolbar is visible - useShortcut( 'core/block-editor/focus-toolbar', focusToolbar, { - bindGlobal: true, - eventName: 'keydown', - } ); + useShortcut( 'core/block-editor/focus-toolbar', focusToolbar ); useEffect( () => { if ( initialFocusOnMount ) { diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js index e600474a933cb..77911be261001 100644 --- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js +++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js @@ -101,9 +101,7 @@ export default function KeyboardShortcutHelpModal( { }, } ); - useShortcut( 'core/customize-widgets/keyboard-shortcuts', toggleModal, { - bindGlobal: true, - } ); + useShortcut( 'core/customize-widgets/keyboard-shortcuts', toggleModal ); if ( ! isModalActive ) { return null; diff --git a/packages/customize-widgets/src/components/keyboard-shortcuts/index.js b/packages/customize-widgets/src/components/keyboard-shortcuts/index.js index fe7349fdae04a..56888f1cfe3ae 100644 --- a/packages/customize-widgets/src/components/keyboard-shortcuts/index.js +++ b/packages/customize-widgets/src/components/keyboard-shortcuts/index.js @@ -10,32 +10,20 @@ import { useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; function KeyboardShortcuts( { undo, redo, save } ) { - useShortcut( - 'core/customize-widgets/undo', - ( event ) => { - undo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/customize-widgets/undo', ( event ) => { + undo(); + event.preventDefault(); + } ); - useShortcut( - 'core/customize-widgets/redo', - ( event ) => { - redo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/customize-widgets/redo', ( event ) => { + redo(); + event.preventDefault(); + } ); - useShortcut( - 'core/customize-widgets/save', - ( event ) => { - event.preventDefault(); - save(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/customize-widgets/save', ( event ) => { + event.preventDefault(); + save(); + } ); return null; } diff --git a/packages/customize-widgets/src/components/more-menu/index.js b/packages/customize-widgets/src/components/more-menu/index.js index 45c186f467c6e..c87487ade1bce 100644 --- a/packages/customize-widgets/src/components/more-menu/index.js +++ b/packages/customize-widgets/src/components/more-menu/index.js @@ -33,10 +33,7 @@ export default function MoreMenu() { useShortcut( 'core/customize-widgets/keyboard-shortcuts', - toggleKeyboardShortcutsModal, - { - bindGlobal: true, - } + toggleKeyboardShortcutsModal ); return ( diff --git a/packages/edit-navigation/src/components/layout/shortcuts.js b/packages/edit-navigation/src/components/layout/shortcuts.js index ab03b25e7cd3a..243083fcd8194 100644 --- a/packages/edit-navigation/src/components/layout/shortcuts.js +++ b/packages/edit-navigation/src/components/layout/shortcuts.js @@ -16,30 +16,19 @@ function NavigationEditorShortcuts( { saveBlocks } ) { useCallback( ( event ) => { event.preventDefault(); saveBlocks(); - } ), - { - bindGlobal: true, - } + } ) ); const { redo, undo } = useDispatch( coreStore ); - useShortcut( - 'core/edit-navigation/undo', - ( event ) => { - undo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/edit-navigation/undo', ( event ) => { + undo(); + event.preventDefault(); + } ); - useShortcut( - 'core/edit-navigation/redo', - ( event ) => { - redo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/edit-navigation/redo', ( event ) => { + redo(); + event.preventDefault(); + } ); return null; } diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js index a05e3f20ba4a3..e5177ef2d03f3 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js @@ -91,9 +91,7 @@ const ShortcutCategorySection = ( { }; export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) { - useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal, { - bindGlobal: true, - } ); + useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal ); if ( ! isModalActive ) { return null; diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index 357a5607f6e3c..33b66961006c1 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -131,44 +131,31 @@ function KeyboardShortcuts() { ); }, { - bindGlobal: true, isDisabled: isModeToggleDisabled, } ); - useShortcut( - 'core/edit-post/toggle-fullscreen', - () => { - toggleFeature( 'fullscreenMode' ); - }, - { - bindGlobal: true, + useShortcut( 'core/edit-post/toggle-fullscreen', () => { + toggleFeature( 'fullscreenMode' ); + } ); + + useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => { + // This shortcut has no known clashes, but use preventDefault to prevent any + // obscure shortcuts from triggering. + event.preventDefault(); + + if ( isEditorSidebarOpened() ) { + closeGeneralSidebar(); + } else { + const sidebarToOpen = getBlockSelectionStart() + ? 'edit-post/block' + : 'edit-post/document'; + openGeneralSidebar( sidebarToOpen ); } - ); + } ); - useShortcut( - 'core/edit-post/toggle-sidebar', - ( event ) => { - // This shortcut has no known clashes, but use preventDefault to prevent any - // obscure shortcuts from triggering. - event.preventDefault(); - - if ( isEditorSidebarOpened() ) { - closeGeneralSidebar(); - } else { - const sidebarToOpen = getBlockSelectionStart() - ? 'edit-post/block' - : 'edit-post/document'; - openGeneralSidebar( sidebarToOpen ); - } - }, - { bindGlobal: true } - ); - - useShortcut( - 'core/edit-post/toggle-list-view', - () => setIsListViewOpened( ! isListViewOpened() ), - { bindGlobal: true } + useShortcut( 'core/edit-post/toggle-list-view', () => + setIsListViewOpened( ! isListViewOpened() ) ); return null; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 202f9648d9517..2887162ee71aa 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -27,8 +27,11 @@ import { InterfaceSkeleton, store as interfaceStore, } from '@wordpress/interface'; -import { useState, useEffect, useCallback } from '@wordpress/element'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; +import { useState, useEffect, useCallback, useRef } from '@wordpress/element'; +import { + store as keyboardShortcutsStore, + context, +} from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -182,8 +185,16 @@ function Layout( { styles } ) { return null; }; + const keyboardShortcuts = useRef( new Set() ); + + function onKeyDown( event ) { + for ( const keyboardShortcut of keyboardShortcuts.current ) { + keyboardShortcut( event ); + } + } + return ( - <> + @@ -193,6 +204,7 @@ function Layout( { styles } ) { - + ); } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index c9225340907ba..78a41904d62c0 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -1,7 +1,13 @@ /** * WordPress dependencies */ -import { useEffect, useState, useMemo, useCallback } from '@wordpress/element'; +import { + useEffect, + useState, + useMemo, + useCallback, + useRef, +} from '@wordpress/element'; import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data'; import { SlotFillProvider, @@ -26,6 +32,7 @@ import { } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; import { PluginArea } from '@wordpress/plugins'; +import { context } from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -158,6 +165,14 @@ function Editor( { initialSettings, onError } ) { } }, [ isNavigationOpen ] ); + const keyboardShortcuts = useRef( new Set() ); + + function onKeyDown( event ) { + for ( const keyboardShortcut of keyboardShortcuts.current ) { + keyboardShortcut( event ); + } + } + // Don't render the Editor until the settings are set and loaded if ( ! settings?.siteUrl ) { return null; @@ -178,7 +193,7 @@ function Editor( { initialSettings, onError } ) { }; return ( - <> + @@ -206,6 +221,7 @@ function Editor( { initialSettings, onError } ) { } secondarySidebar={ secondarySidebar() } @@ -289,7 +305,7 @@ function Editor( { initialSettings, onError } ) { - + ); } export default Editor; diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js index a248b0b3337ef..8c8200632da8d 100644 --- a/packages/edit-site/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js @@ -35,47 +35,34 @@ function KeyboardShortcuts() { interfaceStore ); - useShortcut( - 'core/edit-site/undo', - ( event ) => { - undo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/edit-site/undo', ( event ) => { + undo(); + event.preventDefault(); + } ); - useShortcut( - 'core/edit-site/redo', - ( event ) => { - redo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/edit-site/redo', ( event ) => { + redo(); + event.preventDefault(); + } ); useShortcut( 'core/edit-site/toggle-list-view', useCallback( () => { setIsListViewOpened( ! isListViewOpen ); - }, [ isListViewOpen, setIsListViewOpened ] ), - { bindGlobal: true } + }, [ isListViewOpen, setIsListViewOpened ] ) ); - useShortcut( - 'core/edit-site/toggle-block-settings-sidebar', - ( event ) => { - // This shortcut has no known clashes, but use preventDefault to prevent any - // obscure shortcuts from triggering. - event.preventDefault(); + useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => { + // This shortcut has no known clashes, but use preventDefault to prevent any + // obscure shortcuts from triggering. + event.preventDefault(); - if ( isBlockInspectorOpen ) { - disableComplementaryArea( STORE_NAME ); - } else { - enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); - } - }, - { bindGlobal: true } - ); + if ( isBlockInspectorOpen ) { + disableComplementaryArea( STORE_NAME ); + } else { + enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); + } + } ); return null; } diff --git a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js index 2ec1321e37c24..dbb5afc9ea4dc 100644 --- a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js @@ -19,32 +19,20 @@ function KeyboardShortcuts() { const { redo, undo } = useDispatch( coreStore ); const { saveEditedWidgetAreas } = useDispatch( editWidgetsStore ); - useShortcut( - 'core/edit-widgets/undo', - ( event ) => { - undo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/edit-widgets/undo', ( event ) => { + undo(); + event.preventDefault(); + } ); - useShortcut( - 'core/edit-widgets/redo', - ( event ) => { - redo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/edit-widgets/redo', ( event ) => { + redo(); + event.preventDefault(); + } ); - useShortcut( - 'core/edit-widgets/save', - ( event ) => { - event.preventDefault(); - saveEditedWidgetAreas(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/edit-widgets/save', ( event ) => { + event.preventDefault(); + saveEditedWidgetAreas(); + } ); return null; } diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js index 59d6973d57dd8..82dd998316019 100644 --- a/packages/edit-widgets/src/components/more-menu/index.js +++ b/packages/edit-widgets/src/components/more-menu/index.js @@ -25,10 +25,7 @@ export default function MoreMenu() { useShortcut( 'core/edit-widgets/keyboard-shortcuts', - toggleKeyboardShortcutsModal, - { - bindGlobal: true, - } + toggleKeyboardShortcutsModal ); const isLargeViewport = useViewportMatch( 'medium' ); diff --git a/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js b/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js index 8f18ad168e789..95069e7ea59ef 100644 --- a/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js +++ b/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js @@ -24,39 +24,32 @@ function SaveShortcut( { resetBlocksOnSave } ) { }; }, [] ); - useShortcut( - 'core/editor/save', - ( event ) => { - event.preventDefault(); - - // TODO: This should be handled in the `savePost` effect in - // considering `isSaveable`. See note on `isEditedPostSaveable` - // selector about dirtiness and meta-boxes. - // - // See: `isEditedPostSaveable` - if ( ! isEditedPostDirty() ) { - return; - } - - // The text editor requires that editor blocks are updated for a - // save to work correctly. Usually this happens when the textarea - // for the code editors blurs, but the shortcut can be used without - // blurring the textarea. - if ( resetBlocksOnSave ) { - const postEdits = getPostEdits(); - if ( - postEdits.content && - typeof postEdits.content === 'string' - ) { - const blocks = parse( postEdits.content ); - resetEditorBlocks( blocks ); - } + useShortcut( 'core/editor/save', ( event ) => { + event.preventDefault(); + + // TODO: This should be handled in the `savePost` effect in + // considering `isSaveable`. See note on `isEditedPostSaveable` + // selector about dirtiness and meta-boxes. + // + // See: `isEditedPostSaveable` + if ( ! isEditedPostDirty() ) { + return; + } + + // The text editor requires that editor blocks are updated for a + // save to work correctly. Usually this happens when the textarea + // for the code editors blurs, but the shortcut can be used without + // blurring the textarea. + if ( resetBlocksOnSave ) { + const postEdits = getPostEdits(); + if ( postEdits.content && typeof postEdits.content === 'string' ) { + const blocks = parse( postEdits.content ); + resetEditorBlocks( blocks ); } + } - savePost(); - }, - { bindGlobal: true } - ); + savePost(); + } ); return null; } diff --git a/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js index 1d406b54f4702..5e5875f275845 100644 --- a/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js +++ b/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js @@ -13,23 +13,15 @@ import { store as editorStore } from '../../store'; function VisualEditorGlobalKeyboardShortcuts() { const { redo, undo } = useDispatch( editorStore ); - useShortcut( - 'core/editor/undo', - ( event ) => { - undo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/editor/undo', ( event ) => { + undo(); + event.preventDefault(); + } ); - useShortcut( - 'core/editor/redo', - ( event ) => { - redo(); - event.preventDefault(); - }, - { bindGlobal: true } - ); + useShortcut( 'core/editor/redo', ( event ) => { + redo(); + event.preventDefault(); + } ); return ; } diff --git a/packages/interface/package.json b/packages/interface/package.json index 7880c08042ea6..d7a648c68c9d8 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -40,6 +40,7 @@ "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/plugins": "file:../plugins", "@wordpress/viewport": "file:../viewport", "classnames": "^2.3.1", diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 1f4c020dd7cf8..f4137f5978e7f 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -3,9 +3,6 @@ */ import classnames from 'classnames'; -/** - * WordPress dependencies - */ /** * WordPress dependencies */ @@ -40,6 +37,7 @@ function InterfaceSkeleton( actions, labels, className, + onKeyDown, shortcuts, }, ref @@ -68,6 +66,7 @@ function InterfaceSkeleton( const mergedLabels = { ...defaultLabels, ...labels }; return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ + if ( onKeyDown ) { + onKeyDown( event ); + } + + navigateRegionsProps.onKeyDown( event ); + } } > { !! drawer && (
{ - return select( - keyboardShortcutsStore - ).getAllShortcutRawKeyCombinations( name ); - }, - [ name ] - ); + const shortcuts = useContext( context ); + const isMatch = useShortcutEventMatch(); + const callbackRef = useRef(); + callbackRef.current = callback; + + useEffect( () => { + if ( options?.isDisabled ) { + return; + } + + function _callback( event ) { + if ( isMatch( name, event ) ) { + callbackRef.current( event ); + } + } - useKeyboardShortcut( shortcuts, callback, options ); + shortcuts.current.add( _callback ); + return () => { + shortcuts.current.delete( _callback ); + }; + }, [ name ] ); } export default useShortcut; diff --git a/packages/keyboard-shortcuts/src/index.js b/packages/keyboard-shortcuts/src/index.js index 26f2b004b6e04..d265bae87b0ee 100644 --- a/packages/keyboard-shortcuts/src/index.js +++ b/packages/keyboard-shortcuts/src/index.js @@ -1,3 +1,3 @@ export { store } from './store'; -export { default as useShortcut } from './hooks/use-shortcut'; +export { default as useShortcut, context } from './hooks/use-shortcut'; export { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match'; From 81dd5f89316e670a2954034b47ecff0d681a45d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 6 Sep 2021 12:20:26 +0300 Subject: [PATCH 02/13] Fix f# shortcut --- packages/interface/package.json | 13 ++++--------- packages/keyboard-shortcuts/README.md | 4 ++++ packages/keycodes/src/index.js | 4 ++-- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/interface/package.json b/packages/interface/package.json index d7a648c68c9d8..39414226cff54 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/interface", - "version": "4.0.1", + "version": "1.0.5", "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -19,9 +19,6 @@ "bugs": { "url": "https://github.com/WordPress/gutenberg/issues" }, - "engines": { - "node": ">=12" - }, "main": "build/index.js", "module": "build-module/index.js", "react-native": "src/index", @@ -31,8 +28,7 @@ "{src,build,build-module}/{index.js,store/index.js}" ], "dependencies": { - "@babel/runtime": "^7.13.10", - "@wordpress/a11y": "file:../a11y", + "@babel/runtime": "^7.12.5", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/data": "file:../data", @@ -40,11 +36,10 @@ "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", - "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/plugins": "file:../plugins", "@wordpress/viewport": "file:../viewport", - "classnames": "^2.3.1", - "lodash": "^4.17.21" + "classnames": "^2.2.5", + "lodash": "^4.17.19" }, "publishConfig": { "access": "public" diff --git a/packages/keyboard-shortcuts/README.md b/packages/keyboard-shortcuts/README.md index 9d62456b0f062..8ff30bef28451 100644 --- a/packages/keyboard-shortcuts/README.md +++ b/packages/keyboard-shortcuts/README.md @@ -16,6 +16,10 @@ _This package assumes that your code will run in an **ES2015+** environment. If +### context + +Undocumented declaration. + ### store Store definition for the keyboard shortcuts namespace. diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js index 6390a01f5e4db..c63c925d69891 100644 --- a/packages/keycodes/src/index.js +++ b/packages/keycodes/src/index.js @@ -332,7 +332,7 @@ export const isKeyboardEvent = mapValues( modifiers, ( getModifiers ) => { return includes( mods, key ); } - if ( event.altKey ) { + if ( event.altKey && character.length === 1 ) { key = String.fromCharCode( event.keyCode ).toLowerCase(); } @@ -341,6 +341,6 @@ export const isKeyboardEvent = mapValues( modifiers, ( getModifiers ) => { character = 'delete'; } - return key === character; + return key === character.toLowerCase(); }; } ); From ddb09bcb3c4bea5b8b16354ae8d44fbf07b9a750 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 6 Sep 2021 13:17:20 +0300 Subject: [PATCH 03/13] Add provider --- .../components/block-tools/block-popover.js | 6 +- .../src/components/customize-widgets/index.js | 28 +-- .../src/components/layout/index.js | 177 +++++++++--------- .../src/components/layout/shortcuts.js | 13 +- .../edit-post/src/components/layout/index.js | 20 +- packages/edit-post/src/editor.js | 49 ++--- .../edit-site/src/components/editor/index.js | 23 +-- .../components/keyboard-shortcuts/index.js | 11 +- .../index.js | 5 +- .../components/interface-skeleton/index.js | 25 +-- packages/keyboard-shortcuts/README.md | 3 +- .../src/hooks/use-shortcut.js | 38 +++- packages/keyboard-shortcuts/src/index.js | 2 +- 13 files changed, 194 insertions(+), 206 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js index 0b66de45f0286..cfc0fa0b02251 100644 --- a/packages/block-editor/src/components/block-tools/block-popover.js +++ b/packages/block-editor/src/components/block-tools/block-popover.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useState, useCallback, useRef, useEffect } from '@wordpress/element'; +import { useState, useRef, useEffect } from '@wordpress/element'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; import { Popover } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -107,10 +107,10 @@ function BlockPopover( { useShortcut( 'core/block-editor/focus-toolbar', - useCallback( () => { + () => { setIsToolbarForced( true ); stopTyping( true ); - }, [] ), + }, { isDisabled: ! canFocusHiddenToolbar, } diff --git a/packages/customize-widgets/src/components/customize-widgets/index.js b/packages/customize-widgets/src/components/customize-widgets/index.js index d206108398283..3306e438f80e9 100644 --- a/packages/customize-widgets/src/components/customize-widgets/index.js +++ b/packages/customize-widgets/src/components/customize-widgets/index.js @@ -3,6 +3,7 @@ */ import { useState, useEffect, useRef, createPortal } from '@wordpress/element'; import { SlotFillProvider, Popover } from '@wordpress/components'; +import { ShortcutProvider } from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -67,16 +68,21 @@ export default function CustomizeWidgets( { ); return ( - - - - { activeSidebar } - { popover } - - - + + + + + { activeSidebar } + { popover } + + + + ); } diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js index 92dd19040ea0c..7f44ac3ff4d6a 100644 --- a/packages/edit-navigation/src/components/layout/index.js +++ b/packages/edit-navigation/src/components/layout/index.js @@ -35,6 +35,7 @@ import Notices from '../notices'; import Editor from '../editor'; import UnsavedChangesWarning from './unsaved-changes-warning'; import { store as editNavigationStore } from '../../store'; +import { ShortcutProvider } from '../../../../keyboard-shortcuts/src'; const interfaceLabels = { /* translators: accessibility text for the navigation screen top bar landmark region. */ @@ -96,96 +97,100 @@ export default function Layout( { blockEditorSettings } ) { return ( -