@wordpress/edit-site 6.12.1-next.082ed6819.0 → 6.13.1-next.a9f418477.0

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -22,32 +22,18 @@ import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main'
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export function SidebarNavigationItemGlobalStyles( props ) {
-	const { params } = useLocation();
-	const hasGlobalStyleVariations = useSelect(
-		( select ) =>
-			!! select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
-		[]
+	const { name } = useLocation();
+	return (
+		<SidebarNavigationItem
+			{ ...props }
+			aria-current={ name === 'styles' }
+		/>
 	);
-	if ( hasGlobalStyleVariations ) {
-		return (
-			<SidebarNavigationItem
-				{ ...props }
-				params={ { path: '/wp_global_styles' } }
-				uid="global-styles-navigation-item"
-				aria-current={
-					params.path && params.path.startsWith( '/wp_global_styles' )
-				}
-			/>
-		);
-	}
-	return <SidebarNavigationItem { ...props } />;
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
 	const history = useHistory();
-	const { params } = useLocation();
+	const { path } = useLocation();
 	const {
 		revisions,
 		isLoading: isLoadingRevisions,
@@ -60,21 +46,14 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
-		history.push(
-			{
-				...params,
-				canvas: 'edit',
-			},
-			undefined,
-			{
-				transition: 'canvas-mode-edit-transition',
-			}
-		);
+		history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
+			transition: 'canvas-mode-edit-transition',
+		} );
 		return Promise.all( [
 			setPreference( 'core', 'distractionFree', false ),
 			openGeneralSidebar( 'edit-site/global-styles' ),
 		] );
-	}, [ history, params, openGeneralSidebar, setPreference ] );
+	}, [ path, history, openGeneralSidebar, setPreference ] );
 
 	const openRevisions = useCallback( async () => {
 		await openGlobalStyles();

package/src/components/sidebar-navigation-screen-main/index.js

@@ -15,32 +15,28 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import {
-	NAVIGATION_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-	PATTERN_TYPES,
-} from '../../utils/constants';
 
 export function MainSidebarNavigationContent() {
 	return (
 		<ItemGroup>
 			<SidebarNavigationItem
 				uid="navigation-navigation-item"
-				params={ { postType: NAVIGATION_POST_TYPE } }
+				to="/navigation"
 				withChevron
 				icon={ navigation }
 			>
 				{ __( 'Navigation' ) }
 			</SidebarNavigationItem>
 			<SidebarNavigationItemGlobalStyles
-				uid="styles-navigation-item"
+				to="/styles"
+				uid="global-styles-navigation-item"
 				icon={ styles }
 			>
 				{ __( 'Styles' ) }
 			</SidebarNavigationItemGlobalStyles>
 			<SidebarNavigationItem
 				uid="page-navigation-item"
-				params={ { postType: 'page' } }
+				to="/page"
 				withChevron
 				icon={ page }
 			>
@@ -48,7 +44,7 @@ export function MainSidebarNavigationContent() {
 			</SidebarNavigationItem>
 			<SidebarNavigationItem
 				uid="template-navigation-item"
-				params={ { postType: TEMPLATE_POST_TYPE } }
+				to="/template"
 				withChevron
 				icon={ layout }
 			>
@@ -56,7 +52,7 @@ export function MainSidebarNavigationContent() {
 			</SidebarNavigationItem>
 			<SidebarNavigationItem
 				uid="patterns-navigation-item"
-				params={ { postType: PATTERN_TYPES.user } }
+				to="/pattern"
 				withChevron
 				icon={ symbol }
 			>

package/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js

@@ -58,11 +58,9 @@ export default function ScreenNavigationMoreMenu( props ) {
 							</MenuItem>
 							<MenuItem
 								onClick={ () => {
-									history.push( {
-										postId: menuId,
-										postType: 'wp_navigation',
-										canvas: 'edit',
-									} );
+									history.navigate(
+										`/wp_navigation/${ menuId }?canvas=edit`
+									);
 								} }
 							>
 								{ __( 'Edit' ) }

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -42,7 +42,7 @@ function useDeleteNavigationMenu() {
 					type: 'snackbar',
 				}
 			);
-			history.push( { postType: 'wp_navigation' } );
+			history.navivate( '/navigation' );
 		} catch ( error ) {
 			createErrorNotice(
 				sprintf(
@@ -165,7 +165,7 @@ function useDuplicateNavigationMenu() {
 				createSuccessNotice( __( 'Duplicated Navigation Menu' ), {
 					type: 'snackbar',
 				} );
-				history.push( { postType, postId: savedRecord.id } );
+				history.navigate( `/wp_navigation/${ savedRecord.id }` );
 			}
 		} catch ( error ) {
 			createErrorNotice(

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -18,7 +18,6 @@ import { navigation } from '@wordpress/icons';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
-import { useLink } from '../routes/link';
 import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
 import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
 import { unlock } from '../../lock-unlock';
@@ -152,9 +151,10 @@ export function SidebarNavigationScreenWrapper( {
 }
 
 const NavMenuItem = ( { postId, ...props } ) => {
-	const linkInfo = useLink( {
-		postId,
-		postType: 'wp_navigation',
-	} );
-	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+	return (
+		<SidebarNavigationItem
+			to={ `/wp_navigation/${ postId }` }
+			{ ...props }
+		/>
+	);
 };

package/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -20,10 +20,11 @@ const POPOVER_PROPS = {
  */
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
 	const history = useHistory();
+	const { path } = useLocation();
 	const { block } = props;
 	const { clientId } = block;
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
@@ -59,33 +60,20 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
-				const { params } = history.getLocationWithParams();
-				history.push(
+				history.navigate(
+					`/${ attributes.type }/${ attributes.id }?canvas=edit`,
 					{
-						postType: attributes.type,
-						postId: attributes.id,
-						canvas: 'edit',
-					},
-					{
-						backPath: params,
+						state: { backPath: path },
 					}
 				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				const { params } = history.getLocationWithParams();
-				history.push(
-					{
-						postType: 'page',
-						postId: attributes.id,
-						canvas: 'edit',
-					},
-					{
-						backPath: params,
-					}
-				);
+				history.navigate( `/page/${ attributes.id }?canvas=edit`, {
+					state: { backPath: path },
+				} );
 			}
 		},
-		[ history ]
+		[ path, history ]
 	);
 
 	return (

package/src/components/sidebar-navigation-screen-patterns/category-item.js

@@ -2,13 +2,6 @@
  * Internal dependencies
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLink } from '../routes/link';
-import {
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_PART_ALL_AREAS_CATEGORY,
-	PATTERN_DEFAULT_CATEGORY,
-	PATTERN_TYPES,
-} from '../../utils/constants';
 
 export default function CategoryItem( {
 	count,
@@ -18,28 +11,20 @@ export default function CategoryItem( {
 	label,
 	type,
 } ) {
-	const linkInfo = useLink( {
-		categoryId:
-			id !== TEMPLATE_PART_ALL_AREAS_CATEGORY &&
-			id !== PATTERN_DEFAULT_CATEGORY
-				? id
-				: undefined,
-		postType:
-			type === TEMPLATE_PART_POST_TYPE
-				? TEMPLATE_PART_POST_TYPE
-				: PATTERN_TYPES.user,
-	} );
-
 	if ( ! count ) {
 		return;
 	}
+	const queryArgs = [ `postType=${ type }` ];
+	if ( id ) {
+		queryArgs.push( `categoryId=${ id }` );
+	}
 
 	return (
 		<SidebarNavigationItem
-			{ ...linkInfo }
 			icon={ icon }
 			suffix={ <span>{ count }</span> }
 			aria-current={ isActive ? 'true' : undefined }
+			to={ `/pattern?${ queryArgs.join( '&' ) }` }
 		>
 			{ label }
 		</SidebarNavigationItem>

package/src/components/sidebar-navigation-screen-patterns/index.js

@@ -104,12 +104,11 @@ function CategoriesGroup( {
 
 export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const {
-		params: { postType, categoryId },
+		query: { postType = 'wp_block', categoryId },
 	} = useLocation();
-	const currentType = postType || PATTERN_TYPES.user;
 	const currentCategory =
 		categoryId ||
-		( currentType === PATTERN_TYPES.user
+		( postType === PATTERN_TYPES.user
 			? PATTERN_DEFAULT_CATEGORY
 			: TEMPLATE_PART_ALL_AREAS_CATEGORY );
 
@@ -143,7 +142,7 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 								templatePartAreas={ templatePartAreas }
 								patternCategories={ patternCategories }
 								currentCategory={ currentCategory }
-								currentType={ currentType }
+								currentType={ postType }
 							/>
 						</>
 					) }

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -4,35 +4,41 @@
 import { useEntityRecords } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import DataViewItem from '../sidebar-dataviews/dataview-item';
+import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useAddedBy } from '../page-templates/hooks';
 import { layout } from '@wordpress/icons';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
 function TemplateDataviewItem( { template, isActive } ) {
 	const { text, icon } = useAddedBy( template.type, template.id );
+
 	return (
-		<DataViewItem
-			key={ text }
-			slug={ text }
-			title={ text }
+		<SidebarNavigationItem
+			to={ addQueryArgs( '/template', { activeView: text } ) }
 			icon={ icon }
-			isActive={ isActive }
-			isCustom={ false }
-		/>
+			aria-current={ isActive }
+		>
+			{ text }
+		</SidebarNavigationItem>
 	);
 }
 
-export default function DataviewsTemplatesSidebarContent( {
-	activeView,
-	title,
-} ) {
+export default function DataviewsTemplatesSidebarContent() {
+	const {
+		query: { activeView = 'all' },
+	} = useLocation();
 	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
 		per_page: -1,
 	} );
@@ -52,13 +58,13 @@ export default function DataviewsTemplatesSidebarContent( {
 
 	return (
 		<ItemGroup>
-			<DataViewItem
-				slug="all"
-				title={ title }
+			<SidebarNavigationItem
+				to="/template"
 				icon={ layout }
-				isActive={ activeView === 'all' }
-				isCustom={ false }
-			/>
+				aria-current={ activeView === 'all' }
+			>
+				{ __( 'All templates' ) }
+			</SidebarNavigationItem>
 			{ firstItemPerAuthorText.map( ( template ) => {
 				return (
 					<TemplateDataviewItem

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -2,22 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../lock-unlock';
 import DataviewsTemplatesSidebarContent from './content';
 
-const { useLocation } = unlock( routerPrivateApis );
-
 export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
-	const {
-		params: { activeView = 'all' },
-	} = useLocation();
-
 	return (
 		<SidebarNavigationScreen
 			title={ __( 'Templates' ) }
@@ -25,12 +17,7 @@ export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 			) }
 			backPath={ backPath }
-			content={
-				<DataviewsTemplatesSidebarContent
-					activeView={ activeView }
-					title={ __( 'All templates' ) }
-				/>
-			}
+			content={ <DataviewsTemplatesSidebarContent /> }
 		/>
 	);
 }

package/src/components/site-editor-routes/{home-view.js → home.js}

@@ -4,13 +4,12 @@
 import Editor from '../editor';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 
-export const homeViewRoute = {
-	name: 'home-view',
-	match: ( params ) => {
-		return params.canvas !== 'edit';
-	},
+export const homeRoute = {
+	name: 'home',
+	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
 		preview: <Editor />,
+		mobile: <SidebarNavigationScreenMain />,
 	},
 };

package/src/components/site-editor-routes/index.js

@@ -9,42 +9,30 @@ import { useEffect } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import { store as siteEditorStore } from '../../store';
-import { homeViewRoute } from './home-view';
-import { homeEditRoute } from './home-edit';
-import { navigationViewRoute } from './navigation-view';
-import { navigationEditRoute } from './navigation-edit';
-import { navigationItemEditRoute } from './navigation-item-edit';
-import { navigationItemViewRoute } from './navigation-item-view';
-import { stylesViewRoute } from './styles-view';
-import { patternsEditRoute } from './patterns-edit';
-import { patternsViewRoute } from './patterns-view';
-import { templatesEditRoute } from './templates-edit';
-import { templatesListViewRoute } from './templates-list-view';
-import { templatesViewRoute } from './templates-view';
-import { pagesViewRoute } from './pages-view';
-import { pagesEditRoute } from './pages-edit';
-import { pagesListViewRoute } from './pages-list-view';
-import { pagesListViewQuickEditRoute } from './pages-list-view-quick-edit';
-import { pagesViewQuickEditRoute } from './pages-view-quick-edit';
+import { homeRoute } from './home';
+import { stylesRoute } from './styles';
+import { navigationRoute } from './navigation';
+import { navigationItemRoute } from './navigation-item';
+import { patternsRoute } from './patterns';
+import { patternItemRoute } from './pattern-item';
+import { templatePartItemRoute } from './template-part-item';
+import { templatesRoute } from './templates';
+import { templateItemRoute } from './template-item';
+import { pagesRoute } from './pages';
+import { pageItemRoute } from './page-item';
 
 const routes = [
-	pagesListViewQuickEditRoute,
-	pagesListViewRoute,
-	pagesViewQuickEditRoute,
-	pagesViewRoute,
-	pagesEditRoute,
-	templatesEditRoute,
-	templatesListViewRoute,
-	templatesViewRoute,
-	patternsViewRoute,
-	patternsEditRoute,
-	stylesViewRoute,
-	navigationItemViewRoute,
-	navigationItemEditRoute,
-	navigationViewRoute,
-	navigationEditRoute,
-	homeViewRoute,
-	homeEditRoute,
+	pageItemRoute,
+	pagesRoute,
+	templateItemRoute,
+	templatesRoute,
+	templatePartItemRoute,
+	patternItemRoute,
+	patternsRoute,
+	navigationItemRoute,
+	navigationRoute,
+	stylesRoute,
+	homeRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {

package/src/components/site-editor-routes/navigation-item.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileNavigationItemView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? (
+		<Editor />
+	) : (
+		<SidebarNavigationScreenNavigationMenu
+			backPath={ { postType: NAVIGATION_POST_TYPE } }
+		/>
+	);
+}
+
+export const navigationItemRoute = {
+	name: 'navigation-item',
+	path: '/wp_navigation/:postId',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
+		),
+		preview: <Editor />,
+		mobile: <MobileNavigationItemView />,
+	},
+};

package/src/components/site-editor-routes/navigation.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileNavigationView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? (
+		<Editor />
+	) : (
+		<SidebarNavigationScreenNavigationMenus backPath="/" />
+	);
+}
+
+export const navigationRoute = {
+	name: 'navigation',
+	path: '/navigation',
+	areas: {
+		sidebar: <SidebarNavigationScreenNavigationMenus backPath="/" />,
+		preview: <Editor />,
+		mobile: <MobileNavigationView />,
+	},
+};

package/src/components/site-editor-routes/{pages-edit.js → page-item.js}

@@ -6,29 +6,21 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import PostList from '../post-list';
+import Editor from '../editor';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import Editor from '../editor';
 
-function PageList() {
-	return <PostList postType="page" />;
-}
-
-export const pagesEditRoute = {
-	name: 'pages-edit',
-	match: ( params ) => {
-		return params.postType === 'page' && params.canvas === 'edit';
-	},
+export const pageItemRoute = {
+	name: 'page-item',
+	path: '/page/:postId',
 	areas: {
 		sidebar: (
 			<SidebarNavigationScreen
 				title={ __( 'Pages' ) }
-				backPath={ {} }
-				content={ <DataViewsSidebarContent /> }
+				backPath="/"
+				content={ <DataViewsSidebarContent postType="page" /> }
 			/>
 		),
-		content: <PageList />,
 		mobile: <Editor />,
 		preview: <Editor />,
 	},