@wordpress/edit-site 4.8.0 → 4.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.8.0",
+	"version": "4.9.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.11.0",
-		"@wordpress/api-fetch": "^6.8.0",
-		"@wordpress/block-editor": "^9.3.0",
-		"@wordpress/block-library": "^7.8.0",
-		"@wordpress/blocks": "^11.10.0",
-		"@wordpress/components": "^19.13.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/core-data": "^4.9.0",
-		"@wordpress/data": "^6.11.0",
-		"@wordpress/deprecated": "^3.11.0",
-		"@wordpress/editor": "^12.10.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/html-entities": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0",
-		"@wordpress/interface": "^4.10.0",
-		"@wordpress/keyboard-shortcuts": "^3.9.0",
-		"@wordpress/keycodes": "^3.11.0",
-		"@wordpress/media-utils": "^4.2.0",
-		"@wordpress/notices": "^3.11.0",
-		"@wordpress/plugins": "^4.9.0",
-		"@wordpress/preferences": "^2.3.0",
-		"@wordpress/reusable-blocks": "^3.9.0",
-		"@wordpress/style-engine": "^0.10.0",
-		"@wordpress/url": "^3.12.0",
-		"@wordpress/viewport": "^4.9.0",
+		"@wordpress/a11y": "^3.12.0",
+		"@wordpress/api-fetch": "^6.9.0",
+		"@wordpress/block-editor": "^9.4.0",
+		"@wordpress/block-library": "^7.9.0",
+		"@wordpress/blocks": "^11.11.0",
+		"@wordpress/components": "^19.14.0",
+		"@wordpress/compose": "^5.10.0",
+		"@wordpress/core-data": "^4.10.0",
+		"@wordpress/data": "^6.12.0",
+		"@wordpress/deprecated": "^3.12.0",
+		"@wordpress/editor": "^12.11.0",
+		"@wordpress/element": "^4.10.0",
+		"@wordpress/hooks": "^3.12.0",
+		"@wordpress/html-entities": "^3.12.0",
+		"@wordpress/i18n": "^4.12.0",
+		"@wordpress/icons": "^9.3.0",
+		"@wordpress/interface": "^4.11.0",
+		"@wordpress/keyboard-shortcuts": "^3.10.0",
+		"@wordpress/keycodes": "^3.12.0",
+		"@wordpress/media-utils": "^4.3.0",
+		"@wordpress/notices": "^3.12.0",
+		"@wordpress/plugins": "^4.10.0",
+		"@wordpress/preferences": "^2.4.0",
+		"@wordpress/reusable-blocks": "^3.10.0",
+		"@wordpress/style-engine": "^0.11.0",
+		"@wordpress/url": "^3.13.0",
+		"@wordpress/viewport": "^4.10.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

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

@@ -0,0 +1,231 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	Modal,
+	SearchControl,
+	TextHighlight,
+	__experimentalText as Text,
+	__experimentalHeading as Heading,
+	__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 = [];
+const BASE_QUERY = {
+	order: 'asc',
+	_fields: 'id,title,slug,link',
+	context: 'view',
+};
+
+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={ () => {
+				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 and %2$s is the name of the post, e.g. "Post: Hello, WordPress"
+					__( '%1$s: %2$s' ),
+					entityForSuggestions.labels.singular_name,
+					suggestion.name
+				);
+				onSelect( {
+					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: `single-${ entityForSuggestions.slug }-${ suggestion.slug }`,
+				} );
+			} }
+		>
+			<span className={ `${ baseCssClass }__title` }>
+				<TextHighlight text={ suggestion.name } highlight={ search } />
+			</span>
+			{ suggestion.link && (
+				<span className={ `${ baseCssClass }__info` }>
+					{ suggestion.link }
+				</span>
+			) }
+		</CompositeItem>
+	);
+}
+
+function SuggestionList( { entityForSuggestions, onSelect } ) {
+	const composite = useCompositeState( { orientation: 'vertical' } );
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	// We need to track two values, the search input's value(searchInputValue)
+	// and the one we want to debounce(search) and make REST API requests.
+	const [ searchInputValue, setSearchInputValue ] = useState( '' );
+	const [ search, setSearch ] = useState( '' );
+	const debouncedSearch = useDebounce( setSearch, 250 );
+	const query = {
+		...BASE_QUERY,
+		search,
+		orderby: search ? 'relevance' : 'modified',
+		exclude: entityForSuggestions.postsToExclude,
+		per_page: search ? 20 : 10,
+	};
+	const { records: searchResults, hasResolved: searchHasResolved } =
+		useEntityRecords(
+			entityForSuggestions.type,
+			entityForSuggestions.slug,
+			query
+		);
+	useEffect( () => {
+		if ( search !== searchInputValue ) {
+			debouncedSearch( searchInputValue );
+		}
+	}, [ search, searchInputValue ] );
+	const entitiesInfo = useMemo( () => {
+		if ( ! searchResults?.length ) return EMPTY_ARRAY;
+		return mapToIHasNameAndId( searchResults, 'title.rendered' );
+	}, [ searchResults ] );
+	// Update suggestions only when the query has resolved.
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		setSuggestions( entitiesInfo );
+	}, [ entitiesInfo, searchHasResolved ] );
+	return (
+		<>
+			<SearchControl
+				onChange={ setSearchInputValue }
+				value={ searchInputValue }
+				label={ entityForSuggestions.labels.search_items }
+				placeholder={ entityForSuggestions.labels.search_items }
+			/>
+			{ !! suggestions?.length && (
+				<Composite
+					{ ...composite }
+					role="listbox"
+					className="edit-site-custom-template-modal__suggestions_list"
+				>
+					{ suggestions.map( ( suggestion ) => (
+						<SuggestionListItem
+							key={ suggestion.slug }
+							suggestion={ suggestion }
+							search={ search }
+							onSelect={ onSelect }
+							entityForSuggestions={ entityForSuggestions }
+							composite={ composite }
+						/>
+					) ) }
+				</Composite>
+			) }
+			{ search && ! suggestions?.length && (
+				<p className="edit-site-custom-template-modal__no-results">
+					{ entityForSuggestions.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
+							onClick={ () => {
+								const { slug, title, description } =
+									entityForSuggestions.template;
+								onSelect( { slug, title, description } );
+							} }
+						>
+							<Heading level={ 5 }>
+								{ entityForSuggestions.labels.all_items }
+							</Heading>
+							<Text as="span">
+								{
+									// translators: The user is given the choice to set up a template for all items of a post type, or just a specific one.
+									__( 'For all items' )
+								}
+							</Text>
+						</FlexItem>
+						<FlexItem
+							isBlock
+							onClick={ () => {
+								setShowSearchEntities( true );
+							} }
+						>
+							<Heading level={ 5 }>
+								{ entityForSuggestions.labels.singular_name }
+							</Heading>
+							<Text as="span">
+								{
+									// translators: The user is given the choice to set up a template for all items of a post type, 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,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, includes, map } from 'lodash';
+import { filter, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -12,6 +12,7 @@ import {
 	MenuItem,
 	NavigableMenu,
 } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
@@ -30,12 +31,14 @@ import {
 	search,
 	tag,
 } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
+import AddCustomTemplateModal from './add-custom-template-modal';
+import { usePostTypes, usePostTypesEntitiesInfo } from './utils';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
@@ -72,9 +75,13 @@ const TEMPLATE_ICONS = {
 
 export default function NewTemplate( { postType } ) {
 	const history = useHistory();
-	const { templates, defaultTemplateTypes } = useSelect(
+	const postTypes = usePostTypes();
+	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
+		useState( false );
+	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
+	const { existingTemplates, defaultTemplateTypes } = useSelect(
 		( select ) => ( {
-			templates: select( coreStore ).getEntityRecords(
+			existingTemplates: select( coreStore ).getEntityRecords(
 				'postType',
 				'wp_template',
 				{ per_page: -1 }
@@ -84,6 +91,7 @@ export default function NewTemplate( { postType } ) {
 		} ),
 		[]
 	);
+	const postTypesEntitiesInfo = usePostTypesEntitiesInfo( existingTemplates );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setTemplate } = useDispatch( editSiteStore );
@@ -91,7 +99,6 @@ export default function NewTemplate( { postType } ) {
 	async function createTemplate( template ) {
 		try {
 			const { title, description, slug } = template;
-
 			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
@@ -128,9 +135,9 @@ export default function NewTemplate( { postType } ) {
 			} );
 		}
 	}
-
-	const existingTemplateSlugs = map( templates, 'slug' );
-
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
 	const missingTemplates = filter(
 		defaultTemplateTypes,
 		( template ) =>
@@ -138,54 +145,124 @@ export default function NewTemplate( { postType } ) {
 			! includes( existingTemplateSlugs, template.slug )
 	);
 
-	if ( ! missingTemplates.length ) {
+	const extraTemplates = ( postTypes || [] ).reduce(
+		( accumulator, _postType ) => {
+			const { slug, labels, icon } = _postType;
+			const hasGeneralTemplate = existingTemplateSlugs?.includes(
+				`single-${ slug }`
+			);
+			const hasEntities = postTypesEntitiesInfo?.[ slug ]?.hasEntities;
+			const menuItem = {
+				slug: `single-${ slug }`,
+				title: sprintf(
+					// translators: %s: Name of the post type e.g: "Post".
+					__( 'Single item: %s' ),
+					labels.singular_name
+				),
+				description: sprintf(
+					// translators: %s: Name of the post type e.g: "Post".
+					__( 'Displays a single item: %s.' ),
+					labels.singular_name
+				),
+				// `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: icon?.startsWith( 'dashicons-' )
+					? icon.slice( 10 )
+					: null,
+			};
+			// We have a different template creation flow only if they have entities.
+			if ( hasEntities ) {
+				menuItem.onClick = ( template ) => {
+					setShowCustomTemplateModal( true );
+					setEntityForSuggestions( {
+						type: 'postType',
+						slug,
+						labels,
+						hasGeneralTemplate,
+						template,
+						postsToExclude:
+							postTypesEntitiesInfo[ slug ].existingPosts,
+					} );
+				};
+			}
+			// We don't need to add the menu item if there are no
+			// entities and the general template exists.
+			if ( ! hasGeneralTemplate || hasEntities ) {
+				accumulator.push( menuItem );
+			}
+			return accumulator;
+		},
+		[]
+	);
+	if ( ! missingTemplates.length && ! extraTemplates.length ) {
 		return null;
 	}
-
 	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
-	missingTemplates.sort( ( template1, template2 ) => {
+	missingTemplates?.sort( ( template1, template2 ) => {
 		return (
 			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
 			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
 		);
 	} );
-
+	// Append all extra templates at the end of the list for now.
+	missingTemplates.push( ...extraTemplates );
 	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
+				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>
+					</NavigableMenu>
+				) }
+			</DropdownMenu>
+			{ showCustomTemplateModal && (
+				<AddCustomTemplateModal
+					onClose={ () => setShowCustomTemplateModal( false ) }
+					onSelect={ createTemplate }
+					entityForSuggestions={ entityForSuggestions }
+				/>
 			) }
-		</DropdownMenu>
+		</>
 	);
 }

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

@@ -9,3 +9,119 @@
 		}
 	}
 }
+
+.edit-site-custom-template-modal {
+	&__contents {
+		> div {
+			text-align: center;
+			cursor: pointer;
+			padding: $grid-unit-30;
+			border: 1px solid $gray-300;
+			border-radius: $radius-block-ui;
+			width: 256px;
+			display: flex;
+			flex-direction: column;
+			gap: $grid-unit;
+			align-items: center;
+			justify-content: center;
+
+			span {
+				color: $gray-700;
+			}
+
+			&:hover {
+				border-color: var(--wp-admin-theme-color);
+
+				h5 {
+					color: var(--wp-admin-theme-color);
+				}
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) 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;
+}