@wordpress/core-data 7.51.0 → 7.52.0

package/src/actions.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 import { v4 as uuid } from 'uuid';
 
 /**
@@ -24,11 +25,71 @@ import {
 	getSyncManager,
 } from './sync';
 import logEntityDeprecation from './utils/log-entity-deprecation';
+import {
+	getRawValue,
+	POST_META_KEY_FOR_CRDT_DOC_PERSISTENCE,
+} from './utils/crdt';
 
 function addTitleToAutoDraft( record ) {
 	return record.status === 'auto-draft' ? { ...record, title: '' } : record;
 }
 
+// Post meta is applied to the CRDT one subkey at a time, so compare the save
+// response at the same granularity to avoid carrying stale sibling values.
+function getServerMutatedMetaFields( updatedMeta, persistedMeta, syncedMeta ) {
+	const baseline = { ...persistedMeta, ...syncedMeta };
+
+	return Object.fromEntries(
+		Object.entries( updatedMeta ?? {} ).filter( ( [ key, value ] ) => {
+			if ( key === POST_META_KEY_FOR_CRDT_DOC_PERSISTENCE ) {
+				// The persisted CRDT snapshot may change on save and is
+				// intentionally excluded from CRDT meta synchronization, so it
+				// is not a server mutation.
+				return false;
+			}
+
+			return ! fastDeepEqual( value, baseline[ key ] );
+		} )
+	);
+}
+
+function getServerMutatedFields(
+	updatedRecord,
+	persistedRecord,
+	syncedChanges
+) {
+	return Object.fromEntries(
+		Object.entries( updatedRecord ).flatMap( ( [ key, value ] ) => {
+			if ( key === 'meta' ) {
+				const serverMutatedMeta = getServerMutatedMetaFields(
+					value,
+					persistedRecord.meta,
+					syncedChanges.meta
+				);
+
+				return Object.keys( serverMutatedMeta ).length
+					? [ [ key, serverMutatedMeta ] ]
+					: [];
+			}
+
+			const baseline =
+				key in syncedChanges
+					? syncedChanges[ key ]
+					: persistedRecord[ key ];
+
+			// The save response nests raw attributes as `{ raw, rendered }`
+			// while the baseline holds raw strings; compare raw values so the
+			// shape difference does not read as a server mutation.
+			const wasServerMutated = ! fastDeepEqual(
+				getRawValue( value ) ?? value,
+				getRawValue( baseline ) ?? baseline
+			);
+
+			return wasServerMutated ? [ [ key, value ] ] : [];
+		} )
+	);
+}
+
 /**
  * Returns an action object used in signalling that authors have been received.
  * Ignored from documentation as it's internal to the data store.
@@ -759,6 +820,23 @@ export const saveEntityRecord =
 						);
 					}
 				} else {
+					// `saveEntityRecord` can be called directly, bypassing
+					// `editEntityRecord`, so make sure its changes enter the
+					// CRDT before the persisted document is created below.
+					if (
+						entityConfig.syncConfig &&
+						! __unstableSkipSyncUpdate &&
+						! isNewRecord &&
+						persistedRecord
+					) {
+						getSyncManager()?.update(
+							`${ kind }/${ name }`,
+							recordId,
+							record,
+							LOCAL_UNDO_IGNORED_ORIGIN
+						);
+					}
+
 					let edits = record;
 					if ( entityConfig.__unstablePrePersist ) {
 						edits = {
@@ -783,12 +861,25 @@ export const saveEntityRecord =
 						edits
 					);
 					if ( entityConfig.syncConfig ) {
+						let syncChanges;
+						if ( __unstableSkipSyncUpdate ) {
+							syncChanges = {};
+						} else if ( isNewRecord || ! persistedRecord ) {
+							syncChanges = updatedRecord;
+						} else {
+							syncChanges = getServerMutatedFields(
+								updatedRecord,
+								persistedRecord,
+								record
+							);
+						}
+
 						// Use an untracked origin so that the save
 						// response does not create undo levels.
 						getSyncManager()?.update(
 							`${ kind }/${ name }`,
 							recordId,
-							__unstableSkipSyncUpdate ? {} : updatedRecord,
+							syncChanges,
 							LOCAL_UNDO_IGNORED_ORIGIN,
 							{ isSave: true }
 						);

package/src/components/entities-saved-states/entity-record-item.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl, PanelRow } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../../name';
+import { getTemplateInfo } from '../../utils/get-template-info';
+
+export default function EntityRecordItem( { record, checked, onChange } ) {
+	const { name, kind, title, key } = record;
+
+	// Handle templates that might use default descriptive titles.
+	const { entityRecordTitle } = useSelect(
+		( select ) => {
+			if ( 'postType' !== kind || 'wp_template' !== name ) {
+				return {
+					entityRecordTitle: title,
+				};
+			}
+
+			const template = select( STORE_NAME ).getEditedEntityRecord(
+				kind,
+				name,
+				key
+			);
+
+			const { default_template_types: templateTypes = [] } =
+				select( STORE_NAME ).getCurrentTheme() ?? {};
+
+			return {
+				entityRecordTitle: getTemplateInfo( {
+					template,
+					templateTypes,
+				} ).title,
+			};
+		},
+		[ name, kind, title, key ]
+	);
+
+	return (
+		<>
+			<PanelRow>
+				<CheckboxControl
+					label={
+						decodeEntities( entityRecordTitle ) || __( 'Untitled' )
+					}
+					checked={ checked }
+					onChange={ onChange }
+					className="entities-saved-states__change-control"
+				/>
+			</PanelRow>
+		</>
+	);
+}

package/src/components/entities-saved-states/entity-type-list.js

@@ -0,0 +1,130 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { getGlobalStylesChanges } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import EntityRecordItem from './entity-record-item';
+import { STORE_NAME } from '../../name';
+
+function getEntityDescription( entity, count ) {
+	switch ( entity ) {
+		case 'site':
+			return 1 === count
+				? __( 'This change will affect your whole site.' )
+				: __( 'These changes will affect your whole site.' );
+		case 'wp_template':
+			return __(
+				'This change will affect other parts of your site that use this template.'
+			);
+		case 'page':
+		case 'post':
+			return __( 'The following has been modified.' );
+	}
+}
+
+function GlobalStylesDescription( { record } ) {
+	const { editedRecord, savedRecord } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getEntityRecord } =
+				select( STORE_NAME );
+			return {
+				editedRecord: getEditedEntityRecord(
+					record.kind,
+					record.name,
+					record.key
+				),
+				savedRecord: getEntityRecord(
+					record.kind,
+					record.name,
+					record.key
+				),
+			};
+		},
+		[ record.kind, record.name, record.key ]
+	);
+
+	const globalStylesChanges = getGlobalStylesChanges(
+		editedRecord,
+		savedRecord,
+		{
+			maxResults: 10,
+		}
+	);
+	return globalStylesChanges.length ? (
+		<ul className="entities-saved-states__changes">
+			{ globalStylesChanges.map( ( change ) => (
+				<li key={ change }>{ change }</li>
+			) ) }
+		</ul>
+	) : null;
+}
+
+function EntityDescription( { record, count } ) {
+	if ( 'globalStyles' === record?.name ) {
+		return null;
+	}
+	const description = getEntityDescription( record?.name, count );
+	return description ? <PanelRow>{ description }</PanelRow> : null;
+}
+
+export default function EntityTypeList( {
+	list,
+	unselectedEntities,
+	setUnselectedEntities,
+} ) {
+	const count = list.length;
+	const firstRecord = list[ 0 ];
+	const entityConfig = useSelect(
+		( select ) =>
+			select( STORE_NAME ).getEntityConfig(
+				firstRecord.kind,
+				firstRecord.name
+			),
+		[ firstRecord.kind, firstRecord.name ]
+	);
+
+	let entityLabel = entityConfig.label;
+	if ( firstRecord?.name === 'wp_template_part' ) {
+		entityLabel =
+			1 === count ? __( 'Template Part' ) : __( 'Template Parts' );
+	}
+
+	return (
+		<PanelBody
+			title={ entityLabel }
+			initialOpen
+			className="entities-saved-states__panel-body"
+		>
+			<EntityDescription record={ firstRecord } count={ count } />
+			{ list.map( ( record ) => {
+				return (
+					<EntityRecordItem
+						key={ record.key || record.property }
+						record={ record }
+						checked={
+							! unselectedEntities.some(
+								( elt ) =>
+									elt.kind === record.kind &&
+									elt.name === record.name &&
+									elt.key === record.key &&
+									elt.property === record.property
+							)
+						}
+						onChange={ ( value ) =>
+							setUnselectedEntities( record, value )
+						}
+					/>
+				);
+			} ) }
+			{ 'globalStyles' === firstRecord?.name && (
+				<GlobalStylesDescription record={ firstRecord } />
+			) }
+		</PanelBody>
+	);
+}

package/src/components/entities-saved-states/hooks/use-is-dirty.js

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../../../name';
+
+/**
+ * Custom hook that determines if any entities are dirty (edited) and provides a way to manage selected/unselected entities.
+ *
+ * @return {Object} An object containing the following properties:
+ *   - dirtyEntityRecords: An array of dirty entity records.
+ *   - isDirty: A boolean indicating if there are any dirty entity records.
+ *   - setUnselectedEntities: A function to set the unselected entities.
+ *   - unselectedEntities: An array of unselected entities.
+ */
+export const useIsDirty = () => {
+	const { editedEntities, siteEdits, siteEntityConfig } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getEntityRecordEdits,
+				getEntityConfig,
+			} = select( STORE_NAME );
+
+			return {
+				editedEntities: __experimentalGetDirtyEntityRecords(),
+				siteEdits: getEntityRecordEdits( 'root', 'site' ),
+				siteEntityConfig: getEntityConfig( 'root', 'site' ),
+			};
+		},
+		[]
+	);
+
+	const dirtyEntityRecords = useMemo( () => {
+		// Remove site object and decouple into its edited pieces.
+		const editedEntitiesWithoutSite = editedEntities.filter(
+			( record ) => ! ( record.kind === 'root' && record.name === 'site' )
+		);
+
+		const siteEntityLabels = siteEntityConfig?.meta?.labels ?? {};
+		const {
+			site_logo: siteLogoEdit,
+			site_icon: siteIconEdit,
+			...otherSiteEdits
+		} = siteEdits ?? {};
+		const orderedSiteProperties = [
+			siteLogoEdit !== undefined && 'site_logo',
+			siteIconEdit !== undefined && 'site_icon',
+			...Object.keys( otherSiteEdits ),
+		].filter( Boolean );
+		const editedSiteEntities = orderedSiteProperties.map(
+			( property ) => ( {
+				kind: 'root',
+				name: 'site',
+				title: siteEntityLabels[ property ] || property,
+				property,
+			} )
+		);
+
+		return [ ...editedEntitiesWithoutSite, ...editedSiteEntities ];
+	}, [ editedEntities, siteEdits, siteEntityConfig ] );
+
+	// Unchecked entities to be ignored by save function.
+	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
+
+	const setUnselectedEntities = (
+		{ kind, name, key, property },
+		checked
+	) => {
+		if ( checked ) {
+			_setUnselectedEntities(
+				unselectedEntities.filter(
+					( elt ) =>
+						elt.kind !== kind ||
+						elt.name !== name ||
+						elt.key !== key ||
+						elt.property !== property
+				)
+			);
+		} else {
+			_setUnselectedEntities( [
+				...unselectedEntities,
+				{ kind, name, key, property },
+			] );
+		}
+	};
+
+	const isDirty = dirtyEntityRecords.length - unselectedEntities.length > 0;
+
+	return {
+		dirtyEntityRecords,
+		isDirty,
+		setUnselectedEntities,
+		unselectedEntities,
+	};
+};

package/src/components/entities-saved-states/index.js

@@ -0,0 +1,242 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Button, Flex, FlexItem } from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	useCallback,
+	useRef,
+	createInterpolateElement,
+} from '@wordpress/element';
+import {
+	__experimentalUseDialog as useDialog,
+	useInstanceId,
+} from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import EntityTypeList from './entity-type-list';
+import { useIsDirty } from './hooks/use-is-dirty';
+import { unlock } from '../../lock-unlock';
+import { STORE_NAME } from '../../name';
+
+/**
+ * Renders the component for managing saved states of entities.
+ *
+ * @param {Object}   props              The component props.
+ * @param {Function} props.close        The function to close the dialog.
+ * @param {boolean=} props.renderDialog Whether to render the component with modal dialog behavior.
+ * @param {string}   props.variant      Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function EntitiesSavedStates( {
+	close,
+	renderDialog,
+	variant,
+} ) {
+	const isDirtyProps = useIsDirty();
+	return (
+		<EntitiesSavedStatesExtensible
+			close={ close }
+			renderDialog={ renderDialog }
+			variant={ variant }
+			{ ...isDirtyProps }
+		/>
+	);
+}
+
+/**
+ * Renders a panel for saving entities with dirty records.
+ *
+ * @param {Object}   props                       The component props.
+ * @param {string}   props.additionalPrompt      Additional prompt to display.
+ * @param {Function} props.close                 Function to close the panel.
+ * @param {Function} props.onSave                Function to call when saving entities.
+ * @param {boolean}  props.saveEnabled           Flag indicating if save is enabled.
+ * @param {string}   props.saveLabel             Label for the save button.
+ * @param {boolean}  props.renderDialog          Whether to render the component with modal dialog behavior.
+ * @param {Array}    props.dirtyEntityRecords    Array of dirty entity records.
+ * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
+ * @param {Function} props.setUnselectedEntities Function to set unselected entities.
+ * @param {Array}    props.unselectedEntities    Array of unselected entities.
+ * @param {string}   props.variant               Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
+ * @param {string}   props.successNoticeContent  Optional custom success notice content.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export function EntitiesSavedStatesExtensible( {
+	additionalPrompt = undefined,
+	close,
+	onSave = undefined,
+	saveEnabled: saveEnabledProp = undefined,
+	saveLabel = __( 'Save' ),
+	renderDialog,
+	dirtyEntityRecords,
+	isDirty,
+	setUnselectedEntities,
+	unselectedEntities,
+	variant = 'default',
+	successNoticeContent,
+} ) {
+	const saveButtonRef = useRef();
+	const { saveDirtyEntities } = unlock( useDispatch( STORE_NAME ) );
+	// To group entities by type.
+	const partitionedSavables = dirtyEntityRecords.reduce( ( acc, record ) => {
+		const { name } = record;
+		if ( ! acc[ name ] ) {
+			acc[ name ] = [];
+		}
+		acc[ name ].push( record );
+		return acc;
+	}, {} );
+
+	// Sort entity groups.
+	const {
+		site: siteSavables,
+		wp_template: templateSavables,
+		wp_template_part: templatePartSavables,
+		...contentSavables
+	} = partitionedSavables;
+	const sortedPartitionedSavables = [
+		siteSavables,
+		templateSavables,
+		templatePartSavables,
+		...Object.values( contentSavables ),
+	].filter( Array.isArray );
+
+	const saveEnabled = saveEnabledProp ?? isDirty;
+	// Explicitly define this with no argument passed.  Using `close` on
+	// its own will use the event object in place of the expected saved entities.
+	const dismissPanel = useCallback( () => close(), [ close ] );
+
+	const [ saveDialogRef, saveDialogProps ] = useDialog( {
+		onClose: () => dismissPanel(),
+	} );
+	const dialogLabelId = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'entities-saved-states__panel-label'
+	);
+	const dialogDescriptionId = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'entities-saved-states__panel-description'
+	);
+
+	const selectItemsToSaveDescription = !! dirtyEntityRecords.length
+		? __( 'Select the items you want to save.' )
+		: undefined;
+
+	const isInline = variant === 'inline';
+
+	const actionButtons = (
+		<>
+			<FlexItem
+				isBlock={ isInline ? false : true }
+				as={ Button }
+				variant={ isInline ? 'tertiary' : 'secondary' }
+				size={ isInline ? undefined : 'compact' }
+				onClick={ dismissPanel }
+			>
+				{ __( 'Cancel' ) }
+			</FlexItem>
+			<FlexItem
+				isBlock={ isInline ? false : true }
+				as={ Button }
+				ref={ saveButtonRef }
+				variant="primary"
+				size={ isInline ? undefined : 'compact' }
+				disabled={ ! saveEnabled }
+				accessibleWhenDisabled
+				onClick={ () =>
+					saveDirtyEntities( {
+						onSave,
+						dirtyEntityRecords,
+						entitiesToSkip: unselectedEntities,
+						close,
+						successNoticeContent,
+					} )
+				}
+				className="entities-saved-states__save-button"
+			>
+				{ saveLabel }
+			</FlexItem>
+		</>
+	);
+
+	return (
+		<div
+			ref={ renderDialog ? saveDialogRef : undefined }
+			{ ...( renderDialog && saveDialogProps ) }
+			className={ clsx( 'entities-saved-states__panel', {
+				'is-inline': isInline,
+			} ) }
+			role={ renderDialog ? 'dialog' : undefined }
+			aria-labelledby={ renderDialog ? dialogLabelId : undefined }
+			aria-describedby={ renderDialog ? dialogDescriptionId : undefined }
+		>
+			{ ! isInline && (
+				<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+					{ actionButtons }
+				</Flex>
+			) }
+
+			<div className="entities-saved-states__text-prompt">
+				<div className="entities-saved-states__text-prompt--header-wrapper">
+					<strong
+						id={ renderDialog ? dialogLabelId : undefined }
+						className="entities-saved-states__text-prompt--header"
+					>
+						{ __( 'Are you ready to save?' ) }
+					</strong>
+				</div>
+				<div id={ renderDialog ? dialogDescriptionId : undefined }>
+					{ additionalPrompt }
+					<p className="entities-saved-states__text-prompt--changes-count">
+						{ isDirty
+							? createInterpolateElement(
+									sprintf(
+										/* translators: %d: number of site changes waiting to be saved. */
+										_n(
+											'There is <strong>%d site change</strong> waiting to be saved.',
+											'There are <strong>%d site changes</strong> waiting to be saved.',
+											dirtyEntityRecords.length
+										),
+										dirtyEntityRecords.length
+									),
+									{ strong: <strong /> }
+							  )
+							: selectItemsToSaveDescription }
+					</p>
+				</div>
+			</div>
+
+			{ sortedPartitionedSavables.map( ( list ) => {
+				return (
+					<EntityTypeList
+						key={ list[ 0 ].name }
+						list={ list }
+						unselectedEntities={ unselectedEntities }
+						setUnselectedEntities={ setUnselectedEntities }
+					/>
+				);
+			} ) }
+
+			{ isInline && (
+				<Flex
+					direction="row"
+					justify="flex-end"
+					className="entities-saved-states__panel-footer"
+				>
+					{ actionButtons }
+				</Flex>
+			) }
+		</div>
+	);
+}