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

package/src/components/sidebar-global-styles-wrapper/index.js

@@ -9,6 +9,7 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
-const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
@@ -63,28 +63,23 @@ const GlobalStylesPageActions = ( {
 };
 
 export default function GlobalStylesUIWrapper() {
-	const { params } = useLocation();
+	const { path, query } = useLocation();
 	const history = useHistory();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view' } = query;
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const pathWithPrefix = params.path;
-	const [ path, onPathChange ] = useMemo( () => {
-		const processedPath = pathWithPrefix.substring(
-			GLOBAL_STYLES_PATH_PREFIX.length
-		);
+	const [ section, onChangeSection ] = useMemo( () => {
 		return [
-			processedPath ? processedPath : '/',
-			( newPath ) => {
-				history.push( {
-					path:
-						! newPath || newPath === '/'
-							? GLOBAL_STYLES_PATH_PREFIX
-							: `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
-				} );
+			query.section ?? '/',
+			( updatedSection ) => {
+				history.navigate(
+					addQueryArgs( path, {
+						section: updatedSection,
+					} )
+				);
 			},
 		];
-	}, [ pathWithPrefix, history ] );
+	}, [ path, query.section, history ] );
 
 	return (
 		<>
@@ -100,7 +95,10 @@ export default function GlobalStylesUIWrapper() {
 				className="edit-site-styles"
 				title={ __( 'Styles' ) }
 			>
-				<GlobalStylesUI path={ path } onPathChange={ onPathChange } />
+				<GlobalStylesUI
+					path={ section }
+					onPathChange={ onChangeSection }
+				/>
 			</Page>
 			{ canvas === 'view' && isStyleBookOpened && (
 				<StyleBook
@@ -111,17 +109,13 @@ export default function GlobalStylesUIWrapper() {
 						// Match '/blocks/core%2Fbutton' and
 						// '/blocks/core%2Fbutton/typography', but not
 						// '/blocks/core%2Fbuttons'.
-						path ===
-							`/wp_global_styles/blocks/${ encodeURIComponent(
-								blockName
-							) }` ||
-						path.startsWith(
-							`/wp_global_styles/blocks/${ encodeURIComponent(
-								blockName
-							) }/`
+						section ===
+							`/blocks/${ encodeURIComponent( blockName ) }` ||
+						section.startsWith(
+							`/blocks/${ encodeURIComponent( blockName ) }/`
 						)
 					}
-					path={ path }
+					path={ section }
 					onSelect={ ( blockName ) => {
 						if (
 							STYLE_BOOK_COLOR_GROUPS.find(
@@ -129,17 +123,17 @@ export default function GlobalStylesUIWrapper() {
 							)
 						) {
 							// Go to color palettes Global Styles.
-							onPathChange( '/colors/palette' );
+							onChangeSection( '/colors/palette' );
 							return;
 						}
 						if ( blockName === 'typography' ) {
 							// Go to typography Global Styles.
-							onPathChange( '/typography' );
+							onChangeSection( '/typography' );
 							return;
 						}
 
 						// Now go to the selected block.
-						onPathChange(
+						onChangeSection(
 							`/blocks/${ encodeURIComponent( blockName ) }`
 						);
 					} }

package/src/components/sidebar-navigation-item/index.js

@@ -22,7 +22,7 @@ import { useContext } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { SidebarNavigationContext } from '../sidebar';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLink } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationItem( {
 	className,
@@ -30,7 +30,7 @@ export default function SidebarNavigationItem( {
 	withChevron = false,
 	suffix,
 	uid,
-	params,
+	to,
 	onClick,
 	children,
 	...props
@@ -42,12 +42,13 @@ export default function SidebarNavigationItem( {
 		if ( onClick ) {
 			onClick( e );
 			navigate( 'forward' );
-		} else if ( params ) {
+		} else if ( to ) {
 			e.preventDefault();
-			history.push( params );
+			history.navigate( to );
 			navigate( 'forward', `[id="${ uid }"]` );
 		}
 	}
+	const linkProps = useLink( to );
 
 	return (
 		<Item
@@ -56,8 +57,9 @@ export default function SidebarNavigationItem( {
 				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
-			onClick={ handleClick }
 			id={ uid }
+			onClick={ handleClick }
+			href={ to ? linkProps.href : undefined }
 			{ ...props }
 		>
 			<HStack justify="flex-start">

package/src/components/sidebar-navigation-item/style.scss

@@ -9,7 +9,6 @@
 	&:focus,
 	&[aria-current="true"] {
 		color: $gray-200;
-		background: $gray-800;
 
 		.edit-site-sidebar-navigation-item__drilldown-indicator {
 			fill: $gray-200;
@@ -17,7 +16,7 @@
 	}
 
 	&[aria-current="true"] {
-		background: var(--wp-admin-theme-color);
+		background: $gray-800;
 		color: $white;
 	}
 

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

@@ -83,7 +83,7 @@ export default function SidebarNavigationScreen( {
 					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								history.push( backPath );
+								history.navigate( backPath );
 								navigate( 'back' );
 							} }
 							icon={ icon }
@@ -97,7 +97,7 @@ export default function SidebarNavigationScreen( {
 							label={
 								dashboardLinkText || __( 'Go to the Dashboard' )
 							}
-							href={ dashboardLink || 'index.php' }
+							href={ dashboardLink }
 						/>
 					) }
 					<Heading

package/src/components/sidebar-navigation-screen/style.scss

@@ -18,7 +18,7 @@
 .edit-site-sidebar-navigation-screen__content {
 	padding: 0 $grid-unit-20;
 
-	.edit-site-sidebar-navigation-screen-details-footer {
+	.components-item-group {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
 	}
@@ -131,7 +131,7 @@
 	margin: $grid-unit-20 0 0;
 	border-top: 1px solid $gray-800;
 
-	.components-item-group {
+	.edit-site-sidebar-navigation-screen-details-footer {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
 	}

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 />,
 	},
 };