Add client side router

lib/full-site-editing/edit-site-page.php

@@ -77,51 +77,24 @@ function gutenberg_get_editor_styles() {
 }
 
 /**
- * Initialize the Gutenberg Templates List Page.
- *
- * @param array $settings The editor settings.
+ * Get the Gutenberg Templates List Page preload paths.
  */
-function gutenberg_edit_site_list_init( $settings ) {
-	wp_enqueue_script( 'wp-edit-site' );
-	wp_enqueue_style( 'wp-edit-site' );
-	wp_enqueue_media();
+function gutenberg_edit_site_list_preload_paths() {
+	if ( ! gutenberg_is_edit_site_list_page() ) {
+		return array();
+	}
 
 	$post_type = get_post_type_object( $_GET['postType'] );
 
 	if ( ! $post_type ) {
 		wp_die( __( 'Invalid post type.', 'gutenberg' ) );
 	}
 
-	$preload_data = array_reduce(
-		array(
-			'/',
-			"/wp/v2/types/$post_type->name?context=edit",
-			'/wp/v2/types?context=edit',
-			"/wp/v2/$post_type->rest_base?context=edit&per_page=-1",
-		),
-		'rest_preload_api_request',
-		array()
-	);
-
-	wp_add_inline_script(
-		'wp-api-fetch',
-		sprintf(
-			'wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( %s ) );',
-			wp_json_encode( $preload_data )
-		),
-		'after'
-	);
-
-	wp_add_inline_script(
-		'wp-edit-site',
-		sprintf(
-			'wp.domReady( function() {
-				wp.editSite.initializeList( "%s", "%s", %s );
-			} );',
-			'edit-site-editor',
-			$post_type->name,
-			wp_json_encode( $settings )
-		)
+	return array(
+		'/',
+		"/wp/v2/types/$post_type->name?context=edit",
+		'/wp/v2/types?context=edit',
+		"/wp/v2/$post_type->rest_base?context=edit&per_page=-1",
 	);
 }
 
@@ -158,9 +131,7 @@ static function( $classes ) {
 		'__experimentalBlockPatternCategories' => WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),
 	);
 
-	if ( gutenberg_is_edit_site_list_page() ) {
-		return gutenberg_edit_site_list_init( $custom_settings );
-	}
+	$list_page_preload_paths = gutenberg_edit_site_list_preload_paths();
 
 	/**
 	 * Make the WP Screen object aware that this is a block editor page.
@@ -195,7 +166,8 @@ static function( $classes ) {
 					'/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
 					'/wp/v2/global-styles/' . $active_global_styles_id,
 					'/wp/v2/global-styles/themes/' . $active_theme,
-				)
+				),
+				$list_page_preload_paths
 			),
 			'initializer_name' => 'initializeEditor',
 			'editor_settings'  => $settings,

packages/edit-site/package.json

@@ -56,6 +56,7 @@
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"file-saver": "^2.0.2",
+		"history": "^5.1.0",
 		"jszip": "^3.2.2",
 		"lodash": "^4.17.21",
 		"rememo": "^3.0.0"

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

@@ -9,17 +9,18 @@ import { kebabCase } from 'lodash';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
 import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
+import { useHistory } from '../routes';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
 export default function NewTemplatePart( { postType } ) {
+	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 
@@ -44,10 +45,12 @@ export default function NewTemplatePart( { postType } ) {
 			} );
 
 			// Navigate to the created template part editor.
-			window.location.href = addQueryArgs( window.location.href, {
+			history.push( {
 				postId: templatePart.id,
-				postType: 'wp_template_part',
+				postType: templatePart.type,
 			} );
+
+			// TODO: Add a success notice?
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'

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

@@ -15,11 +15,15 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
-import { addQueryArgs } from '@wordpress/url';
 import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
+/**
+ * Internal dependencies
+ */
+import { useHistory } from '../routes';
+
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
 	'single-post',
@@ -31,6 +35,7 @@ const DEFAULT_TEMPLATE_SLUGS = [
 ];
 
 export default function NewTemplate( { postType } ) {
+	const history = useHistory();
 	const { templates, defaultTemplateTypes } = useSelect(
 		( select ) => ( {
 			templates: select( coreStore ).getEntityRecords(
@@ -65,13 +70,12 @@ export default function NewTemplate( { postType } ) {
 			} );
 
 			// Navigate to the created template editor.
-			window.location.href = addQueryArgs( window.location.href, {
+			history.push( {
 				postId: template.id,
-				postType: 'wp_template',
+				postType: template.type,
 			} );
 
-			// Wait for async navigation to happen before closing the modal.
-			await new Promise( () => {} );
+			// TODO: Add a success notice?
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'

packages/edit-site/src/components/block-editor/back-button.js

@@ -3,26 +3,18 @@
  */
 import { Button } from '@wordpress/components';
 import { arrowLeft } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
 
 function BackButton() {
-	const { isTemplatePart, previousTemplateId } = useSelect( ( select ) => {
-		const { getEditedPostType, getPreviousEditedPostId } = select(
-			editSiteStore
-		);
-
-		return {
-			isTemplatePart: getEditedPostType() === 'wp_template_part',
-			previousTemplateId: getPreviousEditedPostId(),
-		};
-	}, [] );
-	const { goBack } = useDispatch( editSiteStore );
+	const location = useLocation();
+	const history = useHistory();
+	const isTemplatePart = location.params.postType === 'wp_template_part';
+	const previousTemplateId = location.state?.fromTemplateId;
 
 	if ( ! isTemplatePart || ! previousTemplateId ) {
 		return null;
@@ -33,7 +25,7 @@ function BackButton() {
 			className="edit-site-visual-editor__back-button"
 			icon={ arrowLeft }
 			onClick={ () => {
-				goBack();
+				history.back();
 			} }
 		>
 			{ __( 'Back' ) }

packages/edit-site/src/components/edit-template-part-menu-button/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	BlockSettingsMenuControls,
@@ -14,7 +14,8 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import { useLink } from '../routes/link';
 
 export default function EditTemplatePartMenuButton() {
 	return (
@@ -30,6 +31,7 @@ export default function EditTemplatePartMenuButton() {
 }
 
 function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
+	const { params } = useLocation();
 	const selectedTemplatePart = useSelect(
 		( select ) => {
 			const block = select( blockEditorStore ).getBlock(
@@ -50,16 +52,25 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 		[ selectedClientId ]
 	);
 
-	const { pushTemplatePart } = useDispatch( editSiteStore );
+	const linkProps = useLink(
+		{
+			postId: selectedTemplatePart.id,
+			postType: selectedTemplatePart.type,
+		},
+		{
+			fromTemplateId: params.postId,
+		}
+	);
 
 	if ( ! selectedTemplatePart ) {
 		return null;
 	}
 
 	return (
 		<MenuItem
-			onClick={ () => {
-				pushTemplatePart( selectedTemplatePart.id );
+			{ ...linkProps }
+			onClick={ ( event ) => {
+				linkProps.onClick( event );
 				onClose();
 			} }
 		>

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

@@ -12,7 +12,6 @@ import {
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
 import {
-	FullscreenMode,
 	InterfaceSkeleton,
 	ComplementaryArea,
 	store as interfaceStore,
@@ -207,7 +206,6 @@ function Editor( { initialSettings, onError } ) {
 									>
 										<GlobalStylesRenderer />
 										<ErrorBoundary onError={ onError }>
-											<FullscreenMode isActive />
 											<UnsavedChangesWarning />
 											<KeyboardShortcuts.Register />
 											<SidebarComplementaryAreaFills />

packages/edit-site/src/components/list/table.js

@@ -8,11 +8,11 @@ import {
 	VisuallyHidden,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import Link from '../routes/link';
 import Actions from './actions';
 import AddedBy from './added-by';
 
@@ -92,15 +92,15 @@ export default function Table( { templateType } ) {
 					>
 						<td className="edit-site-list-table-column" role="cell">
 							<Heading level={ 4 }>
-								<a
-									href={ addQueryArgs( window.location.href, {
+								<Link
+									params={ {
 										postId: template.id,
 										postType: template.type,
-									} ) }
+									} }
 								>
 									{ template.title?.rendered ||
 										template.slug }
-								</a>
+								</Link>
 							</Heading>
 							{ template.description }
 						</td>