From e58d12603220ae09bbf06856e3064ee425f3ff7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 15 Mar 2024 14:20:50 +0100 Subject: [PATCH] Site Editor: update index page for templates (#59792) Co-authored-by: oandregal Co-authored-by: mcsf Co-authored-by: ntsekouras Co-authored-by: youknowriad Co-authored-by: jameskoster Co-authored-by: ramonjd Co-authored-by: SaxonF --- .../edit-site/src/components/layout/router.js | 2 +- .../sidebar-edit-mode/template-panel/index.js | 7 +- .../index.js | 7 +- .../index.js | 156 ------------------ .../style.scss | 9 - .../edit-site/src/components/sidebar/index.js | 5 +- .../use-init-edited-entity-from-url.js | 2 +- .../use-sync-path-with-url.js | 2 +- packages/edit-site/src/style.scss | 1 - .../edit-site/src/utils/get-is-list-page.js | 2 +- .../specs/site-editor/browser-history.spec.js | 4 +- .../site-editor/new-templates-list.spec.js | 6 +- test/performance/specs/site-editor.spec.js | 29 +++- 13 files changed, 45 insertions(+), 187 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 5d8a4085c3a11..3dd5596411f51 100644 --- 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 index a888c258ec36b..8d83858707945 100644 --- 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 index d7d117e0c1763..fef2a1c546b3d 100644 --- 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 ] ); } } /> { - const linkInfo = useLink( { - postType, - postId, - } ); - return ; -}; - -export default function SidebarNavigationScreenTemplates() { - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const { records: templates, isResolving: isLoading } = useEntityRecords( - 'postType', - TEMPLATE_POST_TYPE, - { per_page: -1 } - ); - const browseAllLink = useLink( { path: '/wp_template/all' } ); - const canCreate = ! isMobileViewport; - return ( - - ) - } - content={ - <> - { isLoading && __( 'Loading templates…' ) } - { ! isLoading && ( - - ) } - - } - footer={ - ! isMobileViewport && ( - - { __( 'Manage all templates' ) } - - ) - } - /> - ); -} - -function TemplatesGroup( { title, templates } ) { - return ( - - { !! title && ( - - { title } - - ) } - { templates.map( ( template ) => ( - - { decodeEntities( - template.title?.rendered || template.slug - ) } - - ) ) } - - ); -} -function SidebarTemplatesList( { templates } ) { - if ( ! templates?.length ) { - return ( - - { __( 'No templates found' ) } - - ); - } - const sortedTemplates = templates ? [ ...templates ] : []; - sortedTemplates.sort( ( a, b ) => - a.title.rendered.localeCompare( b.title.rendered ) - ); - const { hierarchyTemplates, customTemplates, ...plugins } = - sortedTemplates.reduce( - ( accumulator, template ) => { - const { - original_source: originalSource, - author_text: authorText, - } = template; - if ( originalSource === 'plugin' ) { - if ( ! accumulator[ authorText ] ) { - accumulator[ authorText ] = []; - } - accumulator[ authorText ].push( template ); - } else if ( template.is_custom ) { - accumulator.customTemplates.push( template ); - } else { - accumulator.hierarchyTemplates.push( template ); - } - return accumulator; - }, - { hierarchyTemplates: [], customTemplates: [] } - ); - return ( - - { !! hierarchyTemplates.length && ( - - ) } - { !! customTemplates.length && ( - - ) } - { Object.entries( plugins ).map( - ( [ plugin, pluginTemplates ] ) => { - return ( - - ); - } - ) } - - ); -} 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 deleted file mode 100644 index ec2b7744d4e23..0000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss +++ /dev/null @@ -1,9 +0,0 @@ -.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item { - text-transform: uppercase; - color: $gray-200; - // 6px right padding to align with + button - padding: $grid-unit-30 6px $grid-unit-20 $grid-unit-20; - border-top: 1px solid $gray-800; - font-size: 11px; - font-weight: 500; -} diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index aea839840dda9..20abae6c7e5d4 100644 --- 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() { - + { ! isMobileViewport && ( ) } - + 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 index 839996e2ebdf9..442056abd0e8a 100644 --- 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 index 0075795573647..e0a02fa88abf6 100644 --- 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 index 52c9211e143d7..a933b8dec5824 100644 --- 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 index 2ee661253cf06..0fa818c28cb51 100644 --- 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 index 2dec72953765f..4476ce0aa7c0a 100644 --- 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 index e2427b7b7922f..b3b3b930e0498 100644 --- 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 index 89e8d9d347776..f2c7c055b447e 100644 --- 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.