@wordpress/edit-site 5.32.0 → 5.33.0

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

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	__experimentalUseNavigator as useNavigator,
 	__experimentalVStack as VStack,
 	ExternalLink,
 	__experimentalTruncate as Truncate,
@@ -15,8 +14,9 @@ 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';
 
 /**
  * Internal dependencies
@@ -26,18 +26,17 @@ 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 {
 		params: { postId },
-		goTo,
-	} = useNavigator();
+	} = useLocation();
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'page',
@@ -80,7 +79,21 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 				canvas: 'view',
 			} );
 		}
-	}, [ hasResolved, history ] );
+	}, [ hasResolved, record, history ] );
+
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'move-to-trash' ) {
+				history.push( {
+					path: '/' + items[ 0 ].type,
+					postId: undefined,
+					postType: undefined,
+					canvas: 'view',
+				} );
+			}
+		},
+		[ history ]
+	);
 
 	const featureImageAltText = featuredMediaAltText
 		? decodeEntities( featuredMediaAltText )
@@ -94,12 +107,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,11 @@
 /**
  * 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
@@ -19,11 +19,14 @@ 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;
+	} = location;
 	const { categoryType } = getQueryArgs( window.location.href );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
@@ -36,8 +39,8 @@ export default function SidebarNavigationScreenPattern() {
 	// 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';
+			? { path: '/wp_template_part/all' }
+			: { path: '/patterns' };
 
 	return (
 		<SidebarNavigationScreen
@@ -48,7 +51,7 @@ export default function SidebarNavigationScreenPattern() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( backPath );
+							history.push( backPath );
 						} }
 					/>
 					<SidebarButton

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

@@ -4,7 +4,6 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
@@ -31,59 +30,78 @@ import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
 import { store as editSiteStore } from '../../store';
 
-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>
-		</>
-	);
-}
-
-function PatternCategoriesGroup( {
-	categories,
+function CategoriesGroup( {
+	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"
+				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={ 'all-parts' }
+				type={ TEMPLATE_PART_POST_TYPE }
+				isActive={
+					currentCategory === 'all-parts' &&
+					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 }
+						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 }
+					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 }
+					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>
 	);
 }
 
@@ -146,20 +164,12 @@ export default function SidebarNavigationScreenPatterns() {
 									</Item>
 								</ItemGroup>
 							) }
-							{ hasPatterns && (
-								<PatternCategoriesGroup
-									categories={ patternCategories }
-									currentCategory={ currentCategory }
-									currentType={ currentType }
-								/>
-							) }
-							{ hasTemplateParts && (
-								<TemplatePartGroup
-									areas={ templatePartAreas }
-									currentArea={ currentCategory }
-									currentType={ currentType }
-								/>
-							) }
+							<CategoriesGroup
+								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
  */
@@ -23,6 +22,8 @@ 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/index.js

@@ -3,8 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -32,17 +30,14 @@ const config = {
 		description: __(
 			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
 		),
-		backPath: '/patterns',
+		backPath: { path: '/patterns' },
 		contentTitle: __( 'All template parts' ),
 	},
 };
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenTemplatesBrowse() {
-	const {
-		params: { postType },
-	} = useNavigator();
+export default function SidebarNavigationScreenTemplatesBrowse( { postType } ) {
 	const {
 		params: { didAccessPatternsPage, activeView = 'all' },
 	} = useLocation();

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

@@ -23,6 +23,7 @@ import { memo } from '@wordpress/element';
 import { search, external } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -44,13 +45,16 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 				getSite,
 				getUnstableBase, // Site index.
 			} = select( coreStore );
-
+			const _site = getSite();
 			return {
 				canvasMode: getCanvasMode(),
 				dashboardLink:
 					getSettings().__experimentalDashboardLink || 'index.php',
 				homeUrl: getUnstableBase()?.home,
-				siteTitle: getSite()?.title,
+				siteTitle:
+					! _site?.title && !! _site?.url
+						? filterURLForDisplay( _site?.url )
+						: _site?.title,
 			};
 		},
 		[]
@@ -97,108 +101,94 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack
-				justify="space-between"
-				alignment="center"
-				className="edit-site-site-hub__container"
-			>
-				<HStack
-					justify="flex-start"
-					className="edit-site-site-hub__text-content"
-					spacing="0"
+			<HStack justify="flex-start" spacing="0">
+				<motion.div
+					className={ classnames(
+						'edit-site-site-hub__view-mode-toggle-container',
+						{
+							'has-transparent-background': isTransparent,
+						}
+					) }
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
 				>
-					<motion.div
-						className={ classnames(
-							'edit-site-site-hub__view-mode-toggle-container',
-							{
-								'has-transparent-background': isTransparent,
-							}
-						) }
-						layout
-						transition={ {
-							type: 'tween',
-							duration: disableMotion
-								? 0
-								: HUB_ANIMATION_DURATION,
-							ease: 'easeOut',
-						} }
+					<Button
+						{ ...siteIconButtonProps }
+						className="edit-site-layout__view-mode-toggle"
 					>
-						<Button
-							{ ...siteIconButtonProps }
-							className="edit-site-layout__view-mode-toggle"
-						>
-							<motion.div
-								initial={ false }
-								animate={ {
-									scale: canvasMode === 'view' ? 0.5 : 1,
-								} }
-								whileHover={ {
-									scale: canvasMode === 'view' ? 0.5 : 0.96,
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: HUB_ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-							</motion.div>
-						</Button>
-					</motion.div>
-
-					<AnimatePresence>
 						<motion.div
-							layout={ canvasMode === 'edit' }
+							initial={ false }
 							animate={ {
-								opacity: canvasMode === 'view' ? 1 : 0,
+								scale: canvasMode === 'view' ? 0.5 : 1,
 							} }
-							exit={ {
-								opacity: 0,
+							whileHover={ {
+								scale: canvasMode === 'view' ? 0.5 : 0.96,
 							} }
-							className={ classnames(
-								'edit-site-site-hub__site-title',
-								{ 'is-transparent': isTransparent }
-							) }
 							transition={ {
 								type: 'tween',
-								duration: disableMotion ? 0 : 0.2,
+								duration: disableMotion
+									? 0
+									: HUB_ANIMATION_DURATION,
 								ease: 'easeOut',
-								delay: canvasMode === 'view' ? 0.1 : 0,
 							} }
 						>
-							{ decodeEntities( siteTitle ) }
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</motion.div>
-					</AnimatePresence>
+					</Button>
+				</motion.div>
+
+				<AnimatePresence initial={ false }>
 					{ canvasMode === 'view' && (
-						<Button
-							href={ homeUrl }
-							target="_blank"
-							label={ __( 'View site (opens in a new tab)' ) }
-							aria-label={ __(
-								'View site (opens in a new tab)'
-							) }
-							icon={ external }
-							className={ classnames(
-								'edit-site-site-hub__site-view-link',
-								{ 'is-transparent': isTransparent }
-							) }
-						/>
+						<HStack
+							as={ motion.div }
+							initial={ { opacity: 0 } }
+							animate={ {
+								opacity: isTransparent ? 0 : 1,
+							} }
+							exit={ { opacity: 0 } }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion ? 0 : 0.2,
+								ease: 'easeOut',
+								delay: canvasMode === 'view' ? 0.1 : 0,
+							} }
+						>
+							<div className="edit-site-site-hub__title">
+								{ decodeEntities( siteTitle ) }
+							</div>
+							<HStack
+								spacing={ 0 }
+								expanded={ false }
+								className="edit-site-site-hub__actions"
+							>
+								<Button
+									href={ homeUrl }
+									target="_blank"
+									label={ __(
+										'View site (opens in a new tab)'
+									) }
+									aria-label={ __(
+										'View site (opens in a new tab)'
+									) }
+									icon={ external }
+									className="edit-site-site-hub__site-view-link"
+								/>
+
+								<Button
+									className="edit-site-site-hub_toggle-command-center"
+									icon={ search }
+									onClick={ () => openCommandCenter() }
+									label={ __( 'Open command palette' ) }
+									shortcut={ displayShortcut.primary( 'k' ) }
+								/>
+							</HStack>
+						</HStack>
 					) }
-				</HStack>
-				{ canvasMode === 'view' && (
-					<Button
-						className={ classnames(
-							'edit-site-site-hub_toggle-command-center',
-							{ 'is-transparent': isTransparent }
-						) }
-						icon={ search }
-						onClick={ () => openCommandCenter() }
-						label={ __( 'Open command palette' ) }
-						shortcut={ displayShortcut.primary( 'k' ) }
-					/>
-				) }
+				</AnimatePresence>
 			</HStack>
 		</motion.div>
 	);

package/src/components/site-hub/style.scss

@@ -3,61 +3,41 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
-
-	.edit-site-site-hub__container {
-		gap: 0;
-	}
-
-	.edit-site-site-hub__site-title,
-	.edit-site-site-hub__site-view-link,
-	.edit-site-site-hub_toggle-command-center {
-		transition: opacity ease 0.1s;
-
-		&.is-transparent {
-			opacity: 0 !important;
-		}
-	}
-
-	.edit-site-site-hub__site-view-link {
-		flex-grow: 0;
-		margin-right: var(--wp-admin-border-width-focus);
-		svg {
-			fill: $gray-200;
-		}
-	}
 }
 
-.edit-site-site-hub__post-type {
-	opacity: 0.6;
+.edit-site-site-hub__actions {
+	flex-shrink: 0;
 }
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
 	width: $header-height;
 	flex-shrink: 0;
-	background: $gray-900;
 
-	&.has-transparent-background {
-		background: transparent;
+	.edit-site-layout__view-mode-toggle-icon {
+		background: $gray-900;
 	}
-}
 
-.edit-site-site-hub__text-content {
-	// Necessary for the ellipsis to work.
-	overflow: hidden;
+	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
+		background: transparent;
+	}
 }
 
 .edit-site-site-hub__title {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-}
-
-.edit-site-site-hub__site-title {
 	flex-grow: 1;
 	color: $gray-200;
 }
 
+.edit-site-site-hub__site-view-link {
+	margin-right: var(--wp-admin-border-width-focus);
+	svg {
+		fill: $gray-200;
+	}
+}
+
 .edit-site-site-hub_toggle-command-center {
 	color: $gray-200;