@wordpress/edit-site 5.13.0 → 5.15.0

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

@@ -11,9 +11,19 @@ import { Icon } from '@wordpress/components';
  */
 import { useAddedBy } from '../list/added-by';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	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
@@ -31,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()
 		);
 	}
@@ -39,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
 		);
 	}
@@ -82,5 +92,40 @@ export default function usePatternDetails( postType, postId ) {
 		/>
 	) : null;
 
-	return { title, description, footer };
+	const details = [];
+
+	if ( postType === 'wp_block' ) {
+		details.push( {
+			label: __( 'Syncing' ),
+			value:
+				record.wp_pattern_sync_status === 'unsynced'
+					? __( 'Not synced' )
+					: __( 'Fully synced' ),
+		} );
+	}
+
+	const content = (
+		<>
+			{ !! details.length && (
+				<SidebarNavigationScreenDetailsPanel
+					spacing={ 5 }
+					title={ __( 'Details' ) }
+				>
+					{ details.map( ( { label, value } ) => (
+						<SidebarNavigationScreenDetailsPanelRow key={ label }>
+							<SidebarNavigationScreenDetailsPanelLabel>
+								{ label }
+							</SidebarNavigationScreenDetailsPanelLabel>
+							<SidebarNavigationScreenDetailsPanelValue>
+								{ value }
+							</SidebarNavigationScreenDetailsPanelValue>
+						</SidebarNavigationScreenDetailsPanelRow>
+					) ) }
+				</SidebarNavigationScreenDetailsPanel>
+			) }
+			{ useNavigationMenuContent( postType, postId ) }
+		</>
+	);
+
+	return { title, description, content, footer };
 }

package/src/components/{sidebar-navigation-screen-library → sidebar-navigation-screen-patterns}/category-item.js

@@ -14,15 +14,15 @@ export default function CategoryItem( {
 } ) {
 	const linkInfo = useLink(
 		{
-			path: '/library',
+			path: '/patterns',
 			categoryType: type,
 			categoryId: id,
 		},
 		{
 			// Keep a record of where we came from in state so we can
-			// use the browser's back button to go back to the library.
+			// use the browser's back button to go back to Patterns.
 			// See the implementation of the back button in patterns-list.
-			backPath: '/library',
+			backPath: '/patterns',
 		}
 	);
 
@@ -35,7 +35,7 @@ export default function CategoryItem( {
 			{ ...linkInfo }
 			icon={ icon }
 			suffix={ <span>{ count }</span> }
-			className={ isActive ? 'is-active-category' : undefined }
+			aria-current={ isActive ? 'true' : undefined }
 		>
 			{ label }
 		</SidebarNavigationItem>

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

@@ -0,0 +1,194 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	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 { __, sprintf } from '@wordpress/i18n';
+import { getQueryArgs } from '@wordpress/url';
+import { file, starFilled, lockSmall } from '@wordpress/icons';
+
+/**
+ * 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 { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-patterns/utils';
+import { store as editSiteStore } from '../../store';
+import { useLink } from '../routes/link';
+import usePatternCategories from './use-pattern-categories';
+import useMyPatterns from './use-my-patterns';
+import useTemplatePartAreas from './use-template-part-areas';
+
+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', '<' );
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const currentCategory = categoryId || DEFAULT_CATEGORY;
+	const currentType = categoryType || DEFAULT_TYPE;
+
+	const { templatePartAreas, hasTemplateParts, isLoading } =
+		useTemplatePartAreas();
+	const { patternCategories, hasPatterns } = usePatternCategories();
+	const { myPatterns } = useMyPatterns();
+
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
+	const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
+	const footer = ! isMobileViewport ? (
+		<ItemGroup>
+			<SidebarNavigationItem
+				as="a"
+				href="edit.php?post_type=wp_block"
+				withChevron
+			>
+				{ __( 'Manage all of my patterns' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem withChevron { ...templatePartsLink }>
+				{ __( 'Manage all template parts' ) }
+			</SidebarNavigationItem>
+		</ItemGroup>
+	) : undefined;
+
+	return (
+		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
+			title={ __( 'Patterns' ) }
+			description={ __(
+				'Manage what patterns are available when editing the site.'
+			) }
+			actions={ <AddNewPattern /> }
+			footer={ footer }
+			content={
+				<>
+					{ isLoading && __( 'Loading patterns' ) }
+					{ ! isLoading && (
+						<>
+							{ ! hasTemplateParts && ! hasPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+									<Item>
+										{ __(
+											'No template parts or patterns found'
+										) }
+									</Item>
+								</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 && (
+								<TemplatePartGroup
+									areas={ templatePartAreas }
+									currentArea={ currentCategory }
+									currentType={ currentType }
+								/>
+							) }
+						</>
+					) }
+				</>
+			}
+		/>
+	);
+}

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

@@ -0,0 +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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+export default function useMyPatterns() {
+	const myPatternsCount = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+				per_page: -1,
+			} )?.length ?? 0
+	);
+
+	return {
+		myPatterns: {
+			count: myPatternsCount,
+			name: 'my-patterns',
+			label: __( 'My patterns' ),
+		},
+		hasPatterns: myPatternsCount > 0,
+	};
+}

package/src/components/{sidebar-navigation-screen-library → sidebar-navigation-screen-patterns}/use-pattern-categories.js

@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -14,12 +12,11 @@ import useThemePatterns from './use-theme-patterns';
 
 export default function usePatternCategories() {
 	const defaultCategories = useDefaultPatternCategories();
+	defaultCategories.push( {
+		name: 'uncategorized',
+		label: __( 'Uncategorized' ),
+	} );
 	const themePatterns = useThemePatterns();
-	const userPatterns = useSelect( ( select ) =>
-		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
-			per_page: -1,
-		} )
-	);
 
 	const patternCategories = useMemo( () => {
 		const categoryMap = {};
@@ -39,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.
@@ -48,17 +49,8 @@ export default function usePatternCategories() {
 			}
 		} );
 
-		// Add "Your Patterns" category for user patterns if there are any.
-		if ( userPatterns?.length ) {
-			categoriesWithCounts.push( {
-				count: userPatterns.length || 0,
-				name: 'custom-patterns',
-				label: __( 'Custom patterns' ),
-			} );
-		}
-
 		return categoriesWithCounts;
-	}, [ defaultCategories, themePatterns, userPatterns ] );
+	}, [ defaultCategories, themePatterns ] );
 
 	return { patternCategories, hasPatterns: !! patternCategories.length };
 }

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

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+const useTemplatePartsGroupedByArea = ( items ) => {
+	const allItems = items || [];
+
+	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;
+};
+
+export default function useTemplatePartAreas() {
+	const { records: templateParts, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{ per_page: -1 }
+	);
+
+	return {
+		hasTemplateParts: templateParts ? !! templateParts.length : false,
+		isLoading,
+		templatePartAreas: useTemplatePartsGroupedByArea( templateParts ),
+	};
+}

package/src/components/{sidebar-navigation-screen-library → sidebar-navigation-screen-patterns}/use-theme-patterns.js

@@ -11,7 +11,7 @@ import { useMemo } from '@wordpress/element';
 import {
 	CORE_PATTERN_SOURCES,
 	filterOutDuplicatesByName,
-} from '../page-library/utils';
+} from '../page-patterns/utils';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -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 ]
 	);
 

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

@@ -3,27 +3,27 @@
 	align-items: center;
 	justify-content: space-between;
 	margin-top: $grid-unit-30;
+}
 
-	&-author {
-		display: inline-flex;
-		align-items: center;
-
-		img {
-			border-radius: $grid-unit-15;
-		}
+.edit-site-sidebar-navigation-screen-template__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
 
-		svg {
-			fill: $gray-600;
-		}
+	img {
+		border-radius: $grid-unit-15;
+	}
 
-		&-icon {
-			width: 24px;
-			height: 24px;
-			margin-right: $grid-unit-10;
-		}
+	svg {
+		fill: $gray-600;
 	}
 }
 
+.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}
+
 .edit-site-sidebar-navigation-screen-template__template-area-button {
 	color: $white;
 	display: flex;