Index view for Templates & Parts: use grid layout as default (WordP…

…ress#60069)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>

packages/edit-site/src/components/page-templates-template-parts/index.js

@@ -76,7 +76,7 @@ const defaultConfigPerViewType = {
 };
 
 const DEFAULT_VIEW = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_GRID,
 	search: '',
 	page: 1,
 	perPage: 20,
@@ -87,7 +87,7 @@ const DEFAULT_VIEW = {
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'preview' ],
-	layout: defaultConfigPerViewType[ LAYOUT_TABLE ],
+	layout: defaultConfigPerViewType[ LAYOUT_GRID ],
 	filters: [],
 };
 

test/e2e/specs/site-editor/hybrid-theme.spec.js

@@ -19,7 +19,7 @@ test.describe( 'Hybrid theme', () => {
 		);
 
 		await expect(
-			page.getByRole( 'table' ).getByRole( 'link', { name: 'header' } )
+			page.getByRole( 'link', { name: 'header' } )
 		).toBeVisible();
 	} );
 
@@ -29,9 +29,7 @@ test.describe( 'Hybrid theme', () => {
 			'postType=wp_template_part&path=/wp_template_part/all'
 		);
 
-		const templatePart = page
-			.getByRole( 'table' )
-			.getByRole( 'link', { name: 'header' } );
+		const templatePart = page.getByRole( 'link', { name: 'header' } );
 
 		await expect( templatePart ).toBeVisible();
 		await templatePart.click();

test/e2e/specs/site-editor/new-templates-list.spec.js

@@ -10,23 +10,23 @@ test.describe( 'Templates', () => {
 			requestUtils.deleteAllTemplates( 'wp_template' ),
 		] );
 	} );
+
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
+
 	test.afterEach( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllTemplates( 'wp_template' );
 	} );
+
 	test( 'Sorting', async ( { admin, page } ) => {
 		await admin.visitSiteEditor( { path: '/wp_template' } );
+
 		// Descending by title.
-		await page
-			.getByRole( 'button', { name: 'Template', exact: true } )
-			.click();
-		await page
-			.getByRole( 'menuitemradio', {
-				name: 'Sort descending',
-			} )
-			.click();
+		await page.getByRole( 'button', { name: 'View options' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Sort by' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Template' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'descending' } ).click();
 		const firstTitle = page
 			.getByRole( 'region', {
 				name: 'Template',
@@ -35,12 +35,12 @@ test.describe( 'Templates', () => {
 			.getByRole( 'link', { includeHidden: true } )
 			.first();
 		await expect( firstTitle ).toHaveText( 'Tag Archives' );
+
 		// Ascending by title.
-		await page
-			.getByRole( 'menuitemradio', { name: 'Sort ascending' } )
-			.click();
+		await page.getByRole( 'menuitemradio', { name: 'ascending' } ).click();
 		await expect( firstTitle ).toHaveText( 'Category Archives' );
 	} );
+
 	test( 'Filtering', async ( { requestUtils, admin, page } ) => {
 		await requestUtils.createTemplate( 'wp_template', {
 			slug: 'date',
@@ -82,10 +82,17 @@ test.describe( 'Templates', () => {
 		await page.keyboard.press( 'Escape' ); // close the menu.
 		await expect( titles ).toHaveCount( 2 );
 	} );
+
 	test( 'Field visibility', async ( { admin, page } ) => {
 		await admin.visitSiteEditor( { path: '/wp_template' } );
+
+		await page.getByRole( 'button', { name: '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(
 			page.getByRole( 'button', { name: 'Description' } )
 		).toBeHidden();