Site Editor - add query args for current context. (#27124)

* Use query args for routing * Use @wordpress/url instead * Use new URL format * Remove uneeded changes * change name of component * Rename PostRouter component function Co-authored-by: Noah Allen <[email protected]>
WordPress · Dec 4, 2020 · 7aff63d · 7aff63d
1 parent 2293b3b
commit 7aff63d
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -46,6 +46,7 @@ import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
 import NavigationSidebar from '../navigation-sidebar';
+import URLQueryController from '../url-query-controller';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
@@ -196,6 +197,7 @@ function Editor() {
 
 	return (
 		<>
+			<URLQueryController />
 			<FullscreenMode isActive={ isFullscreenActive } />
 			<UnsavedChangesWarning />
 			<SlotFillProvider>

diff --git a/packages/edit-site/src/components/url-query-controller/index.js b/packages/edit-site/src/components/url-query-controller/index.js
@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { getQueryArg, addQueryArgs, removeQueryArgs } from '@wordpress/url';
+
+export default function URLQueryController() {
+	const { setTemplate, setTemplatePart, showHomepage, setPage } = useDispatch(
+		'core/edit-site'
+	);
+
+	// Set correct entity on load.
+	useEffect( () => {
+		const url = window.location.href;
+		const postId = getQueryArg( url, 'postId' );
+
+		if ( ! postId ) {
+			showHomepage();
+			return;
+		}
+
+		const postType = getQueryArg( url, 'postType' );
+		if ( 'page' === postType || 'post' === postType ) {
+			setPage( { context: { postType, postId } } ); // Resolves correct template based on ID.
+		} else if ( 'wp_template' === postType ) {
+			setTemplate( postId );
+		} else if ( 'wp_template_part' === postType ) {
+			setTemplatePart( postId );
+		} else {
+			showHomepage();
+		}
+	}, [] );
+
+	// Update page URL when context changes.
+	const pageContext = useCurrentPageContext();
+	useEffect( () => {
+		const newUrl = pageContext
+			? addQueryArgs( window.location.href, pageContext )
+			: removeQueryArgs( window.location.href, 'postType', 'postId' );
+
+		window.history.replaceState( {}, '', newUrl );
+	}, [ pageContext ] );
+
+	return null;
+}
+
+function useCurrentPageContext() {
+	return useSelect( ( select ) => {
+		const {
+			getTemplateId,
+			getTemplatePartId,
+			getTemplateType,
+			getPage,
+		} = select( 'core/edit-site' );
+
+		const page = getPage();
+		const templateType = getTemplateType();
+		const templateId = getTemplateId();
+		const templatePartId = getTemplatePartId();
+
+		let _postId, _postType;
+		if ( page?.context?.postId && page?.context?.postType ) {
+			_postId = page.context.postId;
+			_postType = page.context.postType;
+		} else if ( templateType === 'wp_template' && templateId ) {
+			_postId = templateId;
+			_postType = templateType;
+		} else if ( templateType === 'wp_template_part' && templatePartId ) {
+			_postId = templatePartId;
+			_postType = templateType;
+		}
+
+		if ( _postId && _postType ) {
+			return { postId: _postId, postType: _postType };
+		}
+
+		return null;
+	} );
+}
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
@@ -114,7 +114,8 @@ export function setHomeTemplateId( homeTemplateId ) {
 }
 
 /**
- * Resolves the template for a page and displays both.
+ * Resolves the template for a page and displays both. If no path is given, attempts
+ * to use the postId to generate a path like `?p=${ postId }`.
  *
  * @param {Object}  page         The page object.
  * @param {string}  page.type    The page type.
@@ -125,6 +126,9 @@ export function setHomeTemplateId( homeTemplateId ) {
  * @return {number} The resolved template ID for the page route.
  */
 export function* setPage( page ) {
+	if ( ! page.path && page.context?.postId ) {
+		page.path = `?p=${ page.context.postId }`;
+	}
 	const templateId = yield findTemplate( page.path );
 	yield {
 		type: 'SET_PAGE',

diff --git a/packages/edit-site/src/store/index.js b/packages/edit-site/src/store/index.js
@@ -23,7 +23,5 @@ export default function registerEditSiteStore( initialState ) {
 		initialState,
 	} );
 
-	store.dispatch( actions.showHomepage() );
-
 	return store;
 }
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
@@ -81,6 +81,8 @@ export function templateId( state, action ) {
 		case 'SET_TEMPLATE':
 		case 'SET_PAGE':
 			return action.templateId;
+		case 'SET_TEMPLATE_PART':
+			return undefined;
 	}
 
 	return state;
@@ -98,6 +100,9 @@ export function templatePartId( state, action ) {
 	switch ( action.type ) {
 		case 'SET_TEMPLATE_PART':
 			return action.templatePartId;
+		case 'SET_TEMPLATE':
+		case 'SET_PAGE':
+			return undefined;
 	}
 
 	return state;
@@ -135,6 +140,8 @@ export function page( state, action ) {
 	switch ( action.type ) {
 		case 'SET_PAGE':
 			return action.page;
+		case 'SET_TEMPLATE_PART':
+			return undefined;
 	}
 
 	return state;