@wordpress/edit-site 5.12.6 → 5.12.7

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

@@ -43,7 +43,7 @@ const pendingIcon = (
 
 export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
-	let statusLabel = '';
+	let statusLabel = status;
 	let statusIcon = pendingIcon;
 	switch ( status ) {
 		case 'publish':

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,79 @@ 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>
+				<p>{ __( 'Synced patterns for use in template building.' ) }</p>
+			</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>
+				<p>
+					{ __(
+						'For insertion into documents where they can then be customized.'
+					) }
+				</p>
+			</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 +141,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 +177,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,28 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
-	margin-bottom: $grid-unit-30;
+	margin-bottom: $grid-unit-40;
+	padding-bottom: $grid-unit-30;
+	border-bottom: 1px solid $gray-800;
+
+	&: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-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

@@ -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,8 +3,14 @@
  */
 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';
 
@@ -84,17 +90,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 +118,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/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( {

package/src/store/private-actions.js

@@ -11,7 +11,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 export const setCanvasMode =
 	( mode ) =>
-	( { registry, dispatch } ) => {
+	( { registry, dispatch, select } ) => {
 		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
 		dispatch( {
 			type: 'SET_CANVAS_MODE',
@@ -26,6 +26,10 @@ export const setCanvasMode =
 		) {
 			dispatch.setIsListViewOpened( true );
 		}
+		// Switch focus away from editing the template when switching to view mode.
+		if ( mode === 'view' && select.isPage() ) {
+			dispatch.setHasPageContentFocus( true );
+		}
 	};
 
 /**

package/build/components/page-content-focus-manager/constants.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PAGE_CONTENT_BLOCK_TYPES = void 0;
-const PAGE_CONTENT_BLOCK_TYPES = ['core/post-title', 'core/post-featured-image', 'core/post-content'];
-exports.PAGE_CONTENT_BLOCK_TYPES = PAGE_CONTENT_BLOCK_TYPES;
-//# sourceMappingURL=constants.js.map

package/build/components/page-content-focus-manager/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/page-content-focus-manager/constants.js"],"names":["PAGE_CONTENT_BLOCK_TYPES"],"mappings":";;;;;;AAAO,MAAMA,wBAAwB,GAAG,CACvC,iBADuC,EAEvC,0BAFuC,EAGvC,mBAHuC,CAAjC","sourcesContent":["export const PAGE_CONTENT_BLOCK_TYPES = [\n\t'core/post-title',\n\t'core/post-featured-image',\n\t'core/post-content',\n];\n"]}

package/build-module/components/page-content-focus-manager/constants.js

@@ -1,2 +0,0 @@
-export const PAGE_CONTENT_BLOCK_TYPES = ['core/post-title', 'core/post-featured-image', 'core/post-content'];
-//# sourceMappingURL=constants.js.map

package/build-module/components/page-content-focus-manager/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/page-content-focus-manager/constants.js"],"names":["PAGE_CONTENT_BLOCK_TYPES"],"mappings":"AAAA,OAAO,MAAMA,wBAAwB,GAAG,CACvC,iBADuC,EAEvC,0BAFuC,EAGvC,mBAHuC,CAAjC","sourcesContent":["export const PAGE_CONTENT_BLOCK_TYPES = [\n\t'core/post-title',\n\t'core/post-featured-image',\n\t'core/post-content',\n];\n"]}

package/src/components/page-content-focus-manager/constants.js

@@ -1,5 +0,0 @@
-export const PAGE_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];