@wordpress/edit-site 4.10.0 → 4.11.0

package/src/components/add-new-template/add-custom-template-modal.js

@@ -11,7 +11,6 @@ import {
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
-	__experimentalHeading as Heading,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
@@ -26,34 +25,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 +41,11 @@ function SuggestionListItem( {
 			{ ...composite }
 			className={ baseCssClass }
 			onClick={ () =>
-				selectSuggestion( suggestion, onSelect, entityForSuggestions )
+				onSelect(
+					entityForSuggestions.config.getSpecificTemplate(
+						suggestion
+					)
+				)
 			}
 		>
 			<span className={ `${ baseCssClass }__title` }>
@@ -98,18 +73,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(
@@ -145,19 +118,26 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 		debouncedSearch
 	);
 	const { labels } = entityForSuggestions;
+	const [ showSearchControl, setShowSearchControl ] = useState( false );
+	if ( ! showSearchControl && suggestions?.length > 9 ) {
+		setShowSearchControl( true );
+	}
 	return (
 		<>
-			<SearchControl
-				onChange={ setSearch }
-				value={ search }
-				label={ labels.search_items }
-				placeholder={ labels.search_items }
-			/>
+			{ showSearchControl && (
+				<SearchControl
+					onChange={ setSearch }
+					value={ search }
+					label={ labels.search_items }
+					placeholder={ labels.search_items }
+				/>
+			) }
 			{ !! suggestions?.length && (
 				<Composite
 					{ ...composite }
 					role="listbox"
 					className="edit-site-custom-template-modal__suggestions_list"
+					aria-label={ __( 'Suggestions list' ) }
 				>
 					{ suggestions.map( ( suggestion ) => (
 						<SuggestionListItem
@@ -210,15 +190,16 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 					>
 						<FlexItem
 							isBlock
+							as={ Button }
 							onClick={ () => {
 								const { slug, title, description } =
 									entityForSuggestions.template;
 								onSelect( { slug, title, description } );
 							} }
 						>
-							<Heading level={ 5 }>
+							<Text as="span" weight={ 600 }>
 								{ entityForSuggestions.labels.all_items }
-							</Heading>
+							</Text>
 							<Text as="span">
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
@@ -228,13 +209,14 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 						</FlexItem>
 						<FlexItem
 							isBlock
+							as={ Button }
 							onClick={ () => {
 								setShowSearchEntities( true );
 							} }
 						>
-							<Heading level={ 5 }>
+							<Text as="span" weight={ 600 }>
 								{ entityForSuggestions.labels.singular_name }
-							</Heading>
+							</Text>
 							<Text as="span">
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.

package/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,49 +234,35 @@ 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[ matchIndex ] = menuItem;
+			} else {
+				enhancedMissingDefaultTemplateTypes.push( menuItem );
+			}
 		}
-	} );
+	);
 	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
 	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
 		return (
@@ -297,20 +270,10 @@ function useMissingTemplates(
 			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;
 }

package/src/components/add-new-template/style.scss

@@ -12,33 +12,45 @@
 
 .edit-site-custom-template-modal {
 	&__contents {
-		> div {
-			text-align: center;
-			cursor: pointer;
+		> .components-button {
 			padding: $grid-unit-30;
-			border: 1px solid $gray-300;
+			box-shadow: inset 0 0 0 $border-width $gray-600;
 			border-radius: $radius-block-ui;
 			width: 256px;
+			height: auto;
 			display: flex;
 			flex-direction: column;
 			gap: $grid-unit;
-			align-items: center;
-			justify-content: center;
+
+			// Show the boundary of the button, in High Contrast Mode.
+			outline: 1px solid transparent;
+
+			span:first-child {
+				color: $gray-900;
+			}
 
 			span {
 				color: $gray-700;
 			}
 
 			&:hover {
-				border-color: var(--wp-admin-theme-color);
+				color: var(--wp-admin-theme-color-darker-10);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
 
-				h5 {
+				span:first-child {
 					color: var(--wp-admin-theme-color);
 				}
 			}
 
 			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 3px solid transparent;
+
+				span:first-child {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 		}
 	}