@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/sidebar-dataviews/add-new-view.js

@@ -22,12 +22,9 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { DEFAULT_VIEWS } from './default-views';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 function AddNewItemModalContent( { type, setIsAdding } ) {
-	const {
-		params: { path },
-	} = useLocation();
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ title, setTitle ] = useState( '' );
@@ -68,8 +65,11 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 						),
 					}
 				);
+				const {
+					params: { postType },
+				} = history.getLocationWithParams();
 				history.push( {
-					path,
+					postType,
 					activeView: savedRecord.id,
 					isCustom: 'true',
 				} );

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -27,7 +27,7 @@ import DataViewItem from './dataview-item';
 import AddNewItem from './add-new-view';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -81,9 +81,6 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 }
 
 function CustomDataViewItem( { dataviewId, isActive } ) {
-	const {
-		params: { path },
-	} = useLocation();
 	const history = useHistory();
 	const { dataview } = useSelect(
 		( select ) => {
@@ -145,9 +142,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 											}
 										);
 										if ( isActive ) {
-											history.replace( {
-												path,
-											} );
+											const {
+												params: { postType },
+											} = history.getLocationWithParams();
+											history.replace( { postType } );
 										}
 										onClose();
 									} }

package/src/components/sidebar-dataviews/dataview-item.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -29,14 +29,14 @@ export default function DataViewItem( {
 	suffix,
 } ) {
 	const {
-		params: { path, layout },
+		params: { postType, layout },
 	} = useLocation();
 
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
 	const linkInfo = useLink( {
-		path,
+		postType,
 		layout,
 		activeView: isCustom ? customViewId : slug,
 		isCustom: isCustom ? 'true' : 'false',
@@ -44,12 +44,9 @@ export default function DataViewItem( {
 	return (
 		<HStack
 			justify="flex-start"
-			className={ classnames(
-				'edit-site-sidebar-dataviews-dataview-item',
-				{
-					'is-selected': isActive,
-				}
-			) }
+			className={ clsx( 'edit-site-sidebar-dataviews-dataview-item', {
+				'is-selected': isActive,
+			} ) }
 		>
 			<SidebarNavigationItem
 				icon={ iconToUse }

package/src/components/sidebar-dataviews/default-views.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { trash, pages, drafts } from '@wordpress/icons';
+import { trash, pages, drafts, unseen, inbox } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -54,6 +54,36 @@ export const DEFAULT_VIEWS = {
 			icon: pages,
 			view: DEFAULT_PAGE_BASE,
 		},
+		{
+			title: __( 'Published' ),
+			slug: 'published',
+			icon: pages,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'publish',
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Scheduled' ),
+			slug: 'future',
+			icon: pages,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'future',
+					},
+				],
+			},
+		},
 		{
 			title: __( 'Drafts' ),
 			slug: 'drafts',
@@ -69,6 +99,36 @@ export const DEFAULT_VIEWS = {
 				],
 			},
 		},
+		{
+			title: __( 'Pending' ),
+			slug: 'pending',
+			icon: inbox,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'pending',
+					},
+				],
+			},
+		},
+		{
+			title: __( 'Private' ),
+			slug: 'private',
+			icon: unseen,
+			view: {
+				...DEFAULT_PAGE_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'private',
+					},
+				],
+			},
+		},
 		{
 			title: __( 'Trash' ),
 			slug: 'trash',

package/src/components/sidebar-dataviews/index.js

@@ -14,24 +14,19 @@ const { useLocation } = unlock( routerPrivateApis );
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
-const PATH_TO_TYPE = {
-	'/page': 'page',
-};
-
 export default function DataViewsSidebarContent() {
 	const {
-		params: { path, activeView = 'all', isCustom = 'false' },
+		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	if ( ! path || ! PATH_TO_TYPE[ path ] ) {
+	if ( ! postType ) {
 		return null;
 	}
 	const isCustomBoolean = isCustom === 'true';
-	const type = PATH_TO_TYPE[ path ];
 
 	return (
 		<>
 			<ItemGroup>
-				{ DEFAULT_VIEWS[ type ].map( ( dataview ) => {
+				{ DEFAULT_VIEWS[ postType ].map( ( dataview ) => {
 					return (
 						<DataViewItem
 							key={ dataview.slug }
@@ -51,7 +46,7 @@ export default function DataViewsSidebarContent() {
 			{ window?.__experimentalCustomViews && (
 				<CustomDataViewsList
 					activeView={ activeView }
-					type={ type }
+					type={ postType }
 					isCustom
 				/>
 			) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -29,35 +29,35 @@ export default function SidebarNavigationItem( {
 	icon,
 	withChevron = false,
 	suffix,
-	path,
+	uid,
+	params,
 	onClick,
 	children,
 	...props
 } ) {
 	const history = useHistory();
-	const navigate = useContext( SidebarNavigationContext );
-
-	// If there is no custom click handler, create one that navigates to `path`.
+	const { navigate } = useContext( SidebarNavigationContext );
+	// If there is no custom click handler, create one that navigates to `params`.
 	function handleClick( e ) {
 		if ( onClick ) {
 			onClick( e );
 			navigate( 'forward' );
-		} else if ( path ) {
+		} else if ( params ) {
 			e.preventDefault();
-			history.push( { path } );
-			navigate( 'forward', `[id="${ path }"]` );
+			history.push( params );
+			navigate( 'forward', `[id="${ uid }"]` );
 		}
 	}
 
 	return (
 		<Item
-			className={ classnames(
+			className={ clsx(
 				'edit-site-sidebar-navigation-item',
 				{ 'with-suffix': ! withChevron && suffix },
 				className
 			) }
 			onClick={ handleClick }
-			id={ path }
+			id={ uid }
 			{ ...props }
 		>
 			<HStack justify="flex-start">

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,25 +32,6 @@ import { SidebarNavigationContext } from '../sidebar';
 
 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,
 	title,
@@ -81,17 +62,16 @@ export default function SidebarNavigationScreen( {
 	);
 	const location = useLocation();
 	const history = useHistory();
-	const navigate = useContext( SidebarNavigationContext );
+	const { navigate } = useContext( SidebarNavigationContext );
+	const backPath = backPathProp ?? location.state?.backPath;
 	const icon = isRTL() ? chevronRight : chevronLeft;
+
 	return (
 		<>
 			<VStack
-				className={ classnames(
-					'edit-site-sidebar-navigation-screen__main',
-					{
-						'has-footer': !! footer,
-					}
-				) }
+				className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
+					'has-footer': !! footer,
+				} ) }
 				spacing={ 0 }
 				justify="flex-start"
 			>
@@ -103,10 +83,6 @@ export default function SidebarNavigationScreen( {
 					{ ! isRoot && (
 						<SidebarButton
 							onClick={ () => {
-								const backPath =
-									backPathProp ??
-									location.state?.backPath ??
-									getBackPath( location.params );
 								history.push( backPath );
 								navigate( 'back' );
 							} }

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

@@ -99,20 +99,22 @@
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+
+	// Use a white outline to provide contrast with the dark background.
 	.edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
+		outline-color: rgba($white, 0.05);
 	}
 
-	&:focus .edit-site-global-styles-variations_item-preview,
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white;
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($white, 0.15);
+	}
 
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		outline-color: $white;
+	}
 
-		&::after {
-			box-shadow: inset 0 0 0 1px $gray-900;
-		}
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
 	}
 }
 

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ export default function SidebarNavigationScreenDetailsPanelRow( {
 			key={ label }
 			spacing={ 5 }
 			alignment="left"
-			className={ classnames(
+			className={ clsx(
 				'edit-site-sidebar-navigation-details-screen-panel__row',
 				className
 			) }

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

@@ -45,7 +45,13 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
-		return <SidebarNavigationItem { ...props } path="/wp_global_styles" />;
+		return (
+			<SidebarNavigationItem
+				{ ...props }
+				params={ { path: '/wp_global_styles' } }
+				uid="global-styles-navigation-item"
+			/>
+		);
 	}
 	return (
 		<SidebarNavigationItem
@@ -90,7 +96,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			>
 				<StyleVariationsContainer gap={ gap } />
 				{ colorVariations?.length && (
-					<ColorVariations title={ __( 'Colors' ) } gap={ gap } />
+					<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
 				) }
 				{ typographyVariations?.length && (
 					<TypographyVariations
@@ -103,7 +109,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-export default function SidebarNavigationScreenGlobalStyles() {
+export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -179,6 +185,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				description={ __(
 					'Choose a different style combination for the theme styles.'
 				) }
+				backPath={ backPath }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
 					shouldShowGlobalStylesFooter && (

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

@@ -15,6 +15,11 @@ 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 default function SidebarNavigationScreenMain() {
 	const { setEditorCanvasContainerView } = unlock(
@@ -37,34 +42,39 @@ export default function SidebarNavigationScreenMain() {
 				<>
 					<ItemGroup>
 						<SidebarNavigationItem
-							path="/navigation"
+							uid="navigation-navigation-item"
+							params={ { postType: NAVIGATION_POST_TYPE } }
 							withChevron
 							icon={ navigation }
 						>
 							{ __( 'Navigation' ) }
 						</SidebarNavigationItem>
 						<SidebarNavigationItemGlobalStyles
+							uid="styles-navigation-item"
 							withChevron
 							icon={ styles }
 						>
 							{ __( 'Styles' ) }
 						</SidebarNavigationItemGlobalStyles>
 						<SidebarNavigationItem
-							path="/page"
+							uid="page-navigation-item"
+							params={ { postType: 'page' } }
 							withChevron
 							icon={ page }
 						>
 							{ __( 'Pages' ) }
 						</SidebarNavigationItem>
 						<SidebarNavigationItem
-							path="/wp_template"
+							uid="template-navigation-item"
+							params={ { postType: TEMPLATE_POST_TYPE } }
 							withChevron
 							icon={ layout }
 						>
 							{ __( 'Templates' ) }
 						</SidebarNavigationItem>
 						<SidebarNavigationItem
-							path="/patterns"
+							uid="patterns-navigation-item"
+							params={ { postType: PATTERN_TYPES.user } }
 							withChevron
 							icon={ symbol }
 						>

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

@@ -22,7 +22,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export const postType = `wp_navigation`;
 
-export default function SidebarNavigationScreenNavigationMenu() {
+export default function SidebarNavigationScreenNavigationMenu( { backPath } ) {
 	const {
 		params: { postId },
 	} = useLocation();
@@ -67,6 +67,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 				description={ __(
 					'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
 				) }
+				backPath={ backPath }
 			>
 				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
 			</SidebarNavigationScreenWrapper>
@@ -77,6 +78,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		return (
 			<SidebarNavigationScreenWrapper
 				description={ __( 'Navigation Menu missing.' ) }
+				backPath={ backPath }
 			/>
 		);
 	}
@@ -86,12 +88,14 @@ export default function SidebarNavigationScreenNavigationMenu() {
 			<SidebarNavigationScreenWrapper
 				actions={
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ _handleDelete }
 						onSave={ _handleSave }
 						onDuplicate={ _handleDuplicate }
 					/>
 				}
+				backPath={ backPath }
 				title={ buildNavigationLabel(
 					navigationMenu?.title,
 					navigationMenu?.id,
@@ -105,6 +109,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	return (
 		<SingleNavigationMenu
 			navigationMenu={ navigationMenu }
+			backPath={ backPath }
 			handleDelete={ _handleDelete }
 			handleSave={ _handleSave }
 			handleDuplicate={ _handleDuplicate }

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

@@ -5,24 +5,30 @@ import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import RenameModal from './rename-modal';
 import DeleteConfirmDialog from './delete-confirm-dialog';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
 };
 
 export default function ScreenNavigationMoreMenu( props ) {
-	const { onDelete, onSave, onDuplicate, menuTitle } = props;
+	const { onDelete, onSave, onDuplicate, menuTitle, menuId } = props;
 
 	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
 	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
 		useState( false );
 
+	const history = useHistory();
+
 	const closeModals = () => {
 		setRenameModalOpen( false );
 		setDeleteConfirmDialogOpen( false );
@@ -50,6 +56,17 @@ export default function ScreenNavigationMoreMenu( props ) {
 							>
 								{ __( 'Rename' ) }
 							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									history.push( {
+										postId: menuId,
+										postType: 'wp_navigation',
+										canvas: 'edit',
+									} );
+								} }
+							>
+								{ __( 'Edit' ) }
+							</MenuItem>
 							<MenuItem
 								onClick={ () => {
 									onDuplicate();

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

@@ -13,6 +13,7 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
+	backPath,
 	handleDelete,
 	handleDuplicate,
 	handleSave,
@@ -24,6 +25,7 @@ export default function SingleNavigationMenu( {
 			actions={
 				<>
 					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
 						menuTitle={ decodeEntities( menuTitle ) }
 						onDelete={ handleDelete }
 						onSave={ handleSave }
@@ -31,6 +33,7 @@ export default function SingleNavigationMenu( {
 					/>
 				</>
 			}
+			backPath={ backPath }
 			title={ buildNavigationLabel(
 				navigationMenu?.title,
 				navigationMenu?.id,

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

@@ -42,7 +42,7 @@ function useDeleteNavigationMenu() {
 					type: 'snackbar',
 				}
 			);
-			history.push( { path: '/navigation' } );
+			history.push( { postType: 'wp_navigation' } );
 		} catch ( error ) {
 			createErrorNotice(
 				sprintf(