Site Editor: Deprecate edited entity state (WordPress#66965)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

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

@@ -52,6 +52,8 @@ _Returns_
 
 ### getEditedPostId
 
+> **Deprecated**
+
 Returns the ID of the currently edited template or template part.
 
 _Parameters_
@@ -64,6 +66,8 @@ _Returns_
 
 ### getEditedPostType
 
+> **Deprecated**
+
 Returns the current edited post type (wp_template or wp_template_part).
 
 _Parameters_
@@ -189,6 +193,8 @@ _Returns_
 
 ### isPage
 
+> **Deprecated**
+
 Whether or not the editor has a page loaded into it.
 
 _Related_
@@ -273,6 +279,8 @@ _Parameters_
 
 ### setEditedEntity
 
+> **Deprecated**
+
 Action that sets an edited entity.
 
 _Parameters_
@@ -287,6 +295,8 @@ _Returns_
 
 ### setEditedPostContext
 
+> **Deprecated**
+
 Set's the current block editor context.
 
 _Parameters_
@@ -345,6 +355,8 @@ _Parameters_
 
 ### setNavigationMenu
 
+> **Deprecated**
+
 Action that sets a navigation menu.
 
 _Parameters_
@@ -385,6 +397,8 @@ _Returns_
 
 ### setTemplatePart
 
+> **Deprecated**
+
 Action that sets a template part.
 
 _Parameters_

packages/e2e-test-utils/src/site-editor.js

@@ -44,11 +44,11 @@ export async function disableSiteEditorWelcomeGuide() {
 export function getCurrentSiteEditorContent() {
 	return page.evaluate( () => {
 		const postId = window.wp.data
-			.select( 'core/edit-site' )
-			.getEditedPostId();
+			.select( 'core/editor' )
+			.getCurrentPostId();
 		const postType = window.wp.data
-			.select( 'core/edit-site' )
-			.getEditedPostType();
+			.select( 'core/editor' )
+			.getCurrentPostType();
 		const record = window.wp.data
 			.select( 'core' )
 			.getEditedEntityRecord( 'postType', postType, postId );

packages/edit-site/src/components/app/index.js

@@ -18,7 +18,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import useActiveRoute from '../layout/router';
 import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
@@ -27,8 +26,6 @@ const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function AppLayout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
 	useCommonCommands();
 	useSetCommandContext();
 	useRegisterSiteEditorRoutes();

packages/edit-site/src/components/block-editor/use-site-editor-settings.js

@@ -36,26 +36,21 @@ function useNavigateToPreviousEntityRecord() {
 	return goBack;
 }
 
-export function useSpecificEditorSettings() {
+export function useSpecificEditorSettings(
+	shouldUseTemplateAsDefaultRenderingMode
+) {
 	const { params } = useLocation();
 	const { canvas = 'view' } = params;
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { settings, shouldUseTemplateAsDefaultRenderingMode } = useSelect(
-		( select ) => {
-			const { getEditedPostContext, getSettings } = unlock(
-				select( editSiteStore )
-			);
-			const _context = getEditedPostContext();
-			return {
-				settings: getSettings(),
-				// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
-				// @see https://github.com/WordPress/gutenberg/pull/62304/
-				shouldUseTemplateAsDefaultRenderingMode:
-					_context?.postId && _context?.postType !== 'post',
-			};
-		},
-		[]
-	);
+	const { settings } = useSelect( ( select ) => {
+		const { getSettings } = select( editSiteStore );
+		return {
+			settings: getSettings(),
+		};
+	}, [] );
+
+	// TODO: The `shouldUseTemplateAsDefaultRenderingMode` check should be removed when the default rendering mode per post type is merged.
+	// @see https://github.com/WordPress/gutenberg/pull/62304/
 	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';

packages/edit-site/src/components/editor/index.js

@@ -50,6 +50,10 @@ import useEditorTitle from './use-editor-title';
 import { useIsSiteEditorLoading } from '../layout/hooks';
 import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import {
+	useResolveEditedEntity,
+	useSyncDeprecatedEntityIntoState,
+} from './use-resolve-edited-entity';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -85,38 +89,25 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	const { canvas = 'view' } = params;
 	const isLoading = useIsSiteEditorLoading();
 	useAdaptEditorToCanvas( canvas );
+	const entity = useResolveEditedEntity();
+	// deprecated sync state with url
+	useSyncDeprecatedEntityIntoState( entity );
+	const { postType, postId, context } = entity;
 	const {
-		editedPostType,
-		editedPostId,
-		contextPostType,
-		contextPostId,
-		isEditingPage,
 		supportsGlobalStyles,
 		showIconLabels,
 		editorCanvasView,
 		currentPostIsTrashed,
 		hasSiteIcon,
 	} = useSelect( ( select ) => {
-		const {
-			getEditorCanvasContainerView,
-			getEditedPostContext,
-			isPage,
-			getEditedPostType,
-			getEditedPostId,
-		} = unlock( select( editSiteStore ) );
+		const { getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
 		const { get } = select( preferencesStore );
 		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
-		const _context = getEditedPostContext();
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
 		return {
-			editedPostType: getEditedPostType(),
-			editedPostId: getEditedPostId(),
-			contextPostType: _context?.postId ? _context.postType : undefined,
-			contextPostId: _context?.postId ? _context.postId : undefined,
-			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			editorCanvasView: getEditorCanvasContainerView(),
@@ -126,10 +117,10 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
-	const postWithTemplate = !! contextPostId;
+	const postWithTemplate = !! context?.postId;
 	useEditorTitle(
-		postWithTemplate ? contextPostType : editedPostType,
-		postWithTemplate ? contextPostId : editedPostId
+		postWithTemplate ? context.postType : postType,
+		postWithTemplate ? context.postId : postId
 	);
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
@@ -140,7 +131,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		'edit-site-editor__loading-progress'
 	);
 
-	const settings = useSpecificEditorSettings();
+	const settings = useSpecificEditorSettings(
+		!! context?.postId && context?.postType !== 'post'
+	);
 	const styles = useMemo(
 		() => [
 			...settings.styles,
@@ -219,25 +212,21 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	return (
 		<>
 			<GlobalStylesRenderer
-				disableRootPadding={ editedPostType !== TEMPLATE_POST_TYPE }
+				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
 			/>
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && (
 				<WelcomeGuide
-					postType={
-						postWithTemplate ? contextPostType : editedPostType
-					}
+					postType={ postWithTemplate ? context.postType : postType }
 				/>
 			) }
 			{ isReady && (
 				<Editor
-					postType={
-						postWithTemplate ? contextPostType : editedPostType
-					}
-					postId={ postWithTemplate ? contextPostId : editedPostId }
-					templateId={ postWithTemplate ? editedPostId : undefined }
+					postType={ postWithTemplate ? context.postType : postType }
+					postId={ postWithTemplate ? context.postId : postId }
+					templateId={ postWithTemplate ? postId : undefined }
 					settings={ settings }
 					className={ clsx( 'edit-site-editor__editor-interface', {
 						'show-icon-labels': showIconLabels,
@@ -252,7 +241,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
-						! isEditingPage && <PluginTemplateSettingPanel.Slot />
+						! postWithTemplate && (
+							<PluginTemplateSettingPanel.Slot />
+						)
 					}
 				>
 					{ isEditMode && (

packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js → packages/edit-site/src/components/editor/use-resolve-edited-entity.js

@@ -5,7 +5,6 @@ import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -30,7 +29,9 @@ const postTypesWithoutParentTemplate = [
 
 const authorizedPostTypes = [ 'page', 'post' ];
 
-function useResolveEditedEntityAndContext( { postId, postType } ) {
+export function useResolveEditedEntity() {
+	const { params = {} } = useLocation();
+	const { postId, postType } = params;
 	const { hasLoadedAllDependencies, homepageId, postsPageId } = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreDataStore );
@@ -233,25 +234,17 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 	return { isReady: false };
 }
 
-export default function useInitEditedEntityFromURL() {
-	const { params = {} } = useLocation();
-	const { postType, postId, context, isReady } =
-		useResolveEditedEntityAndContext( params );
-
+export function useSyncDeprecatedEntityIntoState( {
+	postType,
+	postId,
+	context,
+	isReady,
+} ) {
 	const { setEditedEntity } = useDispatch( editSiteStore );
-	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	useEffect( () => {
 		if ( isReady ) {
-			resetZoomLevel();
 			setEditedEntity( postType, postId, context );
 		}
-	}, [
-		isReady,
-		postType,
-		postId,
-		context,
-		setEditedEntity,
-		resetZoomLevel,
-	] );
+	}, [ isReady, postType, postId, context, setEditedEntity ] );
 }

packages/edit-site/src/components/posts-app/index.js

@@ -10,7 +10,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
 import useActiveRoute from './router';
 import { unlock } from '../../lock-unlock';
@@ -19,8 +18,6 @@ const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function PostsLayout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
 	const route = useActiveRoute();
 	return <Layout route={ route } />;
 }

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

@@ -142,11 +142,16 @@ export const removeTemplate =
 /**
  * Action that sets a template part.
  *
+ * @deprecated
  * @param {string} templatePartId The template part ID.
  *
  * @return {Object} Action object.
  */
 export function setTemplatePart( templatePartId ) {
+	deprecated( "dispatch( 'core/edit-site' ).setTemplatePart", {
+		since: '6.8',
+	} );
+
 	return {
 		type: 'SET_EDITED_POST',
 		postType: TEMPLATE_PART_POST_TYPE,
@@ -157,11 +162,16 @@ export function setTemplatePart( templatePartId ) {
 /**
  * Action that sets a navigation menu.
  *
+ * @deprecated
  * @param {string} navigationMenuId The Navigation Menu Post ID.
  *
  * @return {Object} Action object.
  */
 export function setNavigationMenu( navigationMenuId ) {
+	deprecated( "dispatch( 'core/edit-site' ).setNavigationMenu", {
+		since: '6.8',
+	} );
+
 	return {
 		type: 'SET_EDITED_POST',
 		postType: NAVIGATION_POST_TYPE,
@@ -172,6 +182,7 @@ export function setNavigationMenu( navigationMenuId ) {
 /**
  * Action that sets an edited entity.
  *
+ * @deprecated
  * @param {string} postType The entity's post type.
  * @param {string} postId   The entity's ID.
  * @param {Object} context  The entity's context.
@@ -204,11 +215,15 @@ export function setHomeTemplateId() {
 /**
  * Set's the current block editor context.
  *
+ * @deprecated
  * @param {Object} context The context object.
  *
  * @return {Object} Action object.
  */
 export function setEditedPostContext( context ) {
+	deprecated( "dispatch( 'core/edit-site' ).setEditedPostContext", {
+		since: '6.8',
+	} );
 	return {
 		type: 'SET_EDITED_POST_CONTEXT',
 		context,