Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Site Editor: Remove the details pages #61741

Merged
merged 10 commits into from
May 21, 2024
Merged

Site Editor: Remove the details pages #61741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
21d54ea
Site Editor: Remove the details pages
youknowriad May 16, 2024
960dc00
Fix typo
youknowriad May 17, 2024
3afc395
Fix some e2e tests
youknowriad May 17, 2024
149de89
Fix patterns and template parts flows
youknowriad May 17, 2024
9c381d6
Remove categoryType from pattern pages
youknowriad May 20, 2024
5a33f80
Limit the set of supported post types in the site editor
youknowriad May 20, 2024
dcb09b4
Use useSyncExternalStore for location
youknowriad May 20, 2024
b9ba25f
Fix e2e tests
youknowriad May 20, 2024
62b7061
Fix location cache
youknowriad May 20, 2024
7fec893
Simplify
youknowriad May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 8 additions & 26 deletions packages/core-commands/src/site-editor-navigation-commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -119,22 +119,14 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
const isSiteEditor = getPath( window.location.href )?.includes(
'site-editor.php'
);
const extraArgs = isSiteEditor
? {
canvas: getQueryArg(
window.location.href,
'canvas'
),
}
: {};

return {
...command,
callback: ( { close } ) => {
const args = {
postType,
postId: record.id,
...extraArgs,
canvas: 'edit',
};
const targetUrl = addQueryArgs(
'site-editor.php',
Expand Down Expand Up @@ -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,
Expand All @@ -215,7 +198,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
const args = {
postType: templateType,
postId: record.id,
...extraArgs,
canvas: 'edit',
};
const targetUrl = addQueryArgs(
'site-editor.php',
Expand All @@ -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(
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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 ) {
Expand All @@ -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 ) {
Expand All @@ -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 ) {
Expand Down
9 changes: 3 additions & 6 deletions packages/edit-site/src/components/add-new-pattern/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
} );
}
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -168,8 +166,7 @@ export default function AddNewPattern() {
params.categoryId !== 'my-patterns'
) {
history.push( {
path: `/patterns`,
categoryType: PATTERN_TYPES.theme,
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
postType: PATTERN_TYPES.user,
categoryId: PATTERN_DEFAULT_CATEGORY,
} );
}
Expand Down
6 changes: 1 addition & 5 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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',
Expand Down
131 changes: 63 additions & 68 deletions packages/edit-site/src/components/layout/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These components have been removed entirely, I still need to check if they have dependencies that are only used in the components themselves to avoid leftovers.

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() {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
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' ) {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
const isListLayout = layout === 'list' || ! layout;
return {
key: 'pages-list',
key: 'pages',
areas: {
sidebar: (
<SidebarNavigationScreen
Expand All @@ -58,7 +94,7 @@ export default function useLayoutAreas() {
/>
),
content: <PagePages />,
preview: isListLayout && (
preview: ( isListLayout || canvas === 'edit' ) && (
<Editor
isLoading={ isSiteEditorLoading }
onClick={ () =>
Expand All @@ -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 = (
<SidebarNavigationScreenPattern
backPath={ {
path: '/patterns',
categoryId: params.categoryId,
categoryType: params.categoryType,
} }
/>
);
} else if ( postType === 'wp_template' ) {
sidebar = (
<SidebarNavigationScreenTemplate
backPath={ { path: '/wp_template' } }
/>
);
} else if ( postType === 'page' ) {
sidebar = (
<SidebarNavigationScreenPage
backPath={ { path: '/page', postId } }
/>
);
} else {
sidebar = (
<SidebarNavigationScreenNavigationMenu
backPath={ { path: '/navigation' } }
/>
);
}
return {
key: 'page',
areas: {
sidebar,
preview: <Editor isLoading={ isSiteEditorLoading } />,
mobile: canvas === 'edit' && (
<Editor isLoading={ isSiteEditorLoading } />
),
},
};
}

// Templates
if ( path === '/wp_template' ) {
if ( postType === TEMPLATE_POST_TYPE ) {
const isListLayout = isCustom !== 'true' && layout === 'list';
return {
key: 'templates-list',
key: 'templates',
areas: {
sidebar: (
<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
),
content: <PageTemplates />,
preview: isListLayout && (
preview: ( isListLayout || canvas === 'edit' ) && (
<Editor isLoading={ isSiteEditorLoading } />
),
mobile: <PageTemplates />,
Expand All @@ -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: <SidebarNavigationScreenPatterns backPath={ {} } />,
content: <PagePatterns />,
mobile: <PagePatterns />,
preview: canvas === 'edit' && (
<Editor isLoading={ isSiteEditorLoading } />
),
},
};
}
Expand All @@ -179,14 +174,14 @@ export default function useLayoutAreas() {
}

// Navigation
if ( path === '/navigation' ) {
if ( postType === NAVIGATION_POST_TYPE ) {
if ( postId ) {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
return {
key: 'navigation',
areas: {
sidebar: (
<SidebarNavigationScreenNavigationMenu
backPath={ { path: '/navigation' } }
backPath={ { postType: NAVIGATION_POST_TYPE } }
/>
),
preview: <Editor isLoading={ isSiteEditorLoading } />,
Expand Down
Loading
Loading