From 88fa0b70d8907bd2ee63dc4cf80e2f57aee44de7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 21 May 2024 18:04:09 +0100 Subject: [PATCH] Site Editor: Remove the details pages (#61741) Co-authored-by: youknowriad Co-authored-by: ntsekouras Co-authored-by: jsnajdr Co-authored-by: ellatrix Co-authored-by: draganescu Co-authored-by: jasmussen Co-authored-by: jameskoster Co-authored-by: richtabor --- .../src/site-editor-navigation-commands.js | 34 +-- .../src/components/add-new-pattern/index.js | 9 +- .../edit-site/src/components/editor/index.js | 6 +- .../edit-site/src/components/layout/router.js | 131 ++++++----- .../dataviews-pattern-actions.js | 35 +-- .../delete-category-menu-item.js | 3 +- .../src/components/page-patterns/header.js | 2 +- .../src/components/page-patterns/index.js | 39 +--- .../components/page-patterns/use-patterns.js | 19 +- .../src/components/pattern-modal/duplicate.js | 20 +- .../sidebar-dataviews/add-new-view.js | 4 +- .../custom-dataviews-list.js | 4 +- .../sidebar-dataviews/dataview-item.js | 4 +- .../src/components/sidebar-dataviews/index.js | 13 +- .../sidebar-navigation-item/index.js | 14 +- .../index.js | 8 +- .../sidebar-navigation-screen-main/index.js | 18 +- .../use-navigation-menu-handlers.js | 2 +- .../index.js | 2 +- .../leaf-more-menu.js | 2 + .../sidebar-navigation-screen-page/index.js | 204 ----------------- .../page-details.js | 161 -------------- .../status-label.js | 71 ------ .../sidebar-navigation-screen-page/style.scss | 69 ------ .../index.js | 57 ----- .../style.scss | 26 --- ...template-part-navigation-menu-list-item.js | 31 --- .../template-part-navigation-menu-list.js | 21 -- .../template-part-navigation-menu.js | 33 --- .../template-part-navigation-menus.js | 36 --- .../use-navigation-menu-content.js | 98 --------- .../use-navigation-menu-title.js | 32 --- .../use-pattern-details.js | 205 ------------------ .../category-item.js | 8 +- .../index.js | 20 +- .../home-template-details.js | 144 ------------ .../index.js | 134 ------------ .../style.scss | 53 ----- .../template-areas.js | 135 ------------ .../use-init-edited-entity-from-url.js | 41 ++-- .../src/hooks/commands/use-common-commands.js | 35 +-- .../hooks/commands/use-edit-mode-commands.js | 8 +- packages/edit-site/src/style.scss | 3 - .../edit-site/src/utils/get-is-list-page.js | 23 -- packages/router/src/router.js | 21 +- test/e2e/specs/editor/blocks/image.spec.js | 4 +- .../navigation-frontend-interactivity.spec.js | 8 +- .../editor/various/block-bindings.spec.js | 2 +- .../editor/various/pattern-overrides.spec.js | 3 +- .../specs/site-editor/block-removal.spec.js | 4 +- .../specs/site-editor/browser-history.spec.js | 2 +- .../site-editor/global-styles-sidebar.spec.js | 4 +- .../specs/site-editor/hybrid-theme.spec.js | 2 +- .../site-editor/iframe-rendering.spec.js | 1 + test/e2e/specs/site-editor/list-view.spec.js | 4 +- .../site-editor/multi-entity-saving.spec.js | 4 +- .../site-editor/new-templates-list.spec.js | 6 +- test/e2e/specs/site-editor/patterns.spec.js | 9 +- .../site-editor/push-to-global-styles.spec.js | 4 +- .../site-editor-url-navigation.spec.js | 5 +- .../site-editor/style-variations.spec.js | 14 +- .../specs/site-editor/template-part.spec.js | 10 +- .../specs/site-editor/writing-flow.spec.js | 4 +- test/performance/specs/site-editor.spec.js | 4 +- 64 files changed, 246 insertions(+), 1886 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js delete mode 100644 packages/edit-site/src/utils/get-is-list-page.js diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index 6ef9be58b4d007..ba34fffd98824c 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -16,7 +16,7 @@ import { navigation, } from '@wordpress/icons'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url'; +import { addQueryArgs, getPath } from '@wordpress/url'; import { useDebounce } from '@wordpress/compose'; /** @@ -119,14 +119,6 @@ const getNavigationCommandLoaderPerPostType = ( postType ) => const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' ); - const extraArgs = isSiteEditor - ? { - canvas: getQueryArg( - window.location.href, - 'canvas' - ), - } - : {}; return { ...command, @@ -134,7 +126,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) => const args = { postType, postId: record.id, - ...extraArgs, + canvas: 'edit', }; const targetUrl = addQueryArgs( 'site-editor.php', @@ -195,15 +187,6 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => const result = []; result.push( ...orderedRecords.map( ( record ) => { - const extraArgs = isSiteEditor - ? { - canvas: getQueryArg( - window.location.href, - 'canvas' - ), - } - : {}; - return { name: templateType + '-' + record.id, searchLabel: record.title?.rendered + ' ' + record.id, @@ -215,7 +198,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => const args = { postType: templateType, postId: record.id, - ...extraArgs, + canvas: 'edit', }; const targetUrl = addQueryArgs( 'site-editor.php', @@ -242,8 +225,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) => icon: symbolFilled, callback: ( { close } ) => { const args = { - path: '/patterns', - categoryType: 'wp_template_part', + postType: 'wp_template_part', categoryId: 'all-parts', }; const targetUrl = addQueryArgs( @@ -296,7 +278,7 @@ function useSiteEditorBasicNavigationCommands() { icon: navigation, callback: ( { close } ) => { const args = { - path: '/navigation', + postType: 'wp_navigation', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -332,7 +314,7 @@ function useSiteEditorBasicNavigationCommands() { icon: page, callback: ( { close } ) => { const args = { - path: '/page', + post_type: 'page', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -350,7 +332,7 @@ function useSiteEditorBasicNavigationCommands() { icon: layout, callback: ( { close } ) => { const args = { - path: '/wp_template', + postType: 'wp_template', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { @@ -370,7 +352,7 @@ function useSiteEditorBasicNavigationCommands() { callback: ( { close } ) => { if ( canCreateTemplate ) { const args = { - path: '/patterns', + postType: 'wp_block', }; const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index ce0ad6bbbccf48..00cc086183e57b 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -46,14 +46,12 @@ export default function AddNewPattern() { [] ); - function handleCreatePattern( { pattern, categoryId } ) { + function handleCreatePattern( { pattern } ) { setShowPatternModal( false ); history.push( { postId: pattern.id, postType: PATTERN_TYPES.user, - categoryType: PATTERN_TYPES.theme, - categoryId, canvas: 'edit', } ); } @@ -139,7 +137,7 @@ export default function AddNewPattern() { let currentCategoryId; // When we're not handling template parts, we should // add or create the proper pattern category. - if ( params.categoryType !== TEMPLATE_PART_POST_TYPE ) { + if ( params.postType !== TEMPLATE_PART_POST_TYPE ) { const currentCategory = categoryMap .values() .find( @@ -168,8 +166,7 @@ export default function AddNewPattern() { params.categoryId !== 'my-patterns' ) { history.push( { - path: `/patterns`, - categoryType: PATTERN_TYPES.theme, + postType: PATTERN_TYPES.user, categoryId: PATTERN_DEFAULT_CATEGORY, } ); } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 7a215fdd9421ee..c521ea3d8e5c35 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -217,10 +217,7 @@ export default function Editor( { isLoading, onClick } ) { case 'move-to-trash': { history.push( { - path: '/' + items[ 0 ].type, - postId: undefined, - postType: undefined, - canvas: 'view', + postType: items[ 0 ].type, } ); } break; @@ -245,7 +242,6 @@ export default function Editor( { isLoading, onClick } ) { label: __( 'Edit' ), onClick: () => { history.push( { - path: undefined, postId: newItem.id, postType: newItem.type, canvas: 'edit', diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 8d9e14db92a9fa..50d8c84319e5e2 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -17,38 +17,74 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; -import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page'; import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; -import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template'; -import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern'; import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns'; import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu'; import DataViewsSidebarContent from '../sidebar-dataviews'; +import { + NAVIGATION_POST_TYPE, + PATTERN_TYPES, + TEMPLATE_PART_POST_TYPE, + TEMPLATE_POST_TYPE, +} from '../../utils/constants'; const { useLocation, useHistory } = unlock( routerPrivateApis ); -export default function useLayoutAreas() { - const isSiteEditorLoading = useIsSiteEditorLoading(); +function useRedirectOldPaths() { const history = useHistory(); const { params } = useLocation(); - const { postType, postId, path, layout, isCustom, canvas } = params; - useEffect( () => { - // `/wp_template_part/all` path is no longer used and redirects to - // Patterns page for backward compatibility. + const { postType, path, categoryType, ...rest } = params; + if ( path === '/wp_template_part/all' ) { - history.replace( { path: '/patterns' } ); + history.replace( { postType: TEMPLATE_PART_POST_TYPE } ); + } + + if ( path === '/page' ) { + history.replace( { + postType: 'page', + ...rest, + } ); + } + + if ( path === '/wp_template' ) { + history.replace( { + postType: TEMPLATE_POST_TYPE, + ...rest, + } ); + } + + if ( path === '/patterns' ) { + history.replace( { + postType: + categoryType === TEMPLATE_PART_POST_TYPE + ? TEMPLATE_PART_POST_TYPE + : PATTERN_TYPES.user, + ...rest, + } ); + } + + if ( path === '/navigation' ) { + history.replace( { + postType: NAVIGATION_POST_TYPE, + ...rest, + } ); } - }, [ history, path ] ); + }, [ history, params ] ); +} - // Note: Since "sidebar" is not yet supported here, - // returning undefined from "mobile" means show the sidebar. +export default function useLayoutAreas() { + const isSiteEditorLoading = useIsSiteEditorLoading(); + const history = useHistory(); + const { params } = useLocation(); + const { postType, postId, path, layout, isCustom, canvas } = params; + useRedirectOldPaths(); // Page list - if ( path === '/page' ) { + if ( postType === 'page' ) { const isListLayout = layout === 'list' || ! layout; return { - key: 'pages-list', + key: 'pages', areas: { sidebar: ( ), content: , - preview: isListLayout && ( + preview: ( isListLayout || canvas === 'edit' ) && ( @@ -83,61 +119,17 @@ export default function useLayoutAreas() { }; } - // Regular other post types - if ( postType && postId ) { - let sidebar; - if ( postType === 'wp_template_part' || postType === 'wp_block' ) { - sidebar = ( - - ); - } else if ( postType === 'wp_template' ) { - sidebar = ( - - ); - } else if ( postType === 'page' ) { - sidebar = ( - - ); - } else { - sidebar = ( - - ); - } - return { - key: 'page', - areas: { - sidebar, - preview: , - mobile: canvas === 'edit' && ( - - ), - }, - }; - } - // Templates - if ( path === '/wp_template' ) { + if ( postType === TEMPLATE_POST_TYPE ) { const isListLayout = isCustom !== 'true' && layout === 'list'; return { - key: 'templates-list', + key: 'templates', areas: { sidebar: ( ), content: , - preview: isListLayout && ( + preview: ( isListLayout || canvas === 'edit' ) && ( ), mobile: , @@ -149,15 +141,18 @@ export default function useLayoutAreas() { } // 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' ) { + if ( + [ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType ) + ) { return { key: 'patterns', areas: { sidebar: , content: , mobile: , + preview: canvas === 'edit' && ( + + ), }, }; } @@ -179,14 +174,14 @@ export default function useLayoutAreas() { } // Navigation - if ( path === '/navigation' ) { + if ( postType === NAVIGATION_POST_TYPE ) { if ( postId ) { return { key: 'navigation', areas: { sidebar: ( ), preview: , diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js index a37ee426709cb7..e01dca97c3be46 100644 --- a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js +++ b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js @@ -5,21 +5,15 @@ import { __, _x, sprintf } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import { - PATTERN_TYPES, - TEMPLATE_PART_POST_TYPE, - PATTERN_DEFAULT_CATEGORY, -} from '../../utils/constants'; +import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; import { CreateTemplatePartModalContents } from '../create-template-part-modal'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); const { CreatePatternModalContents, useDuplicatePatternProps } = unlock( patternsPrivateApis ); @@ -30,23 +24,10 @@ export const duplicatePatternAction = { modalHeader: _x( 'Duplicate pattern', 'action label' ), RenderModal: ( { items, closeModal } ) => { const [ item ] = items; - const { - params: { categoryId = PATTERN_DEFAULT_CATEGORY }, - } = useLocation(); const isThemePattern = item.type === PATTERN_TYPES.theme; - const history = useHistory(); - function onPatternSuccess( { pattern } ) { - history.push( { - categoryType: PATTERN_TYPES.theme, - categoryId, - postType: PATTERN_TYPES.user, - postId: pattern.id, - } ); - closeModal(); - } const duplicatedProps = useDuplicatePatternProps( { pattern: isThemePattern ? item : item.patternPost, - onSuccess: onPatternSuccess, + onSuccess: () => closeModal(), } ); return ( { const [ item ] = items; const { createSuccessNotice } = useDispatch( noticesStore ); - const { - params: { categoryId = PATTERN_DEFAULT_CATEGORY }, - } = useLocation(); - const history = useHistory(); - function onTemplatePartSuccess( templatePart ) { + function onTemplatePartSuccess() { createSuccessNotice( sprintf( // translators: %s: The new template part's title e.g. 'Call to action (copy)'. @@ -79,12 +56,6 @@ export const duplicateTemplatePartAction = { ), { type: 'snackbar', id: 'edit-site-patterns-success' } ); - history.push( { - postType: TEMPLATE_PART_POST_TYPE, - postId: templatePart?.id, - categoryType: TEMPLATE_PART_POST_TYPE, - categoryId, - } ); closeModal(); } return ( diff --git a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js index adb33e71816e56..d366ed6fb3a0e5 100644 --- a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js +++ b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js @@ -60,8 +60,7 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) { onClose?.(); history.push( { - path: `/patterns`, - categoryType: PATTERN_TYPES.theme, + postType: PATTERN_TYPES.user, categoryId: PATTERN_DEFAULT_CATEGORY, } ); } catch ( error ) { diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js index 85ca443cff3b5f..cdbec44f182f66 100644 --- a/packages/edit-site/src/components/page-patterns/header.js +++ b/packages/edit-site/src/components/page-patterns/header.js @@ -44,7 +44,7 @@ export default function PatternsHeader( { description = templatePartArea?.description || __( 'Includes every template part defined for any area.' ); - } else if ( type === PATTERN_TYPES.theme ) { + } else if ( type === PATTERN_TYPES.user && !! categoryId ) { patternCategory = patternCategories.find( ( category ) => category.name === categoryId ); diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index f8314d65f34ff5..e47ee70dc8e3e9 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -120,7 +120,7 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) { ); } -function Preview( { item, categoryId, viewType } ) { +function Preview( { item, viewType } ) { const descriptionId = useId(); const isUserPattern = item.type === PATTERN_TYPES.user; const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE; @@ -130,8 +130,6 @@ function Preview( { item, categoryId, viewType } ) { const { onClick } = useLink( { postType: item.type, postId: isUserPattern ? item.id : item.name, - categoryId, - categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme, canvas: 'edit', } ); @@ -195,14 +193,11 @@ function Author( { item, viewType } ) { ); } -function Title( { item, categoryId } ) { +function Title( { item } ) { const isUserPattern = item.type === PATTERN_TYPES.user; - const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE; const { onClick } = useLink( { postType: item.type, postId: isUserPattern ? item.id : item.name, - categoryId, - categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme, canvas: 'edit', } ); return ( @@ -245,25 +240,19 @@ function Title( { item, categoryId } ) { export default function DataviewsPatterns() { const { - params: { categoryType, categoryId: categoryIdFromURL }, + params: { postType, categoryId: categoryIdFromURL }, } = useLocation(); - const type = categoryType || PATTERN_TYPES.theme; + const type = postType || PATTERN_TYPES.user; const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY; const [ view, setView ] = useState( DEFAULT_VIEW ); - const isUncategorizedThemePatterns = - type === PATTERN_TYPES.theme && categoryId === 'uncategorized'; const previousCategoryId = usePrevious( categoryId ); const viewSyncStatus = view.filters?.find( ( { field } ) => field === 'sync-status' )?.value; - const { patterns, isResolving } = usePatterns( - type, - isUncategorizedThemePatterns ? '' : categoryId, - { - search: view.search, - syncStatus: viewSyncStatus, - } - ); + const { patterns, isResolving } = usePatterns( type, categoryId, { + search: view.search, + syncStatus: viewSyncStatus, + } ); const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, { per_page: -1, @@ -288,11 +277,7 @@ export default function DataviewsPatterns() { header: __( 'Preview' ), id: 'preview', render: ( { item } ) => ( - + ), enableSorting: false, enableHiding: false, @@ -301,14 +286,12 @@ export default function DataviewsPatterns() { { header: __( 'Title' ), id: 'title', - render: ( { item } ) => ( - - ), + render: ( { item } ) => <Title item={ item } />, enableHiding: false, }, ]; - if ( type === PATTERN_TYPES.theme ) { + if ( type === PATTERN_TYPES.user ) { _fields.push( { header: __( 'Sync status' ), id: 'sync-status', diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js index 68c70d9447be89..32377edcd96842 100644 --- a/packages/edit-site/src/components/page-patterns/use-patterns.js +++ b/packages/edit-site/src/components/page-patterns/use-patterns.js @@ -291,21 +291,28 @@ const selectUserPatterns = createSelector( ); export const usePatterns = ( - categoryType, + postType, categoryId, { search = '', syncStatus } = {} ) => { return useSelect( ( select ) => { - if ( categoryType === TEMPLATE_PART_POST_TYPE ) { + if ( postType === TEMPLATE_PART_POST_TYPE ) { return selectTemplatePartsAsPatterns( select, categoryId, search ); - } else if ( categoryType === PATTERN_TYPES.theme ) { - return selectPatterns( select, categoryId, syncStatus, search ); - } else if ( categoryType === PATTERN_TYPES.user ) { + } else if ( postType === PATTERN_TYPES.user && !! categoryId ) { + const appliedCategory = + categoryId === 'uncategorized' ? '' : categoryId; + return selectPatterns( + select, + appliedCategory, + syncStatus, + search + ); + } else if ( postType === PATTERN_TYPES.user ) { return selectUserPatterns( select, syncStatus, search ); } return { @@ -313,7 +320,7 @@ export const usePatterns = ( isResolving: false, }; }, - [ categoryId, categoryType, search, syncStatus ] + [ categoryId, postType, search, syncStatus ] ); }; diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js index 18cef4a6133809..cf79dacef8d426 100644 --- a/packages/edit-site/src/components/pattern-modal/duplicate.js +++ b/packages/edit-site/src/components/pattern-modal/duplicate.js @@ -3,28 +3,21 @@ */ import { useDispatch, useSelect } from '@wordpress/data'; import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ import { PATTERN_MODALS } from './'; -import { PATTERN_TYPES } from '../../utils/constants'; import { unlock } from '../../lock-unlock'; import useEditedEntityRecord from '../use-edited-entity-record'; const { DuplicatePatternModal } = unlock( patternsPrivateApis ); -const { useHistory, useLocation } = unlock( routerPrivateApis ); const { interfaceStore } = unlock( editorPrivateApis ); export default function PatternDuplicateModal() { const { record } = useEditedEntityRecord(); - const { - params: { categoryType, categoryId }, - } = useLocation(); const { closeModal } = useDispatch( interfaceStore ); - const history = useHistory(); const isActive = useSelect( ( select ) => select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate ) @@ -34,21 +27,10 @@ export default function PatternDuplicateModal() { return null; } - function onSuccess( { pattern: newPattern } ) { - history.push( { - categoryType, - categoryId, - postType: PATTERN_TYPES.user, - postId: newPattern.id, - } ); - - closeModal(); - } - return ( <DuplicatePatternModal onClose={ closeModal } - onSuccess={ onSuccess } + onSuccess={ () => closeModal() } pattern={ record } /> ); diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js index 4bf7a173525c90..92986912d29cb8 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js +++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js @@ -26,7 +26,7 @@ const { useHistory, useLocation } = unlock( routerPrivateApis ); function AddNewItemModalContent( { type, setIsAdding } ) { const { - params: { path }, + params: { postType }, } = useLocation(); const history = useHistory(); const { saveEntityRecord } = useDispatch( coreStore ); @@ -69,7 +69,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) { } ); history.push( { - path, + postType, activeView: savedRecord.id, isCustom: 'true', } ); diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js index ebc2f43d2e4a14..5c7b3d038e76d9 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js +++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js @@ -82,7 +82,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) { function CustomDataViewItem( { dataviewId, isActive } ) { const { - params: { path }, + params: { postType }, } = useLocation(); const history = useHistory(); const { dataview } = useSelect( @@ -146,7 +146,7 @@ function CustomDataViewItem( { dataviewId, isActive } ) { ); if ( isActive ) { history.replace( { - path, + postType, } ); } onClose(); diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js index 53d0f2984cb939..e6ebd5b1f8ee8b 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js +++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js @@ -29,14 +29,14 @@ export default function DataViewItem( { suffix, } ) { const { - params: { path, layout }, + params: { postType, layout }, } = useLocation(); const iconToUse = icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon; const linkInfo = useLink( { - path, + postType, layout, activeView: isCustom ? customViewId : slug, isCustom: isCustom ? 'true' : 'false', diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js index 73d7b56b80d00d..9362308172f89a 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/index.js +++ b/packages/edit-site/src/components/sidebar-dataviews/index.js @@ -14,24 +14,19 @@ const { useLocation } = unlock( routerPrivateApis ); import DataViewItem from './dataview-item'; import CustomDataViewsList from './custom-dataviews-list'; -const PATH_TO_TYPE = { - '/page': 'page', -}; - export default function DataViewsSidebarContent() { const { - params: { path, activeView = 'all', isCustom = 'false' }, + params: { postType, activeView = 'all', isCustom = 'false' }, } = useLocation(); - if ( ! path || ! PATH_TO_TYPE[ path ] ) { + if ( ! postType ) { return null; } const isCustomBoolean = isCustom === 'true'; - const type = PATH_TO_TYPE[ path ]; return ( <> <ItemGroup> - { DEFAULT_VIEWS[ type ].map( ( dataview ) => { + { DEFAULT_VIEWS[ postType ].map( ( dataview ) => { return ( <DataViewItem key={ dataview.slug } @@ -51,7 +46,7 @@ export default function DataViewsSidebarContent() { { window?.__experimentalCustomViews && ( <CustomDataViewsList activeView={ activeView } - type={ type } + type={ postType } isCustom /> ) } diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js index 8e979e7ab8bde7..80f06d7e93133b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js @@ -29,23 +29,23 @@ export default function SidebarNavigationItem( { icon, withChevron = false, suffix, - path, + uid, + params, onClick, children, ...props } ) { const history = useHistory(); const { navigate } = useContext( SidebarNavigationContext ); - - // If there is no custom click handler, create one that navigates to `path`. + // If there is no custom click handler, create one that navigates to `params`. function handleClick( e ) { if ( onClick ) { onClick( e ); navigate( 'forward' ); - } else if ( path ) { + } else if ( params ) { e.preventDefault(); - history.push( { path } ); - navigate( 'forward', `[id="${ path }"]` ); + history.push( params ); + navigate( 'forward', `[id="${ uid }"]` ); } } @@ -57,7 +57,7 @@ export default function SidebarNavigationItem( { className ) } onClick={ handleClick } - id={ path } + id={ uid } { ...props } > <HStack justify="flex-start"> diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 87a7b6d9d15f27..31e359acb4027d 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -45,7 +45,13 @@ export function SidebarNavigationItemGlobalStyles( props ) { [] ); if ( hasGlobalStyleVariations ) { - return <SidebarNavigationItem { ...props } path="/wp_global_styles" />; + return ( + <SidebarNavigationItem + { ...props } + params={ { path: '/wp_global_styles' } } + uid="global-styles-navigation-item" + /> + ); } return ( <SidebarNavigationItem diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 0859d64aa1a1c6..bdfb6ac93b51c4 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -15,6 +15,11 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; +import { + NAVIGATION_POST_TYPE, + TEMPLATE_POST_TYPE, + PATTERN_TYPES, +} from '../../utils/constants'; export default function SidebarNavigationScreenMain() { const { setEditorCanvasContainerView } = unlock( @@ -37,34 +42,39 @@ export default function SidebarNavigationScreenMain() { <> <ItemGroup> <SidebarNavigationItem - path="/navigation" + uid="navigation-navigation-item" + params={ { postType: NAVIGATION_POST_TYPE } } withChevron icon={ navigation } > { __( 'Navigation' ) } </SidebarNavigationItem> <SidebarNavigationItemGlobalStyles + uid="styles-navigation-item" withChevron icon={ styles } > { __( 'Styles' ) } </SidebarNavigationItemGlobalStyles> <SidebarNavigationItem - path="/page" + uid="page-navigation-item" + params={ { postType: 'page' } } withChevron icon={ page } > { __( 'Pages' ) } </SidebarNavigationItem> <SidebarNavigationItem - path="/wp_template" + uid="template-navigation-item" + params={ { postType: TEMPLATE_POST_TYPE } } withChevron icon={ layout } > { __( 'Templates' ) } </SidebarNavigationItem> <SidebarNavigationItem - path="/patterns" + uid="patterns-navigation-item" + params={ { postType: PATTERN_TYPES.user } } withChevron icon={ symbol } > diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js index ce75f3155f33e7..7009ddc6fc9278 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js @@ -42,7 +42,7 @@ function useDeleteNavigationMenu() { type: 'snackbar', } ); - history.push( { path: '/navigation' } ); + history.push( { postType: 'wp_navigation' } ); } catch ( error ) { createErrorNotice( sprintf( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index d5c3fa92c902f9..bc32b0a9061c1e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -156,7 +156,7 @@ export function SidebarNavigationScreenWrapper( { const NavMenuItem = ( { postId, ...props } ) => { const linkInfo = useLink( { postId, - path: '/navigation', + postType: 'wp_navigation', } ); return <SidebarNavigationItem { ...linkInfo } { ...props } />; }; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index bb34802ebbbc36..3749505c6b56fb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -64,6 +64,7 @@ export default function LeafMoreMenu( props ) { { postType: attributes.type, postId: attributes.id, + canvas: 'edit', }, { backPath: params, @@ -75,6 +76,7 @@ export default function LeafMoreMenu( props ) { { postType: 'page', postId: attributes.id, + canvas: 'edit', }, { backPath: params, diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js deleted file mode 100644 index 51251dcf846e66..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ /dev/null @@ -1,204 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { - __experimentalVStack as VStack, - ExternalLink, - __experimentalTruncate as Truncate, -} from '@wordpress/components'; -import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; -import { decodeEntities } from '@wordpress/html-entities'; -import { pencil } from '@wordpress/icons'; -import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; -import { escapeAttribute } from '@wordpress/escape-html'; -import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url'; -import { useEffect, useCallback } from '@wordpress/element'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; -import { store as noticesStore } from '@wordpress/notices'; - -/** - * Internal dependencies - */ -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import SidebarButton from '../sidebar-button'; -import PageDetails from './page-details'; -import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; - -const { useLocation, useHistory } = unlock( routerPrivateApis ); -const { PostActions } = unlock( editorPrivateApis ); - -export default function SidebarNavigationScreenPage( { backPath } ) { - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const history = useHistory(); - const { createSuccessNotice } = useDispatch( noticesStore ); - const { - params: { postId }, - } = useLocation(); - const { record, hasResolved } = useEntityRecord( - 'postType', - 'page', - postId - ); - - const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( - ( select ) => { - const { getEntityRecord } = select( coreStore ); - // Featured image. - const attachedMedia = record?.featured_media - ? getEntityRecord( - 'postType', - 'attachment', - record?.featured_media - ) - : null; - - return { - featuredMediaSourceUrl: - attachedMedia?.media_details.sizes?.medium?.source_url || - attachedMedia?.source_url, - featuredMediaAltText: escapeAttribute( - attachedMedia?.alt_text || - attachedMedia?.description?.raw || - '' - ), - }; - }, - [ record ] - ); - - // Redirect to the main pages navigation screen if the page is not found or has been deleted. - useEffect( () => { - if ( hasResolved && ! record ) { - history.push( { - path: '/page', - postId: undefined, - postType: undefined, - canvas: 'view', - } ); - } - }, [ hasResolved, record, history ] ); - - const onActionPerformed = useCallback( - ( actionId, items ) => { - switch ( actionId ) { - case 'move-to-trash': - { - history.push( { - path: '/' + items[ 0 ].type, - postId: undefined, - postType: undefined, - canvas: 'view', - } ); - } - break; - case 'duplicate-post': - { - const newItem = items[ 0 ]; - const title = - typeof newItem.title === 'string' - ? newItem.title - : newItem.title?.rendered; - createSuccessNotice( - sprintf( - // translators: %s: Title of the created post e.g: "Post 1". - __( '"%s" successfully created.' ), - title - ), - { - type: 'snackbar', - id: 'duplicate-post-action', - actions: [ - { - label: __( 'Edit' ), - onClick: () => { - history.push( { - path: undefined, - postId: newItem.id, - postType: newItem.type, - canvas: 'edit', - } ); - }, - }, - ], - } - ); - } - break; - } - }, - [ history, createSuccessNotice ] - ); - - const featureImageAltText = featuredMediaAltText - ? decodeEntities( featuredMediaAltText ) - : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); - - return record ? ( - <SidebarNavigationScreen - backPath={ backPath } - title={ decodeEntities( - record?.title?.rendered || __( '(no title)' ) - ) } - actions={ - <> - <PostActions - onActionPerformed={ onActionPerformed } - buttonProps={ { size: 'default' } } - /> - <SidebarButton - onClick={ () => setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> - </> - } - meta={ - <ExternalLink - className="edit-site-sidebar-navigation-screen__page-link" - href={ record.link } - > - { filterURLForDisplay( - safeDecodeURIComponent( record.link ) - ) } - </ExternalLink> - } - content={ - <> - { !! featuredMediaSourceUrl && ( - <VStack - className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper" - alignment="left" - spacing={ 2 } - > - <div className="edit-site-sidebar-navigation-screen-page__featured-image has-image"> - <img - alt={ featureImageAltText } - src={ featuredMediaSourceUrl } - /> - </div> - </VStack> - ) } - { !! record?.excerpt?.rendered && ( - <Truncate - className="edit-site-sidebar-navigation-screen-page__excerpt" - numberOfLines={ 3 } - > - { stripHTML( record.excerpt.rendered ) } - </Truncate> - ) } - <PageDetails id={ postId } /> - </> - } - footer={ - record?.modified ? ( - <SidebarNavigationScreenDetailsFooter record={ record } /> - ) : null - } - /> - ) : null; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js deleted file mode 100644 index 7fcedcf40ce134..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js +++ /dev/null @@ -1,161 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, _x, sprintf } from '@wordpress/i18n'; -import { __experimentalTruncate as Truncate } from '@wordpress/components'; -import { count as wordCount } from '@wordpress/wordcount'; -import { useSelect } from '@wordpress/data'; -import { decodeEntities } from '@wordpress/html-entities'; -import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; -import { safeDecodeURIComponent } from '@wordpress/url'; - -/** - * Internal dependencies - */ -import StatusLabel from './status-label'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, - SidebarNavigationScreenDetailsPanelLabel, - SidebarNavigationScreenDetailsPanelValue, -} from '../sidebar-navigation-screen-details-panel'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; - -// Taken from packages/editor/src/components/time-to-read/index.js. -const AVERAGE_READING_RATE = 189; - -function getPageDetails( page ) { - if ( ! page ) { - return []; - } - - const details = [ - { - label: __( 'Status' ), - value: ( - <StatusLabel - status={ page?.password ? 'protected' : page.status } - date={ page?.date } - short - /> - ), - }, - { - label: __( 'Slug' ), - value: ( - <Truncate numberOfLines={ 1 }> - { safeDecodeURIComponent( - page.slug || page.generated_slug - ) } - </Truncate> - ), - }, - ]; - - if ( page?.templateTitle ) { - details.push( { - label: __( 'Template' ), - value: decodeEntities( page.templateTitle ), - } ); - } - - if ( page?.parentTitle ) { - details.push( { - label: __( 'Parent' ), - value: decodeEntities( page.parentTitle || __( '(no title)' ) ), - } ); - } - - /* - * translators: If your word count is based on single characters (e.g. East Asian characters), - * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'. - * Do not translate into your own language. - */ - const wordCountType = _x( 'words', 'Word count type. Do not translate!' ); - const wordsCounted = page?.content?.rendered - ? wordCount( page.content.rendered, wordCountType ) - : 0; - const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE ); - - if ( wordsCounted && ! page?.isPostsPage ) { - details.push( - { - label: __( 'Words' ), - value: wordsCounted.toLocaleString() || __( 'Unknown' ), - }, - { - label: __( 'Time to read' ), - value: - readingTime > 1 - ? sprintf( - /* translators: %s: is the number of minutes. */ - __( '%s mins' ), - readingTime.toLocaleString() - ) - : __( '< 1 min' ), - } - ); - } - return details; -} - -export default function PageDetails( { id } ) { - const { record } = useEntityRecord( 'postType', 'page', id ); - const { parentTitle, templateTitle, isPostsPage } = useSelect( - ( select ) => { - const { getEditedPostId } = unlock( select( editSiteStore ) ); - const template = select( coreStore ).getEntityRecord( - 'postType', - TEMPLATE_POST_TYPE, - getEditedPostId() - ); - const _templateTitle = template?.title?.rendered; - - // Parent page title. - const _parentTitle = record?.parent - ? select( coreStore ).getEntityRecord( - 'postType', - 'page', - record.parent, - { - _fields: [ 'title' ], - } - )?.title?.rendered - : null; - - const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( 'root', 'site' ); - - return { - parentTitle: _parentTitle, - templateTitle: _templateTitle, - isPostsPage: record?.id === siteSettings?.page_for_posts, - }; - }, - [ record?.parent, record?.id ] - ); - return ( - <SidebarNavigationScreenDetailsPanel - spacing={ 5 } - title={ __( 'Details' ) } - > - { getPageDetails( { - parentTitle, - templateTitle, - isPostsPage, - ...record, - } ).map( ( { label, value } ) => ( - <SidebarNavigationScreenDetailsPanelRow key={ label }> - <SidebarNavigationScreenDetailsPanelLabel> - { label } - </SidebarNavigationScreenDetailsPanelLabel> - <SidebarNavigationScreenDetailsPanelValue> - { value } - </SidebarNavigationScreenDetailsPanelValue> - </SidebarNavigationScreenDetailsPanelRow> - ) ) } - </SidebarNavigationScreenDetailsPanel> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js deleted file mode 100644 index 934289311b4851..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js +++ /dev/null @@ -1,71 +0,0 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date'; -import { createInterpolateElement } from '@wordpress/element'; - -export default function StatusLabel( { status, date, short } ) { - const relateToNow = humanTimeDiff( date ); - let statusLabel = status; - switch ( status ) { - case 'publish': - statusLabel = date - ? createInterpolateElement( - sprintf( - /* translators: %s: is the relative time when the post was published. */ - __( 'Published <time>%s</time>' ), - relateToNow - ), - { time: <time dateTime={ date } /> } - ) - : __( 'Published' ); - break; - case 'future': - const formattedDate = dateI18n( - short ? 'M j' : 'F j', - getDate( date ) - ); - statusLabel = date - ? createInterpolateElement( - sprintf( - /* translators: %s: is the formatted date and time on which the post is scheduled to be published. */ - __( 'Scheduled: <time>%s</time>' ), - formattedDate - ), - { time: <time dateTime={ date } /> } - ) - : __( 'Scheduled' ); - break; - case 'draft': - statusLabel = __( 'Draft' ); - break; - case 'pending': - statusLabel = __( 'Pending' ); - break; - case 'private': - statusLabel = __( 'Private' ); - break; - case 'protected': - statusLabel = __( 'Password protected' ); - break; - } - - return ( - <div - className={ clsx( - 'edit-site-sidebar-navigation-screen-page__status', - { - [ `has-status has-${ status }-status` ]: !! status, - } - ) } - > - { statusLabel } - </div> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss deleted file mode 100644 index 0daf52740c649b..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss +++ /dev/null @@ -1,69 +0,0 @@ -.edit-site-sidebar-navigation-screen-page__featured-image-wrapper { - background-color: $gray-800; - margin-bottom: $grid-unit-20; - min-height: 128px; - border-radius: $grid-unit-05; -} - -.edit-site-sidebar-navigation-screen-page__featured-image { - border-radius: 2px; - height: 128px; - overflow: hidden; - width: 100%; - background-size: cover; - background-position: 50% 50%; - display: flex; - align-items: center; - justify-content: center; - color: $gray-600; - img { - object-fit: cover; - height: 100%; - width: 100%; - object-position: 50% 50%; - } -} - -.edit-site-sidebar-navigation-screen-page__featured-image-description { - font-size: $helptext-font-size; -} - -.edit-site-sidebar-navigation-screen-page__excerpt { - font-size: $helptext-font-size; - margin-bottom: $grid-unit-30; -} - -.edit-site-sidebar-navigation-screen-page__modified { - margin: 0 0 $grid-unit-20 $grid-unit-20; - color: $gray-600; - .components-text { - color: $gray-600; - } -} - -.edit-site-sidebar-navigation-screen-page__status { - display: inline-flex; - - time { - display: contents; - } - - svg { - height: 16px; - width: 16px; - margin-right: $grid-unit-10; - fill: $alert-yellow; - } - - &.has-publish-status svg, - &.has-future-status svg { - fill: $alert-green; - } -} - -.edit-site-sidebar-navigation-screen__actions .editor-all-actions-button { - color: inherit; - &:active { - color: inherit; - } -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js deleted file mode 100644 index 1b21466576f8ef..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { pencil } from '@wordpress/icons'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import SidebarButton from '../sidebar-button'; -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; -import usePatternDetails from './use-pattern-details'; -import { store as editSiteStore } from '../../store'; -import { unlock } from '../../lock-unlock'; -import TemplateActions from '../template-actions'; - -const { useLocation, useHistory } = unlock( routerPrivateApis ); - -export default function SidebarNavigationScreenPattern( { backPath } ) { - const history = useHistory(); - const location = useLocation(); - const { - params: { postType, postId }, - } = location; - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - - useInitEditedEntityFromURL(); - - const patternDetails = usePatternDetails( postType, postId ); - - return ( - <SidebarNavigationScreen - actions={ - <> - <TemplateActions - postType={ postType } - postId={ postId } - toggleProps={ { as: SidebarButton } } - onRemove={ () => { - history.push( backPath ); - } } - /> - <SidebarButton - onClick={ () => setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> - </> - } - backPath={ backPath } - { ...patternDetails } - /> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss deleted file mode 100644 index 95a27ba5aa5fa5..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss +++ /dev/null @@ -1,26 +0,0 @@ -.edit-site-sidebar-navigation-screen-pattern__added-by-description { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: $grid-unit-30; -} - -.edit-site-sidebar-navigation-screen-pattern__added-by-description-author { - display: inline-flex; - align-items: center; - - img { - border-radius: $grid-unit-15; - } - - svg { - fill: $gray-600; - } -} - -.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon { - width: 24px; - height: 24px; - margin-right: $grid-unit-10; -} - diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js deleted file mode 100644 index 22d9d841dc6fd5..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import SidebarNavigationItem from '../sidebar-navigation-item'; -import useNavigationMenuTitle from './use-navigation-menu-title'; -import { useLink } from '../routes/link'; -import { NAVIGATION_POST_TYPE } from '../../utils/constants'; - -export default function TemplatePartNavigationMenuListItem( { id } ) { - const title = useNavigationMenuTitle( id ); - - const linkInfo = useLink( { - postId: id, - postType: NAVIGATION_POST_TYPE, - } ); - - if ( ! id || title === undefined ) { - return null; - } - - return ( - <SidebarNavigationItem withChevron { ...linkInfo }> - { title || __( '(no title)' ) } - </SidebarNavigationItem> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js deleted file mode 100644 index 4171b1e782575e..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; -/** - * Internal dependencies - */ -import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item'; - -export default function TemplatePartNavigationMenuList( { menus } ) { - return ( - <ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list"> - { menus.map( ( menuId ) => ( - <TemplatePartNavigationMenuListItem - key={ menuId } - id={ menuId } - /> - ) ) } - </ItemGroup> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js deleted file mode 100644 index 3d770cc4f7c26f..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { __experimentalHeading as Heading } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor'; -import useNavigationMenuTitle from './use-navigation-menu-title'; - -export default function TemplatePartNavigationMenu( { id } ) { - const title = useNavigationMenuTitle( id ); - - if ( ! id || title === undefined ) { - return null; - } - - return ( - <> - <Heading - className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title" - size="11" - upperCase - weight={ 500 } - > - { title || __( 'Navigation' ) } - </Heading> - <NavigationMenuEditor navigationMenuId={ id } /> - </> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js deleted file mode 100644 index d766d04b132ca1..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { __experimentalHeading as Heading } from '@wordpress/components'; -/** - * Internal dependencies - */ -import TemplatePartNavigationMenu from './template-part-navigation-menu'; -import TemplatePartNavigationMenuList from './template-part-navigation-menu-list'; - -export default function TemplatePartNavigationMenus( { menus } ) { - if ( ! menus.length ) { - return null; - } - - // if there is a single menu then render TemplatePartNavigationMenu - if ( menus.length === 1 ) { - return <TemplatePartNavigationMenu id={ menus[ 0 ] } />; - } - - // if there are multiple menus then render TemplatePartNavigationMenuList - return ( - <> - <Heading - className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title" - size="11" - upperCase - weight={ 500 } - > - { __( 'Navigation' ) } - </Heading> - <TemplatePartNavigationMenuList menus={ menus } /> - </> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js deleted file mode 100644 index 249124b1054cec..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * WordPress dependencies - */ -import { parse } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import TemplatePartNavigationMenus from './template-part-navigation-menus'; -import useEditedEntityRecord from '../use-edited-entity-record'; -import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; - -function getBlocksFromRecord( record ) { - if ( record?.blocks ) { - return record?.blocks; - } - - return record?.content && typeof record.content !== 'function' - ? parse( record.content ) - : []; -} - -/** - * Retrieves a list of specific blocks from a given tree of blocks. - * - * @param {string} targetBlockType The name of the block type to find. - * @param {Array} blocks A list of blocks from a template part entity. - * - * @return {Array} A list of any navigation blocks found in the blocks. - */ -function getBlocksOfTypeFromBlocks( targetBlockType, blocks ) { - if ( ! targetBlockType || ! blocks?.length ) { - return []; - } - - const findInBlocks = ( _blocks ) => { - if ( ! _blocks ) { - return []; - } - - const navigationBlocks = []; - - for ( const block of _blocks ) { - if ( block.name === targetBlockType ) { - navigationBlocks.push( block ); - } - - if ( block?.innerBlocks ) { - const innerNavigationBlocks = findInBlocks( block.innerBlocks ); - - if ( innerNavigationBlocks.length ) { - navigationBlocks.push( ...innerNavigationBlocks ); - } - } - } - - return navigationBlocks; - }; - - return findInBlocks( blocks ); -} - -export default function useNavigationMenuContent( postType, postId ) { - const { record } = useEditedEntityRecord( postType, postId ); - - // Only managing navigation menus in template parts is supported - // to match previous behaviour. This could potentially be expanded - // to patterns as well. - if ( postType !== TEMPLATE_PART_POST_TYPE ) { - return; - } - - const blocks = getBlocksFromRecord( record ); - const navigationBlocks = getBlocksOfTypeFromBlocks( - 'core/navigation', - blocks - ); - - if ( ! navigationBlocks.length ) { - return; - } - - const navigationMenuIds = navigationBlocks?.map( - ( block ) => block.attributes.ref - ); - - // Dedupe the Navigation blocks, as you can have multiple navigation blocks in the template. - // Also, filter out undefined values, as blocks don't have an id when initially added. - const uniqueNavigationMenuIds = [ ...new Set( navigationMenuIds ) ].filter( - ( menuId ) => menuId - ); - - if ( ! uniqueNavigationMenuIds?.length ) { - return; - } - - return <TemplatePartNavigationMenus menus={ uniqueNavigationMenuIds } />; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js deleted file mode 100644 index 4585c98ce3e1f5..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; - -/** - * Internal dependencies - */ -import { NAVIGATION_POST_TYPE } from '../../utils/constants'; - -export default function useNavigationMenuTitle( id ) { - return useSelect( - ( select ) => { - if ( ! id ) { - return undefined; - } - - const editedRecord = select( coreStore ).getEditedEntityRecord( - 'postType', - NAVIGATION_POST_TYPE, - id - ); - - // Do not display a 'trashed' navigation menu. - return editedRecord.status === 'trash' - ? undefined - : editedRecord.title; - }, - [ id ] - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js deleted file mode 100644 index dfdfbd87d22008..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ /dev/null @@ -1,205 +0,0 @@ -/** - * External dependencies - */ -import { sentenceCase } from 'change-case'; - -/** - * WordPress dependencies - */ -import { __, _x, sprintf } from '@wordpress/i18n'; -import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { useAddedBy } from '../page-templates/hooks'; -import useEditedEntityRecord from '../use-edited-entity-record'; -import useNavigationMenuContent from './use-navigation-menu-content'; -import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, - SidebarNavigationScreenDetailsPanelLabel, - SidebarNavigationScreenDetailsPanelValue, -} from '../sidebar-navigation-screen-details-panel'; -import { - PATTERN_TYPES, - TEMPLATE_PART_POST_TYPE, - PATTERN_SYNC_TYPES, - TEMPLATE_ORIGINS, -} from '../../utils/constants'; - -export default function usePatternDetails( postType, postId ) { - const { getDescription, getTitle, record } = useEditedEntityRecord( - postType, - postId - ); - const templatePartAreas = useSelect( - ( select ) => - select( editorStore ).__experimentalGetDefaultTemplatePartAreas(), - [] - ); - const { currentTheme, userPatternCategories } = useSelect( ( select ) => { - const { getCurrentTheme, getUserPatternCategories } = - select( coreStore ); - - return { - currentTheme: getCurrentTheme(), - userPatternCategories: getUserPatternCategories(), - }; - }, [] ); - - const addedBy = useAddedBy( postType, postId ); - const isAddedByActiveTheme = - addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet; - const title = getTitle(); - let description = getDescription(); - - if ( ! description && addedBy.text ) { - description = - postType === PATTERN_TYPES.user - ? sprintf( - // translators: %s: pattern title e.g: "Header". - __( 'This is the %s pattern.' ), - getTitle() - ) - : sprintf( - // translators: %s: template part title e.g: "Header". - __( 'This is the %s template part.' ), - getTitle() - ); - } - - if ( ! description && postType === PATTERN_TYPES.user && record?.title ) { - description = sprintf( - // translators: %s: user created pattern title e.g. "Footer". - __( 'This is the %s pattern.' ), - record.title - ); - } - - const footer = record?.modified ? ( - <SidebarNavigationScreenDetailsFooter record={ record } /> - ) : null; - - const details = []; - - if ( - postType === PATTERN_TYPES.user || - postType === TEMPLATE_PART_POST_TYPE - ) { - details.push( { - label: __( 'Syncing' ), - value: - record.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced - ? _x( - 'Not synced', - 'Text that indicates that the pattern is not synchronized' - ) - : _x( - 'Synced', - 'Text that indicates that the pattern is synchronized' - ), - } ); - - if ( record.wp_pattern_category?.length === 0 ) { - details.push( { - label: __( 'Categories' ), - value: __( 'Uncategorized' ), - } ); - } - if ( record.wp_pattern_category?.length > 0 ) { - const patternCategories = new Map(); - userPatternCategories.forEach( ( userCategory ) => - patternCategories.set( userCategory.id, userCategory ) - ); - - const categories = record.wp_pattern_category - .filter( ( category ) => patternCategories.get( category ) ) - .map( ( category ) => patternCategories.get( category ).label ); - - details.push( { - label: __( 'Categories' ), - value: categories.length > 0 ? categories.join( ', ' ) : '', - } ); - } - } - - if ( postType === TEMPLATE_PART_POST_TYPE ) { - const templatePartArea = templatePartAreas.find( - ( area ) => area.area === record.area - ); - - let areaDetailValue = templatePartArea?.label; - - if ( ! areaDetailValue ) { - areaDetailValue = record.area - ? sprintf( - // translators: %s: Sentenced cased template part area e.g: "My custom area". - __( '%s (removed)' ), - sentenceCase( record.area ) - ) - : __( 'None' ); - } - - details.push( { label: __( 'Area' ), value: areaDetailValue } ); - } - - if ( - postType === TEMPLATE_PART_POST_TYPE && - addedBy.text && - ! isAddedByActiveTheme - ) { - details.push( { - label: __( 'Added by' ), - value: ( - <span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author"> - { addedBy.text } - </span> - ), - } ); - } - - if ( - postType === TEMPLATE_PART_POST_TYPE && - addedBy.text && - ( record.origin === TEMPLATE_ORIGINS.plugin || - record.has_theme_file === true ) - ) { - details.push( { - label: __( 'Customized' ), - value: ( - <span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized"> - { addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) } - </span> - ), - } ); - } - - const content = ( - <> - { useNavigationMenuContent( postType, postId ) } - { !! details.length && ( - <SidebarNavigationScreenDetailsPanel - spacing={ 5 } - title={ __( 'Details' ) } - > - { details.map( ( { label, value } ) => ( - <SidebarNavigationScreenDetailsPanelRow key={ label }> - <SidebarNavigationScreenDetailsPanelLabel> - { label } - </SidebarNavigationScreenDetailsPanelLabel> - <SidebarNavigationScreenDetailsPanelValue> - { value } - </SidebarNavigationScreenDetailsPanelValue> - </SidebarNavigationScreenDetailsPanelRow> - ) ) } - </SidebarNavigationScreenDetailsPanel> - ) } - </> - ); - - return { title, description, content, footer }; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js index 49274a0435bafa..092f090e3c152e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js @@ -3,6 +3,7 @@ */ import SidebarNavigationItem from '../sidebar-navigation-item'; import { useLink } from '../routes/link'; +import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants'; export default function CategoryItem( { count, @@ -11,12 +12,13 @@ export default function CategoryItem( { isActive, label, type, - path = '/patterns', } ) { const linkInfo = useLink( { - path, - categoryType: type, categoryId: id, + postType: + type === TEMPLATE_PART_POST_TYPE + ? TEMPLATE_PART_POST_TYPE + : PATTERN_TYPES.user, } ); if ( ! count ) { 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 9c8681b86dbf37..a5f559f185064e 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 @@ -31,7 +31,6 @@ import { unlock } from '../../lock-unlock'; const { useLocation } = unlock( routerPrivateApis ); function CategoriesGroup( { - path, templatePartAreas, patternCategories, currentCategory, @@ -43,7 +42,6 @@ function CategoriesGroup( { <ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group"> <CategoryItem key="all" - path={ path } count={ Object.values( templatePartAreas ) .map( ( { templateParts } ) => templateParts?.length || 0 ) .reduce( ( acc, val ) => acc + val, 0 ) } @@ -60,7 +58,6 @@ function CategoriesGroup( { ( [ area, { label, templateParts } ] ) => ( <CategoryItem key={ area } - path={ path } count={ templateParts?.length } icon={ getTemplatePartIcon( area ) } label={ label } @@ -77,32 +74,28 @@ function CategoriesGroup( { { allPatterns && ( <CategoryItem key={ allPatterns.name } - path={ path } count={ allPatterns.count } label={ allPatterns.label } icon={ file } id={ allPatterns.name } - type="pattern" + type={ PATTERN_TYPES.user } isActive={ currentCategory === `${ allPatterns.name }` && - ( currentType === PATTERN_TYPES.theme || - currentType === PATTERN_TYPES.user ) + currentType === PATTERN_TYPES.user } /> ) } { otherPatterns.map( ( category ) => ( <CategoryItem key={ category.name } - path={ path } count={ category.count } label={ category.label } icon={ file } id={ category.name } - type="pattern" + type={ PATTERN_TYPES.user } isActive={ currentCategory === `${ category.name }` && - ( currentType === PATTERN_TYPES.theme || - currentType === PATTERN_TYPES.user ) + currentType === PATTERN_TYPES.user } /> ) ) } @@ -112,10 +105,10 @@ function CategoriesGroup( { export default function SidebarNavigationScreenPatterns( { backPath } ) { const { - params: { categoryType, categoryId, path }, + params: { postType, categoryId }, } = useLocation(); const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY; - const currentType = categoryType || PATTERN_TYPES.theme; + const currentType = postType || PATTERN_TYPES.user; const { templatePartAreas, hasTemplateParts, isLoading } = useTemplatePartAreas(); @@ -145,7 +138,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) { </ItemGroup> ) } <CategoriesGroup - path={ path } templatePartAreas={ templatePartAreas } patternCategories={ patternCategories } currentCategory={ currentCategory } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js deleted file mode 100644 index 57a13377617533..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js +++ /dev/null @@ -1,144 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { debounce } from '@wordpress/compose'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import { - CheckboxControl, - __experimentalInputControl as InputControl, - __experimentalNumberControl as NumberControl, -} from '@wordpress/components'; -import { useState, useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, -} from '../sidebar-navigation-screen-details-panel'; - -const EMPTY_OBJECT = {}; - -export default function HomeTemplateDetails() { - const { editEntityRecord } = useDispatch( coreStore ); - - const { - allowCommentsOnNewPosts, - postsPerPage, - postsPageTitle, - postsPageId, - } = useSelect( ( select ) => { - const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( 'root', 'site' ); - const _postsPageRecord = siteSettings?.page_for_posts - ? getEntityRecord( - 'postType', - 'page', - siteSettings?.page_for_posts - ) - : EMPTY_OBJECT; - - return { - allowCommentsOnNewPosts: - siteSettings?.default_comment_status === 'open', - postsPageTitle: _postsPageRecord?.title?.rendered, - postsPageId: _postsPageRecord?.id, - postsPerPage: siteSettings?.posts_per_page, - }; - }, [] ); - - const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] = - useState( '' ); - const [ postsCountValue, setPostsCountValue ] = useState( 1 ); - const [ postsPageTitleValue, setPostsPageTitleValue ] = useState( '' ); - - /* - * This hook serves to set the server-retrieved values, - * postsPageTitle, allowCommentsOnNewPosts, postsPerPage, - * to local state. - */ - useEffect( () => { - setCommentsOnNewPostsValue( allowCommentsOnNewPosts ); - setPostsPageTitleValue( postsPageTitle ); - setPostsCountValue( postsPerPage ); - }, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] ); - - const setAllowCommentsOnNewPosts = ( newValue ) => { - setCommentsOnNewPostsValue( newValue ); - editEntityRecord( 'root', 'site', undefined, { - default_comment_status: newValue ? 'open' : null, - } ); - }; - - const setPostsPageTitle = ( newValue ) => { - setPostsPageTitleValue( newValue ); - editEntityRecord( 'postType', 'page', postsPageId, { - title: newValue, - } ); - }; - - const setPostsPerPage = ( newValue ) => { - setPostsCountValue( newValue ); - editEntityRecord( 'root', 'site', undefined, { - posts_per_page: newValue, - } ); - }; - - return ( - <> - <SidebarNavigationScreenDetailsPanel spacing={ 6 }> - { postsPageId && ( - <SidebarNavigationScreenDetailsPanelRow> - <InputControl - className="edit-site-sidebar-navigation-screen__input-control" - placeholder={ __( 'No Title' ) } - size={ '__unstable-large' } - value={ postsPageTitleValue } - onChange={ debounce( setPostsPageTitle, 300 ) } - label={ __( 'Blog title' ) } - help={ __( - 'Set the Posts Page title. Appears in search results, and when the page is shared on social media.' - ) } - /> - </SidebarNavigationScreenDetailsPanelRow> - ) } - <SidebarNavigationScreenDetailsPanelRow> - <NumberControl - className="edit-site-sidebar-navigation-screen__input-control" - placeholder={ 0 } - value={ postsCountValue } - size={ '__unstable-large' } - spinControls="custom" - step="1" - min="1" - onChange={ setPostsPerPage } - label={ __( 'Posts per page' ) } - help={ __( - 'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.' - ) } - /> - </SidebarNavigationScreenDetailsPanelRow> - </SidebarNavigationScreenDetailsPanel> - - <SidebarNavigationScreenDetailsPanel - title={ __( 'Discussion' ) } - spacing={ 3 } - > - <SidebarNavigationScreenDetailsPanelRow> - <CheckboxControl - className="edit-site-sidebar-navigation-screen__input-control" - label={ __( 'Allow comments on new posts' ) } - help={ __( - 'Changes will apply to new posts only. Individual posts may override these settings.' - ) } - checked={ commentsOnNewPostsValue } - onChange={ setAllowCommentsOnNewPosts } - /> - </SidebarNavigationScreenDetailsPanelRow> - </SidebarNavigationScreenDetailsPanel> - </> - ); -} 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 deleted file mode 100644 index 76641f969fca79..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js +++ /dev/null @@ -1,134 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { pencil } from '@wordpress/icons'; -import { Icon } from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import TemplateAreas from './template-areas'; -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import useEditedEntityRecord from '../use-edited-entity-record'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import SidebarButton from '../sidebar-button'; -import { useAddedBy } from '../page-templates/hooks'; -import TemplateActions from '../template-actions'; -import HomeTemplateDetails from './home-template-details'; -import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; - -const { useHistory, useLocation } = unlock( routerPrivateApis ); - -function useTemplateDetails( postType, postId ) { - const { getDescription, getTitle, record } = useEditedEntityRecord( - postType, - postId - ); - const currentTheme = useSelect( - ( select ) => select( coreStore ).getCurrentTheme(), - [] - ); - const addedBy = useAddedBy( postType, postId ); - const isAddedByActiveTheme = - addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet; - const title = getTitle(); - let descriptionText = getDescription(); - - if ( ! descriptionText && addedBy.text ) { - descriptionText = __( - 'This is a custom template that can be applied manually to any Post or Page.' - ); - } - - const content = - record?.slug === 'home' || record?.slug === 'index' ? ( - <> - <HomeTemplateDetails /> - <TemplateAreas /> - </> - ) : ( - <TemplateAreas /> - ); - - const footer = record?.modified ? ( - <SidebarNavigationScreenDetailsFooter record={ record } /> - ) : null; - - const description = ( - <> - { descriptionText } - - { addedBy.text && ! isAddedByActiveTheme && ( - <span className="edit-site-sidebar-navigation-screen-template__added-by-description"> - <span className="edit-site-sidebar-navigation-screen-template__added-by-description-author"> - <span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon"> - { addedBy.imageUrl ? ( - <img - src={ addedBy.imageUrl } - alt="" - width="24" - height="24" - /> - ) : ( - <Icon icon={ addedBy.icon } /> - ) } - </span> - { addedBy.text } - </span> - - { addedBy.isCustomized && ( - <span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized"> - { _x( '(Customized)', 'template' ) } - </span> - ) } - </span> - ) } - </> - ); - - return { title, description, content, footer }; -} - -export default function SidebarNavigationScreenTemplate( { backPath } ) { - const history = useHistory(); - const { - params: { postType, postId }, - } = useLocation(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { title, content, description, footer } = useTemplateDetails( - postType, - postId - ); - - return ( - <SidebarNavigationScreen - title={ title } - backPath={ backPath } - actions={ - <> - <TemplateActions - postType={ postType } - postId={ postId } - toggleProps={ { as: SidebarButton } } - onRemove={ () => { - history.push( { path: '/' + postType } ); - } } - /> - <SidebarButton - onClick={ () => setCanvasMode( 'edit' ) } - label={ __( 'Edit' ) } - icon={ pencil } - /> - </> - } - description={ description } - content={ content } - footer={ footer } - /> - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss deleted file mode 100644 index 4e6fcc3700fc4d..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss +++ /dev/null @@ -1,53 +0,0 @@ -.edit-site-sidebar-navigation-screen-template__added-by-description { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: $grid-unit-30; -} - -.edit-site-sidebar-navigation-screen-template__added-by-description-author { - display: inline-flex; - align-items: center; - - img { - border-radius: $grid-unit-15; - width: 20px; - height: 20px; - } - - svg { - fill: $gray-600; - } -} - -.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon { - width: 24px; - height: 24px; - margin-right: $grid-unit-05; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.edit-site-sidebar-navigation-screen-template__template-area-button { - color: $white; - display: flex; - align-items: center; - width: 100%; - flex-wrap: nowrap; - border-radius: 4px; - &:hover, - &:focus { - background: $gray-800; - color: $white; - } -} - -.edit-site-sidebar-navigation-screen-template__template-area-label-text { - margin: 0 $grid-unit-20 0 $grid-unit-05; - flex-grow: 1; -} - -.edit-site-sidebar-navigation-screen-template__template-icon { - display: flex; -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js deleted file mode 100644 index db59f6886124be..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js +++ /dev/null @@ -1,135 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { - __experimentalTruncate as Truncate, - __experimentalItemGroup as ItemGroup, -} from '@wordpress/components'; -import { store as editorStore } from '@wordpress/editor'; -import { useMemo } from '@wordpress/element'; -import { decodeEntities } from '@wordpress/html-entities'; - -/** - * Internal dependencies - */ -import { - SidebarNavigationScreenDetailsPanel, - SidebarNavigationScreenDetailsPanelRow, -} from '../sidebar-navigation-screen-details-panel'; -import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; -import { useLink } from '../routes/link'; -import SidebarNavigationItem from '../sidebar-navigation-item'; -import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; - -function TemplateAreaButton( { postId, area, title } ) { - const templatePartArea = useSelect( - ( select ) => { - const defaultAreas = - select( - editorStore - ).__experimentalGetDefaultTemplatePartAreas(); - - return defaultAreas.find( - ( defaultArea ) => defaultArea.area === area - ); - }, - [ area ] - ); - const linkInfo = useLink( { - postType: TEMPLATE_PART_POST_TYPE, - postId, - } ); - - return ( - <SidebarNavigationItem - className="edit-site-sidebar-navigation-screen-template__template-area-button" - { ...linkInfo } - icon={ templatePartArea?.icon } - withChevron - > - <Truncate - limit={ 20 } - ellipsizeMode="tail" - numberOfLines={ 1 } - className="edit-site-sidebar-navigation-screen-template__template-area-label-text" - > - { decodeEntities( title ) } - </Truncate> - </SidebarNavigationItem> - ); -} - -export default function TemplateAreas() { - const { templatePartAreas, currentTemplateParts } = useSelect( - ( select ) => { - const { getSettings, getCurrentTemplateTemplateParts } = unlock( - select( editSiteStore ) - ); - return { - templatePartAreas: getSettings()?.defaultTemplatePartAreas, - currentTemplateParts: getCurrentTemplateTemplateParts(), - }; - }, - [] - ); - - /* - * Merge data in currentTemplateParts with templatePartAreas, - * which contains the template icon and fallback labels - */ - const templateAreas = useMemo( () => { - // Keep track of template part IDs that have already been added to the array. - const templatePartIds = new Set(); - const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => { - // If the template part has already been added to the array, skip it. - if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) { - return; - } - // Add to the array of template part IDs. - templatePartIds.add( currentTemplatePart.templatePart.id ); - return currentTemplatePart; - }; - - return currentTemplateParts.length && templatePartAreas - ? currentTemplateParts - .filter( filterOutDuplicateTemplateParts ) - .map( ( { templatePart, block } ) => ( { - ...templatePartAreas?.find( - ( { area } ) => area === templatePart?.area - ), - ...templatePart, - clientId: block.clientId, - } ) ) - : []; - }, [ currentTemplateParts, templatePartAreas ] ); - - if ( ! templateAreas.length ) { - return null; - } - - return ( - <SidebarNavigationScreenDetailsPanel - title={ __( 'Areas' ) } - spacing={ 3 } - > - <ItemGroup> - { templateAreas.map( - ( { clientId, label, area, theme, slug, title } ) => ( - <SidebarNavigationScreenDetailsPanelRow - key={ clientId } - > - <TemplateAreaButton - postId={ `${ theme }//${ slug }` } - title={ title?.rendered || label } - area={ area } - /> - </SidebarNavigationScreenDetailsPanelRow> - ) - ) } - </ItemGroup> - </SidebarNavigationScreenDetailsPanel> - ); -} 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 1f9d71945f76cf..0b3eb147527877 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 @@ -27,7 +27,9 @@ const postTypesWithoutParentTemplate = [ PATTERN_TYPES.user, ]; -function useResolveEditedEntityAndContext( { path, postId, postType } ) { +const authorizedPostTypes = [ 'page' ]; + +function useResolveEditedEntityAndContext( { postId, postType } ) { const { hasLoadedAllDependencies, homepageId, @@ -81,7 +83,10 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) { ( select ) => { // If we're rendering a post type that doesn't have a template // no need to resolve its template. - if ( postTypesWithoutParentTemplate.includes( postType ) ) { + if ( + postTypesWithoutParentTemplate.includes( postType ) && + postId + ) { return undefined; } @@ -168,16 +173,16 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) { return undefined; } - // If we're rendering a specific page, post... we need to resolve its template. - if ( postType && postId ) { + // If we're rendering a specific page, we need to resolve its template. + // The site editor only supports pages for now, not other CPTs. + if ( + postType && + postId && + authorizedPostTypes.includes( postType ) + ) { return resolveTemplateForPostTypeAndId( postType, postId ); } - // Some URLs in list views are different - if ( path === '/page' && postId ) { - return resolveTemplateForPostTypeAndId( 'page', postId ); - } - // If we're rendering the home page, and we have a static home page, resolve its template. if ( homepageId ) { return resolveTemplateForPostTypeAndId( 'page', homepageId ); @@ -196,37 +201,27 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) { url, postId, postType, - path, frontPageTemplateId, ] ); const context = useMemo( () => { - if ( postTypesWithoutParentTemplate.includes( postType ) ) { + if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) { return {}; } - if ( postType && postId ) { + if ( postType && postId && authorizedPostTypes.includes( postType ) ) { return { postType, postId }; } - // Some URLs in list views are different - if ( path === '/page' && postId ) { - return { postType: 'page', postId }; - } - if ( homepageId ) { return { postType: 'page', postId: homepageId }; } return {}; - }, [ homepageId, postType, postId, path ] ); - - if ( path === '/wp_template' && postId ) { - return { isReady: true, postType: 'wp_template', postId, context }; - } + }, [ homepageId, postType, postId ] ); - if ( postTypesWithoutParentTemplate.includes( postType ) ) { + if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) { return { isReady: true, postType, postId, context }; } diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js index fdea50d8afbddb..2b5d0d8614c954 100644 --- a/packages/edit-site/src/hooks/commands/use-common-commands.js +++ b/packages/edit-site/src/hooks/commands/use-common-commands.js @@ -18,14 +18,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as coreStore } from '@wordpress/core-data'; -import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import getIsListPage from '../../utils/get-is-list-page'; const { useGlobalStylesReset } = unlock( blockEditorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); @@ -35,8 +33,6 @@ function useGlobalStylesOpenStylesCommands() { useDispatch( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isEditorPage = ! getIsListPage( params, isMobileViewport ); const { getCanvasMode } = unlock( useSelect( editSiteStore ) ); const history = useHistory(); @@ -55,13 +51,13 @@ function useGlobalStylesOpenStylesCommands() { label: __( 'Open styles' ), callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -73,9 +69,9 @@ function useGlobalStylesOpenStylesCommands() { history, openGeneralSidebar, setCanvasMode, - isEditorPage, getCanvasMode, isBlockBasedTheme, + params.postId, ] ); return { @@ -89,8 +85,6 @@ function useGlobalStylesToggleWelcomeGuideCommands() { useDispatch( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isEditorPage = ! getIsListPage( params, isMobileViewport ); const { getCanvasMode } = unlock( useSelect( editSiteStore ) ); const { set } = useDispatch( preferencesStore ); @@ -110,13 +104,13 @@ function useGlobalStylesToggleWelcomeGuideCommands() { label: __( 'Learn about styles' ), callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -134,10 +128,10 @@ function useGlobalStylesToggleWelcomeGuideCommands() { history, openGeneralSidebar, setCanvasMode, - isEditorPage, getCanvasMode, isBlockBasedTheme, set, + params.postId, ] ); return { @@ -176,9 +170,6 @@ function useGlobalStylesOpenCssCommands() { const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } = unlock( useDispatch( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isListPage = getIsListPage( params, isMobileViewport ); - const isEditorPage = ! isListPage; const history = useHistory(); const { canEditCSS } = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = @@ -207,13 +198,13 @@ function useGlobalStylesOpenCssCommands() { icon: brush, callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -226,9 +217,9 @@ function useGlobalStylesOpenCssCommands() { openGeneralSidebar, setEditorCanvasContainerView, canEditCSS, - isEditorPage, getCanvasMode, setCanvasMode, + params.postId, ] ); return { isLoading: false, @@ -241,8 +232,6 @@ function useGlobalStylesOpenRevisionsCommands() { unlock( useDispatch( editSiteStore ) ); const { getCanvasMode } = unlock( useSelect( editSiteStore ) ); const { params } = useLocation(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isEditorPage = ! getIsListPage( params, isMobileViewport ); const history = useHistory(); const hasRevisions = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = @@ -266,13 +255,13 @@ function useGlobalStylesOpenRevisionsCommands() { icon: backup, callback: ( { close } ) => { close(); - if ( ! isEditorPage ) { + if ( ! params.postId ) { history.push( { path: '/wp_global_styles', canvas: 'edit', } ); } - if ( isEditorPage && getCanvasMode() !== 'edit' ) { + if ( params.postId && getCanvasMode() !== 'edit' ) { setCanvasMode( 'edit' ); } openGeneralSidebar( 'edit-site/global-styles' ); @@ -285,9 +274,9 @@ function useGlobalStylesOpenRevisionsCommands() { history, openGeneralSidebar, setEditorCanvasContainerView, - isEditorPage, getCanvasMode, setCanvasMode, + params.postId, ] ); return { diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 6afe4dcaa7ea97..1ca24b318a4448 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -32,7 +32,7 @@ import isTemplateRemovable from '../../utils/is-template-removable'; import isTemplateRevertable from '../../utils/is-template-revertable'; import { PATTERN_MODALS } from '../../components/pattern-modal'; import { unlock } from '../../lock-unlock'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; +import { PATTERN_TYPES, TEMPLATE_POST_TYPE } from '../../utils/constants'; import { useLink } from '../../components/routes/link'; const { interfaceStore } = unlock( editorPrivateApis ); @@ -153,8 +153,6 @@ function useManipulateDocumentCommands() { __( 'Delete template part: %s' ), decodeEntities( template.title ) ); - const path = - template.type === TEMPLATE_POST_TYPE ? '/wp_template' : '/patterns'; commands.push( { name: 'core/remove-template', label, @@ -163,7 +161,7 @@ function useManipulateDocumentCommands() { removeTemplate( template ); // Navigate to the template list history.push( { - path, + postType: template.type, } ); close(); }, @@ -237,7 +235,7 @@ function usePatternCommands() { const commands = []; - if ( pattern?.type === 'wp_block' ) { + if ( pattern?.type === PATTERN_TYPES.user ) { commands.push( { name: 'core/rename-pattern', label: __( 'Rename pattern' ), diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index d8ee1c1d16dfa6..5b5acffd2596e4 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -25,11 +25,8 @@ @import "./components/sidebar-navigation-screen/style.scss"; @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-details-panel/style.scss"; -@import "./components/sidebar-navigation-screen-pattern/style.scss"; @import "./components/sidebar-navigation-screen-patterns/style.scss"; -@import "./components/sidebar-navigation-screen-template/style.scss"; @import "./components/sidebar-dataviews/style.scss"; @import "./components/site-hub/style.scss"; @import "./components/sidebar-navigation-screen-navigation-menus/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 deleted file mode 100644 index f7312ec3c1c292..00000000000000 --- a/packages/edit-site/src/utils/get-is-list-page.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Returns if the params match the list page route. - * - * @param {Object} params The url params. - * @param {string} params.path The current path. - * @param {string} [params.categoryType] The current category type. - * @param {string} [params.categoryId] The current category id. - * @param {boolean} isMobileViewport Is mobile viewport. - * - * @return {boolean} Is list page or not. - */ -export default function getIsListPage( - { path, categoryType, categoryId }, - isMobileViewport -) { - return ( - [ '/wp_template', '/pages' ].includes( path ) || - ( path === '/patterns' && - // Don't treat "/patterns" without categoryType and categoryId as a - // list page in mobile because the sidebar covers the whole page. - ( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) ) - ); -} diff --git a/packages/router/src/router.js b/packages/router/src/router.js index e5449cef54c6a0..233ee6962de763 100644 --- a/packages/router/src/router.js +++ b/packages/router/src/router.js @@ -3,9 +3,8 @@ */ import { createContext, - useState, - useEffect, useContext, + useSyncExternalStore, } from '@wordpress/element'; /** @@ -24,25 +23,27 @@ export function useHistory() { return useContext( HistoryContext ); } +const locationCache = new Map(); function getLocationWithParams( location ) { + if ( locationCache.get( location.search ) ) { + return locationCache.get( location.search ); + } const searchParams = new URLSearchParams( location.search ); - return { + const ret = { ...location, params: Object.fromEntries( searchParams.entries() ), }; + locationCache.clear(); + locationCache.set( location.search, ret ); + + return ret; } export function RouterProvider( { children } ) { - const [ location, setLocation ] = useState( () => + const location = useSyncExternalStore( history.listen, () => getLocationWithParams( history.location ) ); - useEffect( () => { - return history.listen( ( { location: updatedLocation } ) => { - setLocation( getLocationWithParams( updatedLocation ) ); - } ); - }, [] ); - return ( <HistoryContext.Provider value={ history }> <RoutesContext.Provider value={ location }> diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index f556cb973642e4..3cb1565c8d4160 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -946,12 +946,12 @@ test.describe( 'Image - Site editor', () => { await requestUtils.activateTheme( 'emptytheme' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test.afterEach( async ( { requestUtils } ) => { diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js index 23a59faf498d35..b31533d0d17c24 100644 --- a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js @@ -26,8 +26,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -138,8 +138,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -353,8 +353,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: ` @@ -449,8 +449,8 @@ test.describe( 'Navigation block - Frontend interactivity', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await requestUtils.createNavigationMenu( { title: 'Page list menu', content: ` diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js index 586ce9252149a3..97b8579bb07ba6 100644 --- a/test/e2e/specs/editor/various/block-bindings.spec.js +++ b/test/e2e/specs/editor/various/block-bindings.spec.js @@ -41,8 +41,8 @@ test.describe( 'Block bindings', () => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await editor.openDocumentSettingsSidebar(); } ); diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index 8aa0c9c530609d..f9a4505cd22522 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -35,7 +35,7 @@ test.describe( 'Pattern Overrides', () => { const editableParagraphName = 'Editable Paragraph'; await test.step( 'Create a synced pattern and assign blocks to allow overrides', async () => { - await admin.visitSiteEditor( { path: '/patterns' } ); + await admin.visitSiteEditor( { postType: 'wp_block' } ); await page .getByRole( 'region', { name: 'Navigation' } ) @@ -727,7 +727,6 @@ test.describe( 'Pattern Overrides', () => { await admin.visitSiteEditor( { postId: id, postType: 'wp_block', - categoryType: 'pattern', canvas: 'edit', } ); diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js index 7d656fbd2774ff..14f0ae422cc988 100644 --- a/test/e2e/specs/site-editor/block-removal.spec.js +++ b/test/e2e/specs/site-editor/block-removal.spec.js @@ -12,12 +12,12 @@ test.describe( 'Site editor block removal prompt', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should appear when attempting to remove Query Block', async ( { diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js index 4476ce0aa7c0ac..eaafb3aad1b3fd 100644 --- a/test/e2e/specs/site-editor/browser-history.spec.js +++ b/test/e2e/specs/site-editor/browser-history.spec.js @@ -27,7 +27,7 @@ test.describe( 'Site editor browser history', () => { // Navigate back to the template list await page.goBack(); await expect( page ).toHaveURL( - '/wp-admin/site-editor.php?path=%2Fwp_template' + '/wp-admin/site-editor.php?postType=wp_template' ); // Navigate back to the dashboard diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js index f255640cb2f12f..257ebc38f3b4dd 100644 --- a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js +++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js @@ -12,12 +12,12 @@ test.describe( 'Global styles sidebar', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should filter blocks list results', async ( { page } ) => { diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js index 1f73b6de6f486a..b568aaf4445b5c 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=%2Fpatterns' + '/wp-admin/site-editor.php?postType=wp_template_part' ); await expect( diff --git a/test/e2e/specs/site-editor/iframe-rendering.spec.js b/test/e2e/specs/site-editor/iframe-rendering.spec.js index 4391f134a9f80b..9c25ef504637e4 100644 --- a/test/e2e/specs/site-editor/iframe-rendering.spec.js +++ b/test/e2e/specs/site-editor/iframe-rendering.spec.js @@ -19,6 +19,7 @@ test.describe( 'Site editor iframe rendering mode', () => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); const compatMode = await editor.canvas .locator( ':root' ) diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js index 9bccc7c56446a6..ba8a316ee10c4d 100644 --- a/test/e2e/specs/site-editor/list-view.spec.js +++ b/test/e2e/specs/site-editor/list-view.spec.js @@ -12,13 +12,13 @@ test.describe( 'Site Editor List View', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { // Select a template part with a few blocks. await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should open by default when preference is enabled', async ( { diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js index 0e79d96a2ad9e1..88a277b8c88f2c 100644 --- a/test/e2e/specs/site-editor/multi-entity-saving.spec.js +++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js @@ -18,12 +18,12 @@ test.describe( 'Site Editor - Multi-entity save flow', () => { ] ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'save flow should work as expected', async ( { editor, page } ) => { 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 fc321a87e43650..ab37244df107c7 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -20,7 +20,7 @@ test.describe( 'Templates', () => { } ); test( 'Sorting', async ( { admin, page } ) => { - await admin.visitSiteEditor( { path: '/wp_template' } ); + await admin.visitSiteEditor( { postType: 'wp_template' } ); // Descending by title. await page.getByRole( 'button', { name: 'View options' } ).click(); @@ -47,7 +47,7 @@ test.describe( 'Templates', () => { title: 'Date Archives', content: 'hi', } ); - await admin.visitSiteEditor( { path: '/wp_template' } ); + await admin.visitSiteEditor( { postType: 'wp_template' } ); // Global search. await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' ); const titles = page @@ -84,7 +84,7 @@ test.describe( 'Templates', () => { } ); test( 'Field visibility', async ( { admin, page } ) => { - await admin.visitSiteEditor( { path: '/wp_template' } ); + await admin.visitSiteEditor( { postType: 'wp_template' } ); await page.getByRole( 'button', { name: 'View options' } ).click(); await page.getByRole( 'menuitem', { name: 'Layout' } ).click(); diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js index b556be5621f3d5..fecca28b1f390c 100644 --- a/test/e2e/specs/site-editor/patterns.spec.js +++ b/test/e2e/specs/site-editor/patterns.spec.js @@ -33,7 +33,7 @@ test.describe( 'Patterns', () => { admin, patterns, } ) => { - await admin.visitSiteEditor( { path: '/patterns' } ); + await admin.visitSiteEditor( { postType: 'wp_block' } ); await expect( patterns.navigation.getByRole( 'heading', { name: 'Patterns', @@ -87,9 +87,6 @@ test.describe( 'Patterns', () => { ).toContainText( 'Pattern updated' ); await page.getByRole( 'button', { name: 'Open navigation' } ).click(); - await patterns.navigation - .getByRole( 'button', { name: 'Back' } ) - .click(); await expect( patterns.navigation.getByRole( 'button', { @@ -150,7 +147,7 @@ test.describe( 'Patterns', () => { } ), ] ); - await admin.visitSiteEditor( { path: '/patterns' } ); + await admin.visitSiteEditor( { postType: 'wp_block' } ); await expect( patterns.item ).toHaveCount( 3 ); const searchBox = patterns.content.getByRole( 'searchbox', { @@ -168,7 +165,7 @@ test.describe( 'Patterns', () => { await expect( patterns.content ).toContainText( 'No results' ); await patterns.content - .getByRole( 'button', { name: 'Reset', exact: true } ) + .getByRole( 'button', { name: 'Reset search', exact: true } ) .click(); await expect( searchBox ).toHaveValue( '' ); await expect( patterns.item ).toHaveCount( 3 ); diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js index 71a57fd04e515a..26224a83e27ebd 100644 --- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js +++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js @@ -12,12 +12,12 @@ test.describe( 'Push to Global Styles button', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test.beforeEach( async ( { admin, editor } ) => { + test.beforeEach( async ( { admin } ) => { await admin.visitSiteEditor( { postId: 'emptytheme//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); } ); test( 'should apply Heading block styles to all Heading blocks', async ( { diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js index 9a6fd11a56e3b8..7f55359547d6e5 100644 --- a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js +++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js @@ -87,9 +87,8 @@ test.describe( 'Site editor url navigation', () => { page.getByRole( 'region', { name: 'Editor content' } ) ).toBeVisible(); await page.getByRole( 'button', { name: 'Open navigation' } ).click(); - await navigation.getByRole( 'button', { name: 'Back' } ).click(); await expect( - navigation.getByRole( 'button', { name: 'General' } ) - ).toHaveAttribute( 'aria-current', 'true' ); + navigation.getByRole( 'button', { name: 'All template parts' } ) + ).toBeVisible(); } ); } ); diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js index 9b12f37c0baa6b..f991b512e840df 100644 --- a/test/e2e/specs/site-editor/style-variations.spec.js +++ b/test/e2e/specs/site-editor/style-variations.spec.js @@ -33,13 +33,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); @@ -70,13 +69,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="pink"i]' ); await page.click( 'role=button[name="Back"i]' ); @@ -107,13 +105,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="yellow"i]' ); await page.click( 'role=button[name="Back"i]' ); @@ -150,13 +147,12 @@ test.describe( 'Global styles variations', () => { admin, page, siteEditorStyleVariations, - editor, } ) => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="pink"i]' ); await page.click( 'role=button[name="Back"i]' ); @@ -185,8 +181,8 @@ test.describe( 'Global styles variations', () => { await admin.visitSiteEditor( { postId: 'gutenberg-test-themes/style-variations//index', postType: 'wp_template', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await siteEditorStyleVariations.browseStyles(); await page.click( 'role=button[name="yellow"i]' ); diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js index e74cd0bec4ed16..f1e317e171736c 100644 --- a/test/e2e/specs/site-editor/template-part.spec.js +++ b/test/e2e/specs/site-editor/template-part.spec.js @@ -27,8 +27,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Insert a new template block and 'start blank'. await editor.insertBlock( { name: 'core/template-part' } ); @@ -186,8 +186,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -229,8 +229,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Edit the header. await editor.insertBlock( { name: 'core/paragraph', @@ -264,8 +264,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); await editor.insertBlock( { name: 'core/paragraph', attributes: { @@ -371,8 +371,8 @@ test.describe( 'Template Part', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Select the site title block. const siteTitle = editor.canvas.getByRole( 'document', { diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js index 75f8766891156b..ad661175b6bdfe 100644 --- a/test/e2e/specs/site-editor/writing-flow.spec.js +++ b/test/e2e/specs/site-editor/writing-flow.spec.js @@ -23,8 +23,8 @@ test.describe( 'Site editor writing flow', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Select the first site title block. const siteTitleBlock = editor.canvas.locator( 'role=document[name="Block: Site Title"i]' @@ -51,8 +51,8 @@ test.describe( 'Site editor writing flow', () => { await admin.visitSiteEditor( { postId: 'emptytheme//header', postType: 'wp_template_part', + canvas: 'edit', } ); - await editor.canvas.locator( 'body' ).click(); // Make sure the sidebar is open. await editor.openDocumentSettingsSidebar(); diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index e8a4e3529334dd..dd052db5035dbe 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -81,6 +81,7 @@ test.describe( 'Site Editor Performance', () => { await admin.visitSiteEditor( { postId: draftId, postType: 'page', + canvas: 'edit', } ); // Wait for the first block. @@ -131,11 +132,11 @@ test.describe( 'Site Editor Performance', () => { await admin.visitSiteEditor( { postId: draftId, postType: 'page', + canvas: 'edit', } ); // Enter edit mode (second click is needed for the legacy edit mode). const canvas = await perfUtils.getCanvas(); - await canvas.locator( 'body' ).click(); // Run the test with the sidebar closed const toggleSidebarButton = page @@ -211,6 +212,7 @@ test.describe( 'Site Editor Performance', () => { metrics, } ) => { await admin.visitSiteEditor( { + // The old URL is supported in both previous versions and new versions. path: '/wp_template', } );