Skip to content

Commit ab49143

Browse files
jsnajdrgetdaveoandregal
authored
Site Editor sidebar: provide explicit backPaths, remove the getBackPath helper (#61286)
* Site Editor sidebar: provide explicit backPaths, remove the getBackPath helper * Remove postId from backPaths that don't use it * Centralize backPaths in the router * Add missing navigation menu backpath Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>
1 parent 4002fbd commit ab49143

File tree

10 files changed

+67
-56
lines changed

10 files changed

+67
-56
lines changed

‎packages/edit-site/src/components/layout/router.js

+41-10
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function useLayoutAreas() {
3131
const isSiteEditorLoading = useIsSiteEditorLoading();
3232
const history = useHistory();
3333
const { params } = useLocation();
34-
const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
34+
const { postType, postId, path, layout, isCustom, canvas } = params;
3535

3636
// Note: Since "sidebar" is not yet supported here,
3737
// returning undefined from "mobile" means show the sidebar.
@@ -45,6 +45,7 @@ export default function useLayoutAreas() {
4545
sidebar: (
4646
<SidebarNavigationScreen
4747
title={ __( 'Manage pages' ) }
48+
backPath={ {} }
4849
content={ <DataViewsSidebarContent /> }
4950
/>
5051
),
@@ -78,13 +79,33 @@ export default function useLayoutAreas() {
7879
if ( postType && postId ) {
7980
let sidebar;
8081
if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
81-
sidebar = <SidebarNavigationScreenPattern />;
82+
sidebar = (
83+
<SidebarNavigationScreenPattern
84+
backPath={ {
85+
path: '/patterns',
86+
categoryId: params.categoryId,
87+
categoryType: params.categoryType,
88+
} }
89+
/>
90+
);
8291
} else if ( postType === 'wp_template' ) {
83-
sidebar = <SidebarNavigationScreenTemplate />;
92+
sidebar = (
93+
<SidebarNavigationScreenTemplate
94+
backPath={ { path: '/wp_template' } }
95+
/>
96+
);
8497
} else if ( postType === 'page' ) {
85-
sidebar = <SidebarNavigationScreenPage />;
98+
sidebar = (
99+
<SidebarNavigationScreenPage
100+
backPath={ { path: '/page', postId } }
101+
/>
102+
);
86103
} else {
87-
sidebar = <SidebarNavigationScreenNavigationMenu />;
104+
sidebar = (
105+
<SidebarNavigationScreenNavigationMenu
106+
backPath={ { path: '/navigation' } }
107+
/>
108+
);
88109
}
89110
return {
90111
key: 'page',
@@ -104,7 +125,9 @@ export default function useLayoutAreas() {
104125
return {
105126
key: 'templates-list',
106127
areas: {
107-
sidebar: <SidebarNavigationScreenTemplatesBrowse />,
128+
sidebar: (
129+
<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
130+
),
108131
content: <PageTemplates />,
109132
preview: isListLayout && (
110133
<Editor isLoading={ isSiteEditorLoading } />
@@ -125,7 +148,7 @@ export default function useLayoutAreas() {
125148
return {
126149
key: 'patterns',
127150
areas: {
128-
sidebar: <SidebarNavigationScreenPatterns />,
151+
sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
129152
content: <PagePatterns />,
130153
mobile: <PagePatterns />,
131154
},
@@ -137,7 +160,9 @@ export default function useLayoutAreas() {
137160
return {
138161
key: 'styles',
139162
areas: {
140-
sidebar: <SidebarNavigationScreenGlobalStyles />,
163+
sidebar: (
164+
<SidebarNavigationScreenGlobalStyles backPath={ {} } />
165+
),
141166
preview: <Editor isLoading={ isSiteEditorLoading } />,
142167
mobile: canvas === 'edit' && (
143168
<Editor isLoading={ isSiteEditorLoading } />
@@ -152,7 +177,11 @@ export default function useLayoutAreas() {
152177
return {
153178
key: 'navigation',
154179
areas: {
155-
sidebar: <SidebarNavigationScreenNavigationMenu />,
180+
sidebar: (
181+
<SidebarNavigationScreenNavigationMenu
182+
backPath={ { path: '/navigation' } }
183+
/>
184+
),
156185
preview: <Editor isLoading={ isSiteEditorLoading } />,
157186
mobile: canvas === 'edit' && (
158187
<Editor isLoading={ isSiteEditorLoading } />
@@ -163,7 +192,9 @@ export default function useLayoutAreas() {
163192
return {
164193
key: 'navigation',
165194
areas: {
166-
sidebar: <SidebarNavigationScreenNavigationMenus />,
195+
sidebar: (
196+
<SidebarNavigationScreenNavigationMenus backPath={ {} } />
197+
),
167198
preview: <Editor isLoading={ isSiteEditorLoading } />,
168199
mobile: canvas === 'edit' && (
169200
<Editor isLoading={ isSiteEditorLoading } />

‎packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
103103
);
104104
}
105105

106-
export default function SidebarNavigationScreenGlobalStyles() {
106+
export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
107107
const { revisions, isLoading: isLoadingRevisions } =
108108
useGlobalStylesRevisions();
109109
const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -179,6 +179,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
179179
description={ __(
180180
'Choose a different style combination for the theme styles.'
181181
) }
182+
backPath={ backPath }
182183
content={ <SidebarNavigationScreenGlobalStylesContent /> }
183184
footer={
184185
shouldShowGlobalStylesFooter && (

‎packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const { useLocation } = unlock( routerPrivateApis );
2222

2323
export const postType = `wp_navigation`;
2424

25-
export default function SidebarNavigationScreenNavigationMenu() {
25+
export default function SidebarNavigationScreenNavigationMenu( { backPath } ) {
2626
const {
2727
params: { postId },
2828
} = useLocation();
@@ -67,6 +67,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
6767
description={ __(
6868
'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
6969
) }
70+
backPath={ backPath }
7071
>
7172
<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
7273
</SidebarNavigationScreenWrapper>
@@ -77,6 +78,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
7778
return (
7879
<SidebarNavigationScreenWrapper
7980
description={ __( 'Navigation Menu missing.' ) }
81+
backPath={ backPath }
8082
/>
8183
);
8284
}
@@ -93,6 +95,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
9395
onDuplicate={ _handleDuplicate }
9496
/>
9597
}
98+
backPath={ backPath }
9699
title={ buildNavigationLabel(
97100
navigationMenu?.title,
98101
navigationMenu?.id,
@@ -106,6 +109,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
106109
return (
107110
<SingleNavigationMenu
108111
navigationMenu={ navigationMenu }
112+
backPath={ backPath }
109113
handleDelete={ _handleDelete }
110114
handleSave={ _handleSave }
111115
handleDuplicate={ _handleDuplicate }

‎packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/
1313

1414
export default function SingleNavigationMenu( {
1515
navigationMenu,
16+
backPath,
1617
handleDelete,
1718
handleDuplicate,
1819
handleSave,
@@ -32,6 +33,7 @@ export default function SingleNavigationMenu( {
3233
/>
3334
</>
3435
}
36+
backPath={ backPath }
3537
title={ buildNavigationLabel(
3638
navigationMenu?.title,
3739
navigationMenu?.id,

‎packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function buildMenuLabel( title, id, status ) {
4646
// Save a boolean to prevent us creating a fallback more than once per session.
4747
let hasCreatedFallback = false;
4848

49-
export default function SidebarNavigationScreenNavigationMenus() {
49+
export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
5050
const {
5151
records: navigationMenus,
5252
isResolving: isResolvingNavigationMenus,
@@ -87,7 +87,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
8787

8888
if ( isLoading ) {
8989
return (
90-
<SidebarNavigationScreenWrapper>
90+
<SidebarNavigationScreenWrapper backPath={ backPath }>
9191
<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
9292
</SidebarNavigationScreenWrapper>
9393
);
@@ -97,6 +97,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
9797
return (
9898
<SidebarNavigationScreenWrapper
9999
description={ __( 'No Navigation Menus found.' ) }
100+
backPath={ backPath }
100101
/>
101102
);
102103
}
@@ -106,6 +107,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
106107
return (
107108
<SingleNavigationMenu
108109
navigationMenu={ firstNavigationMenu }
110+
backPath={ backPath }
109111
handleDelete={ () => handleDelete( firstNavigationMenu ) }
110112
handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
111113
handleSave={ ( edits ) =>
@@ -116,7 +118,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
116118
}
117119

118120
return (
119-
<SidebarNavigationScreenWrapper>
121+
<SidebarNavigationScreenWrapper backPath={ backPath }>
120122
<ItemGroup>
121123
{ navigationMenus?.map( ( { id, title, status }, index ) => (
122124
<NavMenuItem
@@ -138,12 +140,14 @@ export function SidebarNavigationScreenWrapper( {
138140
actions,
139141
title,
140142
description,
143+
backPath,
141144
} ) {
142145
return (
143146
<SidebarNavigationScreen
144147
title={ title || __( 'Navigation' ) }
145148
actions={ actions }
146149
description={ description || __( 'Manage your Navigation Menus.' ) }
150+
backPath={ backPath }
147151
content={ children }
148152
/>
149153
);

‎packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,18 @@ import TemplateActions from '../template-actions';
1919

2020
const { useLocation, useHistory } = unlock( routerPrivateApis );
2121

22-
export default function SidebarNavigationScreenPattern() {
22+
export default function SidebarNavigationScreenPattern( { backPath } ) {
2323
const history = useHistory();
2424
const location = useLocation();
2525
const {
26-
params: { postType, postId, categoryId, categoryType },
26+
params: { postType, postId },
2727
} = location;
2828
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
2929

3030
useInitEditedEntityFromURL();
3131

3232
const patternDetails = usePatternDetails( postType, postId );
3333

34-
const backPath = {
35-
categoryId,
36-
categoryType,
37-
path: '/patterns',
38-
};
39-
4034
return (
4135
<SidebarNavigationScreen
4236
actions={

‎packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function CategoriesGroup( {
110110
);
111111
}
112112

113-
export default function SidebarNavigationScreenPatterns() {
113+
export default function SidebarNavigationScreenPatterns( { backPath } ) {
114114
const {
115115
params: { categoryType, categoryId, path },
116116
} = useLocation();
@@ -144,6 +144,7 @@ export default function SidebarNavigationScreenPatterns() {
144144
description={ __(
145145
'Manage what patterns are available when editing the site.'
146146
) }
147+
backPath={ backPath }
147148
actions={ <AddNewPattern /> }
148149
content={
149150
<>

‎packages/edit-site/src/components/sidebar-navigation-screen-template/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function useTemplateDetails( postType, postId ) {
9494
return { title, description, content, footer };
9595
}
9696

97-
export default function SidebarNavigationScreenTemplate() {
97+
export default function SidebarNavigationScreenTemplate( { backPath } ) {
9898
const history = useHistory();
9999
const {
100100
params: { postType, postId },
@@ -108,6 +108,7 @@ export default function SidebarNavigationScreenTemplate() {
108108
return (
109109
<SidebarNavigationScreen
110110
title={ title }
111+
backPath={ backPath }
111112
actions={
112113
<>
113114
<TemplateActions

‎packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import DataviewsTemplatesSidebarContent from './content';
1313

1414
const { useLocation } = unlock( routerPrivateApis );
1515

16-
export default function SidebarNavigationScreenTemplatesBrowse() {
16+
export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
1717
const {
1818
params: { activeView = 'all' },
1919
} = useLocation();
@@ -24,6 +24,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
2424
description={ __(
2525
'Create new templates, or reset any customizations made to the templates supplied by your theme.'
2626
) }
27+
backPath={ backPath }
2728
content={
2829
<DataviewsTemplatesSidebarContent
2930
activeView={ activeView }

‎packages/edit-site/src/components/sidebar-navigation-screen/index.js

+2-30
Original file line numberDiff line numberDiff line change
@@ -32,32 +32,6 @@ import { SidebarNavigationContext } from '../sidebar';
3232

3333
const { useHistory, useLocation } = unlock( routerPrivateApis );
3434

35-
function getBackPath( params ) {
36-
// Navigation Menus are not currently part of a data view.
37-
// Therefore when navigating back from a navigation menu
38-
// the target path is the navigation listing view.
39-
if ( params.path === '/navigation' && params.postId ) {
40-
return { path: '/navigation' };
41-
}
42-
43-
// From a data view path we navigate back to root
44-
if ( params.path ) {
45-
return {};
46-
}
47-
48-
// From edit screen for a post we navigate back to post-type specific data view
49-
if ( params.postType === 'page' ) {
50-
return { path: '/page', postId: params.postId };
51-
} else if ( params.postType === 'wp_template' ) {
52-
return { path: '/wp_template', postId: params.postId };
53-
} else if ( params.postType === 'wp_navigation' ) {
54-
return { path: '/navigation', postId: params.postId };
55-
}
56-
57-
// Go back to root by default
58-
return {};
59-
}
60-
6135
export default function SidebarNavigationScreen( {
6236
isRoot,
6337
title,
@@ -89,7 +63,9 @@ export default function SidebarNavigationScreen( {
8963
const location = useLocation();
9064
const history = useHistory();
9165
const navigate = useContext( SidebarNavigationContext );
66+
const backPath = backPathProp ?? location.state?.backPath;
9267
const icon = isRTL() ? chevronRight : chevronLeft;
68+
9369
return (
9470
<>
9571
<VStack
@@ -107,10 +83,6 @@ export default function SidebarNavigationScreen( {
10783
{ ! isRoot && (
10884
<SidebarButton
10985
onClick={ () => {
110-
const backPath =
111-
backPathProp ??
112-
location.state?.backPath ??
113-
getBackPath( location.params );
11486
history.push( backPath );
11587
navigate( 'back' );
11688
} }

0 commit comments

Comments
 (0)