Site Editor: update index page for templates (#59792)

Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: mcsf <mcsf@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
WordPress · Mar 15, 2024 · e58d126 · e58d126
1 parent 979770f
commit e58d126
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 187 deletions.
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -75,7 +75,7 @@ export default function useLayoutAreas() {
 	}
 
 	// Templates
-	if ( path === '/wp_template/all' ) {
+	if ( path === '/wp_template' ) {
 		return {
 			areas: {
 				content: (

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
@@ -55,6 +55,11 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 	);
 }
 
+const POST_TYPE_PATH = {
+	wp_template: '/wp_template',
+	wp_template_part: '/wp_template_part/all',
+};
+
 export default function TemplatePanel() {
 	const { title, description, icon, record, postType, postId } = useSelect(
 		( select ) => {
@@ -111,7 +116,7 @@ export default function TemplatePanel() {
 							toggleProps={ { size: 'small' } }
 							onRemove={ () => {
 								history.push( {
-									path: `/${ postType }/all`,
+									path: POST_TYPE_PATH[ postType ],
 								} );
 							} }
 						/>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -93,6 +93,11 @@ function useTemplateDetails( postType, postId ) {
 	return { title, description, content, footer };
 }
 
+const POST_TYPE_PATH = {
+	wp_template: '/wp_template',
+	wp_template_part: '/wp_template_part/all',
+};
+
 export default function SidebarNavigationScreenTemplate() {
 	const navigator = useNavigator();
 	const {
@@ -114,7 +119,7 @@ export default function SidebarNavigationScreenTemplate() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( `/${ postType }/all` );
+							navigator.goTo( POST_TYPE_PATH[ postType ] );
 						} }
 					/>
 					<SidebarButton

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
@@ -83,14 +82,14 @@ function SidebarScreens() {
 				<SidebarNavigationScreenPage />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/:postType(wp_template)">
-				<SidebarNavigationScreenTemplates />
+				<SidebarNavigationScreenTemplatesBrowse />
 			</SidebarScreenWrapper>
 			{ ! isMobileViewport && (
 				<SidebarScreenWrapper path="/patterns">
 					<SidebarNavigationScreenPatterns />
 				</SidebarScreenWrapper>
 			) }
-			<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
+			<SidebarScreenWrapper path="/:postType(wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -207,7 +207,7 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		return {};
 	}, [ homepageId, postType, postId, path ] );
 
-	if ( path === '/wp_template/all' && postId ) {
+	if ( path === '/wp_template' && postId ) {
 		return { isReady: true, postType: 'wp_template', postId, context };
 	}
 

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -105,7 +105,7 @@ export default function useSyncPathWithURL() {
 				// These sidebar paths are special in the sense that the url in these pages may or may not have a postId and we need to retain it if it has.
 				// The "type" property should be kept as well.
 				navigatorLocation.path === '/pages' ||
-				navigatorLocation.path === '/wp_template/all' ||
+				navigatorLocation.path === '/wp_template' ||
 				navigatorLocation.path === '/wp_template_part/all'
 			) {
 				updateUrlParams( {

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -33,7 +33,6 @@
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
-@import "./components/sidebar-navigation-screen-templates/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";
 @import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";

diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
@@ -14,7 +14,7 @@ export default function getIsListPage(
 	isMobileViewport
 ) {
 	return (
-		[ '/wp_template/all', '/wp_template_part/all', '/pages' ].includes(
+		[ '/wp_template', '/wp_template_part/all', '/pages' ].includes(
 			path
 		) ||
 		( path === '/patterns' &&

diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js
@@ -19,9 +19,9 @@ test.describe( 'Site editor browser history', () => {
 
 		// Navigate to a single template
 		await page.click( 'role=button[name="Templates"]' );
-		await page.click( 'role=button[name="Index"]' );
+		await page.getByRole( 'link', { name: 'Index' } ).click();
 		await expect( page ).toHaveURL(
-			'/wp-admin/site-editor.php?postType=wp_template&postId=emptytheme%2F%2Findex'
+			'/wp-admin/site-editor.php?postId=emptytheme%2F%2Findex&postType=wp_template&canvas=edit'
 		);
 
 		// Navigate back to the template list

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -17,7 +17,7 @@ test.describe( 'Templates', () => {
 		await requestUtils.deleteAllTemplates( 'wp_template' );
 	} );
 	test( 'Sorting', async ( { admin, page } ) => {
-		await admin.visitSiteEditor( { path: '/wp_template/all' } );
+		await admin.visitSiteEditor( { path: '/wp_template' } );
 		// Descending by title.
 		await page
 			.getByRole( 'button', { name: 'Template', exact: true } )
@@ -47,7 +47,7 @@ test.describe( 'Templates', () => {
 			title: 'Date Archives',
 			content: 'hi',
 		} );
-		await admin.visitSiteEditor( { path: '/wp_template/all' } );
+		await admin.visitSiteEditor( { path: '/wp_template' } );
 		// Global search.
 		await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' );
 		const titles = page
@@ -83,7 +83,7 @@ test.describe( 'Templates', () => {
 		await expect( titles ).toHaveCount( 2 );
 	} );
 	test( 'Field visibility', async ( { admin, page } ) => {
-		await admin.visitSiteEditor( { path: '/wp_template/all' } );
+		await admin.visitSiteEditor( { path: '/wp_template' } );
 		await page.getByRole( 'button', { name: 'Description' } ).click();
 		await page.getByRole( 'menuitem', { name: 'Hide' } ).click();
 		await expect(

diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
@@ -189,14 +189,29 @@ test.describe( 'Site Editor Performance', () => {
 					path: '/wp_template',
 				} );
 
-				// Start tracing.
-				await metrics.startTracing();
-
-				await page
-					.getByRole( 'button', { name: 'Single Posts' } )
-					.click();
+				// The Templates index page has changed, so we need to know which UI is in use in the branch.
+				// We do so by checking the presence of the dataviews component.
+				// If it's there, switch to the list layout before running the test.
+				// See https://github.com/WordPress/gutenberg/pull/59792
+				const isDataViewsUI = await page
+					.getByRole( 'button', { name: 'View options' } )
+					.isVisible();
+				if ( isDataViewsUI ) {
+					await page
+						.getByRole( 'button', { name: 'View options' } )
+						.click();
+					await page
+						.getByRole( 'menuitem' )
+						.filter( { has: page.getByText( 'Layout' ) } )
+						.click();
+					await page
+						.getByRole( 'menuitemradio' )
+						.filter( { has: page.getByText( 'List' ) } )
+						.click();
+				}
 
-				// Stop tracing.
+				await metrics.startTracing();
+				await page.getByText( 'Single Posts', { exact: true } ).click();
 				await metrics.stopTracing();
 
 				// Get the durations.