@wordpress/edit-site 5.31.0 → 5.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.31.0",
+	"version": "5.33.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,47 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.54.0",
-		"@wordpress/api-fetch": "^6.51.0",
-		"@wordpress/blob": "^3.54.0",
-		"@wordpress/block-editor": "^12.22.0",
-		"@wordpress/block-library": "^8.31.0",
-		"@wordpress/blocks": "^12.31.0",
-		"@wordpress/commands": "^0.25.0",
-		"@wordpress/components": "^27.2.0",
-		"@wordpress/compose": "^6.31.0",
-		"@wordpress/core-commands": "^0.23.0",
-		"@wordpress/core-data": "^6.31.0",
-		"@wordpress/data": "^9.24.0",
-		"@wordpress/dataviews": "^0.8.0",
-		"@wordpress/date": "^4.54.0",
-		"@wordpress/deprecated": "^3.54.0",
-		"@wordpress/dom": "^3.54.0",
-		"@wordpress/editor": "^13.31.0",
-		"@wordpress/element": "^5.31.0",
-		"@wordpress/escape-html": "^2.54.0",
-		"@wordpress/hooks": "^3.54.0",
-		"@wordpress/html-entities": "^3.54.0",
-		"@wordpress/i18n": "^4.54.0",
-		"@wordpress/icons": "^9.45.0",
-		"@wordpress/interface": "^5.31.0",
-		"@wordpress/keyboard-shortcuts": "^4.31.0",
-		"@wordpress/keycodes": "^3.54.0",
-		"@wordpress/media-utils": "^4.45.0",
-		"@wordpress/notices": "^4.22.0",
-		"@wordpress/patterns": "^1.15.0",
-		"@wordpress/plugins": "^6.22.0",
-		"@wordpress/preferences": "^3.31.0",
-		"@wordpress/primitives": "^3.52.0",
-		"@wordpress/private-apis": "^0.36.0",
-		"@wordpress/reusable-blocks": "^4.31.0",
-		"@wordpress/router": "^0.23.0",
-		"@wordpress/style-engine": "^1.37.0",
-		"@wordpress/url": "^3.55.0",
-		"@wordpress/viewport": "^5.31.0",
-		"@wordpress/widgets": "^3.31.0",
-		"@wordpress/wordcount": "^3.54.0",
+		"@react-spring/web": "^9.4.5",
+		"@wordpress/a11y": "^3.56.0",
+		"@wordpress/api-fetch": "^6.53.0",
+		"@wordpress/blob": "^3.56.0",
+		"@wordpress/block-editor": "^12.24.0",
+		"@wordpress/block-library": "^8.33.0",
+		"@wordpress/blocks": "^12.33.0",
+		"@wordpress/commands": "^0.27.0",
+		"@wordpress/components": "^27.4.0",
+		"@wordpress/compose": "^6.33.0",
+		"@wordpress/core-commands": "^0.25.0",
+		"@wordpress/core-data": "^6.33.0",
+		"@wordpress/data": "^9.26.0",
+		"@wordpress/dataviews": "^1.0.0",
+		"@wordpress/date": "^4.56.0",
+		"@wordpress/deprecated": "^3.56.0",
+		"@wordpress/dom": "^3.56.0",
+		"@wordpress/editor": "^13.33.0",
+		"@wordpress/element": "^5.33.0",
+		"@wordpress/escape-html": "^2.56.0",
+		"@wordpress/hooks": "^3.56.0",
+		"@wordpress/html-entities": "^3.56.0",
+		"@wordpress/i18n": "^4.56.0",
+		"@wordpress/icons": "^9.47.0",
+		"@wordpress/keyboard-shortcuts": "^4.33.0",
+		"@wordpress/keycodes": "^3.56.0",
+		"@wordpress/media-utils": "^4.47.0",
+		"@wordpress/notices": "^4.24.0",
+		"@wordpress/patterns": "^1.17.0",
+		"@wordpress/plugins": "^6.24.0",
+		"@wordpress/preferences": "^3.33.0",
+		"@wordpress/primitives": "^3.54.0",
+		"@wordpress/priority-queue": "^2.56.0",
+		"@wordpress/private-apis": "^0.38.0",
+		"@wordpress/reusable-blocks": "^4.33.0",
+		"@wordpress/router": "^0.25.0",
+		"@wordpress/style-engine": "^1.39.0",
+		"@wordpress/url": "^3.57.0",
+		"@wordpress/viewport": "^5.33.0",
+		"@wordpress/widgets": "^3.33.0",
+		"@wordpress/wordcount": "^3.56.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"client-zip": "^2.4.4",
@@ -75,9 +76,7 @@
 		"fast-deep-equal": "^3.1.3",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
-		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^4.0.2",
-		"remove-accents": "^0.5.0"
+		"react-autosize-textarea": "^7.1.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -86,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
+	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
 }

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

@@ -1,31 +1,431 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import {
+	Button,
+	Modal,
+	__experimentalGrid as Grid,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Flex,
+	Icon,
+} from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState, memo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import {
+	archive,
+	blockMeta,
+	calendar,
+	category,
+	commentAuthorAvatar,
+	edit,
+	home,
+	layout,
+	list,
+	media,
+	notFound,
+	page,
+	pin,
+	verse,
+	search,
+	tag,
+} from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import NewTemplate from './new-template';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
-export default function AddNewTemplate( {
-	templateType = TEMPLATE_POST_TYPE,
-	...props
+/**
+ * Internal dependencies
+ */
+import AddCustomTemplateModalContent from './add-custom-template-modal-content';
+import {
+	useExistingTemplates,
+	useDefaultTemplateTypes,
+	useTaxonomiesMenuItems,
+	usePostTypeMenuItems,
+	useAuthorMenuItem,
+	usePostTypeArchiveMenuItems,
+} from './utils';
+import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+const DEFAULT_TEMPLATE_SLUGS = [
+	'front-page',
+	'home',
+	'single',
+	'page',
+	'index',
+	'archive',
+	'author',
+	'category',
+	'date',
+	'tag',
+	'search',
+	'404',
+];
+
+const TEMPLATE_ICONS = {
+	'front-page': home,
+	home: verse,
+	single: pin,
+	page,
+	archive,
+	search,
+	404: notFound,
+	index: list,
+	category,
+	author: commentAuthorAvatar,
+	taxonomy: blockMeta,
+	date: calendar,
+	tag,
+	attachment: media,
+};
+
+function TemplateListItem( {
+	title,
+	direction,
+	className,
+	description,
+	icon,
+	onClick,
+	children,
 } ) {
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
-		[ templateType ]
+	return (
+		<Button
+			className={ className }
+			onClick={ onClick }
+			label={ description }
+			showTooltip={ !! description }
+		>
+			<Flex
+				as="span"
+				spacing={ 2 }
+				align="center"
+				justify="center"
+				style={ { width: '100%' } }
+				direction={ direction }
+			>
+				<div className="edit-site-add-new-template__template-icon">
+					<Icon icon={ icon } />
+				</div>
+				<VStack
+					className="edit-site-add-new-template__template-name"
+					alignment="center"
+					spacing={ 0 }
+				>
+					<Text
+						weight={ 500 }
+						lineHeight={ 1.53846153846 } // 20px
+					>
+						{ title }
+					</Text>
+					{ children }
+				</VStack>
+			</Flex>
+		</Button>
+	);
+}
+
+const modalContentMap = {
+	templatesList: 1,
+	customTemplate: 2,
+	customGenericTemplate: 3,
+};
+
+function NewTemplateModal( { onClose } ) {
+	const [ modalContent, setModalContent ] = useState(
+		modalContentMap.templatesList
+	);
+	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+	const missingTemplates = useMissingTemplates( setEntityForSuggestions, () =>
+		setModalContent( modalContentMap.customTemplate )
+	);
+	const history = useHistory();
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
+	const TEMPLATE_SHORT_DESCRIPTIONS = {
+		'front-page': homeUrl,
+		date: sprintf(
+			// translators: %s: The homepage url.
+			__( 'E.g. %s' ),
+			homeUrl + '/' + new Date().getFullYear()
+		),
+	};
+
+	async function createTemplate( template, isWPSuggestion = true ) {
+		if ( isSubmitting ) {
+			return;
+		}
+		setIsSubmitting( true );
+		try {
+			const { title, description, slug } = template;
+			const newTemplate = await saveEntityRecord(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					description,
+					// Slugs need to be strings, so this is for template `404`
+					slug: slug.toString(),
+					status: 'publish',
+					title,
+					// This adds a post meta field in template that is part of `is_custom` value calculation.
+					is_wp_suggestion: isWPSuggestion,
+				},
+				{ throwOnError: true }
+			);
+
+			// Navigate to the created template editor.
+			history.push( {
+				postId: newTemplate.id,
+				postType: TEMPLATE_POST_TYPE,
+				canvas: 'edit',
+			} );
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created template e.g: "Category".
+					__( '"%s" successfully created.' ),
+					decodeEntities( newTemplate.title?.rendered || title )
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the template.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsSubmitting( false );
+		}
+	}
+	const onModalClose = () => {
+		onClose();
+		setModalContent( modalContentMap.templatesList );
+	};
+
+	let modalTitle = __( 'Add template' );
+	if ( modalContent === modalContentMap.customTemplate ) {
+		modalTitle = sprintf(
+			// translators: %s: Name of the post type e.g: "Post".
+			__( 'Add template: %s' ),
+			entityForSuggestions.labels.singular_name
+		);
+	} else if ( modalContent === modalContentMap.customGenericTemplate ) {
+		modalTitle = __( 'Create custom template' );
+	}
+
+	return (
+		<Modal
+			title={ modalTitle }
+			className={ classnames( 'edit-site-add-new-template__modal', {
+				'edit-site-add-new-template__modal_template_list':
+					modalContent === modalContentMap.templatesList,
+				'edit-site-custom-template-modal':
+					modalContent === modalContentMap.customTemplate,
+			} ) }
+			onRequestClose={ onModalClose }
+			overlayClassName={
+				modalContent === modalContentMap.customGenericTemplate
+					? 'edit-site-custom-generic-template__modal'
+					: undefined
+			}
+		>
+			{ modalContent === modalContentMap.templatesList && (
+				<Grid
+					columns={ 3 }
+					gap={ 4 }
+					align="flex-start"
+					justify="center"
+					className="edit-site-add-new-template__template-list__contents"
+				>
+					<Flex className="edit-site-add-new-template__template-list__prompt">
+						{ __(
+							'Select what the new template should apply to:'
+						) }
+					</Flex>
+					{ missingTemplates.map( ( template ) => {
+						const { title, slug, onClick } = template;
+						return (
+							<TemplateListItem
+								key={ slug }
+								title={ title }
+								direction="column"
+								className="edit-site-add-new-template__template-button"
+								description={
+									TEMPLATE_SHORT_DESCRIPTIONS[ slug ]
+								}
+								icon={ TEMPLATE_ICONS[ slug ] || layout }
+								onClick={ () =>
+									onClick
+										? onClick( template )
+										: createTemplate( template )
+								}
+							/>
+						);
+					} ) }
+					<TemplateListItem
+						title={ __( 'Custom template' ) }
+						direction="row"
+						className="edit-site-add-new-template__custom-template-button"
+						icon={ edit }
+						onClick={ () =>
+							setModalContent(
+								modalContentMap.customGenericTemplate
+							)
+						}
+					>
+						<Text
+							lineHeight={ 1.53846153846 } // 20px
+						>
+							{ __(
+								'A custom template can be manually applied to any post or page.'
+							) }
+						</Text>
+					</TemplateListItem>
+				</Grid>
+			) }
+			{ modalContent === modalContentMap.customTemplate && (
+				<AddCustomTemplateModalContent
+					onSelect={ createTemplate }
+					entityForSuggestions={ entityForSuggestions }
+				/>
+			) }
+			{ modalContent === modalContentMap.customGenericTemplate && (
+				<AddCustomGenericTemplateModalContent
+					onClose={ onModalClose }
+					createTemplate={ createTemplate }
+				/>
+			) }
+		</Modal>
 	);
+}
+
+function NewTemplate() {
+	const [ showModal, setShowModal ] = useState( false );
+
+	const { postType } = useSelect( ( select ) => {
+		const { getPostType } = select( coreStore );
+
+		return {
+			postType: getPostType( TEMPLATE_POST_TYPE ),
+		};
+	}, [] );
 
 	if ( ! postType ) {
 		return null;
 	}
 
-	if ( templateType === TEMPLATE_POST_TYPE ) {
-		return <NewTemplate { ...props } postType={ postType } />;
-	}
+	return (
+		<>
+			<Button
+				variant="primary"
+				onClick={ () => setShowModal( true ) }
+				label={ postType.labels.add_new_item }
+			>
+				{ postType.labels.add_new_item }
+			</Button>
+			{ showModal && (
+				<NewTemplateModal onClose={ () => setShowModal( false ) } />
+			) }
+		</>
+	);
+}
 
-	return null;
+function useMissingTemplates( setEntityForSuggestions, onClick ) {
+	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 ) => {
+		onClick?.();
+		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 );
+
+	const authorMenuItem = useAuthorMenuItem( onClickMenuItem );
+	[
+		...defaultTaxonomiesMenuItems,
+		...defaultPostTypesMenuItems,
+		authorMenuItem,
+	].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.
+	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
+		return (
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
+		);
+	} );
+	const missingTemplates = [
+		...enhancedMissingDefaultTemplateTypes,
+		...usePostTypeArchiveMenuItems(),
+		...postTypesMenuItems,
+		...taxonomiesMenuItems,
+	];
+	return missingTemplates;
 }
+
+export default memo( NewTemplate );

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

@@ -96,28 +96,6 @@
 	}
 }
 
-.edit-site-template-actions-loading-screen-modal {
-	backdrop-filter: none;
-	background-color: transparent;
-
-	&.is-full-screen {
-		background-color: $white;
-		box-shadow: 0 0 0 transparent;
-		min-width: 100%;
-		min-height: 100%;
-	}
-
-	&__content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
 .edit-site-add-new-template__modal {
 	max-width: $grid-unit-80 * 13;
 	width: calc(100% - #{$grid-unit-80});

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

@@ -14,6 +14,8 @@ import { blockMeta, post, archive } from '@wordpress/icons';
  */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
+const EMPTY_OBJECT = {};
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
@@ -99,13 +101,15 @@ const usePublicTaxonomies = () => {
 };
 
 function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
-	const postTypeLabels = useMemo( () =>
-		publicPostTypes?.reduce( ( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
-			return accumulator;
-		}, {} )
+	const postTypeLabels = useMemo(
+		() =>
+			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+				const singularName = labels.singular_name.toLowerCase();
+				accumulator[ singularName ] =
+					( accumulator[ singularName ] || 0 ) + 1;
+				return accumulator;
+			}, {} ),
+		[ publicPostTypes ]
 	);
 	return useCallback(
 		( { labels, slug } ) => {
@@ -622,14 +626,14 @@ const useTemplatesToExclude = (
 const useEntitiesInfo = (
 	entityName,
 	templatePrefixes,
-	additionalQueryParameters = {}
+	additionalQueryParameters = EMPTY_OBJECT
 ) => {
 	const recordsToExcludePerEntity = useTemplatesToExclude(
 		entityName,
 		templatePrefixes,
 		additionalQueryParameters
 	);
-	const entitiesInfo = useSelect(
+	const entitiesHasRecords = useSelect(
 		( select ) => {
 			return Object.keys( templatePrefixes || {} ).reduce(
 				( accumulator, slug ) => {
@@ -637,26 +641,42 @@ const useEntitiesInfo = (
 						recordsToExcludePerEntity?.[ slug ]?.map(
 							( { id } ) => id
 						) || [];
-					accumulator[ slug ] = {
-						hasEntities: !! select( coreStore ).getEntityRecords(
-							entityName,
-							slug,
-							{
-								per_page: 1,
-								_fields: 'id',
-								context: 'view',
-								exclude: existingEntitiesIds,
-								...additionalQueryParameters[ slug ],
-							}
-						)?.length,
-						existingEntitiesIds,
-					};
+					accumulator[ slug ] = !! select(
+						coreStore
+					).getEntityRecords( entityName, slug, {
+						per_page: 1,
+						_fields: 'id',
+						context: 'view',
+						exclude: existingEntitiesIds,
+						...additionalQueryParameters[ slug ],
+					} )?.length;
 					return accumulator;
 				},
 				{}
 			);
 		},
-		[ templatePrefixes, recordsToExcludePerEntity ]
+		[
+			templatePrefixes,
+			recordsToExcludePerEntity,
+			entityName,
+			additionalQueryParameters,
+		]
 	);
+	const entitiesInfo = useMemo( () => {
+		return Object.keys( templatePrefixes || {} ).reduce(
+			( accumulator, slug ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
+				accumulator[ slug ] = {
+					hasEntities: entitiesHasRecords[ slug ],
+					existingEntitiesIds,
+				};
+				return accumulator;
+			},
+			{}
+		);
+	}, [ templatePrefixes, recordsToExcludePerEntity, entitiesHasRecords ] );
 	return entitiesInfo;
 };