@wordpress/edit-site 4.7.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.7.0",
+	"version": "4.10.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.10.0",
-		"@wordpress/api-fetch": "^6.7.0",
-		"@wordpress/block-editor": "^9.2.0",
-		"@wordpress/block-library": "^7.7.0",
-		"@wordpress/blocks": "^11.9.0",
-		"@wordpress/components": "^19.12.0",
-		"@wordpress/compose": "^5.8.0",
-		"@wordpress/core-data": "^4.8.0",
-		"@wordpress/data": "^6.10.0",
-		"@wordpress/deprecated": "^3.10.0",
-		"@wordpress/editor": "^12.9.0",
-		"@wordpress/element": "^4.8.0",
-		"@wordpress/hooks": "^3.10.0",
-		"@wordpress/html-entities": "^3.10.0",
-		"@wordpress/i18n": "^4.10.0",
-		"@wordpress/icons": "^9.1.0",
-		"@wordpress/interface": "^4.9.0",
-		"@wordpress/keyboard-shortcuts": "^3.8.0",
-		"@wordpress/keycodes": "^3.10.0",
-		"@wordpress/media-utils": "^4.1.0",
-		"@wordpress/notices": "^3.10.0",
-		"@wordpress/plugins": "^4.8.0",
-		"@wordpress/preferences": "^2.2.0",
-		"@wordpress/reusable-blocks": "^3.8.0",
-		"@wordpress/style-engine": "^0.9.0",
-		"@wordpress/url": "^3.11.0",
-		"@wordpress/viewport": "^4.8.0",
+		"@wordpress/a11y": "^3.13.0",
+		"@wordpress/api-fetch": "^6.10.0",
+		"@wordpress/block-editor": "^9.5.0",
+		"@wordpress/block-library": "^7.10.0",
+		"@wordpress/blocks": "^11.12.0",
+		"@wordpress/components": "^19.15.0",
+		"@wordpress/compose": "^5.11.0",
+		"@wordpress/core-data": "^4.11.0",
+		"@wordpress/data": "^6.13.0",
+		"@wordpress/deprecated": "^3.13.0",
+		"@wordpress/editor": "^12.12.0",
+		"@wordpress/element": "^4.11.0",
+		"@wordpress/hooks": "^3.13.0",
+		"@wordpress/html-entities": "^3.13.0",
+		"@wordpress/i18n": "^4.13.0",
+		"@wordpress/icons": "^9.4.0",
+		"@wordpress/interface": "^4.12.0",
+		"@wordpress/keyboard-shortcuts": "^3.11.0",
+		"@wordpress/keycodes": "^3.13.0",
+		"@wordpress/media-utils": "^4.4.0",
+		"@wordpress/notices": "^3.13.0",
+		"@wordpress/plugins": "^4.11.0",
+		"@wordpress/preferences": "^2.5.0",
+		"@wordpress/reusable-blocks": "^3.11.0",
+		"@wordpress/style-engine": "^0.12.0",
+		"@wordpress/url": "^3.14.0",
+		"@wordpress/viewport": "^4.11.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }

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

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	Modal,
+	TextControl,
+} from '@wordpress/components';
+
+function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
+	const [ title, setTitle ] = useState( '' );
+	const defaultTitle = __( 'Custom Template' );
+	const [ isBusy, setIsBusy ] = useState( false );
+	async function onCreateTemplate( event ) {
+		event.preventDefault();
+
+		if ( isBusy ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		createTemplate(
+			{
+				slug:
+					'wp-custom-template-' + kebabCase( title || defaultTitle ),
+				title: title || defaultTitle,
+			},
+			false
+		);
+	}
+	return (
+		<Modal
+			title={ __( 'Create custom template' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ () => {
+				onClose();
+			} }
+			overlayClassName="edit-site-custom-generic-template__modal"
+		>
+			<form onSubmit={ onCreateTemplate }>
+				<Flex align="flex-start" gap={ 8 }>
+					<FlexItem>
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ title }
+							onChange={ setTitle }
+							placeholder={ defaultTitle }
+							disabled={ isBusy }
+							help={ __(
+								'Describe the template, e.g. "Post with sidebar".'
+							) }
+						/>
+					</FlexItem>
+				</Flex>
+
+				<Flex
+					className="edit-site-custom-generic-template__modal-actions"
+					justify="flex-end"
+					expanded={ false }
+				>
+					<FlexItem>
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								onClose();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isBusy }
+							aria-disabled={ isBusy }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}
+
+export default AddCustomGenericTemplateModal;

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

@@ -0,0 +1,265 @@
+/**
+ * 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 = [];
+
+function selectSuggestion( suggestion, onSelect, entityForSuggestions ) {
+	const {
+		labels,
+		slug,
+		config: { templateSlug, templatePrefix },
+	} = entityForSuggestions;
+	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 or taxonomy and %2$s is the name of the post or term, e.g. "Post: Hello, WordPress", "Category: shoes"
+		__( '%1$s: %2$s' ),
+		labels.singular_name,
+		suggestion.name
+	);
+	let newTemplateSlug = `${ templateSlug || slug }-${ suggestion.slug }`;
+	if ( templatePrefix ) {
+		newTemplateSlug = templatePrefix + newTemplateSlug;
+	}
+	const newTemplate = {
+		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: newTemplateSlug,
+	};
+	onSelect( newTemplate );
+}
+
+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={ () =>
+				selectSuggestion( suggestion, onSelect, entityForSuggestions )
+			}
+		>
+			<span className={ `${ baseCssClass }__title` }>
+				<TextHighlight text={ suggestion.name } highlight={ search } />
+			</span>
+			{ suggestion.link && (
+				<span className={ `${ baseCssClass }__info` }>
+					{ suggestion.link }
+				</span>
+			) }
+		</CompositeItem>
+	);
+}
+
+function useDebouncedInput() {
+	const [ input, setInput ] = useState( '' );
+	const [ debounced, setter ] = useState( '' );
+	const setDebounced = useDebounce( setter, 250 );
+	useEffect( () => {
+		if ( debounced !== input ) {
+			setDebounced( input );
+		}
+	}, [ debounced, input ] );
+	return [ input, setInput, debounced ];
+}
+
+function useSearchSuggestions( entityForSuggestions, search ) {
+	const { config, postsToExclude } = entityForSuggestions;
+	const query = useMemo(
+		() => ( {
+			order: 'asc',
+			_fields: 'id,name,title,slug,link',
+			context: 'view',
+			search,
+			orderBy: config.getOrderBy( { search } ),
+			exclude: postsToExclude,
+			per_page: search ? 20 : 10,
+		} ),
+		[ search, config, postsToExclude ]
+	);
+	const { records: searchResults, hasResolved: searchHasResolved } =
+		useEntityRecords(
+			entityForSuggestions.type,
+			entityForSuggestions.slug,
+			query
+		);
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		let newSuggestions = EMPTY_ARRAY;
+		if ( searchResults?.length ) {
+			newSuggestions = searchResults;
+			if ( config.recordNamePath ) {
+				newSuggestions = mapToIHasNameAndId(
+					newSuggestions,
+					config.recordNamePath
+				);
+			}
+		}
+		// Update suggestions only when the query has resolved, so as to keep
+		// the previous results in the UI.
+		setSuggestions( newSuggestions );
+	}, [ searchResults, searchHasResolved ] );
+	return suggestions;
+}
+
+function SuggestionList( { entityForSuggestions, onSelect } ) {
+	const composite = useCompositeState( { orientation: 'vertical' } );
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+	const suggestions = useSearchSuggestions(
+		entityForSuggestions,
+		debouncedSearch
+	);
+	const { labels } = entityForSuggestions;
+	return (
+		<>
+			<SearchControl
+				onChange={ setSearch }
+				value={ search }
+				label={ labels.search_items }
+				placeholder={ 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={ debouncedSearch }
+							onSelect={ onSelect }
+							entityForSuggestions={ entityForSuggestions }
+							composite={ composite }
+						/>
+					) ) }
+				</Composite>
+			) }
+			{ debouncedSearch && ! suggestions?.length && (
+				<p className="edit-site-custom-template-modal__no-results">
+					{ 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 taxonomy, 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 taxonomy, 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;