@wordpress/edit-site 5.31.0 → 5.33.0

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

@@ -1,13 +1,22 @@
 /**
- * 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
  */
 import {
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
 	PATTERN_TYPES,
@@ -20,59 +29,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 ) =>
@@ -93,6 +49,7 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
  */
 export const searchItems = ( items = [], searchInput = '', config = {} ) => {
 	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
+
 	// Filter patterns by category: the default category indicates that all patterns will be shown.
 	const onlyFilterByCategory =
 		config.categoryId !== PATTERN_DEFAULT_CATEGORY &&
@@ -145,6 +102,7 @@ function getItemSearchRank( item, searchTerm, config ) {
 
 	let rank =
 		categoryId === PATTERN_DEFAULT_CATEGORY ||
+		categoryId === TEMPLATE_PART_ALL_AREAS_CATEGORY ||
 		( categoryId === PATTERN_USER_CATEGORY &&
 			item.type === PATTERN_TYPES.user ) ||
 		hasCategory( item, categoryId )
@@ -162,8 +120,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-patterns/style.scss

@@ -43,12 +43,6 @@
 }
 
 .edit-site-page-patterns-dataviews {
-	margin-top: 60px;
-
-	@include break-medium {
-		margin-top: 0;
-	}
-
 	.page-patterns-preview-field {
 		display: flex;
 		flex-direction: column;
@@ -111,6 +105,13 @@
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
 	}
+
+	.dataviews-view-grid__badge-fields {
+		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
+			background: rgba(var(--wp-block-synced-color--rgb), 0.04);
+			color: var(--wp-block-synced-color);
+		}
+	}
 }
 
 .dataviews-action-modal__duplicate-pattern {

package/src/components/page-patterns/use-patterns.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
 import { parse } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, createSelector } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -45,6 +40,7 @@ const templatePartToPattern = ( templatePart ) => ( {
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	title: decodeEntities( templatePart.title.rendered ),
 	type: templatePart.type,
+	_links: templatePart._links,
 	templatePart,
 } );
 

package/src/components/page-templates-template-parts/add-new-template-part.js

@@ -4,7 +4,7 @@
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useState, memo } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 
 /**
@@ -17,7 +17,7 @@ import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export default function AddNewTemplatePart() {
+function AddNewTemplatePart() {
 	const { canCreate, postType } = useSelect( ( select ) => {
 		const { supportsTemplatePartsMode } =
 			select( editSiteStore ).getSettings();
@@ -58,3 +58,5 @@ export default function AddNewTemplatePart() {
 		</>
 	);
 }
+
+export default memo( AddNewTemplatePart );

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,40 +21,33 @@ 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
  */
+import { Async } from '../async';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
 import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
 	ENUMERATION_TYPE,
 	OPERATOR_IS_ANY,
-	OPERATOR_IS_NONE,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
 } from '../../utils/constants';
-import {
-	useResetTemplateAction,
-	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 +62,7 @@ const defaultConfigPerViewType = {
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
+		columnFields: [ 'description' ],
 	},
 	[ LAYOUT_LIST ]: {
 		primaryField: 'title',
@@ -78,7 +71,7 @@ const defaultConfigPerViewType = {
 };
 
 const DEFAULT_VIEW = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_GRID,
 	search: '',
 	page: 1,
 	perPage: 20,
@@ -89,14 +82,10 @@ const DEFAULT_VIEW = {
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'preview' ],
-	layout: defaultConfigPerViewType[ LAYOUT_TABLE ],
+	layout: defaultConfigPerViewType[ LAYOUT_GRID ],
 	filters: [],
 };
 
-function normalizeSearchInput( input = '' ) {
-	return removeAccents( input.trim().toLowerCase() );
-}
-
 function Title( { item, viewType } ) {
 	if ( viewType === LAYOUT_LIST ) {
 		return decodeEntities( item.title?.rendered ) || __( '(no title)' );
@@ -108,11 +97,6 @@ function Title( { item, viewType } ) {
 			canvas: 'edit',
 		},
 	};
-	if ( item.type === TEMPLATE_PART_POST_TYPE ) {
-		linkProps.state = {
-			backPath: '/wp_template_part/all',
-		};
-	}
 	return (
 		<Link { ...linkProps }>
 			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
@@ -148,7 +132,7 @@ function AuthorField( { item, viewType } ) {
 					<Icon icon={ icon } />
 				</div>
 			) }
-			<span>{ text }</span>
+			<span className="page-templates-author-field__name">{ text }</span>
 		</HStack>
 	);
 }
@@ -180,7 +164,9 @@ function Preview( { item, viewType } ) {
 				style={ { backgroundColor } }
 			>
 				{ viewType === LAYOUT_LIST && ! isEmpty && (
-					<BlockPreview blocks={ blocks } />
+					<Async>
+						<BlockPreview blocks={ blocks } />
+					</Async>
 				) }
 				{ viewType !== LAYOUT_LIST && (
 					<button
@@ -193,7 +179,11 @@ function Preview( { item, viewType } ) {
 							( item.type === TEMPLATE_POST_TYPE
 								? __( 'Empty template' )
 								: __( 'Empty template part' ) ) }
-						{ ! isEmpty && <BlockPreview blocks={ blocks } /> }
+						{ ! isEmpty && (
+							<Async>
+								<BlockPreview blocks={ blocks } />
+							</Async>
+						) }
 					</button>
 				) }
 			</div>
@@ -201,6 +191,14 @@ function Preview( { item, viewType } ) {
 	);
 }
 
+const TEMPLATE_ACTIONS = [
+	'edit-post',
+	'reset-template',
+	'rename-template',
+	'view-post-revisions',
+	'delete-template',
+];
+
 export default function PageTemplatesTemplateParts( { postType } ) {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
@@ -297,6 +295,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				),
 				maxWidth: 400,
 				enableHiding: false,
+				enableGlobalSearch: true,
 			},
 		];
 		if ( postType === TEMPLATE_POST_TYPE ) {
@@ -324,6 +323,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,79 +343,25 @@ 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 actions = useMemo(
-		() => [
-			resetTemplateAction,
-			renameTemplateAction,
-			postRevisionsAction,
-			deleteTemplateAction,
-		],
-		[ resetTemplateAction ]
+	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 actions = usePostActions( onActionPerformed, TEMPLATE_ACTIONS );
+
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {
@@ -447,11 +393,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 			}
 			actions={
 				postType === TEMPLATE_POST_TYPE ? (
-					<AddNewTemplate
-						templateType={ postType }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
+					<AddNewTemplate />
 				) : (
 					<AddNewTemplatePart />
 				)
@@ -466,7 +408,6 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				view={ view }
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
-				deferredRendering={ ! 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/pattern-modal/duplicate.js

@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { getQueryArgs } from '@wordpress/url';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -17,6 +17,7 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { DuplicatePatternModal } = unlock( patternsPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function PatternDuplicateModal() {
 	const { record } = useEditedEntityRecord();

package/src/components/pattern-modal/rename.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@ import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { RenamePatternModal } = unlock( patternsPrivateApis );
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function PatternRenameModal() {
 	const { record: pattern } = useEditedEntityRecord();

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;
 
 /**

package/src/components/{template-actions/rename-menu-item.js → rename-post-menu-item/index.js}

@@ -21,8 +21,10 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
-export default function RenameMenuItem( { template, onClose } ) {
-	const title = decodeEntities( template.title.rendered );
+export default function RenamePostMenuItem( { post } ) {
+	const title = decodeEntities(
+		typeof post.title === 'string' ? post.title : post.title.rendered
+	);
 	const [ editedTitle, setEditedTitle ] = useState( title );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
@@ -33,53 +35,46 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( template.type === TEMPLATE_POST_TYPE && ! template.is_custom ) {
+	if ( post.type === TEMPLATE_POST_TYPE && ! post.is_custom ) {
 		return null;
 	}
 
-	async function onTemplateRename( event ) {
+	async function onRename( event ) {
 		event.preventDefault();
 
+		if ( editedTitle === title ) {
+			return;
+		}
+
 		try {
-			await editEntityRecord( 'postType', template.type, template.id, {
+			await editEntityRecord( 'postType', post.type, post.id, {
 				title: editedTitle,
 			} );
 
 			// Update state before saving rerenders the list.
 			setEditedTitle( '' );
 			setIsModalOpen( false );
-			onClose();
 
 			// Persist edited entity.
 			await saveSpecifiedEntityEdits(
 				'postType',
-				template.type,
-				template.id,
+				post.type,
+				post.id,
 				[ 'title' ], // Only save title to avoid persisting other edits.
 				{
 					throwOnError: true,
 				}
 			);
 
-			createSuccessNotice(
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'Template renamed.' )
-					: __( 'Template part renamed.' ),
-				{
-					type: 'snackbar',
-				}
-			);
+			createSuccessNotice( __( 'Name updated.' ), {
+				id: 'template-update',
+				type: 'snackbar',
+			} );
 		} catch ( error ) {
-			const fallbackErrorMessage =
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'An error occurred while renaming the template.' )
-					: __(
-							'An error occurred while renaming the template part.'
-					  );
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: fallbackErrorMessage;
+					: __( 'An error occurred while updating the name.' );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
@@ -102,8 +97,9 @@ export default function RenameMenuItem( { template, onClose } ) {
 						setIsModalOpen( false );
 					} }
 					overlayClassName="edit-site-list__rename-modal"
+					focusOnMount="firstContentElement"
 				>
-					<form onSubmit={ onTemplateRename }>
+					<form onSubmit={ onRename }>
 						<VStack spacing="5">
 							<TextControl
 								__nextHasNoMarginBottom

package/src/components/resizable-frame/index.js

@@ -302,16 +302,12 @@ function ResizableFrame( {
 			} ) }
 			showHandle={ false } // Do not show the default handle, as we're using a custom one.
 		>
-			<motion.div
+			<div
 				className="edit-site-resizable-frame__inner-content"
-				animate={ {
-					borderRadius: isFullWidth ? 0 : 8,
-				} }
-				transition={ FRAME_TRANSITION }
 				style={ innerContentStyle }
 			>
 				{ children }
-			</motion.div>
+			</div>
 		</ResizableBox>
 	);
 }