@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

package/src/components/sidebar-edit-mode/template-panel/pattern-categories.js

@@ -0,0 +1,277 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useEffect, useMemo, useState } from '@wordpress/element';
+import { FormTokenField, PanelRow } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDebounce } from '@wordpress/compose';
+import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_TYPES } from '../../../utils/constants';
+
+export const unescapeString = ( arg ) => {
+	return decodeEntities( arg );
+};
+
+/**
+ * Returns a term object with name unescaped.
+ *
+ * @param {Object} term The term object to unescape.
+ *
+ * @return {Object} Term object with name property unescaped.
+ */
+export const unescapeTerm = ( term ) => {
+	return {
+		...term,
+		name: unescapeString( term.name ),
+	};
+};
+
+/**
+ * Shared reference to an empty array for cases where it is important to avoid
+ * returning a new array reference on every invocation.
+ *
+ * @type {Array<any>}
+ */
+const EMPTY_ARRAY = [];
+
+/**
+ * Module constants
+ */
+const MAX_TERMS_SUGGESTIONS = 20;
+const DEFAULT_QUERY = {
+	per_page: MAX_TERMS_SUGGESTIONS,
+	_fields: 'id,name',
+	context: 'view',
+};
+
+const isSameTermName = ( termA, termB ) =>
+	unescapeString( termA ).toLowerCase() ===
+	unescapeString( termB ).toLowerCase();
+
+const termNamesToIds = ( names, terms ) => {
+	return names.map(
+		( termName ) =>
+			terms.find( ( term ) => isSameTermName( term.name, termName ) ).id
+	);
+};
+
+export default function PatternCategories( { post } ) {
+	const slug = 'wp_pattern_category';
+	const [ values, setValues ] = useState( [] );
+	const [ search, setSearch ] = useState( '' );
+	const debouncedSearch = useDebounce( setSearch, 500 );
+
+	const {
+		terms,
+		taxonomy,
+		hasAssignAction,
+		hasCreateAction,
+		hasResolvedTerms,
+	} = useSelect(
+		( select ) => {
+			const { getEntityRecords, getTaxonomy, hasFinishedResolution } =
+				select( coreStore );
+			const _taxonomy = getTaxonomy( slug );
+			const _termIds =
+				post?.wp_pattern_category?.length > 0
+					? post?.wp_pattern_category
+					: EMPTY_ARRAY;
+			const query = {
+				...DEFAULT_QUERY,
+				include: _termIds?.join( ',' ),
+				per_page: -1,
+			};
+
+			return {
+				hasCreateAction: _taxonomy
+					? post._links?.[
+							'wp:action-create-' + _taxonomy.rest_base
+					  ] ?? false
+					: false,
+				hasAssignAction: _taxonomy
+					? post._links?.[
+							'wp:action-assign-' + _taxonomy.rest_base
+					  ] ?? false
+					: false,
+				taxonomy: _taxonomy,
+				termIds: _termIds,
+				terms: _termIds?.length
+					? getEntityRecords( 'taxonomy', slug, query )
+					: EMPTY_ARRAY,
+				hasResolvedTerms: hasFinishedResolution( 'getEntityRecords', [
+					'taxonomy',
+					slug,
+					query,
+				] ),
+			};
+		},
+		[ slug, post ]
+	);
+
+	const { searchResults } = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+
+			return {
+				searchResults: !! search
+					? getEntityRecords( 'taxonomy', slug, {
+							...DEFAULT_QUERY,
+							search,
+					  } )
+					: EMPTY_ARRAY,
+			};
+		},
+		[ search, slug ]
+	);
+
+	// Update terms state only after the selectors are resolved.
+	// We're using this to avoid terms temporarily disappearing on slow networks
+	// while core data makes REST API requests.
+	useEffect( () => {
+		if ( hasResolvedTerms ) {
+			const newValues = ( terms ?? [] ).map( ( term ) =>
+				unescapeString( term.name )
+			);
+
+			setValues( newValues );
+		}
+	}, [ terms, hasResolvedTerms ] );
+
+	const suggestions = useMemo( () => {
+		return ( searchResults ?? [] ).map( ( term ) =>
+			unescapeString( term.name )
+		);
+	}, [ searchResults ] );
+
+	const { saveEntityRecord, editEntityRecord, invalidateResolution } =
+		useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	if ( ! hasAssignAction ) {
+		return null;
+	}
+
+	async function findOrCreateTerm( term ) {
+		try {
+			const newTerm = await saveEntityRecord( 'taxonomy', slug, term, {
+				throwOnError: true,
+			} );
+			invalidateResolution( 'getUserPatternCategories' );
+			return unescapeTerm( newTerm );
+		} catch ( error ) {
+			if ( error.code !== 'term_exists' ) {
+				throw error;
+			}
+
+			return {
+				id: error.data.term_id,
+				name: term.name,
+			};
+		}
+	}
+
+	function onUpdateTerms( newTermIds ) {
+		editEntityRecord( 'postType', PATTERN_TYPES.user, post.id, {
+			wp_pattern_category: newTermIds,
+		} );
+	}
+
+	function onChange( termNames ) {
+		const availableTerms = [
+			...( terms ?? [] ),
+			...( searchResults ?? [] ),
+		];
+		const uniqueTerms = termNames.reduce( ( acc, name ) => {
+			if (
+				! acc.some( ( n ) => n.toLowerCase() === name.toLowerCase() )
+			) {
+				acc.push( name );
+			}
+			return acc;
+		}, [] );
+
+		const newTermNames = uniqueTerms.filter(
+			( termName ) =>
+				! availableTerms.find( ( term ) =>
+					isSameTermName( term.name, termName )
+				)
+		);
+
+		// Optimistically update term values.
+		// The selector will always re-fetch terms later.
+		setValues( uniqueTerms );
+
+		if ( newTermNames.length === 0 ) {
+			return onUpdateTerms(
+				termNamesToIds( uniqueTerms, availableTerms )
+			);
+		}
+
+		if ( ! hasCreateAction ) {
+			return;
+		}
+
+		Promise.all(
+			newTermNames.map( ( termName ) =>
+				findOrCreateTerm( { name: termName } )
+			)
+		)
+			.then( ( newTerms ) => {
+				const newAvailableTerms = availableTerms.concat( newTerms );
+				return onUpdateTerms(
+					termNamesToIds( uniqueTerms, newAvailableTerms )
+				);
+			} )
+			.catch( ( error ) => {
+				createErrorNotice( error.message, {
+					type: 'snackbar',
+				} );
+			} );
+	}
+
+	const singularName =
+		taxonomy?.labels?.singular_name ??
+		( slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' ) );
+	const termAddedLabel = sprintf(
+		/* translators: %s: term name. */
+		_x( '%s added', 'term' ),
+		singularName
+	);
+	const termRemovedLabel = sprintf(
+		/* translators: %s: term name. */
+		_x( '%s removed', 'term' ),
+		singularName
+	);
+	const removeTermLabel = sprintf(
+		/* translators: %s: term name. */
+		_x( 'Remove %s', 'term' ),
+		singularName
+	);
+
+	return (
+		<PanelRow initialOpen={ true } title={ __( 'Categories' ) }>
+			<FormTokenField
+				__next40pxDefaultSize
+				value={ values }
+				suggestions={ suggestions }
+				onChange={ onChange }
+				onInputChange={ debouncedSearch }
+				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
+				label={ __( 'Pattern categories' ) }
+				messages={ {
+					added: termAddedLabel,
+					removed: termRemovedLabel,
+					remove: removeTermLabel,
+				} }
+				tokenizeOnBlur
+			/>
+		</PanelRow>
+	);
+}

package/src/components/sidebar-navigation-screen/index.js

@@ -41,10 +41,11 @@ export default function SidebarNavigationScreen( {
 	description,
 	backPath: backPathProp,
 } ) {
-	const { dashboardLink } = useSelect( ( select ) => {
+	const { dashboardLink, dashboardLinkText } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		return {
 			dashboardLink: getSettings().__experimentalDashboardLink,
+			dashboardLinkText: getSettings().__experimentalDashboardLinkText,
 		};
 	}, [] );
 	const { getTheme } = useSelect( coreStore );
@@ -92,15 +93,9 @@ export default function SidebarNavigationScreen( {
 						<SidebarButton
 							icon={ icon }
 							label={
-								! isPreviewingTheme()
-									? __( 'Go to the Dashboard' )
-									: __( 'Go back to the theme showcase' )
-							}
-							href={
-								! isPreviewingTheme()
-									? dashboardLink || 'index.php'
-									: 'themes.php'
+								dashboardLinkText || __( 'Go to the Dashboard' )
 							}
+							href={ dashboardLink || 'index.php' }
 						/>
 					) }
 					<Heading

package/src/components/sidebar-navigation-screen/style.scss

@@ -109,10 +109,15 @@
 	&.is-dismissible {
 		padding-right: $grid-unit-10;
 	}
+
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]) {
+		color: $gray-400;
+	}
+
 	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus,
 	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
 	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
-		color: $gray-100;
+		color: $white;
 	}
 }
 
@@ -134,6 +139,7 @@
 	.components-input-control__input {
 		color: $gray-200 !important;
 		background: $gray-800 !important;
+		border-radius: $radius-block-ui;
 	}
 	.components-input-control__backdrop {
 		border: 4px !important;

package/src/components/sidebar-navigation-screen-details-footer/index.js

@@ -4,6 +4,12 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+import {
+	Icon,
+	__experimentalItemGroup as ItemGroup,
+} from '@wordpress/components';
+import { backup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -13,14 +19,34 @@ import {
 	SidebarNavigationScreenDetailsPanelLabel,
 	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
+import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenDetailsFooter( {
-	lastModifiedDateTime,
+	record,
+	...otherProps
 } ) {
+	/*
+	 * There might be other items in the future,
+	 * but for now it's just modified date.
+	 * Later we might render a list of items and isolate
+	 * the following logic.
+	 */
+	const hrefProps = {};
+	if ( record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ) {
+		hrefProps.href = addQueryArgs( 'revision.php', {
+			revision: record?._links[ 'predecessor-version' ][ 0 ].id,
+		} );
+		hrefProps.as = 'a';
+	}
+
 	return (
-		<>
-			{ lastModifiedDateTime && (
-				<SidebarNavigationScreenDetailsPanelRow className="edit-site-sidebar-navigation-screen-details-footer">
+		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
+			<SidebarNavigationItem
+				label={ __( 'Revisions' ) }
+				{ ...hrefProps }
+				{ ...otherProps }
+			>
+				<SidebarNavigationScreenDetailsPanelRow justify="space-between">
 					<SidebarNavigationScreenDetailsPanelLabel>
 						{ __( 'Last modified' ) }
 					</SidebarNavigationScreenDetailsPanelLabel>
@@ -29,17 +55,19 @@ export default function SidebarNavigationScreenDetailsFooter( {
 							sprintf(
 								/* translators: %s: is the relative time when the post was last modified. */
 								__( '<time>%s</time>' ),
-								humanTimeDiff( lastModifiedDateTime )
+								humanTimeDiff( record.modified )
 							),
 							{
-								time: (
-									<time dateTime={ lastModifiedDateTime } />
-								),
+								time: <time dateTime={ record.modified } />,
 							}
 						) }
 					</SidebarNavigationScreenDetailsPanelValue>
+					<Icon
+						className="edit-site-sidebar-navigation-screen-details-footer__icon"
+						icon={ backup }
+					/>
 				</SidebarNavigationScreenDetailsPanelRow>
-			) }
-		</>
+			</SidebarNavigationItem>
+		</ItemGroup>
 	);
 }

package/src/components/sidebar-navigation-screen-details-footer/style.scss

@@ -1,5 +1,12 @@
 .edit-site-sidebar-navigation-screen-details-footer {
-	padding-top: $grid-unit-10;
-	padding-bottom: $grid-unit-10;
-	padding-left: $grid-unit-20;
+	// Default background color (no link or button).
+	div.edit-site-sidebar-navigation-item.components-item:focus,
+	div.edit-site-sidebar-navigation-item.components-item:hover,
+	div.edit-site-sidebar-navigation-item.components-item[aria-current] {
+		background: none;
+	}
+	.edit-site-sidebar-navigation-screen-details-footer__icon {
+		margin-left: auto;
+		fill: $gray-600;
+	}
 }

package/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js

@@ -12,6 +12,7 @@ export default function SidebarNavigationScreenDetailsPanelRow( {
 	label,
 	children,
 	className,
+	...extraProps
 } ) {
 	return (
 		<HStack
@@ -22,6 +23,7 @@ export default function SidebarNavigationScreenDetailsPanelRow( {
 				'edit-site-sidebar-navigation-details-screen-panel__row',
 				className
 			) }
+			{ ...extraProps }
 		>
 			{ children }
 		</HStack>

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -2,18 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { backup, edit, seen } from '@wordpress/icons';
+import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	Icon,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalVStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
-import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
 
 /**
@@ -27,6 +21,7 @@ import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
 const noop = () => {};
 
@@ -88,39 +83,6 @@ function SidebarNavigationScreenGlobalStylesContent() {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesFooter( {
-	modifiedDateTime,
-	onClickRevisions,
-} ) {
-	return (
-		<VStack className="edit-site-sidebar-navigation-screen-global-styles__footer">
-			<SidebarNavigationItem
-				className="edit-site-sidebar-navigation-screen-global-styles__revisions"
-				label={ __( 'Revisions' ) }
-				onClick={ onClickRevisions }
-			>
-				<HStack
-					as="span"
-					alignment="center"
-					spacing={ 5 }
-					direction="row"
-					justify="space-between"
-				>
-					<span className="edit-site-sidebar-navigation-screen-global-styles__revisions__label">
-						{ __( 'Last modified' ) }
-					</span>
-					<span>
-						<time dateTime={ modifiedDateTime }>
-							{ humanTimeDiff( modifiedDateTime ) }
-						</time>
-					</span>
-					<Icon icon={ backup } style={ { fill: 'currentcolor' } } />
-				</HStack>
-			</SidebarNavigationItem>
-		</VStack>
-	);
-}
-
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
@@ -198,9 +160,9 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
 					shouldShowGlobalStylesFooter && (
-						<SidebarNavigationScreenGlobalStylesFooter
-							modifiedDateTime={ modifiedDateTime }
-							onClickRevisions={ openRevisions }
+						<SidebarNavigationScreenDetailsFooter
+							record={ revisions?.[ 0 ] }
+							onClick={ openRevisions }
 						/>
 					)
 				}

package/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js

@@ -8,11 +8,12 @@ import { pencil } from '@wordpress/icons';
  */
 import SidebarButton from '../sidebar-button';
 import { useLink } from '../routes/link';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
 export default function EditButton( { postId } ) {
 	const linkInfo = useLink( {
 		postId,
-		postType: 'wp_navigation',
+		postType: NAVIGATION_POST_TYPE,
 		canvas: 'edit',
 	} );
 	return (

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -6,10 +6,12 @@ import { __experimentalUseNavigator as useNavigator } from '@wordpress/component
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+
 /**
  * Internal dependencies
  */
 import { postType } from '.';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
 function useDeleteNavigationMenu() {
 	const { goTo } = useNavigator();
@@ -82,7 +84,7 @@ function useSaveNavigationMenu() {
 		// Prepare for revert in case of error.
 		const originalRecord = getEditedEntityRecord(
 			'postType',
-			'wp_navigation',
+			NAVIGATION_POST_TYPE,
 			postId
 		);
 

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -22,6 +22,7 @@ import { useLink } from '../routes/link';
 import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
 import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
 import { unlock } from '../../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
@@ -52,7 +53,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		hasResolved: hasResolvedNavigationMenus,
 	} = useEntityRecords(
 		'postType',
-		`wp_navigation`,
+		NAVIGATION_POST_TYPE,
 		PRELOADED_NAVIGATION_MENUS_QUERY
 	);
 
@@ -151,7 +152,7 @@ export function SidebarNavigationScreenWrapper( {
 const NavMenuItem = ( { postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postId,
-		postType: 'wp_navigation',
+		postType: NAVIGATION_POST_TYPE,
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -90,10 +90,6 @@
 	}
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
-	display: none;
-}
-
 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
 	margin-left: auto;
 	margin-right: auto;

package/src/components/sidebar-navigation-screen-page/index.js

@@ -124,9 +124,9 @@ export default function SidebarNavigationScreenPage() {
 				</>
 			}
 			footer={
-				<SidebarNavigationScreenDetailsFooter
-					lastModifiedDateTime={ record?.modified }
-				/>
+				record?.modified ? (
+					<SidebarNavigationScreenDetailsFooter record={ record } />
+				) : null
 			}
 		/>
 	) : null;

package/src/components/sidebar-navigation-screen-page/page-details.js

@@ -21,6 +21,7 @@ import {
 	SidebarNavigationScreenDetailsPanelLabel,
 	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 // Taken from packages/editor/src/components/time-to-read/index.js.
 const AVERAGE_READING_RATE = 189;
@@ -106,7 +107,7 @@ export default function PageDetails( { id } ) {
 			const postContext = getEditedPostContext();
 			const templates = select( coreStore ).getEntityRecords(
 				'postType',
-				'wp_template',
+				TEMPLATE_POST_TYPE,
 				{ per_page: -1 }
 			);
 			// Template title.

package/src/components/sidebar-navigation-screen-pages/index.js

@@ -24,6 +24,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import SidebarButton from '../sidebar-button';
 import AddNewPageModal from '../add-new-page';
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -50,7 +51,7 @@ export default function SidebarNavigationScreenPages() {
 		}
 	);
 	const { records: templates, isResolving: isLoadingTemplates } =
-		useEntityRecords( 'postType', 'wp_template', {
+		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
 		} );
 
@@ -130,7 +131,7 @@ export default function SidebarNavigationScreenPages() {
 
 		return {
 			icon: itemIcon,
-			postType: postsPageTemplateId ? 'wp_template' : 'page',
+			postType: postsPageTemplateId ? TEMPLATE_POST_TYPE : 'page',
 			postId: postsPageTemplateId || id,
 		};
 	};
@@ -167,7 +168,7 @@ export default function SidebarNavigationScreenPages() {
 								) }
 								{ isHomePageBlog && homeTemplate && (
 									<PageItem
-										postType="wp_template"
+										postType={ TEMPLATE_POST_TYPE }
 										postId={ homeTemplate.id }
 										key={ homeTemplate.id }
 										icon={ home }
@@ -203,7 +204,7 @@ export default function SidebarNavigationScreenPages() {
 					<VStack spacing={ 0 }>
 						{ dynamicPageTemplates?.map( ( item ) => (
 							<PageItem
-								postType="wp_template"
+								postType={ TEMPLATE_POST_TYPE }
 								postId={ item.id }
 								key={ item.id }
 								icon={ layout }