Add: Archive-PostType template UI

WordPress · Jul 26, 2022 · 1717871 · 1717871
1 parent cb10bcf
commit 1717871
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 21 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -38,6 +38,7 @@ import {
 	useDefaultTemplateTypes,
 	useTaxonomiesMenuItems,
 	usePostTypeMenuItems,
+	usePostTypeArchiveMenuItems,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
@@ -272,6 +273,7 @@ function useMissingTemplates(
 	} );
 	const missingTemplates = [
 		...enhancedMissingDefaultTemplateTypes,
+		...usePostTypeArchiveMenuItems(),
 		...postTypesMenuItems,
 		...taxonomiesMenuItems,
 	];

diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js
@@ -10,9 +10,9 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { blockMeta, post } from '@wordpress/icons';
+import { blockMeta, post, archive } from '@wordpress/icons';
 
 /**
  * @typedef IHasNameAndId
@@ -86,10 +86,105 @@ const usePublicTaxonomies = () => {
 	}, [ taxonomies ] );
 };
 
+function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
+	const postTypeLabels = useMemo( () =>
+		publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+			const singularName = labels.singular_name.toLowerCase();
+			accumulator[ singularName ] =
+				( accumulator[ singularName ] || 0 ) + 1;
+			return accumulator;
+		}, {} )
+	);
+	return useCallback(
+		( { labels, slug } ) => {
+			const singularName = labels.singular_name.toLowerCase();
+			return postTypeLabels[ singularName ] > 1 && singularName !== slug;
+		},
+		[ postTypeLabels ]
+	);
+}
+
+export function usePostTypeArchiveMenuItems() {
+	const publicPostTypes = usePublicPostTypes();
+	const existingTemplates = useExistingTemplates();
+	const needsUniqueIdentifier =
+		usePostTypeNeedsUniqueIdentifier( publicPostTypes );
+	return useMemo(
+		() =>
+			publicPostTypes
+				?.filter(
+					( { slug } ) =>
+						! existingTemplates.some(
+							( existingTemplate ) =>
+								existingTemplate.slug === 'archive-' + slug
+						)
+				)
+				.map( ( postType ) => {
+					let title;
+					if (
+						usePostTypeArchiveMenuItems.SPECIAL_TITLES[
+							postType.slug
+						]
+					) {
+						title =
+							usePostTypeArchiveMenuItems.SPECIAL_TITLES[
+								postType.slug
+							];
+					} else if ( needsUniqueIdentifier( postType ) ) {
+						title = sprintf(
+							// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
+							__( 'Archive: %1$s (%2$s)' ),
+							postType.labels.singular_name,
+							postType.slug
+						);
+					} else {
+						title = sprintf(
+							// translators: %s: Name of the post type e.g: "Post".
+							__( 'Archive: %s' ),
+							postType.labels.singular_name
+						);
+					}
+					return {
+						slug: 'archive-' + postType.slug,
+						description: usePostTypeArchiveMenuItems
+							.SPECIAL_DESCRIPTIONS[ postType.slug ]
+							? usePostTypeArchiveMenuItems.SPECIAL_DESCRIPTIONS[
+									postType.slug
+							  ]
+							: sprintf(
+									// translators: %s: Name of the post type e.g: "Post".
+									__(
+										'Displays an archive with the latests posts of type: %s.'
+									),
+									postType.labels.singular_name
+							  ),
+						title,
+						// `icon` is the `menu_icon` property of a post type. We
+						// only handle `dashicons` for now, even if the `menu_icon`
+						// also supports urls and svg as values.
+						icon: postType.icon?.startsWith( 'dashicons-' )
+							? postType.icon.slice( 10 )
+							: archive,
+					};
+				} ) || [],
+		[ publicPostTypes, existingTemplates, needsUniqueIdentifier ]
+	);
+}
+usePostTypeArchiveMenuItems.SPECIAL_DESCRIPTIONS = {
+	post: __( 'Displays an archive of the latests posts.' ),
+	page: __( 'Displays an archive of the latests pages.' ),
+};
+usePostTypeArchiveMenuItems.SPECIAL_TITLES = {
+	post: __( 'Posts archive' ),
+	page: __( 'Pages archive' ),
+};
+
 export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 	const publicPostTypes = usePublicPostTypes();
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const needsUniqueIdentifier =
+		usePostTypeNeedsUniqueIdentifier( publicPostTypes );
 	// `page`is a special case in template hierarchy.
 	const templatePrefixes = useMemo(
 		() =>
@@ -103,21 +198,6 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			}, {} ),
 		[ publicPostTypes ]
 	);
-	// We need to keep track of naming conflicts. If a conflict
-	// occurs, we need to add slug.
-	const postTypeLabels = publicPostTypes?.reduce(
-		( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
-			return accumulator;
-		},
-		{}
-	);
-	const needsUniqueIdentifier = ( labels, slug ) => {
-		const singularName = labels.singular_name.toLowerCase();
-		return postTypeLabels[ singularName ] > 1 && singularName !== slug;
-	};
 	const postTypesInfo = useEntitiesInfo( 'postType', templatePrefixes );
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
 		( { slug } ) => slug
@@ -134,10 +214,7 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			);
 			const hasGeneralTemplate =
 				existingTemplateSlugs?.includes( generalTemplateSlug );
-			const _needsUniqueIdentifier = needsUniqueIdentifier(
-				labels,
-				slug
-			);
+			const _needsUniqueIdentifier = needsUniqueIdentifier( postType );
 			let menuItemTitle = sprintf(
 				// translators: %s: Name of the post type e.g: "Post".
 				__( 'Single item: %s' ),