diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js index 2cd60c9ed68a2..594caed6c2b67 100644 --- a/packages/edit-site/src/components/page-templates-template-parts/index.js +++ b/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: [], }; diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index 1dd6161de75bc..4dcbec2a30a81 100644 --- a/test/e2e/specs/site-editor/hybrid-theme.spec.js +++ b/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(); diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index b3b3b930e0498..fc321a87e4365 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/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();