@wordpress/edit-site 5.12.6 → 5.12.8

package/src/components/sidebar-navigation-screen-main/template-part-hint.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';
+
+export default function TemplatePartHint() {
+	const showTemplatePartHint = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! showTemplatePartHint ) {
+		return null;
+	}
+
+	return (
+		<Notice
+			politeness="polite"
+			className="edit-site-sidebar__notice"
+			onRemove={ () => {
+				setPreference( 'core', PREFERENCE_NAME, false );
+			} }
+		>
+			{ __(
+				'Looking for template parts? You can now find them in the new "Patterns" page.'
+			) }
+		</Notice>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

@@ -2,23 +2,20 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
 import { pencil } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { unlock } from '../../lock-unlock';
-
-export default function EditButton() {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+import { useLink } from '../routes/link';
 
+export default function EditButton( { postId } ) {
+	const linkInfo = useLink( {
+		postId,
+		postType: 'wp_navigation',
+		canvas: 'edit',
+	} );
 	return (
-		<SidebarButton
-			onClick={ () => setCanvasMode( 'edit' ) }
-			label={ __( 'Edit' ) }
-			icon={ pencil }
-		/>
+		<SidebarButton { ...linkInfo } label={ __( 'Edit' ) } icon={ pencil } />
 	);
 }

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

@@ -9,6 +9,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
 import ScreenNavigationMoreMenu from './more-menu';
 import NavigationMenuEditor from './navigation-menu-editor';
+import EditButton from './edit-button';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -21,12 +22,15 @@ export default function SingleNavigationMenu( {
 	return (
 		<SidebarNavigationScreenWrapper
 			actions={
-				<ScreenNavigationMoreMenu
-					menuTitle={ decodeEntities( menuTitle ) }
-					onDelete={ handleDelete }
-					onSave={ handleSave }
-					onDuplicate={ handleDuplicate }
-				/>
+				<>
+					<EditButton postId={ navigationMenu?.id } />
+					<ScreenNavigationMoreMenu
+						menuTitle={ decodeEntities( menuTitle ) }
+						onDelete={ handleDelete }
+						onSave={ handleSave }
+						onDuplicate={ handleDuplicate }
+					/>
+				</>
 			}
 			title={ decodeEntities( menuTitle ) }
 			description={ __(

package/src/components/sidebar-navigation-screen-page/status-label.js

@@ -9,42 +9,10 @@ import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
-import { Path, SVG } from '@wordpress/primitives';
-
-const publishedIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
-		/>
-	</SVG>
-);
-
-const draftIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
-		/>
-	</SVG>
-);
-
-const pendingIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
-		/>
-	</SVG>
-);
 
 export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
-	let statusLabel = '';
-	let statusIcon = pendingIcon;
+	let statusLabel = status;
 	switch ( status ) {
 		case 'publish':
 			statusLabel = date
@@ -57,7 +25,6 @@ export default function StatusLabel( { status, date, short } ) {
 						{ time: <time dateTime={ date } /> }
 				  )
 				: __( 'Published' );
-			statusIcon = publishedIcon;
 			break;
 		case 'future':
 			const formattedDate = dateI18n(
@@ -77,7 +44,6 @@ export default function StatusLabel( { status, date, short } ) {
 			break;
 		case 'draft':
 			statusLabel = __( 'Draft' );
-			statusIcon = draftIcon;
 			break;
 		case 'pending':
 			statusLabel = __( 'Pending' );
@@ -99,7 +65,7 @@ export default function StatusLabel( { status, date, short } ) {
 				}
 			) }
 		>
-			{ statusIcon } { statusLabel }
+			{ statusLabel }
 		</div>
 	);
 }

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

@@ -38,7 +38,7 @@ export default function usePatternDetails( postType, postId ) {
 	if ( ! descriptionText && addedBy.text ) {
 		descriptionText = sprintf(
 			// translators: %s: pattern title e.g: "Header".
-			__( 'This is your %s pattern.' ),
+			__( 'This is the %s pattern.' ),
 			getTitle()
 		);
 	}
@@ -46,7 +46,7 @@ export default function usePatternDetails( postType, postId ) {
 	if ( ! descriptionText && postType === 'wp_block' && record?.title ) {
 		descriptionText = sprintf(
 			// translators: %s: user created pattern title e.g. "Footer".
-			__( 'This is your %s pattern.' ),
+			__( 'This is the %s pattern.' ),
 			record.title
 		);
 	}
@@ -95,7 +95,7 @@ export default function usePatternDetails( postType, postId ) {
 		details.push( {
 			label: __( 'Syncing' ),
 			value:
-				record.meta?.sync_status === 'unsynced'
+				record.wp_pattern_sync_status === 'unsynced'
 					? __( 'Not synced' )
 					: __( 'Fully synced' ),
 		} );

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

@@ -7,6 +7,7 @@ import {
 	Flex,
 	Icon,
 	Tooltip,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -29,12 +30,73 @@ import usePatternCategories from './use-pattern-categories';
 import useMyPatterns from './use-my-patterns';
 import useTemplatePartAreas from './use-template-part-areas';
 
-const templatePartAreaLabels = {
-	header: __( 'Headers' ),
-	footer: __( 'Footers' ),
-	sidebar: __( 'Sidebar' ),
-	uncategorized: __( 'Uncategorized' ),
-};
+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="wp_template_part"
+							isActive={
+								currentArea === area &&
+								currentType === 'wp_template_part'
+							}
+						/>
+					)
+				) }
+			</ItemGroup>
+		</>
+	);
+}
+
+function ThemePatternsGroup( { categories, currentCategory, currentType } ) {
+	return (
+		<>
+			<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
+				<Heading level={ 2 }>{ __( 'Theme patterns' ) }</Heading>
+			</div>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+				{ categories.map( ( category ) => (
+					<CategoryItem
+						key={ category.name }
+						count={ category.count }
+						label={
+							<Flex justify="left" align="center" gap={ 0 }>
+								{ category.label }
+								<Tooltip
+									position="top center"
+									text={ __(
+										'Theme patterns cannot be edited.'
+									) }
+								>
+									<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
+										<Icon icon={ lockSmall } size={ 24 } />
+									</span>
+								</Tooltip>
+							</Flex>
+						}
+						icon={ file }
+						id={ category.name }
+						type="pattern"
+						isActive={
+							currentCategory === `${ category.name }` &&
+							currentType === 'pattern'
+						}
+					/>
+				) ) }
+			</ItemGroup>
+		</>
+	);
+}
 
 export default function SidebarNavigationScreenPatterns() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -73,7 +135,7 @@ export default function SidebarNavigationScreenPatterns() {
 			isRoot={ isTemplatePartsMode }
 			title={ __( 'Patterns' ) }
 			description={ __(
-				'Manage what patterns are available when editing your site.'
+				'Manage what patterns are available when editing the site.'
 			) }
 			actions={ <AddNewPattern /> }
 			footer={ footer }
@@ -109,76 +171,18 @@ export default function SidebarNavigationScreenPatterns() {
 								</ItemGroup>
 							) }
 							{ hasTemplateParts && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-									{ Object.entries( templatePartAreas ).map(
-										( [ area, parts ] ) => (
-											<CategoryItem
-												key={ area }
-												count={ parts.length }
-												icon={ getTemplatePartIcon(
-													area
-												) }
-												label={
-													templatePartAreaLabels[
-														area
-													]
-												}
-												id={ area }
-												type="wp_template_part"
-												isActive={
-													currentCategory === area &&
-													currentType ===
-														'wp_template_part'
-												}
-											/>
-										)
-									) }
-								</ItemGroup>
+								<TemplatePartGroup
+									areas={ templatePartAreas }
+									currentArea={ currentCategory }
+									currentType={ currentType }
+								/>
 							) }
 							{ hasPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-									{ patternCategories.map( ( category ) => (
-										<CategoryItem
-											key={ category.name }
-											count={ category.count }
-											label={
-												<Flex
-													justify="left"
-													align="center"
-													gap={ 0 }
-												>
-													{ category.label }
-													<Tooltip
-														position="top center"
-														text={ __(
-															'Theme patterns cannot be edited.'
-														) }
-													>
-														<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
-															<Icon
-																style={ {
-																	fill: 'currentcolor',
-																} }
-																icon={
-																	lockSmall
-																}
-																size={ 24 }
-															/>
-														</span>
-													</Tooltip>
-												</Flex>
-											}
-											icon={ file }
-											id={ category.name }
-											type="pattern"
-											isActive={
-												currentCategory ===
-													`${ category.name }` &&
-												currentType === 'pattern'
-											}
-										/>
-									) ) }
-								</ItemGroup>
+								<ThemePatternsGroup
+									categories={ patternCategories }
+									currentCategory={ currentCategory }
+									currentType={ currentType }
+								/>
 							) }
 						</>
 					) }

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

@@ -1,3 +1,25 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
-	margin-bottom: $grid-unit-30;
+	margin-bottom: $grid-unit-40;
+	&:last-of-type,
+	&:first-of-type {
+		border-bottom: 0;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+
+	&:first-of-type {
+		margin-bottom: $grid-unit-40;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-patterns__group-header {
+	p {
+		color: $gray-600;
+	}
+
+	h2 {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
 }

package/src/components/sidebar-navigation-screen-patterns/use-my-patterns.js

@@ -6,18 +6,19 @@ import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 export default function useMyPatterns() {
-	const myPatterns = useSelect( ( select ) =>
-		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
-			per_page: -1,
-		} )
+	const myPatternsCount = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+				per_page: -1,
+			} )?.length ?? 0
 	);
 
 	return {
 		myPatterns: {
-			count: myPatterns?.length || 0,
+			count: myPatternsCount,
 			name: 'my-patterns',
 			label: __( 'My patterns' ),
 		},
-		hasPatterns: !! myPatterns?.length,
+		hasPatterns: myPatternsCount > 0,
 	};
 }

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -2,19 +2,41 @@
  * WordPress dependencies
  */
 import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
-const getTemplatePartAreas = ( items ) => {
+const useTemplatePartsGroupedByArea = ( items ) => {
 	const allItems = items || [];
 
-	const groupedByArea = allItems.reduce(
-		( accumulator, item ) => {
-			const key = accumulator[ item.area ] ? item.area : 'uncategorized';
-			accumulator[ key ].push( item );
-			return accumulator;
-		},
-		{ header: [], footer: [], sidebar: [], uncategorized: [] }
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
 	);
 
+	// Create map of template areas ensuring that default areas are displayed before
+	// any custom registered template part areas.
+	const knownAreas = {
+		header: {},
+		footer: {},
+		sidebar: {},
+		uncategorized: {},
+	};
+
+	templatePartAreas.forEach(
+		( templatePartArea ) =>
+			( knownAreas[ templatePartArea.area ] = {
+				...templatePartArea,
+				templateParts: [],
+			} )
+	);
+
+	const groupedByArea = allItems.reduce( ( accumulator, item ) => {
+		const key = accumulator[ item.area ] ? item.area : 'uncategorized';
+		accumulator[ key ].templateParts.push( item );
+		return accumulator;
+	}, knownAreas );
+
 	return groupedByArea;
 };
 
@@ -28,6 +50,6 @@ export default function useTemplatePartAreas() {
 	return {
 		hasTemplateParts: templateParts ? !! templateParts.length : false,
 		isLoading,
-		templatePartAreas: getTemplatePartAreas( templateParts ),
+		templatePartAreas: useTemplatePartsGroupedByArea( templateParts ),
 	};
 }

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

@@ -57,7 +57,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	const siteIconButtonProps = isBackToDashboardButton
 		? {
 				href: dashboardLink,
-				label: __( 'Go back to the Dashboard' ),
+				label: __( 'Go to the Dashboard' ),
 		  }
 		: {
 				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
@@ -174,7 +174,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 						className="edit-site-site-hub_toggle-command-center"
 						icon={ search }
 						onClick={ () => openCommandCenter() }
-						label={ __( 'Open command center' ) }
+						label={ __( 'Open command palette' ) }
 					/>
 				) }
 			</HStack>

package/src/components/template-actions/index.js

@@ -3,10 +3,17 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -52,7 +59,7 @@ export default function TemplateActions( {
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" reverted.' ),
-					template.title.rendered
+					decodeEntities( template.title.rendered )
 				),
 				{
 					type: 'snackbar',
@@ -84,17 +91,14 @@ export default function TemplateActions( {
 								template={ template }
 								onClose={ onClose }
 							/>
-							<MenuItem
-								isDestructive
-								isTertiary
-								onClick={ () => {
+							<DeleteMenuItem
+								onRemove={ () => {
 									removeTemplate( template );
 									onRemove?.();
 									onClose();
 								} }
-							>
-								{ __( 'Delete' ) }
-							</MenuItem>
+								isTemplate={ template.type === 'wp_template' }
+							/>
 						</>
 					) }
 					{ isRevertable && (
@@ -115,3 +119,30 @@ export default function TemplateActions( {
 		</DropdownMenu>
 	);
 }
+
+function DeleteMenuItem( { onRemove, isTemplate } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	return (
+		<>
+			<MenuItem
+				isDestructive
+				isTertiary
+				onClick={ () => setIsModalOpen( true ) }
+			>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ onRemove }
+				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Delete' ) }
+			>
+				{ isTemplate
+					? __( 'Are you sure you want to delete this template?' )
+					: __(
+							'Are you sure you want to delete this template part?'
+					  ) }
+			</ConfirmDialog>
+		</>
+	);
+}

package/src/components/template-actions/rename-menu-item.js

@@ -14,9 +14,11 @@ import {
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 export default function RenameMenuItem( { template, onClose } ) {
-	const [ title, setTitle ] = useState( () => template.title.rendered );
+	const title = decodeEntities( template.title.rendered );
+	const [ editedTitle, setEditedTitle ] = useState( title );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
 	const { editEntityRecord, saveEditedEntityRecord } =
@@ -33,11 +35,11 @@ export default function RenameMenuItem( { template, onClose } ) {
 
 		try {
 			await editEntityRecord( 'postType', template.type, template.id, {
-				title,
+				title: editedTitle,
 			} );
 
 			// Update state before saving rerenders the list.
-			setTitle( '' );
+			setEditedTitle( '' );
 			setIsModalOpen( false );
 			onClose();
 
@@ -67,7 +69,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 			<MenuItem
 				onClick={ () => {
 					setIsModalOpen( true );
-					setTitle( template.title.rendered );
+					setEditedTitle( title );
 				} }
 			>
 				{ __( 'Rename' ) }
@@ -85,8 +87,8 @@ export default function RenameMenuItem( { template, onClose } ) {
 							<TextControl
 								__nextHasNoMarginBottom
 								label={ __( 'Name' ) }
-								value={ title }
-								onChange={ setTitle }
+								value={ editedTitle }
+								onChange={ setEditedTitle }
 								required
 							/>
 

package/src/components/welcome-guide/page.js

@@ -31,7 +31,7 @@ export default function WelcomeGuidePage() {
 		return null;
 	}
 
-	const heading = __( 'Editing your page' );
+	const heading = __( 'Editing a page' );
 
 	return (
 		<Guide
@@ -63,7 +63,7 @@ export default function WelcomeGuidePage() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
-									'We’ve recently introduced the ability to edit pages within the site editor. You can switch to editing your template using the settings sidebar.'
+									'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
 								) }
 							</p>
 						</>

package/src/components/welcome-guide/template.js

@@ -36,7 +36,7 @@ export default function WelcomeGuideTemplate() {
 		return null;
 	}
 
-	const heading = __( 'Editing your template' );
+	const heading = __( 'Editing a template' );
 
 	return (
 		<Guide
@@ -70,7 +70,7 @@ export default function WelcomeGuideTemplate() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
-									'You’re now editing your page’s template. To switch back to editing your page you can click the back button in the toolbar.'
+									'Note that the same template can be used by multiple pages, so any changes made here may affect other pages on the site. To switch back to editing the page content click the ‘Back’ button in the toolbar.'
 								) }
 							</p>
 						</>

package/src/hooks/commands/use-edit-mode-commands.js

@@ -250,7 +250,6 @@ export function useEditModeCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/manipulate-document',
 		hook: useManipulateDocumentCommands,
-		context: 'site-editor-edit',
 	} );
 
 	useCommandLoader( {