DataViews: make list layout the default for templates with the experi…

…ment enabled (WordPress#57933)
MaxMood96 · Jan 18, 2024 · 142725a · 142725a
1 parent 8b5bc0e
commit 142725a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js
@@ -20,7 +20,10 @@ export default function PageMain() {
 		params: { path },
 	} = useLocation();
 
-	if ( path === '/wp_template/all' ) {
+	if (
+		path === '/wp_template/all' ||
+		( path === '/wp_template' && window?.__experimentalAdminViews )
+	) {
 		return <PageTemplates />;
 	} else if ( path === '/wp_template_part/all' ) {
 		return <PageTemplateParts />;

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -77,7 +77,7 @@ const defaultConfigPerViewType = {
 };
 
 const DEFAULT_VIEW = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_LIST,
 	search: '',
 	page: 1,
 	perPage: 20,
@@ -170,6 +170,18 @@ export default function DataviewsTemplates() {
 		[ setTemplateId ]
 	);
 
+	const onDetailsChange = useCallback(
+		( items ) => {
+			if ( items?.length === 1 ) {
+				history.push( {
+					postId: items[ 0 ].id,
+					postType: TEMPLATE_POST_TYPE,
+				} );
+			}
+		},
+		[ history ]
+	);
+
 	const authors = useMemo( () => {
 		if ( ! allTemplates ) {
 			return EMPTY_ARRAY;
@@ -369,6 +381,7 @@ export default function DataviewsTemplates() {
 					view={ view }
 					onChangeView={ onChangeView }
 					onSelectionChange={ onSelectionChange }
+					onDetailsChange={ onDetailsChange }
 					deferredRendering={
 						! view.hiddenFields?.includes( 'preview' )
 					}

diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -76,7 +76,11 @@ function SidebarScreens() {
 				<SidebarNavigationScreenPage />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/:postType(wp_template)">
-				<SidebarNavigationScreenTemplates />
+				{ window?.__experimentalAdminViews ? (
+					<SidebarNavigationScreenTemplatesBrowse />
+				) : (
+					<SidebarNavigationScreenTemplates />
+				) }
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/patterns">
 				<SidebarNavigationScreenPatterns />

diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
@@ -16,6 +16,7 @@ export default function getIsListPage(
 	return (
 		[ '/wp_template/all', '/wp_template_part/all' ].includes( path ) ||
 		( path === '/page' && window?.__experimentalAdminViews ) ||
+		( path === '/wp_template' && window?.__experimentalAdminViews ) ||
 		( path === '/patterns' &&
 			// Don't treat "/patterns" without categoryType and categoryId as a
 			// list page in mobile because the sidebar covers the whole page.

diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -18,7 +18,11 @@ test.describe( 'Templates', () => {
 		] );
 	} );
 	test( 'Sorting', async ( { admin, page } ) => {
-		await admin.visitSiteEditor( { path: '/wp_template/all' } );
+		await admin.visitSiteEditor( { path: '/wp_template' } );
+		// Switch to table layout.
+		await page.getByLabel( 'View options' ).click();
+		await page.getByRole( 'menuitem', { name: 'Layout' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'Table' } ).click();
 		// Descending by title.
 		await page
 			.getByRole( 'button', { name: 'Template', exact: true } )
@@ -48,7 +52,13 @@ test.describe( 'Templates', () => {
 			title: 'Date Archives',
 			content: 'hi',
 		} );
-		await admin.visitSiteEditor( { path: '/wp_template/all' } );
+		await admin.visitSiteEditor( { path: '/wp_template' } );
+
+		// Switch to table layout.
+		await page.getByLabel( 'View options' ).click();
+		await page.getByRole( 'menuitem', { name: 'Layout' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'Table' } ).click();
+
 		// Global search.
 		await page.getByRole( 'searchbox', { name: 'Filter list' } ).click();
 		await page.keyboard.type( 'tag' );
@@ -84,7 +94,13 @@ 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' } );
+
+		// Switch to table layout.
+		await page.getByLabel( 'View options' ).click();
+		await page.getByRole( 'menuitem', { name: 'Layout' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'Table' } ).click();
+
 		await page.getByRole( 'button', { name: 'Description' } ).click();
 		await page.getByRole( 'menuitem', { name: 'Hide' } ).click();
 		await expect(