@wordpress/edit-site 5.32.0 → 5.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.32.0",
+	"version": "5.34.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,46 +28,46 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.55.0",
-		"@wordpress/api-fetch": "^6.52.0",
-		"@wordpress/blob": "^3.55.0",
-		"@wordpress/block-editor": "^12.23.0",
-		"@wordpress/block-library": "^8.32.0",
-		"@wordpress/blocks": "^12.32.0",
-		"@wordpress/commands": "^0.26.0",
-		"@wordpress/components": "^27.3.0",
-		"@wordpress/compose": "^6.32.0",
-		"@wordpress/core-commands": "^0.24.0",
-		"@wordpress/core-data": "^6.32.0",
-		"@wordpress/data": "^9.25.0",
-		"@wordpress/dataviews": "^0.9.0",
-		"@wordpress/date": "^4.55.0",
-		"@wordpress/deprecated": "^3.55.0",
-		"@wordpress/dom": "^3.55.0",
-		"@wordpress/editor": "^13.32.0",
-		"@wordpress/element": "^5.32.0",
-		"@wordpress/escape-html": "^2.55.0",
-		"@wordpress/hooks": "^3.55.0",
-		"@wordpress/html-entities": "^3.55.0",
-		"@wordpress/i18n": "^4.55.0",
-		"@wordpress/icons": "^9.46.0",
-		"@wordpress/interface": "^5.32.0",
-		"@wordpress/keyboard-shortcuts": "^4.32.0",
-		"@wordpress/keycodes": "^3.55.0",
-		"@wordpress/media-utils": "^4.46.0",
-		"@wordpress/notices": "^4.23.0",
-		"@wordpress/patterns": "^1.16.0",
-		"@wordpress/plugins": "^6.23.0",
-		"@wordpress/preferences": "^3.32.0",
-		"@wordpress/primitives": "^3.53.0",
-		"@wordpress/private-apis": "^0.37.0",
-		"@wordpress/reusable-blocks": "^4.32.0",
-		"@wordpress/router": "^0.24.0",
-		"@wordpress/style-engine": "^1.38.0",
-		"@wordpress/url": "^3.56.0",
-		"@wordpress/viewport": "^5.32.0",
-		"@wordpress/widgets": "^3.32.0",
-		"@wordpress/wordcount": "^3.55.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/api-fetch": "^6.54.0",
+		"@wordpress/blob": "^3.57.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/block-library": "^8.34.0",
+		"@wordpress/blocks": "^12.34.0",
+		"@wordpress/commands": "^0.28.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/core-commands": "^0.26.0",
+		"@wordpress/core-data": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/dataviews": "^1.1.0",
+		"@wordpress/date": "^4.57.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/editor": "^13.34.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/escape-html": "^2.57.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/html-entities": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/keyboard-shortcuts": "^4.34.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/media-utils": "^4.48.0",
+		"@wordpress/notices": "^4.25.0",
+		"@wordpress/patterns": "^1.18.0",
+		"@wordpress/plugins": "^6.25.0",
+		"@wordpress/preferences": "^3.34.0",
+		"@wordpress/primitives": "^3.55.0",
+		"@wordpress/priority-queue": "^2.57.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/reusable-blocks": "^4.34.0",
+		"@wordpress/router": "^0.26.0",
+		"@wordpress/style-engine": "^1.40.0",
+		"@wordpress/url": "^3.58.0",
+		"@wordpress/viewport": "^5.34.0",
+		"@wordpress/widgets": "^3.34.0",
+		"@wordpress/wordcount": "^3.57.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"client-zip": "^2.4.4",
@@ -76,8 +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"
+		"react-autosize-textarea": "^7.1.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -86,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

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

@@ -72,16 +72,22 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 			<form onSubmit={ createPage }>
 				<VStack spacing={ 3 }>
 					<TextControl
+						__next40pxDefaultSize
 						label={ __( 'Page title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
 						value={ title }
 					/>
 					<HStack spacing={ 2 } justify="end">
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 							isBusy={ isCreatingPage }

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

@@ -11,8 +11,8 @@ import {
 	privateApis as editPatternsPrivateApis,
 	store as patternsStore,
 } from '@wordpress/patterns';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -37,13 +37,14 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme()?.is_block_theme;
-	}, [] );
 	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -73,13 +74,13 @@ export default function AddNewPattern() {
 		setShowTemplatePartModal( false );
 	}
 
-	const controls = [
-		{
-			icon: symbol,
-			onClick: () => setShowPatternModal( true ),
-			title: __( 'Create pattern' ),
-		},
-	];
+	const controls = [];
+
+	controls.push( {
+		icon: symbol,
+		onClick: () => setShowPatternModal( true ),
+		title: __( 'Create pattern' ),
+	} );
 
 	if ( isBlockBasedTheme ) {
 		controls.push( {
@@ -131,7 +132,9 @@ export default function AddNewPattern() {
 				ref={ patternUploadInputRef }
 				onChange={ async ( event ) => {
 					const file = event.target.files?.[ 0 ];
-					if ( ! file ) return;
+					if ( ! file ) {
+						return;
+					}
 					try {
 						let currentCategoryId;
 						// When we're not handling template parts, we should

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

@@ -43,6 +43,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 		<form onSubmit={ onCreateTemplate }>
 			<VStack spacing={ 6 }>
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
@@ -58,6 +59,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					justify="right"
 				>
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => {
 							onClose();
@@ -66,6 +68,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						isBusy={ isBusy }

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

@@ -99,7 +99,9 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 		);
 	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		let newSuggestions = EMPTY_ARRAY;
 		if ( searchResults?.length ) {
 			newSuggestions = searchResults;

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 );