@wordpress/edit-site 4.6.0 → 4.9.0

package/build-style/style.css

@@ -758,6 +758,15 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   font-size: 11px !important;
 }
 
+.edit-site-global-styles-section-title {
+  color: #2f2f2f;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 16px;
+  padding-bottom: 0;
+  margin: 0;
+}
+
 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
   margin-right: 16px;
   margin-left: 16px;
@@ -769,6 +778,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
+.edit-site-screen-button-color__control,
 .edit-site-screen-background-color__control {
   padding: 16px;
 }
@@ -819,9 +829,13 @@ body.is-fullscreen-mode .edit-site-header {
     transition-delay: 0s;
   }
 }
-.edit-site-header .edit-site-header_start,
+.edit-site-header .edit-site-header_start {
+  display: flex;
+  border: none;
+}
 .edit-site-header .edit-site-header_end {
   display: flex;
+  justify-content: flex-end;
 }
 .edit-site-header .edit-site-header_center {
   display: flex;
@@ -831,9 +845,6 @@ body.is-fullscreen-mode .edit-site-header {
   justify-content: center;
   min-width: 0;
 }
-.edit-site-header .edit-site-header_end {
-  justify-content: flex-end;
-}
 
 body.is-navigation-sidebar-open .edit-site-header {
   padding-left: 0;
@@ -944,6 +955,41 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   }
 }
 
+.edit-site-header_start {
+  display: flex;
+  border: none;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+  height: 36px;
+  min-width: 36px;
+  padding: 6px;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon.is-pressed,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
+  background: #1e1e1e;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon:focus:not(:disabled),
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
+  outline: 1px solid transparent;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon::before,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon::before {
+  display: none;
+}
+.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+  margin-right: 8px;
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+
 .show-icon-labels .edit-site-header .components-button.has-icon {
   width: auto;
 }
@@ -973,6 +1019,9 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
   content: none;
 }
+.show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
+  margin-left: 8px;
+}
 
 .edit-site-document-actions {
   display: flex;
@@ -1094,8 +1143,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   width: 36px;
   height: 36px;
   border-radius: 2px;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   margin-top: -1px;
 }
 
@@ -1434,8 +1482,7 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__avatar img {
   width: 32px;
   height: 32px;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   opacity: 0;
   transition: opacity 0.1s linear;
 }
@@ -1458,6 +1505,102 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
+.edit-site-custom-template-modal__contents > div {
+  text-align: center;
+  cursor: pointer;
+  padding: 24px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  width: 256px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+.edit-site-custom-template-modal__contents > div span {
+  color: #757575;
+}
+.edit-site-custom-template-modal__contents > div:hover {
+  border-color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > div:hover h5 {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > div:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input {
+  background: #fff;
+  border: 1px solid #ddd;
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+}
+@media (min-width: 782px) {
+  .edit-site-custom-template-modal {
+    width: 456px;
+  }
+}
+
+.edit-site-custom-template-modal__suggestions_list {
+  margin-top: 16px;
+}
+@media (min-width: 600px) {
+  .edit-site-custom-template-modal__suggestions_list {
+    height: 232px;
+    overflow: scroll;
+  }
+}
+.edit-site-custom-template-modal__suggestions_list__list-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  height: auto;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item mark {
+  font-weight: 700;
+  background: none;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal__suggestions_list__list-item__info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title {
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__info {
+  color: #757575;
+  font-size: 0.9em;
+  line-height: 1.3;
+  word-break: break-all;
+}
+
+.edit-site-custom-template-modal__no-results {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding: 16px;
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -1631,7 +1774,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 16px;
 }
 .edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
-  align-items: flex-start;
   white-space: normal;
 }
 .edit-site-navigation-inspector .block-editor-list-view-block__title {
@@ -1657,50 +1799,56 @@ body.is-fullscreen-mode .edit-site-list-header {
   display: flex;
   align-items: flex-start;
 }
-
 .edit-site-template-card__content {
   flex-grow: 1;
   margin-bottom: 4px;
 }
-
 .edit-site-template-card__title {
   font-weight: 500;
   line-height: 24px;
 }
 .edit-site-template-card__title.edit-site-template-card__title {
-  margin: 0 0 4px;
+  margin: 0;
 }
-
 .edit-site-template-card__description {
   font-size: 13px;
   margin: 0 0 16px;
 }
-
 .edit-site-template-card__icon {
   flex: 0 0 24px;
   margin-right: 12px;
   width: 24px;
   height: 24px;
 }
-
-h3.edit-site-template-card__template-areas-title {
-  font-weight: 500;
-  margin: 0 0 8px;
-}
-
 .edit-site-template-card__template-areas-list {
   margin: 0;
 }
 .edit-site-template-card__template-areas-list > li {
   margin: 0;
 }
-
 .edit-site-template-card__template-areas-item {
   width: 100%;
 }
 .edit-site-template-card__template-areas-item.components-button.has-icon {
   padding: 0;
 }
+.edit-site-template-card__header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 4px;
+}
+.edit-site-template-card__actions {
+  line-height: 0;
+}
+.edit-site-template-card__actions > .components-button.is-small.has-icon {
+  padding: 0;
+  min-width: auto;
+}
+
+h3.edit-site-template-card__template-areas-title {
+  font-weight: 500;
+  margin: 0 0 8px;
+}
 
 html #wpadminbar {
   display: none;
@@ -1964,8 +2112,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .edit-site-welcome-guide__heading {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.6.0",
+	"version": "4.9.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,39 +27,39 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.9.0",
-		"@wordpress/api-fetch": "^6.6.0",
-		"@wordpress/block-editor": "^9.1.0",
-		"@wordpress/block-library": "^7.6.0",
-		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
-		"@wordpress/compose": "^5.7.0",
-		"@wordpress/core-data": "^4.7.0",
-		"@wordpress/data": "^6.9.0",
-		"@wordpress/deprecated": "^3.9.0",
-		"@wordpress/editor": "^12.8.0",
-		"@wordpress/element": "^4.7.0",
-		"@wordpress/hooks": "^3.9.0",
-		"@wordpress/html-entities": "^3.9.0",
-		"@wordpress/i18n": "^4.9.0",
-		"@wordpress/icons": "^9.0.0",
-		"@wordpress/interface": "^4.8.0",
-		"@wordpress/keyboard-shortcuts": "^3.7.0",
-		"@wordpress/keycodes": "^3.9.0",
-		"@wordpress/media-utils": "^4.0.0",
-		"@wordpress/notices": "^3.9.0",
-		"@wordpress/plugins": "^4.7.0",
-		"@wordpress/preferences": "^2.1.0",
-		"@wordpress/reusable-blocks": "^3.7.0",
-		"@wordpress/style-engine": "^0.8.0",
-		"@wordpress/url": "^3.10.0",
-		"@wordpress/viewport": "^4.7.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",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^3.0.0"
+		"rememo": "^4.0.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

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

@@ -0,0 +1,231 @@
+/**
+ * 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 = [];
+const BASE_QUERY = {
+	order: 'asc',
+	_fields: 'id,title,slug,link',
+	context: 'view',
+};
+
+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={ () => {
+				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 }`,
+				} );
+			} }
+		>
+			<span className={ `${ baseCssClass }__title` }>
+				<TextHighlight text={ suggestion.name } highlight={ search } />
+			</span>
+			{ suggestion.link && (
+				<span className={ `${ baseCssClass }__info` }>
+					{ suggestion.link }
+				</span>
+			) }
+		</CompositeItem>
+	);
+}
+
+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,
+	};
+	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.
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		setSuggestions( entitiesInfo );
+	}, [ entitiesInfo, searchHasResolved ] );
+	return (
+		<>
+			<SearchControl
+				onChange={ setSearchInputValue }
+				value={ searchInputValue }
+				label={ entityForSuggestions.labels.search_items }
+				placeholder={ entityForSuggestions.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={ search }
+							onSelect={ onSelect }
+							entityForSuggestions={ entityForSuggestions }
+							composite={ composite }
+						/>
+					) ) }
+				</Composite>
+			) }
+			{ search && ! suggestions?.length && (
+				<p className="edit-site-custom-template-modal__no-results">
+					{ entityForSuggestions.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 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 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;