@wordpress/edit-site 4.9.0 → 4.10.0

package/build-style/style-rtl.css

@@ -468,9 +468,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-preferences-modal .components-modal__content {
     padding: 0;
   }
-  .interface-preferences-modal .components-modal__content::before {
-    content: none;
-  }
 }
 
 .interface-preferences__tabs .components-tab-panel__tabs {
@@ -767,19 +764,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin: 0;
 }
 
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
-  margin-left: 16px;
-  margin-right: 16px;
-  width: unset;
-}
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle .components-toggle-group-control {
-  min-height: 32px;
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control,
-.edit-site-screen-background-color__control {
+.edit-site-screen-button-color__control {
+  padding: 16px;
+}
+
+.edit-site-screen-background-color__control .block-editor-color-gradient-control__tab-panel {
   padding: 16px;
 }
 
@@ -1430,12 +1421,6 @@ body.is-fullscreen-mode .edit-site-list-header {
     width: 320px;
   }
 }
-.edit-site-list__rename-modal .components-modal__header {
-  border-bottom: none;
-}
-.edit-site-list__rename-modal .components-modal__content::before {
-  margin-bottom: 4px;
-}
 
 .edit-site-list__rename-modal-actions {
   margin-top: 12px;
@@ -1601,6 +1586,22 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-top: 16px;
 }
 
+@media (min-width: 782px) {
+  .edit-site-custom-generic-template__modal .components-base-control {
+    width: 320px;
+  }
+}
+.edit-site-custom-generic-template__modal .components-modal__header {
+  border-bottom: none;
+}
+.edit-site-custom-generic-template__modal .components-modal__content::before {
+  margin-bottom: 4px;
+}
+
+.edit-site-custom-generic-template__modal-actions {
+  margin-top: 12px;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -2138,9 +2139,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-keyboard-shortcut-help-modal__section {
   margin: 0 0 2rem 0;
 }
-.edit-site-keyboard-shortcut-help-modal__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
-  margin-top: -25px;
-}
 .edit-site-keyboard-shortcut-help-modal__section-title {
   font-size: 0.9rem;
   font-weight: 600;

package/build-style/style.css

@@ -468,9 +468,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-preferences-modal .components-modal__content {
     padding: 0;
   }
-  .interface-preferences-modal .components-modal__content::before {
-    content: none;
-  }
 }
 
 .interface-preferences__tabs .components-tab-panel__tabs {
@@ -767,19 +764,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin: 0;
 }
 
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
-  margin-right: 16px;
-  margin-left: 16px;
-  width: unset;
-}
-.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle .components-toggle-group-control {
-  min-height: 32px;
-}
-
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control,
-.edit-site-screen-background-color__control {
+.edit-site-screen-button-color__control {
+  padding: 16px;
+}
+
+.edit-site-screen-background-color__control .block-editor-color-gradient-control__tab-panel {
   padding: 16px;
 }
 
@@ -1430,12 +1421,6 @@ body.is-fullscreen-mode .edit-site-list-header {
     width: 320px;
   }
 }
-.edit-site-list__rename-modal .components-modal__header {
-  border-bottom: none;
-}
-.edit-site-list__rename-modal .components-modal__content::before {
-  margin-bottom: 4px;
-}
 
 .edit-site-list__rename-modal-actions {
   margin-top: 12px;
@@ -1601,6 +1586,22 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-top: 16px;
 }
 
+@media (min-width: 782px) {
+  .edit-site-custom-generic-template__modal .components-base-control {
+    width: 320px;
+  }
+}
+.edit-site-custom-generic-template__modal .components-modal__header {
+  border-bottom: none;
+}
+.edit-site-custom-generic-template__modal .components-modal__content::before {
+  margin-bottom: 4px;
+}
+
+.edit-site-custom-generic-template__modal-actions {
+  margin-top: 12px;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -2138,9 +2139,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-keyboard-shortcut-help-modal__section {
   margin: 0 0 2rem 0;
 }
-.edit-site-keyboard-shortcut-help-modal__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
-  margin-top: -25px;
-}
 .edit-site-keyboard-shortcut-help-modal__section-title {
   font-size: 0.9rem;
   font-weight: 600;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.9.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.12.0",
-		"@wordpress/api-fetch": "^6.9.0",
-		"@wordpress/block-editor": "^9.4.0",
-		"@wordpress/block-library": "^7.9.0",
-		"@wordpress/blocks": "^11.11.0",
-		"@wordpress/components": "^19.14.0",
-		"@wordpress/compose": "^5.10.0",
-		"@wordpress/core-data": "^4.10.0",
-		"@wordpress/data": "^6.12.0",
-		"@wordpress/deprecated": "^3.12.0",
-		"@wordpress/editor": "^12.11.0",
-		"@wordpress/element": "^4.10.0",
-		"@wordpress/hooks": "^3.12.0",
-		"@wordpress/html-entities": "^3.12.0",
-		"@wordpress/i18n": "^4.12.0",
-		"@wordpress/icons": "^9.3.0",
-		"@wordpress/interface": "^4.11.0",
-		"@wordpress/keyboard-shortcuts": "^3.10.0",
-		"@wordpress/keycodes": "^3.12.0",
-		"@wordpress/media-utils": "^4.3.0",
-		"@wordpress/notices": "^3.12.0",
-		"@wordpress/plugins": "^4.10.0",
-		"@wordpress/preferences": "^2.4.0",
-		"@wordpress/reusable-blocks": "^3.10.0",
-		"@wordpress/style-engine": "^0.11.0",
-		"@wordpress/url": "^3.13.0",
-		"@wordpress/viewport": "^4.10.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": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
+	"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

@@ -25,11 +25,34 @@ import { useEntityRecords } from '@wordpress/core-data';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
-const BASE_QUERY = {
-	order: 'asc',
-	_fields: 'id,title,slug,link',
-	context: 'view',
-};
+
+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,
@@ -46,23 +69,9 @@ function SuggestionListItem( {
 			as={ Button }
 			{ ...composite }
 			className={ baseCssClass }
-			onClick={ () => {
-				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 and %2$s is the name of the post, e.g. "Post: Hello, WordPress"
-					__( '%1$s: %2$s' ),
-					entityForSuggestions.labels.singular_name,
-					suggestion.name
-				);
-				onSelect( {
-					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: `single-${ entityForSuggestions.slug }-${ suggestion.slug }`,
-				} );
-			} }
+			onClick={ () =>
+				selectSuggestion( suggestion, onSelect, entityForSuggestions )
+			}
 		>
 			<span className={ `${ baseCssClass }__title` }>
 				<TextHighlight text={ suggestion.name } highlight={ search } />
@@ -76,48 +85,73 @@ function SuggestionListItem( {
 	);
 }
 
-function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
-	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
-	// We need to track two values, the search input's value(searchInputValue)
-	// and the one we want to debounce(search) and make REST API requests.
-	const [ searchInputValue, setSearchInputValue ] = useState( '' );
-	const [ search, setSearch ] = useState( '' );
-	const debouncedSearch = useDebounce( setSearch, 250 );
-	const query = {
-		...BASE_QUERY,
-		search,
-		orderby: search ? 'relevance' : 'modified',
-		exclude: entityForSuggestions.postsToExclude,
-		per_page: search ? 20 : 10,
-	};
+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
 		);
-	useEffect( () => {
-		if ( search !== searchInputValue ) {
-			debouncedSearch( searchInputValue );
-		}
-	}, [ search, searchInputValue ] );
-	const entitiesInfo = useMemo( () => {
-		if ( ! searchResults?.length ) return EMPTY_ARRAY;
-		return mapToIHasNameAndId( searchResults, 'title.rendered' );
-	}, [ searchResults ] );
-	// Update suggestions only when the query has resolved.
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
 	useEffect( () => {
 		if ( ! searchHasResolved ) return;
-		setSuggestions( entitiesInfo );
-	}, [ entitiesInfo, searchHasResolved ] );
+		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={ setSearchInputValue }
-				value={ searchInputValue }
-				label={ entityForSuggestions.labels.search_items }
-				placeholder={ entityForSuggestions.labels.search_items }
+				onChange={ setSearch }
+				value={ search }
+				label={ labels.search_items }
+				placeholder={ labels.search_items }
 			/>
 			{ !! suggestions?.length && (
 				<Composite
@@ -129,7 +163,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 						<SuggestionListItem
 							key={ suggestion.slug }
 							suggestion={ suggestion }
-							search={ search }
+							search={ debouncedSearch }
 							onSelect={ onSelect }
 							entityForSuggestions={ entityForSuggestions }
 							composite={ composite }
@@ -137,9 +171,9 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 					) ) }
 				</Composite>
 			) }
-			{ search && ! suggestions?.length && (
+			{ debouncedSearch && ! suggestions?.length && (
 				<p className="edit-site-custom-template-modal__no-results">
-					{ entityForSuggestions.labels.not_found }
+					{ labels.not_found }
 				</p>
 			) }
 		</>
@@ -187,7 +221,7 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 							</Heading>
 							<Text as="span">
 								{
-									// translators: The user is given the choice to set up a template for all items of a post type, or just a specific one.
+									// 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>
@@ -203,7 +237,7 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 							</Heading>
 							<Text as="span">
 								{
-									// translators: The user is given the choice to set up a template for all items of a post type, or just a specific one.
+									// 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>