@wordpress/edit-site 5.32.0 → 5.34.0

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

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 	ExternalLink,
 	__experimentalTruncate as Truncate,
@@ -15,8 +14,10 @@ import { pencil } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { escapeAttribute } from '@wordpress/escape-html';
 import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -26,18 +27,18 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import PageDetails from './page-details';
-import PageActions from '../page-actions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { PostActions } = unlock( editorPrivateApis );
 
 export default function SidebarNavigationScreenPage( { backPath } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const history = useHistory();
+	const { createSuccessNotice } = useDispatch( noticesStore );
 	const {
 		params: { postId },
-		goTo,
-	} = useNavigator();
+	} = useLocation();
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'page',
@@ -80,7 +81,58 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 				canvas: 'view',
 			} );
 		}
-	}, [ hasResolved, history ] );
+	}, [ hasResolved, record, history ] );
+
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						history.push( {
+							path: '/' + items[ 0 ].type,
+							postId: undefined,
+							postType: undefined,
+							canvas: 'view',
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.push( {
+												path: undefined,
+												postId: newItem.id,
+												postType: newItem.type,
+												canvas: 'edit',
+											} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ history, createSuccessNotice ]
+	);
 
 	const featureImageAltText = featuredMediaAltText
 		? decodeEntities( featuredMediaAltText )
@@ -94,12 +146,9 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 			) }
 			actions={
 				<>
-					<PageActions
-						postId={ postId }
-						toggleProps={ { as: SidebarButton } }
-						onRemove={ () => {
-							goTo( '/page' );
-						} }
+					<PostActions
+						onActionPerformed={ onActionPerformed }
+						buttonProps={ { size: 'default' } }
 					/>
 					<SidebarButton
 						onClick={ () => setCanvasMode( 'edit' ) }

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

@@ -34,9 +34,8 @@
 }
 
 .edit-site-sidebar-navigation-screen-page__modified {
-	margin: 0 0 $grid-unit-20 0;
+	margin: 0 0 $grid-unit-20 $grid-unit-20;
 	color: $gray-600;
-	margin-left: $grid-unit-20;
 	.components-text {
 		color: $gray-600;
 	}
@@ -61,3 +60,10 @@
 		fill: $alert-green;
 	}
 }
+
+.edit-site-sidebar-navigation-screen__actions .editor-all-actions-button {
+	color: inherit;
+	&:active {
+		color: inherit;
+	}
+}

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

@@ -1,11 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
-import { getQueryArgs } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -17,27 +16,26 @@ import usePatternDetails from './use-pattern-details';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import TemplateActions from '../template-actions';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationScreenPattern() {
-	const navigator = useNavigator();
+	const history = useHistory();
+	const location = useLocation();
 	const {
-		params: { postType, postId },
-	} = navigator;
-	const { categoryType } = getQueryArgs( window.location.href );
+		params: { postType, postId, categoryId, categoryType },
+	} = location;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );
 
-	// The absence of a category type in the query params for template parts
-	// indicates the user has arrived at the template part via the "manage all"
-	// page and the back button should return them to that list page.
-	const backPath =
-		! categoryType && postType === TEMPLATE_PART_POST_TYPE
-			? '/wp_template_part/all'
-			: '/patterns';
+	const backPath = {
+		categoryId,
+		categoryType,
+		path: '/patterns',
+	};
 
 	return (
 		<SidebarNavigationScreen
@@ -48,7 +46,7 @@ export default function SidebarNavigationScreenPattern() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( backPath );
+							history.push( backPath );
 						} }
 					/>
 					<SidebarButton

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menus.js

@@ -10,7 +10,9 @@ import TemplatePartNavigationMenu from './template-part-navigation-menu';
 import TemplatePartNavigationMenuList from './template-part-navigation-menu-list';
 
 export default function TemplatePartNavigationMenus( { menus } ) {
-	if ( ! menus.length ) return null;
+	if ( ! menus.length ) {
+		return null;
+	}
 
 	// if there is a single menu then render TemplatePartNavigationMenu
 	if ( menus.length === 1 ) {

package/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';

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

@@ -11,9 +11,10 @@ export default function CategoryItem( {
 	isActive,
 	label,
 	type,
+	path = '/patterns',
 } ) {
 	const linkInfo = useLink( {
-		path: '/patterns',
+		path,
 		categoryType: type,
 		categoryId: id,
 	} );

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

@@ -4,92 +4,116 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { getQueryArgs } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { file } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import AddNewPattern from '../add-new-pattern';
-import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import CategoryItem from './category-item';
 import {
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 } from '../../utils/constants';
-import { useLink } from '../routes/link';
 import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
-import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-function TemplatePartGroup( { areas, currentArea, currentType } ) {
-	return (
-		<>
-			<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
-				<Heading level={ 2 }>{ __( 'Template parts' ) }</Heading>
-			</div>
-			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-				{ Object.entries( areas ).map(
-					( [ area, { label, templateParts } ] ) => (
-						<CategoryItem
-							key={ area }
-							count={ templateParts?.length }
-							icon={ getTemplatePartIcon( area ) }
-							label={ label }
-							id={ area }
-							type={ TEMPLATE_PART_POST_TYPE }
-							isActive={
-								currentArea === area &&
-								currentType === TEMPLATE_PART_POST_TYPE
-							}
-						/>
-					)
-				) }
-			</ItemGroup>
-		</>
-	);
-}
+const { useLocation } = unlock( routerPrivateApis );
 
-function PatternCategoriesGroup( {
-	categories,
+function CategoriesGroup( {
+	path,
+	templatePartAreas,
+	patternCategories,
 	currentCategory,
 	currentType,
 } ) {
+	const [ allPatterns, ...otherPatterns ] = patternCategories;
+
 	return (
-		<>
-			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-				{ categories.map( ( category ) => (
+		<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 ) }
+				icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
+				label={ __( 'All template parts' ) }
+				id={ TEMPLATE_PART_ALL_AREAS_CATEGORY }
+				type={ TEMPLATE_PART_POST_TYPE }
+				isActive={
+					currentCategory === TEMPLATE_PART_ALL_AREAS_CATEGORY &&
+					currentType === TEMPLATE_PART_POST_TYPE
+				}
+			/>
+			{ Object.entries( templatePartAreas ).map(
+				( [ area, { label, templateParts } ] ) => (
 					<CategoryItem
-						key={ category.name }
-						count={ category.count }
-						label={ category.label }
-						icon={ file }
-						id={ category.name }
-						type="pattern"
+						key={ area }
+						path={ path }
+						count={ templateParts?.length }
+						icon={ getTemplatePartIcon( area ) }
+						label={ label }
+						id={ area }
+						type={ TEMPLATE_PART_POST_TYPE }
 						isActive={
-							currentCategory === `${ category.name }` &&
-							( currentType === PATTERN_TYPES.theme ||
-								currentType === PATTERN_TYPES.user )
+							currentCategory === area &&
+							currentType === TEMPLATE_PART_POST_TYPE
 						}
 					/>
-				) ) }
-			</ItemGroup>
-		</>
+				)
+			) }
+			<div className="edit-site-sidebar-navigation-screen-patterns__divider" />
+			{ allPatterns && (
+				<CategoryItem
+					key={ allPatterns.name }
+					path={ path }
+					count={ allPatterns.count }
+					label={ allPatterns.label }
+					icon={ file }
+					id={ allPatterns.name }
+					type="pattern"
+					isActive={
+						currentCategory === `${ allPatterns.name }` &&
+						( currentType === PATTERN_TYPES.theme ||
+							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"
+					isActive={
+						currentCategory === `${ category.name }` &&
+						( currentType === PATTERN_TYPES.theme ||
+							currentType === PATTERN_TYPES.user )
+					}
+				/>
+			) ) }
+		</ItemGroup>
 	);
 }
 
 export default function SidebarNavigationScreenPatterns() {
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const {
+		params: { categoryType, categoryId, path },
+	} = useLocation();
 	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
 	const currentType = categoryType || PATTERN_TYPES.theme;
 
@@ -100,29 +124,19 @@ export default function SidebarNavigationScreenPatterns() {
 		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
 		[]
 	);
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
-
-	const templatePartsLink = useLink( {
-		path: '/wp_template_part/all',
-		// If a classic theme that supports template parts accessed
-		// the Patterns page directly, preserve that state in the URL.
-		didAccessPatternsPage:
-			! isBlockBasedTheme && isTemplatePartsMode ? 1 : undefined,
-	} );
-
-	const footer = ! isMobileViewport ? (
-		<ItemGroup>
-			{ ( isBlockBasedTheme || isTemplatePartsMode ) && (
-				<SidebarNavigationItem withChevron { ...templatePartsLink }>
-					{ __( 'Manage all template parts' ) }
-				</SidebarNavigationItem>
-			) }
-		</ItemGroup>
-	) : undefined;
 
+	/**
+	 * This sidebar needs to temporarily accomodate two different "URLs":
+	 *
+	 * 1. path = /patterns
+	 *    Block based themes. Also classic themes can access this URL, though it's not linked anywhere.
+	 *
+	 * 2. path = /wp_template_part/all
+	 *    Classic themes with support for block-template-parts. We need to list only Template Parts in this case.
+	 *    The URL is accessible from the Appearance > Template Parts menu.
+	 *
+	 * This is temporary. We aim to consolidate to /patterns.
+	 */
 	return (
 		<SidebarNavigationScreen
 			isRoot={ ! isBlockBasedTheme }
@@ -131,35 +145,23 @@ export default function SidebarNavigationScreenPatterns() {
 				'Manage what patterns are available when editing the site.'
 			) }
 			actions={ <AddNewPattern /> }
-			footer={ footer }
 			content={
 				<>
-					{ isLoading && __( 'Loading patterns…' ) }
+					{ isLoading && __( 'Loading items…' ) }
 					{ ! isLoading && (
 						<>
 							{ ! hasTemplateParts && ! hasPatterns && (
 								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-									<Item>
-										{ __(
-											'No template parts or patterns found'
-										) }
-									</Item>
+									<Item>{ __( 'No items found' ) }</Item>
 								</ItemGroup>
 							) }
-							{ hasPatterns && (
-								<PatternCategoriesGroup
-									categories={ patternCategories }
-									currentCategory={ currentCategory }
-									currentType={ currentType }
-								/>
-							) }
-							{ hasTemplateParts && (
-								<TemplatePartGroup
-									areas={ templatePartAreas }
-									currentArea={ currentCategory }
-									currentType={ currentType }
-								/>
-							) }
+							<CategoriesGroup
+								path={ path }
+								templatePartAreas={ templatePartAreas }
+								patternCategories={ patternCategories }
+								currentCategory={ currentCategory }
+								currentType={ currentType }
+							/>
 						</>
 					) }
 				</>

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

@@ -21,3 +21,8 @@
 		text-transform: uppercase;
 	}
 }
+
+.edit-site-sidebar-navigation-screen-patterns__divider {
+	border-top: 1px solid $gray-800;
+	margin: $grid-unit-20 0;
+}

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

@@ -4,11 +4,10 @@
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
-import {
-	__experimentalUseNavigator as useNavigator,
-	Icon,
-} from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
 /**
  * Internal dependencies
  */
@@ -18,11 +17,13 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 import TemplateActions from '../template-actions';
 import HomeTemplateDetails from './home-template-details';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
 function useTemplateDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
@@ -93,16 +94,11 @@ function useTemplateDetails( postType, postId ) {
 	return { title, description, content, footer };
 }
 
-const POST_TYPE_PATH = {
-	wp_template: '/wp_template',
-	wp_template_part: '/wp_template_part/all',
-};
-
 export default function SidebarNavigationScreenTemplate() {
-	const navigator = useNavigator();
+	const history = useHistory();
 	const {
 		params: { postType, postId },
-	} = navigator;
+	} = useLocation();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { title, content, description, footer } = useTemplateDetails(
 		postType,
@@ -119,7 +115,7 @@ export default function SidebarNavigationScreenTemplate() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( POST_TYPE_PATH[ postType ] );
+							history.push( { path: '/' + postType } );
 						} }
 					/>
 					<SidebarButton

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

@@ -9,8 +9,9 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 import DataViewItem from '../sidebar-dataviews/dataview-item';
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 import { layout } from '@wordpress/icons';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const EMPTY_ARRAY = [];
 
@@ -30,10 +31,9 @@ function TemplateDataviewItem( { template, isActive } ) {
 
 export default function DataviewsTemplatesSidebarContent( {
 	activeView,
-	postType,
 	title,
 } ) {
-	const { records } = useEntityRecords( 'postType', postType, {
+	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
 		per_page: -1,
 	} );
 	const firstItemPerAuthorText = useMemo( () => {

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

@@ -2,69 +2,32 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { store as editSiteStore } from '../../store';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import DataviewsTemplatesSidebarContent from './content';
 
-const config = {
-	[ TEMPLATE_POST_TYPE ]: {
-		title: __( 'Manage templates' ),
-		description: __(
-			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
-		),
-		contentTitle: __( 'All templates' ),
-	},
-	[ TEMPLATE_PART_POST_TYPE ]: {
-		title: __( 'Manage template parts' ),
-		description: __(
-			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
-		),
-		backPath: '/patterns',
-		contentTitle: __( 'All template parts' ),
-	},
-};
-
 const { useLocation } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
-		params: { postType },
-	} = useNavigator();
-	const {
-		params: { didAccessPatternsPage, activeView = 'all' },
+		params: { activeView = 'all' },
 	} = useLocation();
 
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		return !! select( editSiteStore ).getSettings()
-			.supportsTemplatePartsMode;
-	}, [] );
-
 	return (
 		<SidebarNavigationScreen
-			// If a classic theme that supports template parts has never
-			// accessed the Patterns page, return to the dashboard.
-			isRoot={ isTemplatePartsMode && ! didAccessPatternsPage }
-			title={ config[ postType ].title }
-			description={ config[ postType ].description }
-			backPath={ config[ postType ].backPath }
+			title={ __( 'Manage templates' ) }
+			description={ __(
+				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+			) }
 			content={
 				<DataviewsTemplatesSidebarContent
 					activeView={ activeView }
-					postType={ postType }
-					title={ config[ postType ].contentTitle }
+					title={ __( 'All templates' ) }
 				/>
 			}
 		/>