@wordpress/edit-site 5.32.0 → 5.33.0

package/src/components/sidebar-edit-mode/page-panels/index.js

@@ -15,6 +15,8 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,9 +24,11 @@ import {
 import { store as editSiteStore } from '../../../store';
 import PageContent from './page-content';
 import PageSummary from './page-summary';
+
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function PagePanels() {
 	const { id, type, hasResolved, status, date, password, renderingMode } =
@@ -50,13 +54,32 @@ export default function PagePanels() {
 			};
 		}, [] );
 
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'move-to-trash' ) {
+				history.push( {
+					path: '/' + items[ 0 ].type,
+					postId: undefined,
+					postType: undefined,
+					canvas: 'view',
+				} );
+			}
+		},
+		[ history ]
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
 
 	return (
 		<>
-			<PostCardPanel />
+			<PostCardPanel
+				actions={
+					<PostActions onActionPerformed={ onActionPerformed } />
+				}
+			/>
 			<PanelBody title={ __( 'Summary' ) }>
 				<PageSummary
 					status={ status }

package/src/components/sidebar-edit-mode/page-panels/page-summary.js

@@ -3,6 +3,7 @@
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import {
+	PluginPostStatusInfo,
 	PostAuthorPanel,
 	PostURLPanel,
 	PostSchedulePanel,
@@ -24,18 +25,25 @@ export default function PageSummary( {
 } ) {
 	return (
 		<VStack spacing={ 0 }>
-			<PostFeaturedImagePanel withPanelBody={ false } />
-			<PageStatus
-				status={ status }
-				date={ date }
-				password={ password }
-				postId={ postId }
-				postType={ postType }
-			/>
-			<PostSchedulePanel />
-			<PostTemplatePanel />
-			<PostURLPanel />
-			<PostAuthorPanel />
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<PostFeaturedImagePanel withPanelBody={ false } />
+						<PageStatus
+							status={ status }
+							date={ date }
+							password={ password }
+							postId={ postId }
+							postType={ postType }
+						/>
+						<PostSchedulePanel />
+						<PostTemplatePanel />
+						<PostURLPanel />
+						<PostAuthorPanel />
+						{ fills }
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
 		</VStack>
 	);
 }

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -1,9 +1,3 @@
-
-
-.edit-site-page-panels__swap-template__confirm-modal__actions {
-	margin-top: $grid-unit-30;
-}
-
 .edit-site-change-status__content {
 	.components-popover__content {
 		min-width: 320px;

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -10,7 +10,6 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { unlock } from '../../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
@@ -24,16 +23,16 @@ const SettingsHeader = ( _, ref ) => {
 	return (
 		<Tabs.TabList ref={ ref }>
 			<Tabs.Tab
-				tabId={ SIDEBAR_TEMPLATE }
+				tabId="edit-post/document"
 				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ SIDEBAR_TEMPLATE }
+				data-tab-id="edit-post/document"
 			>
 				{ postTypeLabel }
 			</Tabs.Tab>
 			<Tabs.Tab
-				tabId={ SIDEBAR_BLOCK }
+				tabId="edit-post/block"
 				// Used for focus management in the SettingsSidebar component.
-				data-tab-id={ SIDEBAR_BLOCK }
+				data-tab-id="edit-post/block"
 			>
 				{ __( 'Block' ) }
 			</Tabs.Tab>

package/src/components/sidebar-edit-mode/style.scss

@@ -1,4 +1,4 @@
-.edit-site-sidebar-edit-mode {
+.editor-sidebar {
 	width: $sidebar-width;
 
 	> .components-panel {

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -52,7 +52,7 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 
 const POST_TYPE_PATH = {
 	wp_template: '/wp_template',
-	wp_template_part: '/wp_template_part/all',
+	wp_template_part: '/patterns',
 };
 
 export default function TemplatePanel() {

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

@@ -13,15 +13,42 @@ import {
 } from '@wordpress/components';
 import { isRTL } from '@wordpress/i18n';
 import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { SidebarNavigationContext } from '../sidebar';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationItem( {
 	className,
 	icon,
 	withChevron = false,
 	suffix,
+	path,
+	onClick,
 	children,
 	...props
 } ) {
+	const history = useHistory();
+	const navigate = useContext( SidebarNavigationContext );
+
+	// If there is no custom click handler, create one that navigates to `path`.
+	function handleClick( e ) {
+		if ( onClick ) {
+			onClick( e );
+			navigate( 'forward' );
+		} else if ( path ) {
+			e.preventDefault();
+			history.push( { path } );
+			navigate( 'forward', `[id="${ path }"]` );
+		}
+	}
+
 	return (
 		<Item
 			className={ classnames(
@@ -29,6 +56,8 @@ export default function SidebarNavigationItem( {
 				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
+			onClick={ handleClick }
+			id={ path }
 			{ ...props }
 		>
 			<HStack justify="flex-start">

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

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import {
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { isRTL, __, sprintf } from '@wordpress/i18n';
@@ -17,6 +16,7 @@ import { chevronRight, chevronLeft } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,8 +28,28 @@ import {
 	isPreviewingTheme,
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
+import { SidebarNavigationContext } from '../sidebar';
 
-const { useLocation } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+function getBackPath( params ) {
+	// From a data view path we navigate back to root
+	if ( params.path ) {
+		return {};
+	}
+
+	// From edit screen for a post we navigate back to post-type specific data view
+	if ( params.postType === 'page' ) {
+		return { path: '/page', postId: params.postId };
+	} else if ( params.postType === 'wp_template' ) {
+		return { path: '/wp_template', postId: params.postId };
+	} else if ( params.postType === 'wp_navigation' ) {
+		return { path: '/navigation', postId: params.postId };
+	}
+
+	// Go back to root by default
+	return {};
+}
 
 export default function SidebarNavigationScreen( {
 	isRoot,
@@ -60,9 +80,9 @@ export default function SidebarNavigationScreen( {
 		[]
 	);
 	const location = useLocation();
-	const navigator = useNavigator();
+	const history = useHistory();
+	const navigate = useContext( SidebarNavigationContext );
 	const icon = isRTL() ? chevronRight : chevronLeft;
-
 	return (
 		<>
 			<VStack
@@ -84,14 +104,11 @@ export default function SidebarNavigationScreen( {
 						<SidebarButton
 							onClick={ () => {
 								const backPath =
-									backPathProp ?? location.state?.backPath;
-								if ( backPath ) {
-									navigator.goTo( backPath, {
-										isBack: true,
-									} );
-								} else {
-									navigator.goToParent();
-								}
+									backPathProp ??
+									location.state?.backPath ??
+									getBackPath( location.params );
+								history.push( backPath );
+								navigate( 'back' );
 							} }
 							icon={ icon }
 							label={ __( 'Back' ) }

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

@@ -33,9 +33,8 @@
 }
 
 .edit-site-sidebar-navigation-screen__meta {
-	margin: 0 0 $grid-unit-20 0;
+	margin: 0 0 $grid-unit-20 $grid-unit-20;
 	color: $gray-400;
-	margin-left: $grid-unit-20;
 	.components-text {
 		color: $gray-400;
 	}
@@ -127,25 +126,6 @@
 	border-top: 1px solid $gray-800;
 }
 
-.edit-site-sidebar__notice {
-	background: $gray-800;
-	color: $gray-300;
-	margin: $grid-unit-30 0;
-	&.is-dismissible {
-		padding-right: $grid-unit-10;
-	}
-
-	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]) {
-		color: $gray-400;
-	}
-
-	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus,
-	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
-	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
-		color: $white;
-	}
-}
-
 /* In general style overrides are discouraged.
  * This is a temporary solution to override the InputControl component's styles.
  * The `Theme` component will potentially be the more appropriate approach

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

@@ -5,10 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
@@ -48,13 +45,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
-		return (
-			<NavigatorButton
-				{ ...props }
-				as={ SidebarNavigationItem }
-				path="/wp_global_styles"
-			/>
-		);
+		return <SidebarNavigationItem { ...props } path="/wp_global_styles" />;
 	}
 	return (
 		<SidebarNavigationItem

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

@@ -1,15 +1,10 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalUseNavigator as useNavigator,
-} from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
-
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -22,17 +17,14 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 export default function SidebarNavigationScreenMain() {
-	const { location } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
 
 	// Clear the editor canvas container view when accessing the main navigation screen.
 	useEffect( () => {
-		if ( location?.path === '/' ) {
-			setEditorCanvasContainerView( undefined );
-		}
-	}, [ setEditorCanvasContainerView, location?.path ] );
+		setEditorCanvasContainerView( undefined );
+	}, [ setEditorCanvasContainerView ] );
 
 	return (
 		<SidebarNavigationScreen
@@ -44,44 +36,40 @@ export default function SidebarNavigationScreenMain() {
 			content={
 				<>
 					<ItemGroup>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						<SidebarNavigationItem
 							path="/navigation"
 							withChevron
 							icon={ navigation }
 						>
 							{ __( 'Navigation' ) }
-						</NavigatorButton>
+						</SidebarNavigationItem>
 						<SidebarNavigationItemGlobalStyles
 							withChevron
 							icon={ styles }
 						>
 							{ __( 'Styles' ) }
 						</SidebarNavigationItemGlobalStyles>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						<SidebarNavigationItem
 							path="/page"
 							withChevron
 							icon={ page }
 						>
 							{ __( 'Pages' ) }
-						</NavigatorButton>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						</SidebarNavigationItem>
+						<SidebarNavigationItem
 							path="/wp_template"
 							withChevron
 							icon={ layout }
 						>
 							{ __( 'Templates' ) }
-						</NavigatorButton>
-						<NavigatorButton
-							as={ SidebarNavigationItem }
+						</SidebarNavigationItem>
+						<SidebarNavigationItem
 							path="/patterns"
 							withChevron
 							icon={ symbol }
 						>
 							{ __( 'Patterns' ) }
-						</NavigatorButton>
+						</SidebarNavigationItem>
 					</ItemGroup>
 				</>
 			}

package/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js

@@ -17,7 +17,7 @@ export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
 			onCancel={ onClose }
 			confirmButtonText={ __( 'Delete' ) }
 		>
-			{ __( 'Are you sure you want to delete this Navigation menu?' ) }
+			{ __( 'Are you sure you want to delete this Navigation Menu?' ) }
 		</ConfirmDialog>
 	);
 }

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

@@ -2,13 +2,11 @@
  * WordPress dependencies
  */
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalUseNavigator as useNavigator,
-	Spinner,
-} from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -18,13 +16,16 @@ import ScreenNavigationMoreMenu from './more-menu';
 import SingleNavigationMenu from './single-navigation-menu';
 import useNavigationMenuHandlers from './use-navigation-menu-handlers';
 import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export const postType = `wp_navigation`;
 
 export default function SidebarNavigationScreenNavigationMenu() {
 	const {
 		params: { postId },
-	} = useNavigator();
+	} = useLocation();
 
 	const { record: navigationMenu, isResolving } = useEntityRecord(
 		'postType',
@@ -64,7 +65,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __(
-					'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+					'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
 				) }
 			>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />

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

@@ -37,7 +37,7 @@ export default function SingleNavigationMenu( {
 				navigationMenu?.status
 			) }
 			description={ __(
-				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+				'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
 			) }
 		>
 			<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />

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

@@ -2,24 +2,25 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { postType } from '.';
 import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
 
-function useDeleteNavigationMenu() {
-	const { goTo } = useNavigator();
+const { useHistory } = unlock( routerPrivateApis );
 
+function useDeleteNavigationMenu() {
 	const { deleteEntityRecord } = useDispatch( coreStore );
-
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
+	const history = useHistory();
 
 	const handleDelete = async ( navigationMenu ) => {
 		const postId = navigationMenu?.id;
@@ -36,17 +37,17 @@ function useDeleteNavigationMenu() {
 				}
 			);
 			createSuccessNotice(
-				__( 'Navigation menu successfully deleted.' ),
+				__( 'Navigation Menu successfully deleted.' ),
 				{
 					type: 'snackbar',
 				}
 			);
-			goTo( '/navigation' );
+			history.push( { path: '/navigation' } );
 		} catch ( error ) {
 			createErrorNotice(
 				sprintf(
 					/* translators: %s: error message describing why the navigation menu could not be deleted. */
-					__( `Unable to delete Navigation menu (%s).` ),
+					__( `Unable to delete Navigation Menu (%s).` ),
 					error?.message
 				),
 
@@ -107,7 +108,7 @@ function useSaveNavigationMenu() {
 					throwOnError: true,
 				}
 			);
-			createSuccessNotice( __( 'Renamed Navigation menu' ), {
+			createSuccessNotice( __( 'Renamed Navigation Menu' ), {
 				type: 'snackbar',
 			} );
 		} catch ( error ) {
@@ -117,7 +118,7 @@ function useSaveNavigationMenu() {
 			createErrorNotice(
 				sprintf(
 					/* translators: %s: error message describing why the navigation menu could not be renamed. */
-					__( `Unable to rename Navigation menu (%s).` ),
+					__( `Unable to rename Navigation Menu (%s).` ),
 					error?.message
 				),
 
@@ -132,8 +133,7 @@ function useSaveNavigationMenu() {
 }
 
 function useDuplicateNavigationMenu() {
-	const { goTo } = useNavigator();
-
+	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	const { createSuccessNotice, createErrorNotice } =
@@ -162,16 +162,16 @@ function useDuplicateNavigationMenu() {
 			);
 
 			if ( savedRecord ) {
-				createSuccessNotice( __( 'Duplicated Navigation menu' ), {
+				createSuccessNotice( __( 'Duplicated Navigation Menu' ), {
 					type: 'snackbar',
 				} );
-				goTo( `/navigation/${ postType }/${ savedRecord.id }` );
+				history.push( { postType, postId: savedRecord.id } );
 			}
 		} catch ( error ) {
 			createErrorNotice(
 				sprintf(
 					/* translators: %s: error message describing why the navigation menu could not be deleted. */
-					__( `Unable to duplicate Navigation menu (%s).` ),
+					__( `Unable to duplicate Navigation Menu (%s).` ),
 					error?.message
 				),
 

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

@@ -143,7 +143,7 @@ export function SidebarNavigationScreenWrapper( {
 		<SidebarNavigationScreen
 			title={ title || __( 'Navigation' ) }
 			actions={ actions }
-			description={ description || __( 'Manage your Navigation menus.' ) }
+			description={ description || __( 'Manage your Navigation Menus.' ) }
 			content={ children }
 		/>
 	);

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

@@ -23,12 +23,11 @@ import {
 	currentlyPreviewingTheme,
 } from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
-import { getPathFromURL } from '../sync-state-with-url/use-sync-path-with-url';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
-	const location = useLocation();
+	const { params } = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -74,7 +73,7 @@ export default function LeafMoreMenu( props ) {
 						} ),
 					},
 					{
-						backPath: getPathFromURL( location.params ),
+						backPath: params,
 					}
 				);
 			}
@@ -88,12 +87,12 @@ export default function LeafMoreMenu( props ) {
 						} ),
 					},
 					{
-						backPath: getPathFromURL( location.params ),
+						backPath: params,
 					}
 				);
 			}
 		},
-		[ history ]
+		[ history, params ]
 	);
 
 	return (