@wordpress/edit-post 7.13.0 → 7.14.0

package/src/hooks/commands/use-common-commands.js

@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	code,
+	cog,
+	drawerLeft,
+	drawerRight,
+	blockDefault,
+	keyboardClose,
+	desktop,
+	listView,
+} from '@wordpress/icons';
+import { useCommand } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+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,
+		setIsListViewOpened,
+	} = useDispatch( editPostStore );
+	const { openModal } = useDispatch( interfaceStore );
+	const { editorMode, activeSidebar, isListViewOpen } = useSelect(
+		( select ) => {
+			const { getEditorMode, isListViewOpened } = select( editPostStore );
+			return {
+				activeSidebar: select(
+					interfaceStore
+				).getActiveComplementaryArea( editPostStore.name ),
+				editorMode: getEditorMode(),
+				isListViewOpen: isListViewOpened(),
+			};
+		},
+		[]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+
+	useCommand( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-post/document' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-post/document' );
+			}
+		},
+	} );
+
+	useCommand( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-post/block' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-post/block' );
+			}
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-distraction-free',
+		label: __( 'Toggle distraction free' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'distractionFree' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-spotlight-mode',
+		label: __( 'Toggle spotlight mode' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'focusMode' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-fullscreen-mode',
+		label: __( 'Toggle fullscreen mode' ),
+		icon: desktop,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fullscreenMode' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-list-view',
+		label: __( 'Toggle list view' ),
+		icon: listView,
+		callback: ( { close } ) => {
+			setIsListViewOpened( ! isListViewOpen );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fixedToolbar' );
+			close();
+		},
+	} );
+
+	useCommand( {
+		name: 'core/toggle-code-editor',
+		label: __( 'Toggle code editor' ),
+		icon: code,
+		callback: ( { close } ) => {
+			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			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 );
+		},
+	} );
+}

package/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,

package/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

package/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,

package/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.

package/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, {} );

package/src/store/test/selectors.js

@@ -7,7 +7,6 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import {
-	isModalActive,
 	hasMetaBoxes,
 	isSavingMetaBoxes,
 	getActiveMetaBoxLocations,
@@ -18,32 +17,6 @@ import {
 } from '../selectors';
 
 describe( 'selectors', () => {
-	describe( 'isModalActive', () => {
-		it( 'returns true if the provided name matches the value in the preferences activeModal property', () => {
-			const state = {
-				activeModal: 'test-modal',
-			};
-
-			expect( isModalActive( state, 'test-modal' ) ).toBe( true );
-		} );
-
-		it( 'returns false if the provided name does not match the preferences activeModal property', () => {
-			const state = {
-				activeModal: 'something-else',
-			};
-
-			expect( isModalActive( state, 'test-modal' ) ).toBe( false );
-		} );
-
-		it( 'returns false if the preferences activeModal property is null', () => {
-			const state = {
-				activeModal: null,
-			};
-
-			expect( isModalActive( state, 'test-modal' ) ).toBe( false );
-		} );
-	} );
-
 	describe( 'isEditorPanelRemoved', () => {
 		it( 'should return false by default', () => {
 			const state = deepFreeze( {