From c014f3dda472b141906199dc8397546e64378209 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Mar 2024 13:30:09 +0100 Subject: [PATCH 01/12] Content: show dataviews --- packages/edit-site/src/components/layout/router.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 5d8a4085c3a116..3dd5596411f519 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: ( From 22877ac64e04a71f81373d7c4fb5db66b1516307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Mar 2024 13:32:37 +0100 Subject: [PATCH 02/12] Sidebar: update content and delete old code --- .../index.js | 156 ------------------ .../style.scss | 9 - .../edit-site/src/components/sidebar/index.js | 5 +- packages/edit-site/src/style.scss | 1 - 4 files changed, 2 insertions(+), 169 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/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js deleted file mode 100644 index 3ff934ac100a88..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js +++ /dev/null @@ -1,156 +0,0 @@ -/** - * WordPress dependencies - */ -import { - __experimentalItemGroup as ItemGroup, - __experimentalItem as Item, - __experimentalVStack as VStack, -} from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { useEntityRecords } from '@wordpress/core-data'; -import { decodeEntities } from '@wordpress/html-entities'; -import { useViewportMatch } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import { useLink } from '../routes/link'; -import SidebarNavigationItem from '../sidebar-navigation-item'; -import AddNewTemplate from '../add-new-template'; -import SidebarButton from '../sidebar-button'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; - -const TemplateItem = ( { postType, postId, ...props } ) => { - 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 ec2b7744d4e233..00000000000000 --- 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 aea839840dda99..20abae6c7e5d4a 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/style.scss b/packages/edit-site/src/style.scss index 52c9211e143d7c..a933b8dec58245 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"; From 9969c610a7c152c2ef4072755363881a17fcc115 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Mar 2024 13:58:11 +0100 Subject: [PATCH 03/12] Preview: update path --- .../sync-state-with-url/use-init-edited-entity-from-url.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 839996e2ebdf9c..442056abd0e8a2 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 }; } From 5cc68ba451e5adfc29b2f0e11e58c61cd442e0e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Mar 2024 14:03:05 +0100 Subject: [PATCH 04/12] Preview: go to initial state when coming back from editor --- .../components/sync-state-with-url/use-sync-path-with-url.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 00757955736476..e0a02fa88abf66 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( { From 10f64a752d62b685011327b8a45ebd9e1eb8d389 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:05:17 +0100 Subject: [PATCH 05/12] CommandLoader: update path for templates --- packages/edit-site/src/utils/get-is-list-page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 2ee661253cf063..0fa818c28cb510 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' && From 1d7809ced3d1673e084a0711d5d0615ea8f641e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:31:57 +0100 Subject: [PATCH 06/12] Update path in e2e tests --- test/e2e/specs/site-editor/new-templates-list.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 e2427b7b7922f2..b3b3b930e0498a 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( From 98dcc9d470d2c3a75386e822c81c748ff2bc4123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Mar 2024 20:07:23 +0100 Subject: [PATCH 07/12] Update browser history e2e test --- test/e2e/specs/site-editor/browser-history.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js index 2dec72953765f8..4476ce0aa7c0ac 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 From 711da32abb56c24df38da2a359a0fb8d83c9b202 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Mar 2024 11:44:40 +0100 Subject: [PATCH 08/12] Template Inspector: update path --- .../components/sidebar-edit-mode/template-panel/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 a888c258ec36bc..8d83858707945a 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 ], } ); } } /> From f74e372f740a39f75a40f9626cbcb04b49c27739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Mar 2024 11:48:00 +0100 Subject: [PATCH 09/12] Template Details panel: update path --- .../components/sidebar-navigation-screen-template/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 d7d117e0c17637..fef2a1c546b3db 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 ] ); } } /> Date: Wed, 13 Mar 2024 18:47:18 +0100 Subject: [PATCH 10/12] e2e test: update locator --- test/performance/specs/site-editor.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index 89e8d9d3477762..9b17d74c306a3a 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -193,7 +193,7 @@ test.describe( 'Site Editor Performance', () => { await metrics.startTracing(); await page - .getByRole( 'button', { name: 'Single Posts' } ) + .getByRole( 'link', { name: 'Single Posts' } ) .click(); // Stop tracing. From 7a88e49abce1440e241c4b41c72ea865cbe7eb51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 15 Mar 2024 10:49:11 +0100 Subject: [PATCH 11/12] Change locator so it exists in both trunk and the branch --- test/performance/specs/site-editor.spec.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index 9b17d74c306a3a..0636275f521c24 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -192,9 +192,7 @@ test.describe( 'Site Editor Performance', () => { // Start tracing. await metrics.startTracing(); - await page - .getByRole( 'link', { name: 'Single Posts' } ) - .click(); + await page.getByText( 'Single Posts', { exact: true } ).click(); // Stop tracing. await metrics.stopTracing(); From 0d7b67e3dc0d377ecd16b635089987b844f199b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 15 Mar 2024 12:43:38 +0100 Subject: [PATCH 12/12] Performance Navigating test: switch to list layout before clicking the SinglePosts item --- test/performance/specs/site-editor.spec.js | 25 ++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index 0636275f521c24..f2c7c055b447e6 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -189,12 +189,29 @@ test.describe( 'Site Editor Performance', () => { path: '/wp_template', } ); - // Start tracing. - await metrics.startTracing(); + // 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(); + } + await metrics.startTracing(); await page.getByText( 'Single Posts', { exact: true } ).click(); - - // Stop tracing. await metrics.stopTracing(); // Get the durations.