@wordpress/edit-site 5.14.0 → 5.15.0

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 = status;
-	let statusIcon = pendingIcon;
 	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-pages/index.js

@@ -58,13 +58,16 @@ export default function SidebarNavigationScreenPages() {
 		templates?.find( ( template ) => template.slug === 'home' ) ||
 		templates?.find( ( template ) => template.slug === 'index' );
 
+	const getPostsPageTemplate = () =>
+		templates?.find( ( template ) => template.slug === 'home' ) ||
+		templates?.find( ( template ) => template.slug === 'index' );
+
 	const pagesAndTemplates = pages?.concat( dynamicPageTemplates, [
 		homeTemplate,
 	] );
 
 	const { frontPage, postsPage } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreStore );
-
 		const siteSettings = getEntityRecord( 'root', 'site' );
 		return {
 			frontPage: siteSettings?.page_on_front,
@@ -106,6 +109,27 @@ export default function SidebarNavigationScreenPages() {
 		setShowAddPage( false );
 	};
 
+	const getPageProps = ( id ) => {
+		let itemIcon = page;
+		const postsPageTemplateId =
+			postsPage && postsPage === id ? getPostsPageTemplate()?.id : null;
+
+		switch ( id ) {
+			case frontPage:
+				itemIcon = home;
+				break;
+			case postsPage:
+				itemIcon = verse;
+				break;
+		}
+
+		return {
+			icon: itemIcon,
+			postType: postsPageTemplateId ? 'wp_template' : 'page',
+			postId: postsPageTemplateId || id,
+		};
+	};
+
 	return (
 		<>
 			{ showAddPage && (
@@ -152,34 +176,20 @@ export default function SidebarNavigationScreenPages() {
 										</Truncate>
 									</PageItem>
 								) }
-								{ reorderedPages?.map( ( item ) => {
-									let itemIcon;
-									switch ( item.id ) {
-										case frontPage:
-											itemIcon = home;
-											break;
-										case postsPage:
-											itemIcon = verse;
-											break;
-										default:
-											itemIcon = page;
-									}
-									return (
-										<PageItem
-											postId={ item.id }
-											key={ item.id }
-											icon={ itemIcon }
-											withChevron
-										>
-											<Truncate numberOfLines={ 1 }>
-												{ decodeEntities(
-													item?.title?.rendered ||
-														__( '(no title)' )
-												) }
-											</Truncate>
-										</PageItem>
-									);
-								} ) }
+								{ reorderedPages?.map( ( { id, title } ) => (
+									<PageItem
+										{ ...getPageProps( id ) }
+										key={ id }
+										withChevron
+									>
+										<Truncate numberOfLines={ 1 }>
+											{ decodeEntities(
+												title?.rendered ||
+													__( '(no title)' )
+											) }
+										</Truncate>
+									</PageItem>
+								) ) }
 							</ItemGroup>
 						) }
 					</>

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

@@ -16,13 +16,16 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import usePatternDetails from './use-pattern-details';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import normalizeRecordKey from '../../utils/normalize-record-key';
 
 export default function SidebarNavigationScreenPattern() {
-	const { params } = useNavigator();
 	const { categoryType } = getQueryArgs( window.location.href );
-	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
+	const { params } = useNavigator();
+	const { postType } = params;
+	const postId = normalizeRecordKey( params?.postId );
+
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );

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

@@ -19,8 +19,9 @@ export default function TemplatePartNavigationMenu( { id } ) {
 		<>
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="12"
+				size="11"
 				upperCase={ true }
+				weight={ 500 }
 			>
 				{ title?.rendered || title || __( 'Navigation' ) }
 			</Heading>

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

@@ -22,8 +22,9 @@ export default function TemplatePartNavigationMenus( { menus } ) {
 		<>
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="12"
+				size="11"
 				upperCase={ true }
+				weight={ 500 }
 			>
 				{ __( 'Navigation' ) }
 			</Heading>

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

@@ -59,13 +59,23 @@ export default function useNavigationMenuContent( postType, postId ) {
 		record?.blocks
 	);
 
+	if ( ! navigationBlocks.length ) {
+		return;
+	}
+
 	const navigationMenuIds = navigationBlocks?.map(
 		( block ) => block.attributes.ref
 	);
 
-	if ( ! navigationMenuIds?.length ) {
+	// Dedupe the Navigation blocks, as you can have multiple navigation blocks in the template.
+	// Also, filter out undefined values, as blocks don't have an id when initially added.
+	const uniqueNavigationMenuIds = [ ...new Set( navigationMenuIds ) ].filter(
+		( menuId ) => menuId
+	);
+
+	if ( ! uniqueNavigationMenuIds?.length ) {
 		return;
 	}
 
-	return <TemplatePartNavigationMenus menus={ navigationMenuIds } />;
+	return <TemplatePartNavigationMenus menus={ uniqueNavigationMenuIds } />;
 }

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

@@ -19,8 +19,11 @@ import {
 	SidebarNavigationScreenDetailsPanelLabel,
 	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
+import normalizeRecordKey from '../../utils/normalize-record-key';
 
 export default function usePatternDetails( postType, postId ) {
+	postId = normalizeRecordKey( postId );
+
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
 		postType,
 		postId
@@ -38,7 +41,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 +49,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
 		);
 	}

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

@@ -7,11 +7,12 @@ import {
 	Flex,
 	Icon,
 	Tooltip,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
 import { file, starFilled, lockSmall } from '@wordpress/icons';
 
@@ -29,12 +30,72 @@ 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 (
+		<>
+			<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={ sprintf(
+										// translators: %s: The pattern category name.
+										'"%s" patterns cannot be edited.',
+										category.label
+									) }
+								>
+									<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', '<' );
@@ -45,7 +106,7 @@ export default function SidebarNavigationScreenPatterns() {
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
 	const { patternCategories, hasPatterns } = usePatternCategories();
-	const { myPatterns, hasPatterns: hasMyPatterns } = useMyPatterns();
+	const { myPatterns } = useMyPatterns();
 
 	const isTemplatePartsMode = useSelect( ( select ) => {
 		const settings = select( editSiteStore ).getSettings();
@@ -55,9 +116,6 @@ export default function SidebarNavigationScreenPatterns() {
 	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
 	const footer = ! isMobileViewport ? (
 		<ItemGroup>
-			<SidebarNavigationItem withChevron { ...templatePartsLink }>
-				{ __( 'Manage all template parts' ) }
-			</SidebarNavigationItem>
 			<SidebarNavigationItem
 				as="a"
 				href="edit.php?post_type=wp_block"
@@ -65,6 +123,9 @@ export default function SidebarNavigationScreenPatterns() {
 			>
 				{ __( 'Manage all of my patterns' ) }
 			</SidebarNavigationItem>
+			<SidebarNavigationItem withChevron { ...templatePartsLink }>
+				{ __( 'Manage all template parts' ) }
+			</SidebarNavigationItem>
 		</ItemGroup>
 	) : undefined;
 
@@ -73,7 +134,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 }
@@ -91,94 +152,38 @@ export default function SidebarNavigationScreenPatterns() {
 									</Item>
 								</ItemGroup>
 							) }
-							{ hasMyPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-									<CategoryItem
-										key={ myPatterns.name }
-										count={ myPatterns.count }
-										label={ myPatterns.label }
-										icon={ starFilled }
-										id={ myPatterns.name }
-										type="wp_block"
-										isActive={
-											currentCategory ===
-												`${ myPatterns.name }` &&
-											currentType === 'wp_block'
-										}
-									/>
-								</ItemGroup>
+							<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+								<CategoryItem
+									key={ myPatterns.name }
+									count={
+										! myPatterns.count
+											? '0'
+											: myPatterns.count
+									}
+									label={ myPatterns.label }
+									icon={ starFilled }
+									id={ myPatterns.name }
+									type="wp_block"
+									isActive={
+										currentCategory ===
+											`${ myPatterns.name }` &&
+										currentType === 'wp_block'
+									}
+								/>
+							</ItemGroup>
+							{ hasPatterns && (
+								<ThemePatternsGroup
+									categories={ patternCategories }
+									currentCategory={ currentCategory }
+									currentType={ currentType }
+								/>
 							) }
 							{ 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>
-							) }
-							{ 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>
+								<TemplatePartGroup
+									areas={ templatePartAreas }
+									currentArea={ currentCategory }
+									currentType={ currentType }
+								/>
 							) }
 						</>
 					) }

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

@@ -1,3 +1,23 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
 	margin-bottom: $grid-unit-30;
+
+	&:last-of-type {
+		border-bottom: 0;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-patterns__group-header {
+	margin-top: $grid-unit-20;
+
+	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-pattern-categories.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,6 +12,10 @@ import useThemePatterns from './use-theme-patterns';
 
 export default function usePatternCategories() {
 	const defaultCategories = useDefaultPatternCategories();
+	defaultCategories.push( {
+		name: 'uncategorized',
+		label: __( 'Uncategorized' ),
+	} );
 	const themePatterns = useThemePatterns();
 
 	const patternCategories = useMemo( () => {
@@ -31,6 +36,10 @@ export default function usePatternCategories() {
 					categoryMap[ category ].count += 1;
 				}
 			} );
+			// If the pattern has no categories, add it to uncategorized.
+			if ( ! pattern.categories?.length ) {
+				categoryMap.uncategorized.count += 1;
+			}
 		} );
 
 		// Filter categories so we only have those containing patterns.

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/sidebar-navigation-screen-patterns/use-theme-patterns.js

@@ -36,7 +36,8 @@ export default function useThemePatterns() {
 					( pattern ) =>
 						! CORE_PATTERN_SOURCES.includes( pattern.source )
 				)
-				.filter( filterOutDuplicatesByName ),
+				.filter( filterOutDuplicatesByName )
+				.filter( ( pattern ) => pattern.inserter !== false ),
 		[ blockPatterns, restBlockPatterns ]
 	);