@wordpress/edit-site 5.30.0 → 5.32.0

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
@@ -40,22 +36,22 @@ import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	ENUMERATION_TYPE,
-	OPERATOR_IN,
-	OPERATOR_NOT_IN,
+	OPERATOR_IS_ANY,
 	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
 );
@@ -63,10 +59,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
-const SUPPORTED_LAYOUTS = window?.__experimentalAdminViews
-	? [ LAYOUT_TABLE, LAYOUT_GRID, LAYOUT_LIST ]
-	: [ LAYOUT_TABLE, LAYOUT_GRID ];
-
 const defaultConfigPerViewType = {
 	[ LAYOUT_TABLE ]: {
 		primaryField: 'title',
@@ -74,6 +66,7 @@ const defaultConfigPerViewType = {
 	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
+		displayAsColumnFields: [ 'description' ],
 	},
 	[ LAYOUT_LIST ]: {
 		primaryField: 'title',
@@ -97,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)' );
@@ -152,7 +141,7 @@ function AuthorField( { item, viewType } ) {
 					<Icon icon={ icon } />
 				</div>
 			) }
-			<span>{ text }</span>
+			<span className="page-templates-author-field__name">{ text }</span>
 		</HStack>
 	);
 }
@@ -209,9 +198,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
-		const usedType = window?.__experimentalAdminViews
-			? layout ?? DEFAULT_VIEW.type
-			: DEFAULT_VIEW.type;
+		const usedType = layout ?? DEFAULT_VIEW.type;
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
@@ -221,8 +208,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 					? [
 							{
 								field: 'author',
-								operator: 'in',
-								value: activeView,
+								operator: 'isAny',
+								value: [ activeView ],
 							},
 					  ]
 					: [],
@@ -237,8 +224,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 					? [
 							{
 								field: 'author',
-								operator: 'in',
-								value: activeView,
+								operator: OPERATOR_IS_ANY,
+								value: [ activeView ],
 							},
 					  ]
 					: [],
@@ -303,13 +290,13 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				),
 				maxWidth: 400,
 				enableHiding: false,
+				enableGlobalSearch: true,
 			},
 		];
 		if ( postType === TEMPLATE_POST_TYPE ) {
 			_fields.push( {
 				header: __( 'Description' ),
 				id: 'description',
-				getValue: ( { item } ) => item.description,
 				render: ( { item } ) => {
 					return item.description ? (
 						<span className="page-templates-description">
@@ -331,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
@@ -350,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_IN &&
-					!! filter.value
-				) {
-					filteredData = filteredData.filter( ( item ) => {
-						return item.author_text === filter.value;
-					} );
-				} else if (
-					filter.field === 'author' &&
-					filter.operator === OPERATOR_NOT_IN &&
-					!! filter.value
-				) {
-					filteredData = filteredData.filter( ( item ) => {
-						return item.author_text !== filter.value;
-					} );
-				}
-			} );
-		}
-
-		// 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,
-			deleteTemplateAction,
 			renameTemplateAction,
-			postRevisionsAction,
+			viewRevisionsAction,
+			deleteTemplateAction,
 		],
-		[ resetTemplateAction ]
+		[ editAction, viewRevisionsAction ]
 	);
 
 	const onChangeView = useCallback(
@@ -473,8 +419,10 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				view={ view }
 				onChangeView={ onChangeView }
 				onSelectionChange={ onSelectionChange }
-				deferredRendering={ ! view.hiddenFields?.includes( 'preview' ) }
-				supportedLayouts={ SUPPORTED_LAYOUTS }
+				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;
 
 /**

package/src/components/save-button/index.js

@@ -3,9 +3,14 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	useEntitiesSavedStatesIsDirty,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -15,30 +20,30 @@ import {
 	currentlyPreviewingTheme,
 	isPreviewingTheme,
 } from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function SaveButton( {
 	className = 'edit-site-save-button__button',
 	variant = 'primary',
 	showTooltip = true,
-	defaultLabel,
+	showReviewMessage,
 	icon,
 	size,
 	__next40pxDefaultSize = false,
 } ) {
-	const { isDirty, isSaving, isSaveViewOpen, previewingThemeName } =
-		useSelect( ( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-				isResolving,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+	const { params } = useLocation();
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
+	const { dirtyEntityRecords } = useEntitiesSavedStatesIsDirty();
+	const { isSaving, isSaveViewOpen, previewingThemeName } = useSelect(
+		( select ) => {
+			const { isSavingEntityRecord, isResolving } = select( coreStore );
 			const { isSaveViewOpened } = select( editSiteStore );
 			const isActivatingTheme = isResolving( 'activateTheme' );
 			const currentlyPreviewingThemeId = currentlyPreviewingTheme();
-
 			return {
-				isDirty: dirtyEntityRecords.length > 0,
 				isSaving:
 					dirtyEntityRecords.some( ( record ) =>
 						isSavingEntityRecord(
@@ -55,12 +60,26 @@ export default function SaveButton( {
 							?.name?.rendered
 					: undefined,
 			};
-		}, [] );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	const activateSaveEnabled = isPreviewingTheme() || isDirty;
-	const disabled = isSaving || ! activateSaveEnabled;
-
+		},
+		[ dirtyEntityRecords ]
+	);
+	const hasDirtyEntities = !! dirtyEntityRecords.length;
+	let isOnlyCurrentEntityDirty;
+	// Check if the current entity is the only entity with changes.
+	// We have some extra logic for `wp_global_styles` for now, that
+	// is used in navigation sidebar.
+	if ( dirtyEntityRecords.length === 1 ) {
+		if ( params.postId ) {
+			isOnlyCurrentEntityDirty =
+				`${ dirtyEntityRecords[ 0 ].key }` === params.postId &&
+				dirtyEntityRecords[ 0 ].name === params.postType;
+		} else if ( params.path?.includes( 'wp_global_styles' ) ) {
+			isOnlyCurrentEntityDirty =
+				dirtyEntityRecords[ 0 ].name === 'globalStyles';
+		}
+	}
+	const disabled =
+		isSaving || ( ! hasDirtyEntities && ! isPreviewingTheme() );
 	const getLabel = () => {
 		if ( isPreviewingTheme() ) {
 			if ( isSaving ) {
@@ -71,32 +90,42 @@ export default function SaveButton( {
 				);
 			} else if ( disabled ) {
 				return __( 'Saved' );
-			} else if ( isDirty ) {
+			} else if ( hasDirtyEntities ) {
 				return sprintf(
 					/* translators: %s: The name of theme to be activated. */
 					__( 'Activate %s & Save' ),
 					previewingThemeName
 				);
 			}
-
 			return sprintf(
 				/* translators: %s: The name of theme to be activated. */
 				__( 'Activate %s' ),
 				previewingThemeName
 			);
 		}
-
 		if ( isSaving ) {
 			return __( 'Saving' );
-		} else if ( disabled ) {
+		}
+		if ( disabled ) {
 			return __( 'Saved' );
-		} else if ( defaultLabel ) {
-			return defaultLabel;
+		}
+		if ( ! isOnlyCurrentEntityDirty && showReviewMessage ) {
+			return sprintf(
+				// translators: %d: number of unsaved changes (number).
+				_n(
+					'Review %d change…',
+					'Review %d changes…',
+					dirtyEntityRecords.length
+				),
+				dirtyEntityRecords.length
+			);
 		}
 		return __( 'Save' );
 	};
 	const label = getLabel();
-
+	const onClick = isOnlyCurrentEntityDirty
+		? () => saveDirtyEntities( { dirtyEntityRecords } )
+		: () => setIsSaveViewOpened( true );
 	return (
 		<Button
 			variant={ variant }
@@ -104,7 +133,7 @@ export default function SaveButton( {
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
+			onClick={ disabled ? undefined : onClick }
 			label={ label }
 			/*
 			 * We want the tooltip to show the keyboard shortcut only when the