@wordpress/core-data 7.51.0 → 7.53.0

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

@@ -0,0 +1,123 @@
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { getGlobalStylesChanges } from '@wordpress/global-styles-engine';
+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,98 @@
+import { useSelect } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+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 {
+			title: siteTitleEdit,
+			description: siteDescriptionEdit,
+			site_logo: siteLogoEdit,
+			site_icon: siteIconEdit,
+			...otherSiteEdits
+		} = siteEdits ?? {};
+		const orderedSiteProperties = [
+			siteTitleEdit !== undefined && 'title',
+			siteDescriptionEdit !== undefined && 'description',
+			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,231 @@
+import clsx from 'clsx';
+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';
+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,147 @@
+import { act, renderHook } from '@testing-library/react';
+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',
+						description: 'My Tagline',
+						site_logo: 123,
+						site_icon: 456,
+					} ),
+					getEntityConfig: jest.fn().mockReturnValue( {
+						meta: {
+							labels: {
+								title: 'Site Title',
+								description: 'Site Tagline',
+								site_logo: 'Site Logo',
+								site_icon: 'Site Icon',
+							},
+						},
+					} ),
+				};
+			};
+			return fn( select );
+		} ),
+	};
+} );
+
+describe( 'useIsDirty', () => {
+	it( 'should calculate dirtyEntityRecords in the expected order', () => {
+		const { result } = renderHook( () => useIsDirty() );
+		expect( result.current.dirtyEntityRecords ).toEqual( [
+			{
+				kind: 'postType',
+				name: 'post',
+				property: 'property',
+				title: 'title',
+			},
+			{
+				kind: 'root',
+				name: 'site',
+				property: 'title',
+				title: 'Site Title',
+			},
+			{
+				kind: 'root',
+				name: 'site',
+				property: 'description',
+				title: 'Site Tagline',
+			},
+			{
+				kind: 'root',
+				name: 'site',
+				property: 'site_logo',
+				title: 'Site Logo',
+			},
+			{
+				kind: 'root',
+				name: 'site',
+				property: 'site_icon',
+				title: 'Site Icon',
+			},
+		] );
+	} );
+	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: 'title',
+				},
+				false
+			);
+		} );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'root',
+					name: 'site',
+					key: 'key',
+					property: 'description',
+				},
+				false
+			);
+		} );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'root',
+					name: 'site',
+					key: 'key',
+					property: 'site_logo',
+				},
+				false
+			);
+		} );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'root',
+					name: 'site',
+					key: 'key',
+					property: 'site_icon',
+				},
+				false
+			);
+		} );
+		expect( result.current.isDirty ).toBeFalsy();
+	} );
+} );

package/src/dynamic-entities.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import type { GetRecordsHttpQuery, State } from './selectors';
 import type * as ET from './entity-types';
 

package/src/entities.js

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { capitalCase, pascalCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
 import apiFetch from '@wordpress/api-fetch';
 import { __unstableSerializeAndClean, parse } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { PostEditorAwareness } from './awareness/post-editor-awareness';
 import { getSyncManager } from './sync';
 import {
@@ -49,8 +38,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',