[Command center]: Add preferences and keyboard shortcuts commands (WordPress#51862)

* [Command center]: Add preferences and keyboard shortcuts commands

* update labels

Author: ntsekouras

docs/reference-guides/data/data-core-edit-post.md

@@ -264,6 +264,8 @@ _Returns_
 
 ### isModalActive
 
+> **Deprecated** since WP 6.3 use `core/interface` store's selector with the same name instead.
+
 Returns true if a modal is active, or false otherwise.
 
 _Parameters_
@@ -336,6 +338,8 @@ Returns an action object signalling that the user closed the sidebar.
 
 ### closeModal
 
+> **Deprecated** since WP 6.3 use `core/interface` store's action with the same name instead.
+
 Returns an action object signalling that the user closed a modal.
 
 _Returns_
@@ -388,6 +392,8 @@ _Parameters_
 
 ### openModal
 
+> **Deprecated** since WP 6.3 use `core/interface` store's action with the same name instead.
+
 Returns an action object used in signalling that the user opened a modal.
 
 _Parameters_

packages/edit-post/src/components/header/preferences-menu-item/index.js

@@ -4,18 +4,19 @@
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../../store';
+import { PREFERENCES_MODAL_NAME } from '../../../components/preferences-modal';
 
 export default function PreferencesMenuItem() {
-	const { openModal } = useDispatch( editPostStore );
+	const { openModal } = useDispatch( interfaceStore );
 	return (
 		<MenuItem
 			onClick={ () => {
-				openModal( 'edit-post/preferences' );
+				openModal( PREFERENCES_MODAL_NAME );
 			} }
 		>
 			{ __( 'Preferences' ) }

packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js

@@ -14,16 +14,17 @@ import {
 } from '@wordpress/keyboard-shortcuts';
 import { withSelect, withDispatch, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import { textFormattingShortcuts } from './config';
 import Shortcut from './shortcut';
 import DynamicShortcut from './dynamic-shortcut';
-import { store as editPostStore } from '../../store';
 
-const MODAL_NAME = 'edit-post/keyboard-shortcut-help';
+export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
+	'edit-post/keyboard-shortcut-help';
 
 const ShortcutList = ( { shortcuts } ) => (
 	/*
@@ -141,14 +142,18 @@ export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
 
 export default compose( [
 	withSelect( ( select ) => ( {
-		isModalActive: select( editPostStore ).isModalActive( MODAL_NAME ),
+		isModalActive: select( interfaceStore ).isModalActive(
+			KEYBOARD_SHORTCUT_HELP_MODAL_NAME
+		),
 	} ) ),
 	withDispatch( ( dispatch, { isModalActive } ) => {
-		const { openModal, closeModal } = dispatch( editPostStore );
+		const { openModal, closeModal } = dispatch( interfaceStore );
 
 		return {
 			toggleModal: () =>
-				isModalActive ? closeModal() : openModal( MODAL_NAME ),
+				isModalActive
+					? closeModal()
+					: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME ),
 		};
 	} ),
 ] )( KeyboardShortcutHelpModal );

packages/edit-post/src/components/preferences-modal/index.js

@@ -18,6 +18,7 @@ import {
 	PreferencesModal,
 	PreferencesModalTabs,
 	PreferencesModalSection,
+	store as interfaceStore,
 } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -35,17 +36,18 @@ import MetaBoxesSection from './meta-boxes-section';
 import { store as editPostStore } from '../../store';
 import BlockManager from '../block-manager';
 
-const MODAL_NAME = 'edit-post/preferences';
+export const PREFERENCES_MODAL_NAME = 'edit-post/preferences';
 
 export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { closeModal } = useDispatch( editPostStore );
+	const { closeModal } = useDispatch( interfaceStore );
 	const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
 			const { getEditorMode, isFeatureActive } = select( editPostStore );
-			const modalActive =
-				select( editPostStore ).isModalActive( MODAL_NAME );
+			const modalActive = select( interfaceStore ).isModalActive(
+				PREFERENCES_MODAL_NAME
+			);
 			const mode = getEditorMode();
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
 			const isDistractionFreeEnabled =

packages/edit-post/src/hooks/commands/use-common-commands.js

@@ -9,6 +9,7 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
+	keyboardClose,
 } from '@wordpress/icons';
 import { useCommand } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -17,11 +18,14 @@ import { store as interfaceStore } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
+import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { store as editPostStore } from '../../store';
 
 export default function useCommonCommands() {
 	const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
 		useDispatch( editPostStore );
+	const { openModal } = useDispatch( interfaceStore );
 	const { editorMode, activeSidebar } = useSelect(
 		( select ) => ( {
 			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
@@ -100,4 +104,22 @@ export default function useCommonCommands() {
 			close();
 		},
 	} );
+
+	useCommand( {
+		name: 'core/open-preferences',
+		label: __( 'Open editor preferences' ),
+		icon: cog,
+		callback: () => {
+			openModal( PREFERENCES_MODAL_NAME );
+		},
+	} );
+
+	useCommand( {
+		name: 'core/open-shortcut-help',
+		label: __( 'Open keyboard shortcuts' ),
+		icon: keyboardClose,
+		callback: () => {
+			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+		},
+	} );
 }

packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js

@@ -5,17 +5,18 @@ import { MenuItem } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../store';
+import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
 
 export function KeyboardShortcutsHelpMenuItem( { openModal } ) {
 	return (
 		<MenuItem
 			onClick={ () => {
-				openModal( 'edit-post/keyboard-shortcut-help' );
+				openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
 			} }
 			shortcut={ displayShortcut.access( 'h' ) }
 		>
@@ -25,7 +26,7 @@ export function KeyboardShortcutsHelpMenuItem( { openModal } ) {
 }
 
 export default withDispatch( ( dispatch ) => {
-	const { openModal } = dispatch( editPostStore );
+	const { openModal } = dispatch( interfaceStore );
 
 	return {
 		openModal,

packages/edit-post/src/store/actions.js

@@ -10,6 +10,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -42,27 +43,39 @@ export const closeGeneralSidebar =
 /**
  * Returns an action object used in signalling that the user opened a modal.
  *
+ * @deprecated since WP 6.3 use `core/interface` store's action with the same name instead.
+ *
+ *
  * @param {string} name A string that uniquely identifies the modal.
  *
  * @return {Object} Action object.
  */
-export function openModal( name ) {
-	return {
-		type: 'OPEN_MODAL',
-		name,
+export const openModal =
+	( name ) =>
+	( { registry } ) => {
+		deprecated( "select( 'core/edit-post' ).openModal( name )", {
+			since: '6.3',
+			alternative: "select( 'core/interface').openModal( name )",
+		} );
+		return registry.dispatch( interfaceStore ).openModal( name );
 	};
-}
 
 /**
  * Returns an action object signalling that the user closed a modal.
  *
+ * @deprecated since WP 6.3 use `core/interface` store's action with the same name instead.
+ *
  * @return {Object} Action object.
  */
-export function closeModal() {
-	return {
-		type: 'CLOSE_MODAL',
+export const closeModal =
+	() =>
+	( { registry } ) => {
+		deprecated( "select( 'core/edit-post' ).closeModal()", {
+			since: '6.3',
+			alternative: "select( 'core/interface').closeModal()",
+		} );
+		return registry.dispatch( interfaceStore ).closeModal();
 	};
-}
 
 /**
  * Returns an action object used in signalling that the user opened the publish

packages/edit-post/src/store/reducer.js

@@ -22,25 +22,6 @@ export function removedPanels( state = [], action ) {
 	return state;
 }
 
-/**
- * Reducer for storing the name of the open modal, or null if no modal is open.
- *
- * @param {Object} state  Previous state.
- * @param {Object} action Action object containing the `name` of the modal
- *
- * @return {Object} Updated state
- */
-export function activeModal( state = null, action ) {
-	switch ( action.type ) {
-		case 'OPEN_MODAL':
-			return action.name;
-		case 'CLOSE_MODAL':
-			return null;
-	}
-
-	return state;
-}
-
 export function publishSidebarActive( state = false, action ) {
 	switch ( action.type ) {
 		case 'OPEN_PUBLISH_SIDEBAR':
@@ -209,7 +190,6 @@ const metaBoxes = combineReducers( {
 } );
 
 export default combineReducers( {
-	activeModal,
 	metaBoxes,
 	publishSidebarActive,
 	removedPanels,

packages/edit-post/src/store/selectors.js

@@ -298,14 +298,22 @@ export const isEditorPanelOpened = createRegistrySelector(
 /**
  * Returns true if a modal is active, or false otherwise.
  *
+ * @deprecated since WP 6.3 use `core/interface` store's selector with the same name instead.
+ *
  * @param {Object} state     Global application state.
  * @param {string} modalName A string that uniquely identifies the modal.
  *
  * @return {boolean} Whether the modal is active.
  */
-export function isModalActive( state, modalName ) {
-	return state.activeModal === modalName;
-}
+export const isModalActive = createRegistrySelector(
+	( select ) => ( state, modalName ) => {
+		deprecated( `select( 'core/edit-post' ).isModalActive`, {
+			since: '6.3',
+			alternative: `select( 'core/interface' ).isModalActive`,
+		} );
+		return !! select( interfaceStore ).isModalActive( modalName );
+	}
+);
 
 /**
  * Returns whether the given feature is enabled or not.

packages/edit-post/src/store/test/reducer.js

@@ -7,7 +7,6 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import {
-	activeModal,
 	isSavingMetaBoxes,
 	metaBoxLocations,
 	removedPanels,
@@ -18,30 +17,6 @@ import {
 import { setIsInserterOpened, setIsListViewOpened } from '../actions';
 
 describe( 'state', () => {
-	describe( 'activeModal', () => {
-		it( 'should default to null', () => {
-			const state = activeModal( undefined, {} );
-			expect( state ).toBeNull();
-		} );
-
-		it( 'should set the activeModal to the provided name', () => {
-			const state = activeModal( null, {
-				type: 'OPEN_MODAL',
-				name: 'test-modal',
-			} );
-
-			expect( state ).toEqual( 'test-modal' );
-		} );
-
-		it( 'should set the activeModal to null', () => {
-			const state = activeModal( 'test-modal', {
-				type: 'CLOSE_MODAL',
-			} );
-
-			expect( state ).toBeNull();
-		} );
-	} );
-
 	describe( 'isSavingMetaBoxes', () => {
 		it( 'should return default state', () => {
 			const actual = isSavingMetaBoxes( undefined, {} );