@wordpress/edit-site 5.31.0 → 5.32.0

package/src/components/page-patterns/search-items.js

@@ -1,8 +1,16 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import removeAccents from 'remove-accents';
-import { noCase } from 'change-case';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { extractWords, getNormalizedSearchTerms, normalizeString } = unlock(
+	blockEditorPrivateApis
+);
 
 /**
  * Internal dependencies
@@ -20,59 +28,6 @@ const defaultGetDescription = ( item ) => item.description || '';
 const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultHasCategory = () => false;
 
-/**
- * Extracts words from an input string.
- *
- * @param {string} input The input string.
- *
- * @return {Array} Words, extracted from the input string.
- */
-function extractWords( input = '' ) {
-	return noCase( input, {
-		splitRegexp: [
-			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
-			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
-		],
-		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
-	} )
-		.split( ' ' )
-		.filter( Boolean );
-}
-
-/**
- * Sanitizes the search input string.
- *
- * @param {string} input The search input to normalize.
- *
- * @return {string} The normalized search input.
- */
-function normalizeSearchInput( input = '' ) {
-	// Disregard diacritics.
-	//  Input: "média"
-	input = removeAccents( input );
-
-	// Accommodate leading slash, matching autocomplete expectations.
-	//  Input: "/media"
-	input = input.replace( /^\//, '' );
-
-	// Lowercase.
-	//  Input: "MEDIA"
-	input = input.toLowerCase();
-
-	return input;
-}
-
-/**
- * Converts the search term into a list of normalized terms.
- *
- * @param {string} input The search term to normalize.
- *
- * @return {string[]} The normalized list of search terms.
- */
-export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
-};
-
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
 	return unmatchedTerms.filter(
 		( term ) =>
@@ -162,8 +117,8 @@ function getItemSearchRank( item, searchTerm, config ) {
 	const description = getDescription( item );
 	const keywords = getKeywords( item );
 
-	const normalizedSearchInput = normalizeSearchInput( searchTerm );
-	const normalizedTitle = normalizeSearchInput( title );
+	const normalizedSearchInput = normalizeString( searchTerm );
+	const normalizedTitle = normalizeString( title );
 
 	// Prefers exact matches
 	// Then prefers if the beginning of the title matches the search term

package/src/components/page-templates-template-parts/actions.js

@@ -1,10 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { backup, trash } from '@wordpress/icons';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { useMemo, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -25,95 +24,106 @@ import isTemplateRevertable from '../../utils/is-template-revertable';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
-export function useResetTemplateAction() {
-	const { revertTemplate } = useDispatch( editSiteStore );
-	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-	return useMemo(
-		() => ( {
-			id: 'reset-template',
-			label: __( 'Reset' ),
-			isPrimary: true,
-			icon: backup,
-			isEligible: isTemplateRevertable,
-			supportsBulk: true,
-			async callback( templates ) {
-				try {
-					for ( const template of templates ) {
-						await revertTemplate( template, {
-							allowUndo: false,
-						} );
-						await saveEditedEntityRecord(
-							'postType',
-							template.type,
-							template.id
-						);
-					}
-
-					createSuccessNotice(
-						templates.length > 1
-							? sprintf(
-									/* translators: The number of items. */
-									__( '%s items reverted.' ),
-									templates.length
-							  )
-							: sprintf(
-									/* translators: The template/part's name. */
-									__( '"%s" reverted.' ),
-									decodeEntities(
-										templates[ 0 ].title.rendered
-									)
-							  ),
-						{
-							type: 'snackbar',
-							id: 'edit-site-template-reverted',
-						}
+export const resetTemplateAction = {
+	id: 'reset-template',
+	label: __( 'Clear customizations' ),
+	isEligible: isTemplateRevertable,
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onPerform } ) => {
+		const { revertTemplate } = useDispatch( editSiteStore );
+		const { saveEditedEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const onConfirm = async () => {
+			try {
+				for ( const template of items ) {
+					await revertTemplate( template, {
+						allowUndo: false,
+					} );
+					await saveEditedEntityRecord(
+						'postType',
+						template.type,
+						template.id
 					);
-				} catch ( error ) {
-					let fallbackErrorMessage;
-					if ( templates[ 0 ].type === TEMPLATE_POST_TYPE ) {
-						fallbackErrorMessage =
-							templates.length === 1
-								? __(
-										'An error occurred while reverting the template.'
-								  )
-								: __(
-										'An error occurred while reverting the templates.'
-								  );
-					} else {
-						fallbackErrorMessage =
-							templates.length === 1
-								? __(
-										'An error occurred while reverting the template part.'
-								  )
-								: __(
-										'An error occurred while reverting the template parts.'
-								  );
-					}
-					const errorMessage =
-						error.message && error.code !== 'unknown_error'
-							? error.message
-							: fallbackErrorMessage;
+				}
 
-					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				createSuccessNotice(
+					items.length > 1
+						? sprintf(
+								/* translators: The number of items. */
+								__( '%s items reverted.' ),
+								items.length
+						  )
+						: sprintf(
+								/* translators: The template/part's name. */
+								__( '"%s" reverted.' ),
+								decodeEntities( items[ 0 ].title.rendered )
+						  ),
+					{
+						type: 'snackbar',
+						id: 'edit-site-template-reverted',
+					}
+				);
+			} catch ( error ) {
+				let fallbackErrorMessage;
+				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template.'
+							  )
+							: __(
+									'An error occurred while reverting the templates.'
+							  );
+				} else {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template part.'
+							  )
+							: __(
+									'An error occurred while reverting the template parts.'
+							  );
 				}
-			},
-		} ),
-		[
-			createErrorNotice,
-			createSuccessNotice,
-			revertTemplate,
-			saveEditedEntityRecord,
-		]
-	);
-}
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: fallbackErrorMessage;
+
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		};
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ __(
+						'Are you sure you want to clear these customizations?'
+					) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							await onConfirm( items );
+							onPerform?.();
+							closeModal();
+						} }
+					>
+						{ __( 'Clear' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
 
 export const deleteTemplateAction = {
 	id: 'delete-template',
 	label: __( 'Delete' ),
-	isPrimary: true,
-	icon: trash,
 	isEligible: isTemplateRemovable,
 	supportsBulk: true,
 	hideModalHeader: true,
@@ -150,9 +160,7 @@ export const deleteTemplateAction = {
 							await removeTemplates( templates, {
 								allowUndo: false,
 							} );
-							if ( onPerform ) {
-								onPerform();
-							}
+							onPerform?.();
 							closeModal();
 						} }
 					>
@@ -212,8 +220,6 @@ export const renameTemplateAction = {
 						throwOnError: true,
 					}
 				);
-				// TODO: this action will be reused in template parts list, so
-				// let's keep this for a bit, even it's always a `template` now.
 				createSuccessNotice(
 					template.type === TEMPLATE_POST_TYPE
 						? __( 'Template renamed.' )
@@ -242,16 +248,25 @@ export const renameTemplateAction = {
 				<VStack spacing="5">
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Name' ) }
 						value={ editedTitle }
 						onChange={ setEditedTitle }
 						required
 					/>
 					<HStack justify="right">
-						<Button variant="tertiary" onClick={ closeModal }>
+						<Button
+							variant="tertiary"
+							onClick={ closeModal }
+							__next40pxDefaultSize
+						>
 							{ __( 'Cancel' ) }
 						</Button>
-						<Button variant="primary" type="submit">
+						<Button
+							variant="primary"
+							type="submit"
+							__next40pxDefaultSize
+						>
 							{ __( 'Save' ) }
 						</Button>
 					</HStack>

package/src/components/page-templates-template-parts/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -22,12 +21,9 @@ import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import {
-	DataViews,
-	sortByTextFields,
-	getPaginationResults,
-} from '@wordpress/dataviews';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -41,21 +37,21 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	ENUMERATION_TYPE,
 	OPERATOR_IS_ANY,
-	OPERATOR_IS_NONE,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
 } from '../../utils/constants';
 import {
-	useResetTemplateAction,
+	resetTemplateAction,
 	deleteTemplateAction,
 	renameTemplateAction,
 } from './actions';
-import { postRevisionsAction } from '../actions';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import AddNewTemplatePart from './add-new-template-part';
 
+const { usePostActions } = unlock( editorPrivateApis );
+
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
@@ -70,6 +66,7 @@ const defaultConfigPerViewType = {
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
+		displayAsColumnFields: [ 'description' ],
 	},
 	[ LAYOUT_LIST ]: {
 		primaryField: 'title',
@@ -93,10 +90,6 @@ const DEFAULT_VIEW = {
 	filters: [],
 };
 
-function normalizeSearchInput( input = '' ) {
-	return removeAccents( input.trim().toLowerCase() );
-}
-
 function Title( { item, viewType } ) {
 	if ( viewType === LAYOUT_LIST ) {
 		return decodeEntities( item.title?.rendered ) || __( '(no title)' );
@@ -148,7 +141,7 @@ function AuthorField( { item, viewType } ) {
 					<Icon icon={ icon } />
 				</div>
 			) }
-			<span>{ text }</span>
+			<span className="page-templates-author-field__name">{ text }</span>
 		</HStack>
 	);
 }
@@ -297,6 +290,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				),
 				maxWidth: 400,
 				enableHiding: false,
+				enableGlobalSearch: true,
 			},
 		];
 		if ( postType === TEMPLATE_POST_TYPE ) {
@@ -324,6 +318,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				maxWidth: 400,
 				minWidth: 320,
 				enableSorting: false,
+				enableGlobalSearch: true,
 			} );
 		}
 		// TODO: The plan is to support fields reordering, which would require an API like `order` or something
@@ -343,77 +338,35 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 	}, [ postType, authors, view.type ] );
 
 	const { data, paginationInfo } = useMemo( () => {
-		if ( ! records ) {
-			return {
-				data: EMPTY_ARRAY,
-				paginationInfo: { totalItems: 0, totalPages: 0 },
-			};
-		}
-		let filteredData = [ ...records ];
-		// Handle global search.
-		if ( view.search ) {
-			const normalizedSearch = normalizeSearchInput( view.search );
-			filteredData = filteredData.filter( ( item ) => {
-				const title = item.title?.rendered || item.slug;
-				return (
-					normalizeSearchInput( title ).includes(
-						normalizedSearch
-					) ||
-					normalizeSearchInput( item.description ).includes(
-						normalizedSearch
-					)
-				);
-			} );
-		}
-
-		// Handle filters.
-		if ( view.filters.length > 0 ) {
-			view.filters.forEach( ( filter ) => {
-				if (
-					filter.field === 'author' &&
-					filter.operator === OPERATOR_IS_ANY &&
-					filter?.value?.length > 0
-				) {
-					filteredData = filteredData.filter( ( item ) => {
-						return filter.value.includes( item.author_text );
-					} );
-				} else if (
-					filter.field === 'author' &&
-					filter.operator === OPERATOR_IS_NONE &&
-					filter?.value?.length > 0
-				) {
-					filteredData = filteredData.filter( ( item ) => {
-						return ! filter.value.includes( item.author_text );
-					} );
-				}
-			} );
-		}
-
-		// Handle sorting.
-		if ( view.sort ) {
-			filteredData = sortByTextFields( {
-				data: filteredData,
-				view,
-				fields,
-				textFields: [ 'title', 'author' ],
-			} );
-		}
-		// Handle pagination.
-		return getPaginationResults( {
-			data: filteredData,
-			view,
-		} );
+		return filterSortAndPaginate( records, view, fields );
 	}, [ records, view, fields ] );
 
-	const resetTemplateAction = useResetTemplateAction();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'edit-post' ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			}
+		},
+		[ history ]
+	);
+	const [ editAction, viewRevisionsAction ] = usePostActions(
+		onActionPerformed,
+		[ 'edit-post', 'view-post-revisions' ]
+	);
 	const actions = useMemo(
 		() => [
+			editAction,
 			resetTemplateAction,
 			renameTemplateAction,
-			postRevisionsAction,
+			viewRevisionsAction,
 			deleteTemplateAction,
 		],
-		[ resetTemplateAction ]
+		[ editAction, viewRevisionsAction ]
 	);
 
 	const onChangeView = useCallback(
@@ -466,7 +419,10 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				view={ view }
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
-				deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) }
+				deferredRendering={
+					view.type === LAYOUT_GRID ||
+					! view.hiddenFields?.includes( 'preview' )
+				}
 			/>
 		</Page>
 	);

package/src/components/page-templates-template-parts/style.scss

@@ -103,6 +103,11 @@
 	}
 }
 
+.page-templates-author-field__name {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
 .edit-site-list__rename-modal {
 	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
 	z-index: z-index(".edit-site-list__rename-modal");

package/src/components/plugin-template-setting-panel/index.js

@@ -5,11 +5,24 @@
 /**
  * WordPress dependencies
  */
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 import { createSlotFill } from '@wordpress/components';
 
 const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' );
 
-const PluginTemplateSettingPanel = Fill;
+const PluginTemplateSettingPanel = ( { children } ) => {
+	const isCurrentEntityTemplate = useSelect(
+		( select ) =>
+			select( editorStore ).getCurrentPostType() === 'wp_template',
+		[]
+	);
+	if ( ! isCurrentEntityTemplate ) {
+		return null;
+	}
+	return <Fill>{ children }</Fill>;
+};
+
 PluginTemplateSettingPanel.Slot = Slot;
 
 /**