@wordpress/edit-site 4.7.0 → 4.10.0

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,19 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
+import AddCustomTemplateModal from './add-custom-template-modal';
+import {
+	useExistingTemplates,
+	useDefaultTemplateTypes,
+	entitiesConfig,
+	usePostTypes,
+	usePostTypePage,
+	useTaxonomies,
+	useTaxonomyCategory,
+	useTaxonomyTag,
+	useExtraTemplates,
+} from './utils';
+import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
@@ -71,28 +80,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',
@@ -103,7 +106,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 }
 			);
@@ -130,63 +133,184 @@ 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 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 ) &&
+			! existingTemplateSlugs.includes( template.slug )
+	);
+	const onClickMenuItem = ( _entityForSuggestions ) => {
+		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.
+	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 ]
+			);
+		} else {
+			enhancedMissingDefaultTemplateTypes.push( menuItem[ 0 ] );
+		}
+	} );
 	// 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 extraPostTypeTemplates = useExtraTemplates(
+		postTypes,
+		entitiesConfig.postType,
+		onClickMenuItem
+	);
+	const extraTaxonomyTemplates = useExtraTemplates(
+		taxonomies,
+		entitiesConfig.taxonomy,
+		onClickMenuItem
 	);
+	const missingTemplates = [
+		...enhancedMissingDefaultTemplateTypes,
+		...extraPostTypeTemplates,
+		...extraTaxonomyTemplates,
+	];
+	return missingTemplates;
 }

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

@@ -9,3 +9,140 @@
 		}
 	}
 }
+
+.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;
+}
+
+
+.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;
+}