Skip to content

Commit

Permalink
Site Editor: Remove the details pages (WordPress#61741)
Browse files Browse the repository at this point in the history 
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
  • Loading branch information
@youknowriad @ntsekouras
@jsnajdr @ellatrix @draganescu @jameskoster @richtabor @patil-vipul
9 people authored and patil-vipul committed Jun 17, 2024
1 parent 32570ea commit 88fa0b7
Show file tree
Hide file tree
Showing 64 changed files with 246 additions and 1,886 deletions.
34 changes: 8 additions & 26 deletions packages/core-commands/src/site-editor-navigation-commands.js
View file
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
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,
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
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
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';
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: (
<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 ) {
return {
key: 'navigation',
areas: {
sidebar: (
<SidebarNavigationScreenNavigationMenu
backPath={ { path: '/navigation' } }
backPath={ { postType: NAVIGATION_POST_TYPE } }
/>
),
preview: <Editor isLoading={ isSiteEditorLoading } />,
Expand Down
Loading

0 comments on commit 88fa0b7

Please sign in to comment.