Synchronize the sidebar state in the url

WordPress · Dec 12, 2022 · 87166aa · 87166aa
1 parent 13f8ae4
commit 87166aa
Show file tree

Hide file tree

Showing 13 changed files with 183 additions and 190 deletions.
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
@@ -34,6 +34,20 @@ _Returns_
 
 -   `Array`: Template parts and their blocks in an array.
 
+### getEditedPostContext
+
+> **Deprecated**
+
+Returns the edited post's context object.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `Object`: Page.
+
 ### getEditedPostId
 
 Returns the ID of the currently edited template or template part.
@@ -72,22 +86,16 @@ _Returns_
 
 ### getHomeTemplateId
 
-Returns the current home template ID.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `number?`: Home template ID.
+> **Deprecated**
 
 ### getNavigationPanelActiveMenu
 
 > **Deprecated**
 
 ### getPage
 
+> **Deprecated**
+
 Returns the current page object.
 
 _Parameters_
@@ -230,14 +238,21 @@ _Parameters_
 -   _options_ `[Object]`:
 -   _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true.
 
-### setHomeTemplateId
+### setEditedPostContext
 
-Action that sets the home template ID to the template ID of the page resolved
-from a given path.
+Set's the current block editor context.
 
 _Parameters_
 
--   _homeTemplateId_ `number`: The template ID for the homepage.
+-   _context_ `Object`: The context object.
+
+_Returns_
+
+-   `number`: The resolved template ID for the page route.
+
+### setHomeTemplateId
+
+> **Deprecated**
 
 ### setIsInserterOpened
 

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -56,19 +56,14 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { storedSettings, templateType, page, canvasMode } = useSelect(
+	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				getEditedPostType,
-				getPage,
-				__unstableGetCanvasMode,
-			} = select( editSiteStore );
+			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
+				select( editSiteStore );
 
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
-				page: getPage(),
 				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
@@ -200,11 +195,10 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					( fillProps ) => (
 						<NavigateToLink
 							{ ...fillProps }
-							activePage={ page }
 							onActivePageChange={ setPage }
 						/>
 					),
-					[ page ]
+					[]
 				) }
 			</__experimentalLinkControl.ViewerFill>
 			<SidebarInspectorFill>

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -31,7 +31,7 @@ import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import useInitEditedEntityFromURL from '../use-init-edited-entity-from-url';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
@@ -59,7 +59,7 @@ export default function Editor() {
 		editedPostId,
 		editedPostType,
 		editedPost,
-		page,
+		context,
 		hasLoadedPost,
 		editorMode,
 		canvasMode,
@@ -75,7 +75,7 @@ export default function Editor() {
 		const {
 			getEditedPostType,
 			getEditedPostId,
-			getPage,
+			getEditedPostContext,
 			getEditorMode,
 			__unstableGetCanvasMode,
 			isInserterOpened,
@@ -99,7 +99,7 @@ export default function Editor() {
 			editedPost: postId
 				? getEntityRecord( 'postType', postType, postId )
 				: null,
-			page: getPage(),
+			context: getEditedPostContext(),
 			hasLoadedPost: postId
 				? hasFinishedResolution( 'getEntityRecord', [
 						'postType',
@@ -128,7 +128,8 @@ export default function Editor() {
 			),
 		};
 	}, [] );
-	const { setIsSaveViewOpened, setPage } = useDispatch( editSiteStore );
+	const { setIsSaveViewOpened, setEditedPostContext } =
+		useDispatch( editSiteStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -142,23 +143,20 @@ export default function Editor() {
 		: __( 'Block Library' );
 	const blockContext = useMemo(
 		() => ( {
-			...page?.context,
+			...context,
 			queryContext: [
-				page?.context.queryContext || { page: 1 },
+				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
-					setPage( {
-						...page,
-						context: {
-							...page?.context,
-							queryContext: {
-								...page?.context.queryContext,
-								...newQueryContext,
-							},
+					setEditedPostContext( {
+						...context,
+						queryContext: {
+							...context?.queryContext,
+							...newQueryContext,
 						},
 					} ),
 			],
 		} ),
-		[ page?.context ]
+		[ context ]
 	);
 	const isReady = editedPostType !== undefined && editedPostId !== undefined;
 

diff --git a/packages/edit-site/src/components/navigate-to-link/index.js b/packages/edit-site/src/components/navigate-to-link/index.js
@@ -9,12 +9,7 @@ import { edit } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-export default function NavigateToLink( {
-	type,
-	id,
-	activePage,
-	onActivePageChange,
-} ) {
+export default function NavigateToLink( { type, id, onActivePageChange } ) {
 	const post = useSelect(
 		( select ) =>
 			type &&
@@ -27,7 +22,6 @@ export default function NavigateToLink( {
 	const onClick = useMemo( () => {
 		if ( ! post?.link ) return null;
 		const path = getPathAndQueryString( post.link );
-		if ( path === activePage?.path ) return null;
 		return () =>
 			onActivePageChange( {
 				type,
@@ -38,7 +32,7 @@ export default function NavigateToLink( {
 					postId: post.id,
 				},
 			} );
-	}, [ post, activePage?.path, onActivePageChange ] );
+	}, [ post, onActivePageChange ] );
 
 	return (
 		onClick && (

diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -8,16 +8,27 @@ import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
+import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
+
+function SidebarScreens() {
+	useSyncSidebarPathWithURL();
+
+	return (
+		<>
+			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenTemplates postType="wp_template" />
+			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+		</>
+	);
+}
 
 export function Sidebar() {
 	return (
 		<NavigatorProvider
 			className="edit-site-sidebar__content"
 			initialPath="/"
 		>
-			<SidebarNavigationScreenMain />
-			<SidebarNavigationScreenTemplates postType="wp_template" />
-			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+			<SidebarScreens />
 		</NavigatorProvider>
 	);
 }
diff --git a/.../use-init-edited-entity-from-url/index.js → ...th-url/use-init-edited-entity-from-url.js b/.../use-init-edited-entity-from-url/index.js → ...th-url/use-init-edited-entity-from-url.js
@@ -19,6 +19,8 @@ export default function useInitEditedEntityFromURL() {
 
 	// Set correct entity on page navigation.
 	useEffect( () => {
+		// This URL scheme mean we can't open a template part with the context of a given post.
+		// Potentially posts and pages could be moved to a "context" query string instead.
 		if ( 'page' === postType || 'post' === postType ) {
 			setPage( { context: { postType, postId } } ); // Resolves correct template based on ID.
 		} else if ( 'wp_template' === postType ) {

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-sidebar-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-sidebar-path-with-url.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncSidebarPathWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { sidebar = '/' } = params;
+	const { location, goTo } = useNavigator();
+	const currentSidebar = useRef( sidebar );
+	const currentNavigatorLocation = useRef( location.path );
+	useEffect( () => {
+		currentSidebar.current = sidebar;
+		if ( sidebar !== currentNavigatorLocation.current ) {
+			goTo( sidebar );
+		}
+	}, [ sidebar ] );
+	useEffect( () => {
+		currentNavigatorLocation.current = location.path;
+		if ( location.path !== currentSidebar.current ) {
+			history.push( {
+				...params,
+				sidebar: location.path,
+			} );
+		}
+	}, [ location.path, history ] );
+
+	return sidebar;
+}
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
@@ -72,9 +72,10 @@ export const setTemplate =
 		}
 
 		dispatch( {
-			type: 'SET_TEMPLATE',
-			templateId,
-			page: { context: { templateSlug } },
+			type: 'SET_EDITED_POST',
+			postType: 'wp_template',
+			id: templateId,
+			context: { templateSlug },
 		} );
 	};
 
@@ -105,9 +106,10 @@ export const addTemplate =
 		}
 
 		dispatch( {
-			type: 'SET_TEMPLATE',
-			templateId: newTemplate.id,
-			page: { context: { templateSlug: newTemplate.slug } },
+			type: 'SET_EDITED_POST',
+			postType: 'wp_template',
+			id: newTemplate.id,
+			context: { templateSlug: newTemplate.slug },
 		} );
 	};
 
@@ -167,21 +169,37 @@ export const removeTemplate =
  */
 export function setTemplatePart( templatePartId ) {
 	return {
-		type: 'SET_TEMPLATE_PART',
-		templatePartId,
+		type: 'SET_EDITED_POST',
+		postType: 'wp_template_part',
+		id: templatePartId,
 	};
 }
 
 /**
- * Action that sets the home template ID to the template ID of the page resolved
- * from a given path.
+ * @deprecated
+ */
+export function setHomeTemplateId() {
+	deprecated( "dispatch( 'core/edit-site' ).setHomeTemplateId", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return {
+		type: 'NOTHING',
+	};
+}
+
+/**
+ * Set's the current block editor context.
+ *
+ * @param {Object} context The context object.
  *
- * @param {number} homeTemplateId The template ID for the homepage.
+ * @return {number} The resolved template ID for the page route.
  */
-export function setHomeTemplateId( homeTemplateId ) {
+export function setEditedPostContext( context ) {
 	return {
-		type: 'SET_HOME_TEMPLATE',
-		homeTemplateId,
+		type: 'SET_EDITED_POST_CONTEXT',
+		context,
 	};
 }
 
@@ -221,17 +239,13 @@ export const setPage =
 		}
 
 		dispatch( {
-			type: 'SET_PAGE',
-			page: template.slug
-				? {
-						...page,
-						context: {
-							...page.context,
-							templateSlug: template.slug,
-						},
-				  }
-				: page,
-			templateId: template.id,
+			type: 'SET_EDITED_POST',
+			postType: 'wp_template',
+			id: template.id,
+			context: {
+				...page.context,
+				templateSlug: template.slug,
+			},
 		} );
 
 		return template.id;