@wordpress/edit-site 4.8.0 → 4.11.0

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

@@ -0,0 +1,247 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	Modal,
+	SearchControl,
+	TextHighlight,
+	__experimentalText as Text,
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+	__unstableCompositeItem as CompositeItem,
+} from '@wordpress/components';
+import { useDebounce } from '@wordpress/compose';
+import { useEntityRecords } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { mapToIHasNameAndId } from './utils';
+
+const EMPTY_ARRAY = [];
+
+function SuggestionListItem( {
+	suggestion,
+	search,
+	onSelect,
+	entityForSuggestions,
+	composite,
+} ) {
+	const baseCssClass =
+		'edit-site-custom-template-modal__suggestions_list__list-item';
+	return (
+		<CompositeItem
+			role="option"
+			as={ Button }
+			{ ...composite }
+			className={ baseCssClass }
+			onClick={ () =>
+				onSelect(
+					entityForSuggestions.config.getSpecificTemplate(
+						suggestion
+					)
+				)
+			}
+		>
+			<span className={ `${ baseCssClass }__title` }>
+				<TextHighlight text={ suggestion.name } highlight={ search } />
+			</span>
+			{ suggestion.link && (
+				<span className={ `${ baseCssClass }__info` }>
+					{ suggestion.link }
+				</span>
+			) }
+		</CompositeItem>
+	);
+}
+
+function useDebouncedInput() {
+	const [ input, setInput ] = useState( '' );
+	const [ debounced, setter ] = useState( '' );
+	const setDebounced = useDebounce( setter, 250 );
+	useEffect( () => {
+		if ( debounced !== input ) {
+			setDebounced( input );
+		}
+	}, [ debounced, input ] );
+	return [ input, setInput, debounced ];
+}
+
+function useSearchSuggestions( entityForSuggestions, search ) {
+	const { config } = entityForSuggestions;
+	const query = useMemo(
+		() => ( {
+			order: 'asc',
+			context: 'view',
+			search,
+			per_page: search ? 20 : 10,
+			...config.queryArgs( search ),
+		} ),
+		[ search, config ]
+	);
+	const { records: searchResults, hasResolved: searchHasResolved } =
+		useEntityRecords(
+			entityForSuggestions.type,
+			entityForSuggestions.slug,
+			query
+		);
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		let newSuggestions = EMPTY_ARRAY;
+		if ( searchResults?.length ) {
+			newSuggestions = searchResults;
+			if ( config.recordNamePath ) {
+				newSuggestions = mapToIHasNameAndId(
+					newSuggestions,
+					config.recordNamePath
+				);
+			}
+		}
+		// Update suggestions only when the query has resolved, so as to keep
+		// the previous results in the UI.
+		setSuggestions( newSuggestions );
+	}, [ searchResults, searchHasResolved ] );
+	return suggestions;
+}
+
+function SuggestionList( { entityForSuggestions, onSelect } ) {
+	const composite = useCompositeState( { orientation: 'vertical' } );
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+	const suggestions = useSearchSuggestions(
+		entityForSuggestions,
+		debouncedSearch
+	);
+	const { labels } = entityForSuggestions;
+	const [ showSearchControl, setShowSearchControl ] = useState( false );
+	if ( ! showSearchControl && suggestions?.length > 9 ) {
+		setShowSearchControl( true );
+	}
+	return (
+		<>
+			{ 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
+							key={ suggestion.slug }
+							suggestion={ suggestion }
+							search={ debouncedSearch }
+							onSelect={ onSelect }
+							entityForSuggestions={ entityForSuggestions }
+							composite={ composite }
+						/>
+					) ) }
+				</Composite>
+			) }
+			{ debouncedSearch && ! suggestions?.length && (
+				<p className="edit-site-custom-template-modal__no-results">
+					{ labels.not_found }
+				</p>
+			) }
+		</>
+	);
+}
+
+function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
+	const [ showSearchEntities, setShowSearchEntities ] = useState(
+		entityForSuggestions.hasGeneralTemplate
+	);
+	const baseCssClass = 'edit-site-custom-template-modal';
+	return (
+		<Modal
+			title={ sprintf(
+				// translators: %s: Name of the post type e.g: "Post".
+				__( 'Add template: %s' ),
+				entityForSuggestions.labels.singular_name
+			) }
+			className={ baseCssClass }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onClose }
+		>
+			{ ! showSearchEntities && (
+				<>
+					<p>
+						{ __(
+							'Select whether to create a single template for all items or a specific one.'
+						) }
+					</p>
+					<Flex
+						className={ `${ baseCssClass }__contents` }
+						gap="4"
+						align="initial"
+					>
+						<FlexItem
+							isBlock
+							as={ Button }
+							onClick={ () => {
+								const { slug, title, description } =
+									entityForSuggestions.template;
+								onSelect( { slug, title, description } );
+							} }
+						>
+							<Text as="span" weight={ 600 }>
+								{ entityForSuggestions.labels.all_items }
+							</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.
+									__( 'For all items' )
+								}
+							</Text>
+						</FlexItem>
+						<FlexItem
+							isBlock
+							as={ Button }
+							onClick={ () => {
+								setShowSearchEntities( true );
+							} }
+						>
+							<Text as="span" weight={ 600 }>
+								{ entityForSuggestions.labels.singular_name }
+							</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.
+									__( 'For a specific item' )
+								}
+							</Text>
+						</FlexItem>
+					</Flex>
+				</>
+			) }
+			{ showSearchEntities && (
+				<>
+					<p>
+						{ __(
+							'This template will be used only for the specific item chosen.'
+						) }
+					</p>
+					<SuggestionList
+						entityForSuggestions={ entityForSuggestions }
+						onSelect={ onSelect }
+					/>
+				</>
+			) }
+		</Modal>
+	);
+}
+
+export default AddCustomTemplateModal;

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter, includes, map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -12,9 +7,9 @@ import {
 	MenuItem,
 	NavigableMenu,
 } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import {
 	archive,
 	blockMeta,
@@ -29,6 +24,7 @@ import {
 	postDate,
 	search,
 	tag,
+	layout as customGenericTemplateIcon,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -36,6 +32,14 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
+import AddCustomTemplateModal from './add-custom-template-modal';
+import {
+	useExistingTemplates,
+	useDefaultTemplateTypes,
+	useTaxonomiesMenuItems,
+	usePostTypeMenuItems,
+} from './utils';
+import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
@@ -71,27 +75,22 @@ const TEMPLATE_ICONS = {
 };
 
 export default function NewTemplate( { postType } ) {
+	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
+		useState( false );
+	const [
+		showCustomGenericTemplateModal,
+		setShowCustomGenericTemplateModal,
+	] = useState( false );
+	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
+
 	const history = useHistory();
-	const { templates, defaultTemplateTypes } = useSelect(
-		( select ) => ( {
-			templates: select( coreStore ).getEntityRecords(
-				'postType',
-				'wp_template',
-				{ per_page: -1 }
-			),
-			defaultTemplateTypes:
-				select( editorStore ).__experimentalGetDefaultTemplateTypes(),
-		} ),
-		[]
-	);
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setTemplate } = useDispatch( editSiteStore );
 
-	async function createTemplate( template ) {
+	async function createTemplate( template, isWPSuggestion = true ) {
 		try {
 			const { title, description, slug } = template;
-
 			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
@@ -102,7 +101,7 @@ export default function NewTemplate( { postType } ) {
 					status: 'publish',
 					title,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
-					is_wp_suggestion: true,
+					is_wp_suggestion: isWPSuggestion,
 				},
 				{ throwOnError: true }
 			);
@@ -129,63 +128,152 @@ export default function NewTemplate( { postType } ) {
 		}
 	}
 
-	const existingTemplateSlugs = map( templates, 'slug' );
-
-	const missingTemplates = filter(
-		defaultTemplateTypes,
-		( template ) =>
-			includes( DEFAULT_TEMPLATE_SLUGS, template.slug ) &&
-			! includes( existingTemplateSlugs, template.slug )
+	const missingTemplates = useMissingTemplates(
+		setEntityForSuggestions,
+		setShowCustomTemplateModal
 	);
-
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
+	return (
+		<>
+			<DropdownMenu
+				className="edit-site-new-template-dropdown"
+				icon={ null }
+				text={ postType.labels.add_new }
+				label={ postType.labels.add_new_item }
+				popoverProps={ {
+					noArrow: false,
+				} }
+				toggleProps={ {
+					variant: 'primary',
+				} }
+			>
+				{ () => (
+					<NavigableMenu className="edit-site-new-template-dropdown__popover">
+						<MenuGroup label={ postType.labels.add_new_item }>
+							{ missingTemplates.map( ( template ) => {
+								const {
+									title,
+									description,
+									slug,
+									onClick,
+									icon,
+								} = template;
+								return (
+									<MenuItem
+										icon={
+											icon ||
+											TEMPLATE_ICONS[ slug ] ||
+											post
+										}
+										iconPosition="left"
+										info={ description }
+										key={ slug }
+										onClick={ () =>
+											onClick
+												? onClick( template )
+												: createTemplate( template )
+										}
+									>
+										{ title }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								icon={ customGenericTemplateIcon }
+								iconPosition="left"
+								info={ __(
+									'Custom templates can be applied to any post or page.'
+								) }
+								key="custom-template"
+								onClick={ () =>
+									setShowCustomGenericTemplateModal( true )
+								}
+							>
+								{ __( 'Custom template' ) }
+							</MenuItem>
+						</MenuGroup>
+					</NavigableMenu>
+				) }
+			</DropdownMenu>
+			{ showCustomTemplateModal && (
+				<AddCustomTemplateModal
+					onClose={ () => setShowCustomTemplateModal( false ) }
+					onSelect={ createTemplate }
+					entityForSuggestions={ entityForSuggestions }
+				/>
+			) }
+			{ showCustomGenericTemplateModal && (
+				<AddCustomGenericTemplateModal
+					onClose={ () => setShowCustomGenericTemplateModal( false ) }
+					createTemplate={ createTemplate }
+				/>
+			) }
+		</>
+	);
+}
 
+function useMissingTemplates(
+	setEntityForSuggestions,
+	setShowCustomTemplateModal
+) {
+	const existingTemplates = useExistingTemplates();
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
+	const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
+		( template ) =>
+			DEFAULT_TEMPLATE_SLUGS.includes( template.slug ) &&
+			! existingTemplateSlugs.includes( template.slug )
+	);
+	const onClickMenuItem = ( _entityForSuggestions ) => {
+		setShowCustomTemplateModal( true );
+		setEntityForSuggestions( _entityForSuggestions );
+	};
+	// We need to replace existing default template types with
+	// the create specific template functionality. The original
+	// info (title, description, etc.) is preserved in the
+	// used hooks.
+	const enhancedMissingDefaultTemplateTypes = [ ...missingDefaultTemplates ];
+	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
+			);
+			// 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.
-	missingTemplates.sort( ( template1, template2 ) => {
+	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
 		return (
 			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
 			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
 		);
 	} );
-
-	return (
-		<DropdownMenu
-			className="edit-site-new-template-dropdown"
-			icon={ null }
-			text={ postType.labels.add_new }
-			label={ postType.labels.add_new_item }
-			popoverProps={ {
-				noArrow: false,
-			} }
-			toggleProps={ {
-				variant: 'primary',
-			} }
-		>
-			{ () => (
-				<NavigableMenu className="edit-site-new-template-dropdown__popover">
-					<MenuGroup label={ postType.labels.add_new_item }>
-						{ map( missingTemplates, ( template ) => {
-							const { title, description, slug } = template;
-							return (
-								<MenuItem
-									icon={ TEMPLATE_ICONS[ slug ] }
-									iconPosition="left"
-									info={ description }
-									key={ slug }
-									onClick={ () => {
-										createTemplate( template );
-										// We will be navigated way so no need to close the dropdown.
-									} }
-								>
-									{ title }
-								</MenuItem>
-							);
-						} ) }
-					</MenuGroup>
-				</NavigableMenu>
-			) }
-		</DropdownMenu>
-	);
+	const missingTemplates = [
+		...enhancedMissingDefaultTemplateTypes,
+		...postTypesMenuItems,
+		...taxonomiesMenuItems,
+	];
+	return missingTemplates;
 }

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

@@ -9,3 +9,152 @@
 		}
 	}
 }
+
+.edit-site-custom-template-modal {
+	&__contents {
+		> .components-button {
+			padding: $grid-unit-30;
+			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;
+
+			// 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 {
+				color: var(--wp-admin-theme-color-darker-10);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
+
+				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);
+				}
+			}
+		}
+	}
+
+	.components-search-control {
+		input[type="search"].components-search-control__input {
+			background: $white;
+			border: 1px solid $gray-300;
+
+			&:focus {
+				border-color: var(--wp-admin-theme-color);
+				box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	@include break-medium() {
+		width: 456px;
+	}
+}
+
+.edit-site-custom-template-modal__suggestions_list {
+	margin-top: $grid-unit-20;
+
+	@include break-small() {
+		height: 232px;
+		overflow: scroll;
+	}
+
+	&__list-item {
+		display: block;
+		width: 100%;
+		text-align: left;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		height: auto;
+
+		mark {
+			font-weight: 700;
+			background: none;
+		}
+
+		&:hover {
+			background-color: $gray-100;
+
+			mark {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+
+		&:focus {
+			background-color: $gray-100;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+		}
+
+		&__title,
+		&__info {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: block;
+		}
+
+		&__title {
+			font-weight: 500;
+			margin-bottom: 0.2em;
+		}
+
+		&__info {
+			color: $gray-700;
+			font-size: 0.9em;
+			line-height: 1.3;
+			word-break: break-all;
+		}
+	}
+}
+
+.edit-site-custom-template-modal__no-results {
+	border: 1px solid $gray-400;
+	border-radius: $radius-block-ui;
+	padding: $grid-unit-20;
+	margin-bottom: 0;
+	margin-top: $grid-unit-20;
+}
+
+
+.edit-site-custom-generic-template__modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-site-custom-generic-template__modal-actions {
+	margin-top: $grid-unit-15;
+}