@wordpress/edit-post 7.31.0 → 7.33.0

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

@@ -7,35 +7,37 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	keyboard,
 	fullscreen,
 	formatListBullets,
 } from '@wordpress/icons';
 import { useCommand } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * 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';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function useCommonCommands() {
 	const { openGeneralSidebar, closeGeneralSidebar } =
 		useDispatch( editPostStore );
-	const { openModal } = useDispatch( interfaceStore );
 	const { activeSidebar, isFullscreen, isPublishSidebarEnabled } = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
 
 			return {
-				activeSidebar: select(
-					interfaceStore
-				).getActiveComplementaryArea( editPostStore.name ),
+				activeSidebar:
+					select( interfaceStore ).getActiveComplementaryArea(
+						'core'
+					),
 				isPublishSidebarEnabled:
 					select( editorStore ).isPublishSidebarEnabled(),
 				isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
@@ -101,23 +103,6 @@ export default function useCommonCommands() {
 		},
 	} );
 
-	useCommand( {
-		name: 'core/open-preferences',
-		label: __( 'Editor preferences' ),
-		callback: () => {
-			openModal( PREFERENCES_MODAL_NAME );
-		},
-	} );
-
-	useCommand( {
-		name: 'core/open-shortcut-help',
-		label: __( 'Keyboard shortcuts' ),
-		icon: keyboard,
-		callback: () => {
-			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
-		},
-	} );
-
 	useCommand( {
 		name: 'core/toggle-publish-sidebar',
 		label: isPublishSidebarEnabled
@@ -126,13 +111,13 @@ export default function useCommonCommands() {
 		icon: formatListBullets,
 		callback: ( { close } ) => {
 			close();
-			toggle( 'core/edit-post', 'isPublishSidebarEnabled' );
+			toggle( 'core', 'isPublishSidebarEnabled' );
 			createInfoNotice(
 				isPublishSidebarEnabled
 					? __( 'Pre-publish checks disabled.' )
 					: __( 'Pre-publish checks enabled.' ),
 				{
-					id: 'core/edit-post/publish-sidebar/notice',
+					id: 'core/editor/publish-sidebar/notice',
 					type: 'snackbar',
 				}
 			);

package/src/hooks/use-navigate-to-entity-record.js

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useReducer, useMemo } from '@wordpress/element';
+import { useCallback, useReducer } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * A hook that records the 'entity' history in the post editor as a user
@@ -11,20 +13,22 @@ import { useCallback, useReducer, useMemo } from '@wordpress/element';
  *
  * Used to control displaying UI elements like the back button.
  *
- * @param {number} initialPostId   The post id of the post when the editor loaded.
- * @param {string} initialPostType The post type of the post when the editor loaded.
+ * @param {number} initialPostId        The post id of the post when the editor loaded.
+ * @param {string} initialPostType      The post type of the post when the editor loaded.
+ * @param {string} defaultRenderingMode The rendering mode to switch to when navigating.
  *
  * @return {Object} An object containing the `currentPost` variable and
  *                 `onNavigateToEntityRecord` and `onNavigateToPreviousEntityRecord` functions.
  */
 export default function useNavigateToEntityRecord(
 	initialPostId,
-	initialPostType
+	initialPostType,
+	defaultRenderingMode
 ) {
 	const [ postHistory, dispatch ] = useReducer(
-		( historyState, { type, post } ) => {
+		( historyState, { type, post, previousRenderingMode } ) => {
 			if ( type === 'push' ) {
-				return [ ...historyState, post ];
+				return [ ...historyState, { post, previousRenderingMode } ];
 			}
 			if ( type === 'pop' ) {
 				// Try to leave one item in the history.
@@ -34,32 +38,41 @@ export default function useNavigateToEntityRecord(
 			}
 			return historyState;
 		},
-		[ { postId: initialPostId, postType: initialPostType } ]
+		[
+			{
+				post: { postId: initialPostId, postType: initialPostType },
+			},
+		]
 	);
 
-	const initialPost = useMemo( () => {
-		return {
-			type: initialPostType,
-			id: initialPostId,
-		};
-	}, [ initialPostType, initialPostId ] );
+	const { post, previousRenderingMode } =
+		postHistory[ postHistory.length - 1 ];
 
-	const onNavigateToEntityRecord = useCallback( ( params ) => {
-		dispatch( {
-			type: 'push',
-			post: { postId: params.postId, postType: params.postType },
-		} );
-	}, [] );
+	const { getRenderingMode } = useSelect( editorStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	const onNavigateToEntityRecord = useCallback(
+		( params ) => {
+			dispatch( {
+				type: 'push',
+				post: { postId: params.postId, postType: params.postType },
+				// Save the current rendering mode so we can restore it when navigating back.
+				previousRenderingMode: getRenderingMode(),
+			} );
+			setRenderingMode( defaultRenderingMode );
+		},
+		[ getRenderingMode, setRenderingMode, defaultRenderingMode ]
+	);
 
 	const onNavigateToPreviousEntityRecord = useCallback( () => {
 		dispatch( { type: 'pop' } );
-	}, [] );
-
-	const currentPost = postHistory[ postHistory.length - 1 ];
+		if ( previousRenderingMode ) {
+			setRenderingMode( previousRenderingMode );
+		}
+	}, [ setRenderingMode, previousRenderingMode ] );
 
 	return {
-		currentPost,
-		initialPost,
+		currentPost: post,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord:
 			postHistory.length > 1

package/src/index.js

@@ -15,7 +15,12 @@ import {
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
 import {
+	PluginBlockSettingsMenuItem,
 	PluginDocumentSettingPanel,
+	PluginMoreMenuItem,
+	PluginPostStatusInfo,
+	PluginSidebar,
+	PluginSidebarMoreMenuItem,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
@@ -55,7 +60,6 @@ export function initializeEditor(
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
 		fullscreenMode: true,
-		isPublishSidebarEnabled: true,
 		themeStyles: true,
 		welcomeGuide: true,
 		welcomeGuideTemplate: true,
@@ -71,6 +75,7 @@ export function initializeEditor(
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		showListViewByDefault: false,
+		isPublishSidebarEnabled: true,
 	} );
 
 	dispatch( blocksStore ).reapplyBlockTypeFilters();
@@ -161,14 +166,14 @@ export function reinitializeEditor() {
 	} );
 }
 
-export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item';
+export { PluginBlockSettingsMenuItem };
 export { PluginDocumentSettingPanel };
-export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
+export { PluginMoreMenuItem };
+export { PluginPostStatusInfo };
+export { PluginSidebar };
+export { PluginSidebarMoreMenuItem };
 export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
-export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';
 export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';
-export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
-export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
 export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
 export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
 export { __experimentalPluginPostExcerpt };

package/src/index.native.js

@@ -25,7 +25,6 @@ export function initializeEditor( id, postType, postId ) {
 		editorMode: 'visual',
 		fullscreenMode: true,
 		inactivePanels: [],
-		isPublishSidebarEnabled: true,
 		openPanels: [ 'post-status' ],
 		welcomeGuide: true,
 	} );
@@ -33,9 +32,7 @@ export function initializeEditor( id, postType, postId ) {
 		hiddenBlockTypes: [],
 		inactivePanels: [],
 		openPanels: [ 'post-status' ],
-	} );
-
-	dispatch( preferencesStore ).setDefaults( 'core', {
+		isPublishSidebarEnabled: true,
 		fixedToolbar: false,
 	} );
 

package/src/plugins/keyboard-shortcuts-help-menu-item/index.js

@@ -5,18 +5,20 @@ 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';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export function KeyboardShortcutsHelpMenuItem( { openModal } ) {
 	return (
 		<MenuItem
 			onClick={ () => {
-				openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+				openModal( 'editor/keyboard-shortcut-help' );
 			} }
 			shortcut={ displayShortcut.access( 'h' ) }
 		>

package/src/store/actions.js

@@ -2,9 +2,11 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
 import { addFilter } from '@wordpress/hooks';
 
@@ -12,9 +14,10 @@ import { addFilter } from '@wordpress/hooks';
  * Internal dependencies
  */
 import { getMetaBoxContainer } from '../utils/meta-boxes';
-import { store as editPostStore } from '.';
 import { unlock } from '../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
+
 /**
  * Returns an action object used in signalling that the user opened an editor sidebar.
  *
@@ -25,7 +28,7 @@ export const openGeneralSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( interfaceStore )
-			.enableComplementaryArea( editPostStore.name, name );
+			.enableComplementaryArea( 'core', name );
 	};
 
 /**
@@ -34,9 +37,7 @@ export const openGeneralSidebar =
 export const closeGeneralSidebar =
 	() =>
 	( { registry } ) =>
-		registry
-			.dispatch( interfaceStore )
-			.disableComplementaryArea( editPostStore.name );
+		registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' );
 
 /**
  * Returns an action object used in signalling that the user opened a modal.
@@ -78,37 +79,52 @@ export const closeModal =
 /**
  * Returns an action object used in signalling that the user opened the publish
  * sidebar.
+ * @deprecated
  *
  * @return {Object} Action object
  */
-export function openPublishSidebar() {
-	return {
-		type: 'OPEN_PUBLISH_SIDEBAR',
+export const openPublishSidebar =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).openPublishSidebar", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').openPublishSidebar",
+		} );
+		registry.dispatch( editorStore ).openPublishSidebar();
 	};
-}
 
 /**
  * Returns an action object used in signalling that the user closed the
  * publish sidebar.
+ * @deprecated
  *
  * @return {Object} Action object.
  */
-export function closePublishSidebar() {
-	return {
-		type: 'CLOSE_PUBLISH_SIDEBAR',
+export const closePublishSidebar =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).closePublishSidebar", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').closePublishSidebar",
+		} );
+		registry.dispatch( editorStore ).closePublishSidebar();
 	};
-}
 
 /**
  * Returns an action object used in signalling that the user toggles the publish sidebar.
+ * @deprecated
  *
  * @return {Object} Action object
  */
-export function togglePublishSidebar() {
-	return {
-		type: 'TOGGLE_PUBLISH_SIDEBAR',
+export const togglePublishSidebar =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).togglePublishSidebar", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').togglePublishSidebar",
+		} );
+		registry.dispatch( editorStore ).togglePublishSidebar();
 	};
-}
 
 /**
  * Returns an action object used to enable or disable a panel in the editor.
@@ -204,14 +220,11 @@ export const togglePinnedPluginItem =
 	( { registry } ) => {
 		const isPinned = registry
 			.select( interfaceStore )
-			.isItemPinned( 'core/edit-post', pluginName );
+			.isItemPinned( 'core', pluginName );
 
 		registry
 			.dispatch( interfaceStore )
-			[ isPinned ? 'unpinItem' : 'pinItem' ](
-				'core/edit-post',
-				pluginName
-			);
+			[ isPinned ? 'unpinItem' : 'pinItem' ]( 'core', pluginName );
 	};
 
 /**

package/src/store/reducer.js

@@ -3,18 +3,6 @@
  */
 import { combineReducers } from '@wordpress/data';
 
-export function publishSidebarActive( state = false, action ) {
-	switch ( action.type ) {
-		case 'OPEN_PUBLISH_SIDEBAR':
-			return true;
-		case 'CLOSE_PUBLISH_SIDEBAR':
-			return false;
-		case 'TOGGLE_PUBLISH_SIDEBAR':
-			return ! state;
-	}
-	return state;
-}
-
 /**
  * Reducer keeping track of the meta boxes isSaving state.
  * A "true" value means the meta boxes saving request is in-flight.
@@ -103,5 +91,4 @@ const metaBoxes = combineReducers( {
 
 export default combineReducers( {
 	metaBoxes,
-	publishSidebarActive,
 } );

package/src/store/selectors.js

@@ -1,16 +1,13 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -18,6 +15,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { unlock } from '../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
 
@@ -43,9 +41,7 @@ export const getEditorMode = createRegistrySelector(
 export const isEditorSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar =
-			select( interfaceStore ).getActiveComplementaryArea(
-				'core/edit-post'
-			);
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 		return [ 'edit-post/document', 'edit-post/block' ].includes(
 			activeGeneralSidebar
 		);
@@ -62,9 +58,7 @@ export const isEditorSidebarOpened = createRegistrySelector(
 export const isPluginSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar =
-			select( interfaceStore ).getActiveComplementaryArea(
-				'core/edit-post'
-			);
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 		return (
 			!! activeGeneralSidebar &&
 			! [ 'edit-post/document', 'edit-post/block' ].includes(
@@ -90,9 +84,7 @@ export const isPluginSidebarOpened = createRegistrySelector(
  */
 export const getActiveGeneralSidebarName = createRegistrySelector(
 	( select ) => () => {
-		return select( interfaceStore ).getActiveComplementaryArea(
-			'core/edit-post'
-		);
+		return select( interfaceStore ).getActiveComplementaryArea( 'core' );
 	}
 );
 
@@ -228,13 +220,21 @@ export const getHiddenBlockTypes = createRegistrySelector( ( select ) => () => {
 /**
  * Returns true if the publish sidebar is opened.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state
  *
  * @return {boolean} Whether the publish sidebar is open.
  */
-export function isPublishSidebarOpened( state ) {
-	return state.publishSidebarActive;
-}
+export const isPublishSidebarOpened = createRegistrySelector(
+	( select ) => () => {
+		deprecated( `select( 'core/edit-post' ).isPublishSidebarOpened`, {
+			since: '6.6',
+			alternative: `select( 'core/editor' ).isPublishSidebarOpened`,
+		} );
+		return select( editorStore ).isPublishSidebarOpened();
+	}
+);
 
 /**
  * Returns true if the given panel was programmatically removed, or false otherwise.
@@ -344,10 +344,7 @@ export const isFeatureActive = createRegistrySelector(
  */
 export const isPluginItemPinned = createRegistrySelector(
 	( select ) => ( state, pluginName ) => {
-		return select( interfaceStore ).isItemPinned(
-			'core/edit-post',
-			pluginName
-		);
+		return select( interfaceStore ).isItemPinned( 'core', pluginName );
 	}
 );
 
@@ -559,36 +556,55 @@ export function areMetaBoxesInitialized( state ) {
  */
 export const getEditedPostTemplate = createRegistrySelector(
 	( select ) => () => {
+		const {
+			id: postId,
+			type: postType,
+			slug,
+		} = select( editorStore ).getCurrentPost();
+		const { getSite, getEditedEntityRecord, getEntityRecords } =
+			select( coreStore );
+		const siteSettings = getSite();
+		// First check if the current page is set as the posts page.
+		const isPostsPage = +postId === siteSettings?.page_for_posts;
+		if ( isPostsPage ) {
+			const defaultTemplateId = select( coreStore ).getDefaultTemplateId(
+				{ slug: 'home' }
+			);
+			return getEditedEntityRecord(
+				'postType',
+				'wp_template',
+				defaultTemplateId
+			);
+		}
 		const currentTemplate =
 			select( editorStore ).getEditedPostAttribute( 'template' );
 		if ( currentTemplate ) {
-			const templateWithSameSlug = select( coreStore )
-				.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
-				?.find( ( template ) => template.slug === currentTemplate );
+			const templateWithSameSlug = getEntityRecords(
+				'postType',
+				'wp_template',
+				{ per_page: -1 }
+			)?.find( ( template ) => template.slug === currentTemplate );
 			if ( ! templateWithSameSlug ) {
 				return templateWithSameSlug;
 			}
-			return select( coreStore ).getEditedEntityRecord(
+			return getEditedEntityRecord(
 				'postType',
 				'wp_template',
 				templateWithSameSlug.id
 			);
 		}
-
-		const post = select( editorStore ).getCurrentPost();
 		let slugToCheck;
 		// In `draft` status we might not have a slug available, so we use the `single`
 		// post type templates slug(ex page, single-post, single-product etc..).
 		// Pages do not need the `single` prefix in the slug to be prioritized
 		// through template hierarchy.
-		if ( post.slug ) {
+		if ( slug ) {
 			slugToCheck =
-				post.type === 'page'
-					? `${ post.type }-${ post.slug }`
-					: `single-${ post.type }-${ post.slug }`;
+				postType === 'page'
+					? `${ postType }-${ slug }`
+					: `single-${ postType }-${ slug }`;
 		} else {
-			slugToCheck =
-				post.type === 'page' ? 'page' : `single-${ post.type }`;
+			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
 		}
 		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
 			slug: slugToCheck,

package/src/store/test/actions.js

@@ -2,17 +2,22 @@
  * WordPress dependencies
  */
 import { createRegistry } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 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 {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '..';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 function createRegistryWithStores() {
 	// Create a registry and register used stores.
@@ -40,7 +45,7 @@ describe( 'actions', () => {
 		expect(
 			registry
 				.select( interfaceStore )
-				.getActiveComplementaryArea( 'core/edit-post' )
+				.getActiveComplementaryArea( 'core' )
 		).toBe( 'test/sidebar' );
 
 		registry
@@ -49,7 +54,7 @@ describe( 'actions', () => {
 		expect(
 			registry
 				.select( interfaceStore )
-				.getActiveComplementaryArea( 'core/edit-post' )
+				.getActiveComplementaryArea( 'core' )
 		).toBeNull();
 	} );
 
@@ -74,15 +79,11 @@ describe( 'actions', () => {
 		// Sidebars are pinned by default.
 		// @See https://github.com/WordPress/gutenberg/pull/21645
 		expect(
-			registry
-				.select( interfaceStore )
-				.isItemPinned( editPostStore.name, 'rigatoni' )
+			registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' )
 		).toBe( false );
 		registry.dispatch( editPostStore ).togglePinnedPluginItem( 'rigatoni' );
 		expect(
-			registry
-				.select( interfaceStore )
-				.isItemPinned( editPostStore.name, 'rigatoni' )
+			registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' )
 		).toBe( true );
 	} );