Site Editor: Initial routing refactoring to separate preview from list view #57938
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { privateApis as routerPrivateApis } from '@wordpress/router'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { unlock } from '../../lock-unlock'; | ||
| import { useIsSiteEditorLoading } from './hooks'; | ||
| import Editor from '../editor'; | ||
| import DataviewsPatterns from '../page-patterns/dataviews-patterns'; | ||
| import PagePages from '../page-pages'; | ||
| import PagePatterns from '../page-patterns'; | ||
| import PageTemplateParts from '../page-template-parts'; | ||
| import PageTemplates from '../page-templates'; | ||
|
|
||
| const { useLocation } = unlock( routerPrivateApis ); | ||
|
|
||
| export default function useLayoutAreas() { | ||
|
There was a problem hiding this comment. This is what you could describe as "route definitions" that would be easy to swap later with a formal router API. Right now it has no impact on the sidebar but we could make the sidebar routing part of this hook when we make the Navigator component "controllable". |
||
| const isSiteEditorLoading = useIsSiteEditorLoading(); | ||
| const { params } = useLocation(); | ||
| const { postType, postId, path, type, isCustom } = params ?? {}; | ||
|
|
||
| // Regular page | ||
| if ( path === '/page' ) { | ||
| const isListLayout = | ||
| isCustom !== 'true' && ( ! type || type === 'list' ); | ||
|
There was a problem hiding this comment. This is the difficulty here, basically the route definition relies on the "type" of the dataview (layout), which means I had to add this information to the URL. There's maybe another way to solve this but in trunk the "router" can't access this information because it's only kept in memory. There was a problem hiding this comment. Why do you have concerns about having the This makes me consider a more general point: why routing can't act as a pure function of the URL? Given a URL, I'm able to share it with other person who will see the same screen I'm seeing. This, of course, extends to things other than the view type (filters/search, pagination, etc.). There was a problem hiding this comment. I think the unknown here is that most of the views could either become entities in the future or be persisted in preferences or things like that, which means the "type" in the url redundant and something we'd want to ditch. There was a problem hiding this comment. Are we okay with showing the front page when we have no selection in There was a problem hiding this comment.
The way I see it, it's just how the (rest of the) site editor works, so it makes sense that pages does the same. There was a problem hiding this comment. I agree that it's not entirely clear whether the "home page" is the right choice there. A placeholder (select item kind of thing) could work like emails but I agree that for now it's probably fine. I think it would be good to show bulk actions there somehow in case of multi-selections... But all of these can be seen as follow-up improvements. |
||
| return { | ||
| areas: { | ||
| content: window.__experimentalAdminViews ? ( | ||
| <PagePages /> | ||
| ) : undefined, | ||
| preview: ( isListLayout || | ||
| ! window.__experimentalAdminViews ) && ( | ||
| <Editor isLoading={ isSiteEditorLoading } /> | ||
| ), | ||
| }, | ||
| widths: { | ||
| content: | ||
| window.__experimentalAdminViews && isListLayout | ||
| ? 380 | ||
| : undefined, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| // Regular other post types | ||
| if ( postType && postId ) { | ||
|
There was a problem hiding this comment. This is the details view, as it exists today. As a follow-up, we'll need to update this to absorb the details as part of the content area (it's now part of the sidebar). (Mockup). There was a problem hiding this comment. Indeed, we might need to have it specific per post type. Remains to be seen. |
||
| return { | ||
| areas: { | ||
| preview: <Editor isLoading={ isSiteEditorLoading } />, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| // Templates | ||
| if ( | ||
| path === '/wp_template/all' || | ||
| ( path === '/wp_template' && window?.__experimentalAdminViews ) | ||
| ) { | ||
| const isListLayout = | ||
| isCustom !== 'true' && ( ! type || type === 'list' ); | ||
| return { | ||
| areas: { | ||
| content: <PageTemplates />, | ||
| preview: isListLayout && ( | ||
| <Editor isLoading={ isSiteEditorLoading } /> | ||
| ), | ||
| }, | ||
| widths: { | ||
|
There was a problem hiding this comment. The concept of widths in a router 'API' is weird. I'm wondering if we could apply this in the There was a problem hiding this comment. It's possible but the reason I kept it here for now is that I thought that maybe the "resizing" that is implemented in layout could use that width at some point. |
||
| content: isListLayout ? 380 : undefined, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| // Template parts | ||
| if ( path === '/wp_template_part/all' ) { | ||
| return { | ||
| areas: { | ||
| content: <PageTemplateParts />, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| // Patterns | ||
| if ( path === '/patterns' ) { | ||
| return { | ||
| areas: { | ||
| content: window?.__experimentalAdminViews ? ( | ||
| <DataviewsPatterns /> | ||
| ) : ( | ||
| <PagePatterns /> | ||
| ), | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| // Fallback shows the home page preview | ||
|
There was a problem hiding this comment. This is rendered when path is There was a problem hiding this comment. yes, and the home page of the site editor too. |
||
| return { | ||
| areas: { preview: <Editor isLoading={ isSiteEditorLoading } /> }, | ||
| }; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I looked around and haven't found any page with
canvasMode=editthat wasn't in the editor.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also interacted with the command palette in various places, and it seems to work as expected.