@wordpress/edit-site 5.18.0 → 5.19.0

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

@@ -2,11 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { PanelRow, PanelBody } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { __ } from '@wordpress/i18n';
 import { navigation, symbol } from '@wordpress/icons';
 
 /**
@@ -17,6 +16,8 @@ import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
 import LastRevision from './last-revision';
 import SidebarCard from '../sidebar-card';
+import PatternCategories from './pattern-categories';
+import { PATTERN_TYPES } from '../../../utils/constants';
 
 const CARD_ICONS = {
 	wp_block: symbol,
@@ -24,24 +25,29 @@ const CARD_ICONS = {
 };
 
 export default function TemplatePanel() {
-	const { title, description, icon, record } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
+	const { title, description, icon, record, postType } = useSelect(
+		( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo: getTemplateInfo } =
+				select( editorStore );
 
-		const postType = getEditedPostType();
-		const postId = getEditedPostId();
-		const _record = getEditedEntityRecord( 'postType', postType, postId );
-		const info = getTemplateInfo( _record );
+			const type = getEditedPostType();
+			const postId = getEditedPostId();
+			const _record = getEditedEntityRecord( 'postType', type, postId );
+			const info = getTemplateInfo( _record );
 
-		return {
-			title: info.title,
-			description: info.description,
-			icon: info.icon,
-			record: _record,
-		};
-	}, [] );
+			return {
+				title: info.title,
+				description: info.description,
+				icon: info.icon,
+				record: _record,
+				postType: type,
+			};
+		},
+		[]
+	);
 
 	if ( ! title && ! description ) {
 		return null;
@@ -58,12 +64,10 @@ export default function TemplatePanel() {
 			>
 				<TemplateAreas />
 			</SidebarCard>
-			<PanelRow
-				header={ __( 'Editing history' ) }
-				className="edit-site-template-revisions"
-			>
-				<LastRevision />
-			</PanelRow>
+			<LastRevision />
+			{ postType === PATTERN_TYPES.user && (
+				<PatternCategories post={ record } />
+			) }
 		</PanelBody>
 	);
 }

package/src/components/sidebar-edit-mode/template-panel/last-revision.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import { sprintf, _n } from '@wordpress/i18n';
+import { Button, PanelRow } from '@wordpress/components';
+import { sprintf, _n, __ } from '@wordpress/i18n';
 import { backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { PostTypeSupportCheck } from '@wordpress/editor';
@@ -47,20 +47,24 @@ const PostLastRevision = () => {
 
 	return (
 		<PostLastRevisionCheck>
-			<Button
-				href={ addQueryArgs( 'revision.php', {
-					revision: lastRevisionId,
-					gutenberg: true,
-				} ) }
-				className="edit-site-template-last-revision__title"
-				icon={ backup }
+			<PanelRow
+				header={ __( 'Editing history' ) }
+				className="edit-site-template-revisions"
 			>
-				{ sprintf(
-					/* translators: %d: number of revisions */
-					_n( '%d Revision', '%d Revisions', revisionsCount ),
-					revisionsCount
-				) }
-			</Button>
+				<Button
+					href={ addQueryArgs( 'revision.php', {
+						revision: lastRevisionId,
+					} ) }
+					className="edit-site-template-last-revision__title"
+					icon={ backup }
+				>
+					{ sprintf(
+						/* translators: %d: number of revisions */
+						_n( '%d Revision', '%d Revisions', revisionsCount ),
+						revisionsCount
+					) }
+				</Button>
+			</PanelRow>
 		</PostLastRevisionCheck>
 	);
 };

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

@@ -0,0 +1,270 @@
+/**
+ * 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';
+
+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 } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	if ( ! hasAssignAction ) {
+		return null;
+	}
+
+	async function findOrCreateTerm( term ) {
+		try {
+			const newTerm = await saveEntityRecord( 'taxonomy', slug, term, {
+				throwOnError: true,
+			} );
+			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', 'wp_block', 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-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;