@wordpress/core-data 7.51.0 → 7.52.0

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',

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