[Full Site Editing]: Re-architect templates addition

WordPress · Jul 15, 2022 · 762c187 · 762c187
1 parent e8d2de7
commit 762c187
Show file tree

Hide file tree

Showing 3 changed files with 438 additions and 327 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
@@ -26,34 +26,6 @@ import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
 
-function selectSuggestion( suggestion, onSelect, entityForSuggestions ) {
-	const {
-		labels,
-		slug,
-		config: { templateSlug, templatePrefix },
-	} = entityForSuggestions;
-	const title = sprintf(
-		// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the singular name of a post type or taxonomy and %2$s is the name of the post or term, e.g. "Post: Hello, WordPress", "Category: shoes"
-		__( '%1$s: %2$s' ),
-		labels.singular_name,
-		suggestion.name
-	);
-	let newTemplateSlug = `${ templateSlug || slug }-${ suggestion.slug }`;
-	if ( templatePrefix ) {
-		newTemplateSlug = templatePrefix + newTemplateSlug;
-	}
-	const newTemplate = {
-		title,
-		description: sprintf(
-			// translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Post: Hello, WordPress"
-			__( 'Template for %1$s' ),
-			title
-		),
-		slug: newTemplateSlug,
-	};
-	onSelect( newTemplate );
-}
-
 function SuggestionListItem( {
 	suggestion,
 	search,
@@ -70,7 +42,11 @@ function SuggestionListItem( {
 			{ ...composite }
 			className={ baseCssClass }
 			onClick={ () =>
-				selectSuggestion( suggestion, onSelect, entityForSuggestions )
+				onSelect(
+					entityForSuggestions.config.getSpecificTemplate(
+						suggestion
+					)
+				)
 			}
 		>
 			<span className={ `${ baseCssClass }__title` }>
@@ -98,18 +74,16 @@ function useDebouncedInput() {
 }
 
 function useSearchSuggestions( entityForSuggestions, search ) {
-	const { config, postsToExclude } = entityForSuggestions;
+	const { config } = entityForSuggestions;
 	const query = useMemo(
 		() => ( {
 			order: 'asc',
-			_fields: 'id,name,title,slug,link',
 			context: 'view',
 			search,
-			orderBy: config.getOrderBy( { search } ),
-			exclude: postsToExclude,
 			per_page: search ? 20 : 10,
+			...config.queryArgs( search ),
 		} ),
-		[ search, config, postsToExclude ]
+		[ search, config ]
 	);
 	const { records: searchResults, hasResolved: searchHasResolved } =
 		useEntityRecords(

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
@@ -36,13 +36,8 @@ import AddCustomTemplateModal from './add-custom-template-modal';
 import {
 	useExistingTemplates,
 	useDefaultTemplateTypes,
-	entitiesConfig,
-	usePostTypes,
-	usePostTypePage,
-	useTaxonomies,
-	useTaxonomyCategory,
-	useTaxonomyTag,
-	useExtraTemplates,
+	useTaxonomiesMenuItems,
+	usePostTypeMenuItems,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
@@ -225,19 +220,11 @@ function useMissingTemplates(
 	setEntityForSuggestions,
 	setShowCustomTemplateModal
 ) {
-	const postTypes = usePostTypes();
-	const pagePostType = usePostTypePage();
-	const taxonomies = useTaxonomies();
-	const categoryTaxonomy = useTaxonomyCategory();
-	const tagTaxonomy = useTaxonomyTag();
-
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
-
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
 		( { slug } ) => slug
 	);
-
 	const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
 		( template ) =>
 			DEFAULT_TEMPLATE_SLUGS.includes( template.slug ) &&
@@ -247,70 +234,50 @@ function useMissingTemplates(
 		setShowCustomTemplateModal( true );
 		setEntityForSuggestions( _entityForSuggestions );
 	};
-	// TODO: find better names for these variables. `useExtraTemplates` returns an array of items.
-	const categoryMenuItem = useExtraTemplates(
-		categoryTaxonomy,
-		entitiesConfig.category,
-		onClickMenuItem
-	);
-	const tagMenuItem = useExtraTemplates(
-		tagTaxonomy,
-		entitiesConfig.tag,
-		onClickMenuItem
-	);
-	const pageMenuItem = useExtraTemplates(
-		pagePostType,
-		entitiesConfig.page,
-		onClickMenuItem
-	);
 	// We need to replace existing default template types with
 	// the create specific template functionality. The original
 	// info (title, description, etc.) is preserved in the
-	// `useExtraTemplates` hook.
+	// used hooks.
 	const enhancedMissingDefaultTemplateTypes = [ ...missingDefaultTemplates ];
-	[ categoryMenuItem, tagMenuItem, pageMenuItem ].forEach( ( menuItem ) => {
-		if ( ! menuItem?.length ) {
-			return;
-		}
-		const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
-			( template ) => template.slug === menuItem[ 0 ].slug
-		);
-		// Some default template types might have been filtered above from
-		// `missingDefaultTemplates` because they only check for the general
-		// template. So here we either replace or append the item, augmented
-		// with the check if it has available specific item to create a
-		// template for.
-		if ( matchIndex > -1 ) {
-			enhancedMissingDefaultTemplateTypes.splice(
-				matchIndex,
-				1,
-				menuItem[ 0 ]
+	const { defaultTaxonomiesMenuItems, taxonomiesMenuItems } =
+		useTaxonomiesMenuItems( onClickMenuItem );
+	const { defaultPostTypesMenuItems, postTypesMenuItems } =
+		usePostTypeMenuItems( onClickMenuItem );
+	[ ...defaultTaxonomiesMenuItems, ...defaultPostTypesMenuItems ].forEach(
+		( menuItem ) => {
+			if ( ! menuItem ) {
+				return;
+			}
+			const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
+				( template ) => template.slug === menuItem.slug
 			);
-		} else {
-			enhancedMissingDefaultTemplateTypes.push( menuItem[ 0 ] );
+			// Some default template types might have been filtered above from
+			// `missingDefaultTemplates` because they only check for the general
+			// template. So here we either replace or append the item, augmented
+			// with the check if it has available specific item to create a
+			// template for.
+			if ( matchIndex > -1 ) {
+				enhancedMissingDefaultTemplateTypes.splice(
+					matchIndex,
+					1,
+					menuItem
+				);
+			} else {
+				enhancedMissingDefaultTemplateTypes.push( menuItem );
+			}
 		}
-	} );
+	);
 	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
 	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
 		return (
 			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
 			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
 		);
 	} );
-	const extraPostTypeTemplates = useExtraTemplates(
-		postTypes,
-		entitiesConfig.postType,
-		onClickMenuItem
-	);
-	const extraTaxonomyTemplates = useExtraTemplates(
-		taxonomies,
-		entitiesConfig.taxonomy,
-		onClickMenuItem
-	);
 	const missingTemplates = [
 		...enhancedMissingDefaultTemplateTypes,
-		...extraPostTypeTemplates,
-		...extraTaxonomyTemplates,
+		...postTypesMenuItems,
+		...taxonomiesMenuItems,
 	];
 	return missingTemplates;
 }