@wordpress/core-data 7.50.1-next.v.202607070741.0 → 7.52.0

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>
+	);
+}

package/src/components/entities-saved-states/style.scss

@@ -0,0 +1,70 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.entities-saved-states__panel-header {
+	box-sizing: border-box;
+	background: $white;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+	height: $header-height;
+	border-bottom: $border-width solid $gray-300;
+}
+
+.entities-saved-states__text-prompt {
+	padding: $grid-unit-20;
+	padding-bottom: $grid-unit-05;
+	.entities-saved-states__text-prompt--header {
+		display: block;
+		margin-bottom: $grid-unit-15;
+	}
+}
+
+.entities-saved-states__panel.is-inline {
+	.entities-saved-states__text-prompt {
+		padding: 0;
+	}
+
+	.entities-saved-states__panel-body {
+		padding-left: 0;
+		padding-right: 0;
+		border: 0;
+
+		> h2 {
+			margin-left: -1 * $grid-unit-20;
+			margin-right: -1 * $grid-unit-20;
+			margin-bottom: 0;
+
+			button {
+				font-size: $font-size-x-small;
+				text-transform: uppercase;
+			}
+		}
+	}
+
+	.entities-saved-states__text-prompt--header-wrapper {
+		display: none;
+	}
+
+	.entities-saved-states__text-prompt--changes-count {
+		margin-top: 0;
+		margin-bottom: $grid-unit-10;
+	}
+
+	.entities-saved-states__panel-footer {
+		margin-top: $grid-unit-20;
+	}
+}
+
+.entities-saved-states__change-control {
+	flex: 1;
+}
+
+.entities-saved-states__changes {
+	font-size: $default-font-size;
+	margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30;
+	list-style: disc;
+
+	li {
+		margin-bottom: $grid-unit-05;
+	}
+}

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

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { useIsDirty } from '../hooks/use-is-dirty';
+
+jest.mock( '@wordpress/data', () => {
+	return {
+		useSelect: jest.fn().mockImplementation( ( fn ) => {
+			const select = () => {
+				return {
+					__experimentalGetDirtyEntityRecords: jest
+						.fn()
+						.mockReturnValue( [
+							{
+								kind: 'root',
+								name: 'site',
+								title: 'title',
+								property: 'property',
+							},
+							{
+								kind: 'postType',
+								name: 'post',
+								title: 'title',
+								property: 'property',
+							},
+						] ),
+					getEntityRecordEdits: jest.fn().mockReturnValue( {
+						title: 'My Site',
+					} ),
+					getEntityConfig: jest.fn().mockReturnValue( {
+						meta: { labels: { title: 'Title' } },
+					} ),
+				};
+			};
+			return fn( select );
+		} ),
+	};
+} );
+
+describe( 'useIsDirty', () => {
+	it( 'should calculate dirtyEntityRecords', () => {
+		const { result } = renderHook( () => useIsDirty() );
+		expect( result.current.dirtyEntityRecords ).toEqual( [
+			{
+				kind: 'postType',
+				name: 'post',
+				property: 'property',
+				title: 'title',
+			},
+			{ kind: 'root', name: 'site', property: 'title', title: 'Title' },
+		] );
+	} );
+	it( 'should return `isDirty: true` when there are changes', () => {
+		const { result } = renderHook( () => useIsDirty() );
+		expect( result.current.isDirty ).toBeTruthy();
+	} );
+	it( 'should return `isDirty: false` when there are NO changes', async () => {
+		const { result } = renderHook( () => useIsDirty() );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'postType',
+					name: 'post',
+					key: 'key',
+					property: 'property',
+				},
+				false
+			);
+		} );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'root',
+					name: 'site',
+					key: 'key',
+					property: 'property',
+				},
+				false
+			);
+		} );
+		expect( result.current.isDirty ).toBeFalsy();
+	} );
+} );

package/src/entities.js

@@ -49,8 +49,10 @@ export const rootEntitiesConfig = [
 				'description',
 				'gmt_offset',
 				'home',
+				'image_max_bit_depth',
 				'image_sizes',
 				'image_size_threshold',
+				'image_strip_meta',
 				'name',
 				'site_icon',
 				'site_icon_url',
@@ -323,7 +325,7 @@ export const prePersistPostType = async (
 	if ( persistedRecord ) {
 		const objectType = `postType/${ name }`;
 		const objectId = persistedRecord.id;
-		const serializedDoc = getSyncManager()?.createPersistedCRDTDoc(
+		const serializedDoc = await getSyncManager()?.createPersistedCRDTDoc(
 			objectType,
 			objectId
 		);

package/src/private-actions.js

@@ -2,6 +2,9 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -247,3 +250,127 @@ export function setSyncConnectionStatus( kind, name, key, status ) {
 		status,
 	};
 }
+
+/**
+ * Save entity records marked as dirty.
+ *
+ * @param {Object}   options                        Options for the action.
+ * @param {Function} [options.onSave]               Callback when saving happens.
+ * @param {object[]} [options.dirtyEntityRecords]   Array of dirty entities.
+ * @param {object[]} [options.entitiesToSkip]       Array of entities to skip saving.
+ * @param {Function} [options.close]                Callback when the actions is called. It should be consolidated with `onSave`.
+ * @param {string}   [options.successNoticeContent] Optional custom success notice content. Defaults to 'Site updated.'.
+ */
+export const saveDirtyEntities =
+	( {
+		onSave,
+		dirtyEntityRecords = [],
+		entitiesToSkip = [],
+		close,
+		successNoticeContent,
+	} = {} ) =>
+	( { registry } ) => {
+		const PUBLISH_ON_SAVE_ENTITIES = [
+			{ kind: 'postType', name: 'wp_navigation' },
+		];
+		const saveNoticeId = 'site-editor-save-success';
+		const homeUrl = registry
+			.select( STORE_NAME )
+			.getEntityRecord( 'root', '__unstableBase' )?.home;
+		registry.dispatch( noticesStore ).removeNotice( saveNoticeId );
+		const entitiesToSave = dirtyEntityRecords.filter(
+			( { kind, name, key, property } ) => {
+				return ! entitiesToSkip.some(
+					( elt ) =>
+						elt.kind === kind &&
+						elt.name === name &&
+						elt.key === key &&
+						elt.property === property
+				);
+			}
+		);
+		close?.( entitiesToSave );
+		const siteItemsToSave = [];
+		const pendingSavedRecords = [];
+		entitiesToSave.forEach( ( { kind, name, key, property } ) => {
+			if ( 'root' === kind && 'site' === name ) {
+				siteItemsToSave.push( property );
+			} else {
+				if (
+					PUBLISH_ON_SAVE_ENTITIES.some(
+						( typeToPublish ) =>
+							typeToPublish.kind === kind &&
+							typeToPublish.name === name
+					)
+				) {
+					registry
+						.dispatch( STORE_NAME )
+						.editEntityRecord( kind, name, key, {
+							status: 'publish',
+						} );
+				}
+
+				pendingSavedRecords.push(
+					registry
+						.dispatch( STORE_NAME )
+						.saveEditedEntityRecord( kind, name, key )
+				);
+			}
+		} );
+		if ( siteItemsToSave.length ) {
+			pendingSavedRecords.push(
+				registry
+					.dispatch( STORE_NAME )
+					.__experimentalSaveSpecifiedEntityEdits(
+						'root',
+						'site',
+						undefined,
+						siteItemsToSave
+					)
+			);
+		}
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkLastChangeAsPersistent();
+
+		Promise.all( pendingSavedRecords )
+			.then( async ( values ) => {
+				if ( onSave ) {
+					await onSave();
+				}
+				return values;
+			} )
+			.then( ( values ) => {
+				if (
+					values.some( ( value ) => typeof value === 'undefined' )
+				) {
+					registry
+						.dispatch( noticesStore )
+						.createErrorNotice( __( 'Saving failed.' ) );
+				} else {
+					registry
+						.dispatch( noticesStore )
+						.createSuccessNotice(
+							successNoticeContent || __( 'Site updated.' ),
+							{
+								type: 'snackbar',
+								id: saveNoticeId,
+								actions: [
+									{
+										label: __( 'View site' ),
+										url: homeUrl,
+										openInNewTab: true,
+									},
+								],
+							}
+						);
+				}
+			} )
+			.catch( ( error ) =>
+				registry
+					.dispatch( noticesStore )
+					.createErrorNotice(
+						`${ __( 'Saving failed.' ) } ${ error }`
+					)
+			);
+	};

package/src/private-apis.ts

@@ -10,6 +10,13 @@ import {
 	useOnCollaboratorLeave,
 	useOnPostSave,
 } from './hooks/use-post-editor-awareness-state';
+import { getTemplateInfo } from './utils/get-template-info';
+import { getTemplatePartIcon } from './utils/get-template-part-icon';
+import {
+	EntitiesSavedStatesExtensible,
+	default as EntitiesSavedStates,
+} from './components/entities-saved-states';
+import { useIsDirty as useEntitiesSavedStatesIsDirty } from './components/entities-saved-states/hooks/use-is-dirty';
 import { lock } from './lock-unlock';
 import { retrySyncConnection } from './sync';
 import {
@@ -18,6 +25,11 @@ import {
 } from './utils/crdt-user-selections';
 
 const lockedApis = {
+	EntitiesSavedStates,
+	EntitiesSavedStatesExtensible,
+	getTemplateInfo,
+	getTemplatePartIcon,
+	useEntitiesSavedStatesIsDirty,
 	useEntityRecordsWithPermissions,
 	RECEIVE_INTERMEDIATE_RESULTS,
 	retrySyncConnection,

package/src/style.scss

@@ -0,0 +1 @@
+@use "./components/entities-saved-states/style.scss" as *;