Skip to content

Commit 1637e79

Browse files
epiquerasepiqueras
committed
Edit Site: Implement page switcher.
1 parent a974904 commit 1637e79

File tree

3 files changed

+188
-58
lines changed

3 files changed

+188
-58
lines changed

‎packages/edit-site/src/components/editor/index.js

Lines changed: 64 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '@wordpress/components';
1919
import { EntityProvider } from '@wordpress/core-data';
2020
import {
21+
BlockContextProvider,
2122
BlockSelectionClearer,
2223
BlockBreadcrumb,
2324
__unstableEditorStyles as EditorStyles,
@@ -100,65 +101,71 @@ function Editor( { settings: _settings } ) {
100101
type={ settings.templateType }
101102
id={ settings.templateId }
102103
>
103-
<Context.Provider value={ context }>
104-
<FocusReturnProvider>
105-
<KeyboardShortcuts.Register />
106-
<InterfaceSkeleton
107-
sidebar={ ! isMobile && <Sidebar /> }
108-
header={
109-
<Header
110-
openEntitiesSavedStates={
111-
openEntitiesSavedStates
112-
}
113-
/>
114-
}
115-
content={
116-
<BlockSelectionClearer
117-
className="edit-site-visual-editor"
118-
style={ inlineStyles }
119-
>
120-
<Notices />
121-
<Popover.Slot name="block-toolbar" />
122-
<BlockEditor />
123-
<KeyboardShortcuts />
124-
</BlockSelectionClearer>
125-
}
126-
actions={
127-
<>
128-
<EntitiesSavedStates
129-
isOpen={
130-
isEntitiesSavedStatesOpen
131-
}
132-
close={
133-
closeEntitiesSavedStates
104+
<BlockContextProvider
105+
value={ settings.page.context }
106+
>
107+
<Context.Provider value={ context }>
108+
<FocusReturnProvider>
109+
<KeyboardShortcuts.Register />
110+
<InterfaceSkeleton
111+
sidebar={
112+
! isMobile && <Sidebar />
113+
}
114+
header={
115+
<Header
116+
openEntitiesSavedStates={
117+
openEntitiesSavedStates
134118
}
135119
/>
136-
{ ! isEntitiesSavedStatesOpen && (
137-
<div className="edit-site-editor__toggle-save-panel">
138-
<Button
139-
isSecondary
140-
className="edit-site-editor__toggle-save-panel-button"
141-
onClick={
142-
openEntitiesSavedStates
143-
}
144-
aria-expanded={
145-
false
146-
}
147-
>
148-
{ __(
149-
'Open save panel'
150-
) }
151-
</Button>
152-
</div>
153-
) }
154-
</>
155-
}
156-
footer={ <BlockBreadcrumb /> }
157-
/>
158-
<Popover.Slot />
159-
<PluginArea />
160-
</FocusReturnProvider>
161-
</Context.Provider>
120+
}
121+
content={
122+
<BlockSelectionClearer
123+
className="edit-site-visual-editor"
124+
style={ inlineStyles }
125+
>
126+
<Notices />
127+
<Popover.Slot name="block-toolbar" />
128+
<BlockEditor />
129+
<KeyboardShortcuts />
130+
</BlockSelectionClearer>
131+
}
132+
actions={
133+
<>
134+
<EntitiesSavedStates
135+
isOpen={
136+
isEntitiesSavedStatesOpen
137+
}
138+
close={
139+
closeEntitiesSavedStates
140+
}
141+
/>
142+
{ ! isEntitiesSavedStatesOpen && (
143+
<div className="edit-site-editor__toggle-save-panel">
144+
<Button
145+
isSecondary
146+
className="edit-site-editor__toggle-save-panel-button"
147+
onClick={
148+
openEntitiesSavedStates
149+
}
150+
aria-expanded={
151+
false
152+
}
153+
>
154+
{ __(
155+
'Open save panel'
156+
) }
157+
</Button>
158+
</div>
159+
) }
160+
</>
161+
}
162+
footer={ <BlockBreadcrumb /> }
163+
/>
164+
<Popover.Slot />
165+
<PluginArea />
166+
</FocusReturnProvider>
167+
</Context.Provider>
168+
</BlockContextProvider>
162169
</EntityProvider>
163170
</EntityProvider>
164171
</DropZoneProvider>

‎packages/edit-site/src/components/header/index.js

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@
22
* WordPress dependencies
33
*/
44
import { useCallback } from '@wordpress/element';
5+
import { addQueryArgs } from '@wordpress/url';
56
import {
67
BlockNavigationDropdown,
78
ToolSelector,
89
Inserter,
910
__experimentalPreviewOptions as PreviewOptions,
1011
} from '@wordpress/block-editor';
11-
import { useSelect, useDispatch } from '@wordpress/data';
12+
import {
13+
__experimentalResolveSelect as resolveSelect,
14+
useSelect,
15+
useDispatch,
16+
} from '@wordpress/data';
1217
import {
1318
PinnedItems,
1419
__experimentalMainDashboardButton as MainDashboardButton,
@@ -19,12 +24,18 @@ import {
1924
*/
2025
import { useEditorContext } from '../editor';
2126
import MoreMenu from './more-menu';
27+
import PageSwitcher from '../page-switcher';
2228
import TemplateSwitcher from '../template-switcher';
2329
import SaveButton from '../save-button';
2430
import UndoButton from './undo-redo/undo';
2531
import RedoButton from './undo-redo/redo';
2632
import FullscreenModeClose from './fullscreen-mode-close';
2733

34+
/**
35+
* Browser dependencies
36+
*/
37+
const { fetch } = window;
38+
2839
const inserterToggleProps = { isPrimary: true };
2940

3041
export default function Header( { openEntitiesSavedStates } ) {
@@ -56,6 +67,33 @@ export default function Header( { openEntitiesSavedStates } ) {
5667
} ) ),
5768
[]
5869
);
70+
const setActivePage = useCallback( async ( newPage ) => {
71+
try {
72+
const { success, data } = await fetch(
73+
addQueryArgs( newPage.path, { '_wp-find-template': true } )
74+
).then( ( res ) => res.json() );
75+
if ( success ) {
76+
let newTemplateId = data.ID;
77+
if ( newTemplateId === null ) {
78+
newTemplateId = (
79+
await resolveSelect( 'core' ).getEntityRecords(
80+
'postType',
81+
'wp_template',
82+
{
83+
resolved: true,
84+
slug: data.post_name,
85+
}
86+
)
87+
)[ 0 ].id;
88+
}
89+
setSettings( ( prevSettings ) => ( {
90+
...prevSettings,
91+
page: newPage,
92+
templateId: newTemplateId,
93+
} ) );
94+
}
95+
} catch ( err ) {}
96+
}, [] );
5997

6098
const deviceType = useSelect( ( select ) => {
6199
return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType();
@@ -79,6 +117,10 @@ export default function Header( { openEntitiesSavedStates } ) {
79117
<ToolSelector />
80118
<UndoButton />
81119
<RedoButton />
120+
<PageSwitcher
121+
activePage={ settings.page }
122+
onActivePageChange={ setActivePage }
123+
/>
82124
<TemplateSwitcher
83125
ids={ settings.templateIds }
84126
templatePartIds={ settings.templatePartIds }

‎packages/edit-site/src/components/page-switcher/index.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { getPath, getQueryString } from '@wordpress/url';
5+
import { useSelect } from '@wordpress/data';
6+
import {
7+
DropdownMenu,
8+
MenuGroup,
9+
MenuItemsChoice,
10+
} from '@wordpress/components';
11+
import { __ } from '@wordpress/i18n';
12+
13+
function getPathFromLink( link ) {
14+
const path = getPath( link );
15+
const queryString = getQueryString( link );
16+
let value = '/';
17+
if ( path ) value += path;
18+
if ( queryString ) value += `?${ queryString }`;
19+
return value;
20+
}
21+
export default function PageSwitcher( { activePage, onActivePageChange } ) {
22+
const { pages = [], categories = [] } = useSelect( ( select ) => {
23+
const { getEntityRecords } = select( 'core' );
24+
return {
25+
pages: getEntityRecords( 'postType', 'page' )?.map( ( _page ) => {
26+
const path = getPathFromLink( _page.link );
27+
return {
28+
label: _page.title.rendered,
29+
value: path,
30+
context: { postType: 'page', postId: _page.id },
31+
};
32+
} ),
33+
categories: getEntityRecords( 'taxonomy', 'category' )?.map(
34+
( category ) => {
35+
const path = getPathFromLink( category.link );
36+
return {
37+
label: category.name,
38+
value: path,
39+
context: { query: { categoryId: category.id } },
40+
};
41+
}
42+
),
43+
};
44+
}, [] );
45+
const onPageSelect = ( newPath ) => {
46+
const { value: path, context } = [ ...pages, ...categories ].find(
47+
( choice ) => choice.value === newPath
48+
);
49+
onActivePageChange( { path, context } );
50+
};
51+
return (
52+
<DropdownMenu
53+
icon={ null }
54+
label={ __( 'Switch Page' ) }
55+
toggleProps={ {
56+
children: [ ...pages, ...categories ].find(
57+
( choice ) => choice.value === activePage.path
58+
)?.label,
59+
} }
60+
>
61+
{ () => (
62+
<>
63+
<MenuGroup label={ __( 'Pages' ) }>
64+
<MenuItemsChoice
65+
choices={ pages }
66+
value={ activePage.path }
67+
onSelect={ onPageSelect }
68+
/>
69+
</MenuGroup>
70+
<MenuGroup label={ __( 'Categories' ) }>
71+
<MenuItemsChoice
72+
choices={ categories }
73+
value={ activePage.path }
74+
onSelect={ onPageSelect }
75+
/>
76+
</MenuGroup>
77+
</>
78+
) }
79+
</DropdownMenu>
80+
);
81+
}

0 commit comments

Comments
 (0)