Site Editor: Use permalinks instead of query args and site-editor.php…

… based urls

lib/experimental/site-editor-permalinks.php

@@ -0,0 +1,11 @@
+<?php
+
+function rewrite_wp_admin_permalinks() {
+    add_rewrite_rule(
+        '^wp-admin/design/?(.*)?',
+        'wp-admin/site-editor.php?path=$1',
+        'top'
+    );
+    flush_rewrite_rules();
+}
+add_action('init', 'rewrite_wp_admin_permalinks');

lib/load.php

@@ -108,6 +108,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/synchronization.php';
 require __DIR__ . '/experimental/script-modules.php';
 require __DIR__ . '/experimental/posts/load.php';
+require __DIR__ . '/experimental/site-editor-permalinks.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 	require __DIR__ . '/experimental/disable-tinymce.php';

packages/edit-site/src/components/add-new-pattern/index.js

@@ -69,23 +69,16 @@ export default function AddNewPattern() {
 
 	function handleCreatePattern( { pattern } ) {
 		setShowPatternModal( false );
-
-		history.push( {
-			postId: pattern.id,
-			postType: PATTERN_TYPES.user,
-			canvas: 'edit',
-		} );
+		history.navigate(
+			`/${ PATTERN_TYPES.user }/${ pattern.id }?canvas=edit`
+		);
 	}
 
 	function handleCreateTemplatePart( templatePart ) {
 		setShowTemplatePartModal( false );
-
-		// Navigate to the created template part editor.
-		history.push( {
-			postId: templatePart.id,
-			postType: TEMPLATE_PART_POST_TYPE,
-			canvas: 'edit',
-		} );
+		history.navigate(
+			`/${ TEMPLATE_PART_POST_TYPE }/${ templatePart.id }?canvas=edit`
+		);
 	}
 
 	function handleError() {
@@ -203,10 +196,9 @@ export default function AddNewPattern() {
 							! currentCategoryId &&
 							categoryId !== 'my-patterns'
 						) {
-							history.push( {
-								postType: PATTERN_TYPES.user,
-								categoryId: PATTERN_DEFAULT_CATEGORY,
-							} );
+							history.navigate(
+								`/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }`
+							);
 						}
 
 						createSuccessNotice(

packages/edit-site/src/components/add-new-template/index.js

@@ -203,11 +203,9 @@ function NewTemplateModal( { onClose } ) {
 			);
 
 			// Navigate to the created template editor.
-			history.push( {
-				postId: newTemplate.id,
-				postType: TEMPLATE_POST_TYPE,
-				canvas: 'edit',
-			} );
+			history.navigate(
+				`/${ TEMPLATE_POST_TYPE }/${ newTemplate.id }?canvas=edit`
+			);
 
 			createSuccessNotice(
 				sprintf(

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -12,8 +12,8 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import useActiveRoute from '../layout/router';
 import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
 
@@ -22,15 +22,16 @@ const { RouterProvider } = unlock( routerPrivateApis );
 function AppLayout() {
 	useCommonCommands();
 	useSetCommandContext();
-	useRegisterSiteEditorRoutes();
-	const route = useActiveRoute();
 
-	return <Layout route={ route } />;
+	return <Layout />;
 }
 
 export default function App() {
+	useRegisterSiteEditorRoutes();
 	const { createErrorNotice } = useDispatch( noticesStore );
-
+	const routes = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getRoutes();
+	}, [] );
 	function onPluginAreaError( name ) {
 		createErrorNotice(
 			sprintf(
@@ -44,7 +45,7 @@ export default function App() {
 	}
 
 	return (
-		<RouterProvider>
+		<RouterProvider routes={ routes } basePath="/wp-admin/design">
 			<AppLayout />
 			<PluginArea onError={ onPluginAreaError } />
 		</RouterProvider>

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

@@ -12,6 +12,7 @@ import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -21,9 +22,9 @@ import { unlock } from '../../lock-unlock';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function useEditorIframeProps() {
-	const { params } = useLocation();
+	const { query, path } = useLocation();
 	const history = useHistory();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view' } = query;
 	const currentPostIsTrashed = useSelect( ( select ) => {
 		return (
 			select( editorStore ).getCurrentPostAttribute( 'status' ) ===
@@ -55,13 +56,13 @@ export default function useEditorIframeProps() {
 				! currentPostIsTrashed
 			) {
 				event.preventDefault();
-				history.push( { ...params, canvas: 'edit' }, undefined, {
+				history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
 					transition: 'canvas-mode-edit-transition',
 				} );
 			}
 		},
 		onClick: () =>
-			history.push( { ...params, canvas: 'edit' }, undefined, {
+			history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
 				transition: 'canvas-mode-edit-transition',
 			} ),
 		onClickCapture: ( event ) => {

packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js

@@ -16,7 +16,9 @@ export default function useNavigateToEntityRecord() {
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
-			history.push( { ...params, focusMode: true, canvas: 'edit' } );
+			history.navigate(
+				`/${ params.postType }/${ params.id }?canvas=edit&focusMode=true`
+			);
 		},
 		[ history ]
 	);

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

@@ -22,11 +22,11 @@ function useNavigateToPreviousEntityRecord() {
 	const history = useHistory();
 	const goBack = useMemo( () => {
 		const isFocusMode =
-			location.params.focusMode ||
-			( location.params.postId &&
-				FOCUSABLE_ENTITIES.includes( location.params.postType ) );
+			location.query.focusMode ||
+			( location?.params?.postId &&
+				FOCUSABLE_ENTITIES.includes( location?.params?.postType ) );
 		const didComeFromEditorCanvas =
-			previousLocation?.params.canvas === 'edit';
+			previousLocation?.query.canvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;
 		// `previousLocation` changes when the component updates for any reason, not
@@ -37,8 +37,8 @@ function useNavigateToPreviousEntityRecord() {
 }
 
 export function useSpecificEditorSettings() {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
 	const { settings } = useSelect( ( select ) => {
 		const { getSettings } = select( editSiteStore );

packages/edit-site/src/components/dataviews-actions/index.js

@@ -31,11 +31,7 @@ export const useEditPostAction = () => {
 			},
 			callback( items ) {
 				const post = items[ 0 ];
-				history.push( {
-					postId: post.id,
-					postType: post.type,
-					canvas: 'edit',
-				} );
+				history.navigate( `/${ post.type }/${ post.id }?canvas=edit` );
 			},
 		} ),
 		[ history ]

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

@@ -83,10 +83,26 @@ const siteIconVariants = {
 	},
 };
 
+function getListPathForPostType( postType ) {
+	switch ( postType ) {
+		case 'navigation':
+			return '/navigation';
+		case 'wp_block':
+			return '/pattern?postType=wp_block';
+		case 'wp_template_part':
+			return '/pattern?postType=wp_template_part';
+		case 'wp_template':
+			return '/template';
+		case 'page':
+			return '/page';
+	}
+	throw 'Unknown post type';
+}
+
 export default function EditSiteEditor( { isPostsList = false } ) {
 	const disableMotion = useReducedMotion();
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
 	const isLoading = useIsSiteEditorLoading();
 	useAdaptEditorToCanvas( canvas );
 	const entity = useResolveEditedEntity();
@@ -157,9 +173,11 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 				case 'move-to-trash':
 				case 'delete-post':
 					{
-						history.push( {
-							postType: items[ 0 ].type,
-						} );
+						history.navigate(
+							getListPathForPostType(
+								postWithTemplate ? context.postType : postType
+							)
+						);
 					}
 					break;
 				case 'duplicate-post':
@@ -182,11 +200,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 									{
 										label: __( 'Edit' ),
 										onClick: () => {
-											history.push( {
-												postId: newItem.id,
-												postType: newItem.type,
-												canvas: 'edit',
-											} );
+											history.navigate(
+												`/${ newItem.type }/${ newItem.id }?canvas=edit`
+											);
 										},
 									},
 								],
@@ -196,7 +212,13 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					break;
 			}
 		},
-		[ history, createSuccessNotice ]
+		[
+			postType,
+			context?.postType,
+			postWithTemplate,
+			history,
+			createSuccessNotice,
+		]
 	);
 
 	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
@@ -268,26 +290,19 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 												// come here through `posts list` and are in focus mode editing a template, template part etc..
 												if (
 													isPostsList &&
-													params?.focusMode
+													query?.focusMode
 												) {
-													history.push(
-														{
-															page: 'gutenberg-posts-dashboard',
-															postType: 'post',
-														},
-														undefined,
-														{
-															transition:
-																'canvas-mode-view-transition',
-														}
-													);
+													history.navigate( '/', {
+														transition:
+															'canvas-mode-view-transition',
+													} );
 												} else {
-													history.push(
-														{
-															...params,
-															canvas: undefined,
-														},
-														undefined,
+													history.navigate(
+														getListPathForPostType(
+															postWithTemplate
+																? context.postType
+																: postType
+														),
 														{
 															transition:
 																'canvas-mode-view-transition',

packages/edit-site/src/components/editor/use-resolve-edited-entity.js

@@ -30,8 +30,21 @@ const postTypesWithoutParentTemplate = [
 const authorizedPostTypes = [ 'page', 'post' ];
 
 export function useResolveEditedEntity() {
-	const { params = {} } = useLocation();
-	const { postId, postType } = params;
+	const { name, params = {}, query } = useLocation();
+	const { postId = query?.postId } = params; // Fallback to query param for postId for list view routes.
+	let postType;
+	if ( name === 'navigation-item' ) {
+		postType = NAVIGATION_POST_TYPE;
+	} else if ( name === 'pattern-item' ) {
+		postType = PATTERN_TYPES.user;
+	} else if ( name === 'template-part-item' ) {
+		postType = TEMPLATE_PART_POST_TYPE;
+	} else if ( name === 'template-item' || name === 'templates' ) {
+		postType = TEMPLATE_POST_TYPE;
+	} else if ( name === 'page-item' || name === 'pages' ) {
+		postType = 'page';
+	}
+
 	const homePage = useSelect( ( select ) => {
 		const { getHomePage } = unlock( select( coreDataStore ) );
 		return getHomePage();