From 8f85e9caa8ffed48817bab28e3cda28cce9a51b5 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 1 May 2024 12:46:50 +0900 Subject: [PATCH 1/5] Site Editor: Redirect `/wp_template_part/all to `/patterns` --- .../edit-site/src/components/layout/router.js | 7 ++----- .../index.js | 12 ------------ .../edit-site/src/utils/get-is-list-page.js | 4 +--- packages/router/src/router.js | 18 +++++++++++++++++- .../e2e/specs/site-editor/hybrid-theme.spec.js | 6 +++++- 5 files changed, 25 insertions(+), 22 deletions(-) diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index fc19ca9242eace..76123ab20e33b8 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -117,11 +117,8 @@ export default function useLayoutAreas() { }; } - /* Patterns and Template Parts - * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for - * backwards compatibility. - */ - if ( path === '/patterns' || path === '/wp_template_part/all' ) { + // Patterns + if ( path === '/patterns' ) { return { key: 'patterns', areas: { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js index 352c0c4c455ec3..5e42465edd3e33 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js @@ -125,18 +125,6 @@ export default function SidebarNavigationScreenPatterns() { [] ); - /** - * This sidebar needs to temporarily accomodate two different "URLs": - * - * 1. path = /patterns - * Block based themes. Also classic themes can access this URL, though it's not linked anywhere. - * - * 2. path = /wp_template_part/all - * Classic themes with support for block-template-parts. We need to list only Template Parts in this case. - * The URL is accessible from the Appearance > Template Parts menu. - * - * This is temporary. We aim to consolidate to /patterns. - */ return ( { + // `/wp_template_part/all` path is no longer used and redirects to + // Patterns page for backward compatibility. + const { path } = location?.params; + + if ( path === '/wp_template_part/all' ) { + history.push( { + path: '/patterns', + } ); + setLocation( { + ...location, + params: { + path: '/patterns', + }, + } ); + } + return history.listen( ( { location: updatedLocation } ) => { setLocation( getLocationWithParams( updatedLocation ) ); } ); - }, [] ); + }, [ location ] ); return ( diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index ea22349f5b7eb8..a85e1e6cd72b3a 100644 --- a/test/e2e/specs/site-editor/hybrid-theme.spec.js +++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js @@ -23,7 +23,7 @@ test.describe( 'Hybrid theme', () => { ).toBeVisible(); } ); - test( 'should show Patterns page when accessing template parts list page', async ( { + test( 'should redirect to Patterns page when accessing template parts list page', async ( { admin, page, } ) => { @@ -32,6 +32,10 @@ test.describe( 'Hybrid theme', () => { 'path=/wp_template_part/all' ); + await expect( page ).toHaveURL( + '/wp-admin/site-editor.php?path=/patterns' + ); + await expect( page.getByRole( 'heading', { level: 1, text: 'Patterns' } ) ).toBeVisible(); From 48b0498b68815b968b26f9af156552bc23c1a2b3 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 7 May 2024 21:14:41 +0900 Subject: [PATCH 2/5] Fix e2e test --- test/e2e/specs/site-editor/hybrid-theme.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index a85e1e6cd72b3a..1f73b6de6f486a 100644 --- a/test/e2e/specs/site-editor/hybrid-theme.spec.js +++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js @@ -33,7 +33,7 @@ test.describe( 'Hybrid theme', () => { ); await expect( page ).toHaveURL( - '/wp-admin/site-editor.php?path=/patterns' + '/wp-admin/site-editor.php?path=%2Fpatterns' ); await expect( From 5568dc4026108cc060bbebadcb52d35c9abc2828 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 12 May 2024 11:28:46 +0900 Subject: [PATCH 3/5] Move redirect rule to edit-site package --- .../edit-site/src/components/layout/router.js | 14 ++++++++++++-- packages/router/src/router.js | 16 ---------------- 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index f532598649681f..fbb4f29e65315e 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -3,7 +3,7 @@ */ import { privateApis as routerPrivateApis } from '@wordpress/router'; import { __ } from '@wordpress/i18n'; - +import { useLayoutEffect } from '@wordpress/element'; /** * Internal dependencies */ @@ -33,6 +33,14 @@ export default function useLayoutAreas() { const { params } = useLocation(); const { postType, postId, path, layout, isCustom, canvas } = params; + useLayoutEffect( () => { + // `/wp_template_part/all` path is no longer used and redirects to + // Patterns page for backward compatibility. + if ( path === '/wp_template_part/all' ) { + history.replace( { path: '/patterns' } ); + } + }, [ history, path ] ); + // Note: Since "sidebar" is not yet supported here, // returning undefined from "mobile" means show the sidebar. @@ -141,7 +149,9 @@ export default function useLayoutAreas() { } // Patterns - if ( path === '/patterns' ) { + // `/wp_template_part/all` path is no longer used and redirects to + // Patterns page for backward compatibility. + if ( path === '/patterns' || path === '/wp_template_part/all' ) { return { key: 'patterns', areas: { diff --git a/packages/router/src/router.js b/packages/router/src/router.js index b1f1f54c6203ee..095745fc91cf86 100644 --- a/packages/router/src/router.js +++ b/packages/router/src/router.js @@ -38,22 +38,6 @@ export function RouterProvider( { children } ) { ); useEffect( () => { - // `/wp_template_part/all` path is no longer used and redirects to - // Patterns page for backward compatibility. - const { path } = location?.params; - - if ( path === '/wp_template_part/all' ) { - history.push( { - path: '/patterns', - } ); - setLocation( { - ...location, - params: { - path: '/patterns', - }, - } ); - } - return history.listen( ( { location: updatedLocation } ) => { setLocation( getLocationWithParams( updatedLocation ) ); } ); From 1e718aae08581be5a0017121c87f0a2547f49f12 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 12 May 2024 11:31:38 +0900 Subject: [PATCH 4/5] Remove dependencies --- packages/router/src/router.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/router/src/router.js b/packages/router/src/router.js index 095745fc91cf86..e5449cef54c6a0 100644 --- a/packages/router/src/router.js +++ b/packages/router/src/router.js @@ -41,7 +41,7 @@ export function RouterProvider( { children } ) { return history.listen( ( { location: updatedLocation } ) => { setLocation( getLocationWithParams( updatedLocation ) ); } ); - }, [ location ] ); + }, [] ); return ( From 5416326512b15613ecdd73b922f0b6858d2eb4b2 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 12 May 2024 11:34:03 +0900 Subject: [PATCH 5/5] Change useLayutEffect to useEffect --- packages/edit-site/src/components/layout/router.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index fbb4f29e65315e..8d9e14db92a9fa 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -3,7 +3,7 @@ */ import { privateApis as routerPrivateApis } from '@wordpress/router'; import { __ } from '@wordpress/i18n'; -import { useLayoutEffect } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies */ @@ -33,7 +33,7 @@ export default function useLayoutAreas() { const { params } = useLocation(); const { postType, postId, path, layout, isCustom, canvas } = params; - useLayoutEffect( () => { + useEffect( () => { // `/wp_template_part/all` path is no longer used and redirects to // Patterns page for backward compatibility. if ( path === '/wp_template_part/all' ) {