@wordpress/edit-site 5.35.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

@@ -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',

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

@@ -29,23 +29,23 @@ 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`.
+	// 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 }"]` );
 		}
 	}
 
@@ -57,7 +57,7 @@ export default function SidebarNavigationItem( {
 				className
 			) }
 			onClick={ handleClick }
-			id={ path }
+			id={ uid }
 			{ ...props }
 		>
 			<HStack justify="flex-start">

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

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/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(

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

@@ -156,7 +156,7 @@ export function SidebarNavigationScreenWrapper( {
 const NavMenuItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postId,
-		path: '/navigation',
+		postType: 'wp_navigation',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };

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

@@ -20,10 +20,9 @@ const POPOVER_PROPS = {
  */
 import { unlock } from '../../lock-unlock';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
-	const { params } = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -60,10 +59,12 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: attributes.type,
 						postId: attributes.id,
+						canvas: 'edit',
 					},
 					{
 						backPath: params,
@@ -71,10 +72,12 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: 'page',
 						postId: attributes.id,
+						canvas: 'edit',
 					},
 					{
 						backPath: params,
@@ -82,7 +85,7 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 		},
-		[ history, params ]
+		[ history ]
 	);
 
 	return (

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

@@ -3,67 +3,6 @@
 }
 
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
-	.offcanvas-editor-list-view-leaf {
-		max-width: calc(100% - #{ $grid-unit-05 });
-		border-radius: $radius-block-ui;
-		&:hover,
-		&:focus,
-		&[aria-current] {
-			background: $gray-800;
-		}
-		.block-editor-list-view-block__menu {
-			margin-left: -$grid-unit-10;
-		}
-		&.is-selected {
-			> td {
-				background: transparent;
-			}
-
-			.block-editor-list-view-block-contents {
-				color: inherit;
-			}
-
-			&:not(:hover) {
-				.block-editor-list-view-block__menu {
-					opacity: 0;
-				}
-			}
-
-			&:hover,
-			&:focus {
-				color: $white;
-
-				.block-editor-list-view-block__menu-cell {
-					opacity: 1;
-				}
-			}
-
-			.block-editor-list-view-block__menu {
-				opacity: 1;
-
-				&:focus {
-					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-		.block-editor-list-view-block-contents {
-			&:focus {
-				&::after {
-					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				}
-			}
-		}
-
-		&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
-			background: transparent;
-
-			&:hover {
-				background: $gray-800;
-			}
-		}
-	}
-
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;
 	}

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

@@ -3,6 +3,7 @@
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLink } from '../routes/link';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
 
 export default function CategoryItem( {
 	count,
@@ -11,12 +12,13 @@ export default function CategoryItem( {
 	isActive,
 	label,
 	type,
-	path = '/patterns',
 } ) {
 	const linkInfo = useLink( {
-		path,
-		categoryType: type,
 		categoryId: id,
+		postType:
+			type === TEMPLATE_PART_POST_TYPE
+				? TEMPLATE_PART_POST_TYPE
+				: PATTERN_TYPES.user,
 	} );
 
 	if ( ! count ) {

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

@@ -15,7 +15,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import AddNewPattern from '../add-new-pattern';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import {
@@ -31,7 +30,6 @@ import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 
 function CategoriesGroup( {
-	path,
 	templatePartAreas,
 	patternCategories,
 	currentCategory,
@@ -43,7 +41,6 @@ function CategoriesGroup( {
 		<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 			<CategoryItem
 				key="all"
-				path={ path }
 				count={ Object.values( templatePartAreas )
 					.map( ( { templateParts } ) => templateParts?.length || 0 )
 					.reduce( ( acc, val ) => acc + val, 0 ) }
@@ -60,7 +57,6 @@ function CategoriesGroup( {
 				( [ area, { label, templateParts } ] ) => (
 					<CategoryItem
 						key={ area }
-						path={ path }
 						count={ templateParts?.length }
 						icon={ getTemplatePartIcon( area ) }
 						label={ label }
@@ -77,32 +73,28 @@ function CategoriesGroup( {
 			{ allPatterns && (
 				<CategoryItem
 					key={ allPatterns.name }
-					path={ path }
 					count={ allPatterns.count }
 					label={ allPatterns.label }
 					icon={ file }
 					id={ allPatterns.name }
-					type="pattern"
+					type={ PATTERN_TYPES.user }
 					isActive={
 						currentCategory === `${ allPatterns.name }` &&
-						( currentType === PATTERN_TYPES.theme ||
-							currentType === PATTERN_TYPES.user )
+						currentType === PATTERN_TYPES.user
 					}
 				/>
 			) }
 			{ otherPatterns.map( ( category ) => (
 				<CategoryItem
 					key={ category.name }
-					path={ path }
 					count={ category.count }
 					label={ category.label }
 					icon={ file }
 					id={ category.name }
-					type="pattern"
+					type={ PATTERN_TYPES.user }
 					isActive={
 						currentCategory === `${ category.name }` &&
-						( currentType === PATTERN_TYPES.theme ||
-							currentType === PATTERN_TYPES.user )
+						currentType === PATTERN_TYPES.user
 					}
 				/>
 			) ) }
@@ -112,10 +104,10 @@ function CategoriesGroup( {
 
 export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const {
-		params: { categoryType, categoryId, path },
+		params: { postType, categoryId },
 	} = useLocation();
 	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
-	const currentType = categoryType || PATTERN_TYPES.theme;
+	const currentType = postType || PATTERN_TYPES.user;
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
@@ -133,7 +125,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 				'Manage what patterns are available when editing the site.'
 			) }
 			backPath={ backPath }
-			actions={ <AddNewPattern /> }
 			content={
 				<>
 					{ isLoading && __( 'Loading items…' ) }
@@ -145,7 +136,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 								</ItemGroup>
 							) }
 							<CategoriesGroup
-								path={ path }
 								templatePartAreas={ templatePartAreas }
 								patternCategories={ patternCategories }
 								currentCategory={ currentCategory }

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

@@ -53,7 +53,7 @@ export default function DataviewsTemplatesSidebarContent( {
 	return (
 		<ItemGroup>
 			<DataViewItem
-				slug={ 'all' }
+				slug="all"
 				title={ title }
 				icon={ layout }
 				isActive={ activeView === 'all' }

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

@@ -20,7 +20,7 @@ export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 
 	return (
 		<SidebarNavigationScreen
-			title={ __( 'Manage templates' ) }
+			title={ __( 'Templates' ) }
 			description={ __(
 				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 			) }

package/src/components/site-hub/index.js

@@ -20,7 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { memo } from '@wordpress/element';
-import { search, external } from '@wordpress/icons';
+import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
@@ -158,14 +158,8 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 							} }
 						>
 							<div className="edit-site-site-hub__title">
-								{ decodeEntities( siteTitle ) }
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
 								<Button
+									variant="link"
 									href={ homeUrl }
 									target="_blank"
 									label={ __(
@@ -174,10 +168,15 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 									aria-label={ __(
 										'View site (opens in a new tab)'
 									) }
-									icon={ external }
-									className="edit-site-site-hub__site-view-link"
-								/>
-
+								>
+									{ decodeEntities( siteTitle ) }
+								</Button>
+							</div>
+							<HStack
+								spacing={ 0 }
+								expanded={ false }
+								className="edit-site-site-hub__actions"
+							>
 								<Button
 									className="edit-site-site-hub_toggle-command-center"
 									icon={ search }