@wordpress/edit-site 4.6.0 → 4.9.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, 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,49 +75,52 @@ 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 }
 			),
-			defaultTemplateTypes: select(
-				editorStore
-			).__experimentalGetDefaultTemplateTypes(),
+			defaultTemplateTypes:
+				select( editorStore ).__experimentalGetDefaultTemplateTypes(),
 		} ),
 		[]
 	);
+	const postTypesEntitiesInfo = usePostTypesEntitiesInfo( existingTemplates );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setTemplate } = useDispatch( editSiteStore );
 
-	async function createTemplate( { slug } ) {
+	async function createTemplate( template ) {
 		try {
-			const { title, description } = find( defaultTemplateTypes, {
-				slug,
-			} );
-
-			const template = await saveEntityRecord(
+			const { title, description, slug } = template;
+			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
 				{
-					excerpt: description,
+					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: true,
 				},
 				{ throwOnError: true }
 			);
 
 			// Set template before navigating away to avoid initial stale value.
-			setTemplate( template.id, template.slug );
+			setTemplate( newTemplate.id, newTemplate.slug );
 
 			// Navigate to the created template editor.
 			history.push( {
-				postId: template.id,
-				postType: template.type,
+				postId: newTemplate.id,
+				postType: newTemplate.type,
 			} );
 
 			// TODO: Add a success notice?
@@ -129,9 +135,9 @@ export default function NewTemplate( { postType } ) {
 			} );
 		}
 	}
-
-	const existingTemplateSlugs = map( templates, 'slug' );
-
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
 	const missingTemplates = filter(
 		defaultTemplateTypes,
 		( template ) =>
@@ -139,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,
-							( { title, description, slug } ) => (
-								<MenuItem
-									icon={ TEMPLATE_ICONS[ slug ] }
-									iconPosition="left"
-									info={ description }
-									key={ slug }
-									onClick={ () => {
-										createTemplate( { slug } );
-										// 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;
+}

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

@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useMemo } from '@wordpress/element';
+
+export const usePostTypes = () => {
+	const postTypes = useSelect(
+		( select ) => select( coreStore ).getPostTypes( { per_page: -1 } ),
+		[]
+	);
+	return useMemo( () => {
+		const excludedPostTypes = [ 'attachment', 'page' ];
+		return postTypes?.filter(
+			( { viewable, slug } ) =>
+				viewable && ! excludedPostTypes.includes( slug )
+		);
+	}, [ postTypes ] );
+};
+
+/**
+ * @typedef {Object} PostTypeEntitiesInfo
+ * @property {boolean}  hasEntities   If a postType has available entities.
+ * @property {number[]} existingPosts An array of the existing entities ids.
+ */
+
+/**
+ * Helper hook that returns information about a post type having
+ * posts that we can create a specific template for.
+ *
+ * First we need to find the existing posts with an associated template,
+ * to query afterwards for any remaing post, by excluding them.
+ *
+ * @param {string[]} existingTemplates The existing templates.
+ * @return {Record<string,PostTypeEntitiesInfo>} An object with the postTypes as `keys` and PostTypeEntitiesInfo as values.
+ */
+export const usePostTypesEntitiesInfo = ( existingTemplates ) => {
+	const postTypes = usePostTypes();
+	const slugsToExcludePerEntity = useMemo( () => {
+		return postTypes?.reduce( ( accumulator, _postType ) => {
+			const slugsWithTemplates = ( existingTemplates || [] ).reduce(
+				( _accumulator, existingTemplate ) => {
+					const prefix = `single-${ _postType.slug }-`;
+					if ( existingTemplate.slug.startsWith( prefix ) ) {
+						_accumulator.push(
+							existingTemplate.slug.substring( prefix.length )
+						);
+					}
+					return _accumulator;
+				},
+				[]
+			);
+			if ( slugsWithTemplates.length ) {
+				accumulator[ _postType.slug ] = slugsWithTemplates;
+			}
+			return accumulator;
+		}, {} );
+	}, [ postTypes, existingTemplates ] );
+	const postsToExcludePerEntity = useSelect(
+		( select ) => {
+			if ( ! slugsToExcludePerEntity ) {
+				return;
+			}
+			const postsToExclude = Object.entries(
+				slugsToExcludePerEntity
+			).reduce( ( accumulator, [ slug, slugsWithTemplates ] ) => {
+				const postsWithTemplates = select( coreStore ).getEntityRecords(
+					'postType',
+					slug,
+					{
+						_fields: 'id',
+						context: 'view',
+						slug: slugsWithTemplates,
+					}
+				);
+				if ( postsWithTemplates?.length ) {
+					accumulator[ slug ] = postsWithTemplates;
+				}
+				return accumulator;
+			}, {} );
+			return postsToExclude;
+		},
+		[ slugsToExcludePerEntity ]
+	);
+	const entitiesInfo = useSelect(
+		( select ) => {
+			return postTypes?.reduce( ( accumulator, { slug } ) => {
+				const existingPosts =
+					postsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
+				accumulator[ slug ] = {
+					hasEntities: !! select( coreStore ).getEntityRecords(
+						'postType',
+						slug,
+						{
+							per_page: 1,
+							_fields: 'id',
+							context: 'view',
+							exclude: existingPosts,
+						}
+					)?.length,
+					existingPosts,
+				};
+				return accumulator;
+			}, {} );
+		},
+		[ postTypes, postsToExcludePerEntity ]
+	);
+	return entitiesInfo;
+};
+
+export const mapToIHasNameAndId = ( entities, path ) => {
+	return ( entities || [] ).map( ( entity ) => ( {
+		...entity,
+		name: decodeEntities( get( entity, path ) ),
+	} ) );
+};

package/src/components/block-editor/block-inspector-button.js

@@ -30,9 +30,8 @@ export default function BlockInspectorButton( { onClick = () => {} } ) {
 		} ),
 		[]
 	);
-	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		interfaceStore
-	);
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 
 	const label = isBlockInspectorOpen
 		? __( 'Hide more settings' )

package/src/components/block-editor/index.js

@@ -51,12 +51,8 @@ const LAYOUT = {
 export default function BlockEditor( { setIsInserterOpen } ) {
 	const { storedSettings, templateType, templateId, page } = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				getEditedPostType,
-				getEditedPostId,
-				getPage,
-			} = select( editSiteStore );
+			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
+				select( editSiteStore );
 
 			return {
 				storedSettings: getSettings( setIsInserterOpen ),
@@ -78,9 +74,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
 		( select ) => ( {
 			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories: select(
-				coreStore
-			).getBlockPatternCategories(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
 		} ),
 		[]
 	);

package/src/components/code-editor/code-editor-text-area.js

@@ -3,17 +3,11 @@
  */
 import Textarea from 'react-autosize-textarea';
 
-/**
- * WordPress dependencies
- */
-/**
- * WordPress dependencies
- */
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
 
@@ -21,6 +15,7 @@ export default function CodeEditorTextArea( { value, onChange, onInput } ) {
 	const [ stateValue, setStateValue ] = useState( value );
 	const [ isDirty, setIsDirty ] = useState( false );
 	const instanceId = useInstanceId( CodeEditorTextArea );
+	const valueRef = useRef();
 
 	if ( ! isDirty && stateValue !== value ) {
 		setStateValue( value );
@@ -42,6 +37,7 @@ export default function CodeEditorTextArea( { value, onChange, onInput } ) {
 		onInput( newValue );
 		setStateValue( newValue );
 		setIsDirty( true );
+		valueRef.current = newValue;
 	};
 
 	/**
@@ -56,6 +52,15 @@ export default function CodeEditorTextArea( { value, onChange, onInput } ) {
 		}
 	};
 
+	// Ensure changes aren't lost when component unmounts.
+	useEffect( () => {
+		return () => {
+			if ( valueRef.current ) {
+				onChange( valueRef.current );
+			}
+		};
+	}, [] );
+
 	return (
 		<>
 			<VisuallyHidden

package/src/components/edit-template-part-menu-button/index.js

@@ -34,9 +34,8 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 	const { params } = useLocation();
 	const selectedTemplatePart = useSelect(
 		( select ) => {
-			const block = select( blockEditorStore ).getBlock(
-				selectedClientId
-			);
+			const block =
+				select( blockEditorStore ).getBlock( selectedClientId );
 
 			if ( block && isTemplatePart( block ) ) {
 				const { theme, slug } = block.attributes;

package/src/components/editor/index.js

@@ -119,10 +119,8 @@ function Editor( { onError } ) {
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	const [
-		isEntitiesSavedStatesOpen,
-		setIsEntitiesSavedStatesOpen,
-	] = useState( false );
+	const [ isEntitiesSavedStatesOpen, setIsEntitiesSavedStatesOpen ] =
+		useState( false );
 	const openEntitiesSavedStates = useCallback(
 		() => setIsEntitiesSavedStatesOpen( true ),
 		[]
@@ -217,7 +215,8 @@ function Editor( { onError } ) {
 										<InterfaceSkeleton
 											labels={ {
 												...interfaceLabels,
-												secondarySidebar: secondarySidebarLabel,
+												secondarySidebar:
+													secondarySidebarLabel,
 											} }
 											className={
 												showIconLabels &&

package/src/components/global-styles/context-menu.js

@@ -27,6 +27,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ typography }
 					path={ parentMenu + '/typography' }
+					aria-label={ __( 'Typography styles' ) }
 				>
 					{ __( 'Typography' ) }
 				</NavigationButtonAsItem>
@@ -35,6 +36,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ color }
 					path={ parentMenu + '/colors' }
+					aria-label={ __( 'Colors styles' ) }
 				>
 					{ __( 'Colors' ) }
 				</NavigationButtonAsItem>
@@ -43,6 +45,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 				<NavigationButtonAsItem
 					icon={ layout }
 					path={ parentMenu + '/layout' }
+					aria-label={ __( 'Layout styles' ) }
 				>
 					{ __( 'Layout' ) }
 				</NavigationButtonAsItem>

package/src/components/global-styles/global-styles-provider.js

@@ -48,9 +48,8 @@ const cleanEmptyObject = ( object ) => {
 
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, settings, styles } = useSelect( ( select ) => {
-		const _globalStylesId = select(
-			coreStore
-		).__experimentalGetCurrentGlobalStylesId();
+		const _globalStylesId =
+			select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 		const record = _globalStylesId
 			? select( coreStore ).getEditedEntityRecord(
 					'root',
@@ -108,11 +107,8 @@ function useGlobalStylesBaseConfig() {
 }
 
 function useGlobalStylesContext() {
-	const [
-		isUserConfigReady,
-		userConfig,
-		setUserConfig,
-	] = useGlobalStylesUserConfig();
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
 	const mergedConfig = useMemo( () => {
 		if ( ! baseConfig || ! userConfig ) {