@@ -24,7 +24,7 @@ const SidebarHeader = ( { children, className, closeLabel, closeSidebar, title }
{ title || __( '(no title)' ) }
@@ -32,21 +32,14 @@ const SidebarHeader = ( { children, className, closeLabel, closeSidebar, title }
{ children }
);
};
-export default compose(
- withSelect( ( select ) => ( {
- title: select( 'core/editor' ).getEditedPostAttribute( 'title' ),
- } ) ),
- withDispatch( ( dispatch ) => ( {
- closeSidebar: dispatch( 'core/edit-post' ).closeGeneralSidebar,
- } ) ),
-)( SidebarHeader );
+export default SidebarHeader;
diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
index bc2f4d000cb16..524aa99c6bc8f 100644
--- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js
+++ b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
@@ -1,29 +1,26 @@
/**
* External dependencies
*/
-import { flow, noop } from 'lodash';
+import { noop } from 'lodash';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItem, withSpokenMessages } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import shortcuts from '../../keyboard-shortcuts';
+import { useSelect, useDispatch } from '@wordpress/data';
export function BlockInspectorButton( {
- areAdvancedSettingsOpened,
- closeSidebar,
- openEditorSidebar,
onClick = noop,
small = false,
speak,
} ) {
+ const { shortcut, areAdvancedSettingsOpened } = useSelect( ( select ) => ( {
+ shortcut: select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+ areAdvancedSettingsOpened: select( 'core/edit-post' ).getActiveGeneralSidebarName() === 'edit-post/block',
+ } ), [] );
+ const { openGeneralSidebar, closeGeneralSidebar } = useDispatch( 'core/edit-post' );
+
const speakMessage = () => {
if ( areAdvancedSettingsOpened ) {
speak( __( 'Block settings closed' ) );
@@ -37,22 +34,21 @@ export function BlockInspectorButton( {
return (
);
}
-export default compose(
- withSelect( ( select ) => ( {
- areAdvancedSettingsOpened: select( 'core/edit-post' ).getActiveGeneralSidebarName() === 'edit-post/block',
- } ) ),
- withDispatch( ( dispatch ) => ( {
- openEditorSidebar: () => dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' ),
- closeSidebar: dispatch( 'core/edit-post' ).closeGeneralSidebar,
- } ) ),
- withSpokenMessages,
-)( BlockInspectorButton );
+export default withSpokenMessages( BlockInspectorButton );
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index c0f956a677b6d..fa3f9baec5d55 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -4,6 +4,7 @@
import '@wordpress/core-data';
import '@wordpress/block-editor';
import '@wordpress/editor';
+import '@wordpress/keyboard-shortcuts';
import '@wordpress/viewport';
import '@wordpress/notices';
import { registerCoreBlocks, __experimentalRegisterExperimentalCoreBlocks } from '@wordpress/block-library';
diff --git a/packages/edit-post/src/keyboard-shortcuts.js b/packages/edit-post/src/keyboard-shortcuts.js
deleted file mode 100644
index 0f119a7edf3f6..0000000000000
--- a/packages/edit-post/src/keyboard-shortcuts.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { rawShortcut, displayShortcut, shortcutAriaLabel } from '@wordpress/keycodes';
-
-export default {
- toggleEditorMode: {
- raw: rawShortcut.secondary( 'm' ),
- display: displayShortcut.secondary( 'm' ),
- },
- toggleSidebar: {
- raw: rawShortcut.primaryShift( ',' ),
- display: displayShortcut.primaryShift( ',' ),
- ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
- },
-};
diff --git a/packages/keyboard-shortcuts/src/store/selectors.js b/packages/keyboard-shortcuts/src/store/selectors.js
index 97228e1ad6e9d..9951ad7b753c9 100644
--- a/packages/keyboard-shortcuts/src/store/selectors.js
+++ b/packages/keyboard-shortcuts/src/store/selectors.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { displayShortcut, shortcutAriaLabel, rawShortcut } from '@wordpress/keycodes';
+
/** @typedef {import('./actions').WPShortcutKeyCombination} WPShortcutKeyCombination */
/**
@@ -20,6 +25,32 @@ export function getShortcutKeyCombination( state, name ) {
return state[ name ] ? state[ name ].keyCombination : null;
}
+/**
+ * Returns a string representing the main key combination for a given shortcut name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name Shortcut name.
+ * @param {string} representation Type of reprensentation. (display, raw, ariaLabel )
+ *
+ * @return {string} Shortcut representation.
+ */
+export function getShortcutRepresentation( state, name, representation = 'display' ) {
+ const shortcut = getShortcutKeyCombination( state, name );
+ if ( ! shortcut ) {
+ return null;
+ }
+
+ const formattingMethods = {
+ display: displayShortcut,
+ raw: rawShortcut,
+ ariaLabel: shortcutAriaLabel,
+ };
+
+ return shortcut.modifier ?
+ formattingMethods[ representation ][ shortcut.modifier ]( shortcut.character ) :
+ shortcut.character;
+}
+
/**
* Returns the shortcut description given its name.
*