@wordpress/core-data 4.11.0 → 4.14.1-next.d6164808d3.0

package/src/hooks/test/use-resource-permissions.js

@@ -50,28 +50,24 @@ describe( 'useResourcePermissions', () => {
 				<TestComponent />
 			</RegistryProvider>
 		);
-		expect( data ).toEqual( [
-			false,
-			{
-				status: 'IDLE',
-				isResolving: false,
-				canCreate: false,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'IDLE',
+			isResolving: false,
+			hasResolved: false,
+			canCreate: false,
+		} );
 
 		// Required to make sure no updates happen outside of act()
 		await act( async () => {
 			jest.advanceTimersByTime( 1 );
 		} );
 
-		expect( data ).toEqual( [
-			true,
-			{
-				status: 'SUCCESS',
-				isResolving: false,
-				canCreate: true,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'SUCCESS',
+			isResolving: false,
+			hasResolved: true,
+			canCreate: true,
+		} );
 	} );
 
 	it( 'retrieves the relevant permissions for a resource with a key', async () => {
@@ -85,31 +81,27 @@ describe( 'useResourcePermissions', () => {
 				<TestComponent />
 			</RegistryProvider>
 		);
-		expect( data ).toEqual( [
-			false,
-			{
-				status: 'IDLE',
-				isResolving: false,
-				canCreate: false,
-				canUpdate: false,
-				canDelete: false,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'IDLE',
+			isResolving: false,
+			hasResolved: false,
+			canCreate: false,
+			canUpdate: false,
+			canDelete: false,
+		} );
 
 		// Required to make sure no updates happen outside of act()
 		await act( async () => {
 			jest.advanceTimersByTime( 1 );
 		} );
 
-		expect( data ).toEqual( [
-			true,
-			{
-				status: 'SUCCESS',
-				isResolving: false,
-				canCreate: true,
-				canUpdate: false,
-				canDelete: false,
-			},
-		] );
+		expect( data ).toEqual( {
+			status: 'SUCCESS',
+			isResolving: false,
+			hasResolved: true,
+			canCreate: true,
+			canUpdate: false,
+			canDelete: false,
+		} );
 	} );
 } );

package/src/hooks/use-entity-record.ts

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,11 +16,25 @@ export interface EntityRecordResolution< RecordType > {
 	/** The requested entity record */
 	record: RecordType | null;
 
+	/** The edited entity record */
+	editedRecord: Partial< RecordType >;
+
+	/** Apply local (in-browser) edits to the edited entity record */
+	edit: ( diff: Partial< RecordType > ) => void;
+
+	/** Persist the edits to the server */
+	save: () => Promise< void >;
+
 	/**
 	 * Is the record still being resolved?
 	 */
 	isResolving: boolean;
 
+	/**
+	 * Does the record have any local edits?
+	 */
+	hasEdits: boolean;
+
 	/**
 	 * Is the record resolved by now?
 	 */
@@ -66,6 +82,60 @@ export interface Options {
  * application, the page and the resolution details will be retrieved from
  * the store state using `getEntityRecord()`, or resolved if missing.
  *
+ * @example
+ * ```js
+ * import { useDispatch } from '@wordpress/data';
+ * import { useCallback } from '@wordpress/element';
+ * import { __ } from '@wordpress/i18n';
+ * import { TextControl } from '@wordpress/components';
+ * import { store as noticeStore } from '@wordpress/notices';
+ * import { useEntityRecord } from '@wordpress/core-data';
+ *
+ * function PageRenameForm( { id } ) {
+ * 	const page = useEntityRecord( 'postType', 'page', id );
+ * 	const { createSuccessNotice, createErrorNotice } =
+ * 		useDispatch( noticeStore );
+ *
+ * 	const setTitle = useCallback( ( title ) => {
+ * 		page.edit( { title } );
+ * 	}, [ page.edit ] );
+ *
+ * 	if ( page.isResolving ) {
+ * 		return 'Loading...';
+ * 	}
+ *
+ * 	async function onRename( event ) {
+ * 		event.preventDefault();
+ * 		try {
+ * 			await page.save();
+ * 			createSuccessNotice( __( 'Page renamed.' ), {
+ * 				type: 'snackbar',
+ * 			} );
+ * 		} catch ( error ) {
+ * 			createErrorNotice( error.message, { type: 'snackbar' } );
+ * 		}
+ * 	}
+ *
+ * 	return (
+ * 		<form onSubmit={ onRename }>
+ * 			<TextControl
+ * 				label={ __( 'Name' ) }
+ * 				value={ page.editedRecord.title }
+ * 				onChange={ setTitle }
+ * 			/>
+ * 			<button type="submit">{ __( 'Save' ) }</button>
+ * 		</form>
+ * 	);
+ * }
+ *
+ * // Rendered in the application:
+ * // <PageRenameForm id={ 1 } />
+ * ```
+ *
+ * In the above example, updating and saving the page title is handled
+ * via the `edit()` and `save()` mutation helpers provided by
+ * `useEntityRecord()`;
+ *
  * @return Entity record data.
  * @template RecordType
  */
@@ -75,7 +145,31 @@ export default function useEntityRecord< RecordType >(
 	recordId: string | number,
 	options: Options = { enabled: true }
 ): EntityRecordResolution< RecordType > {
-	const { data: record, ...rest } = useQuerySelect(
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+
+	const mutations = useMemo(
+		() => ( {
+			edit: ( record ) =>
+				editEntityRecord( kind, name, recordId, record ),
+			save: ( saveOptions: any = {} ) =>
+				saveEditedEntityRecord( kind, name, recordId, {
+					throwOnError: true,
+					...saveOptions,
+				} ),
+		} ),
+		[ recordId ]
+	);
+
+	const { editedRecord, hasEdits } = useSelect(
+		( select ) => ( {
+			editedRecord: select( coreStore ).getEditedEntityRecord(),
+			hasEdits: select( coreStore ).hasEditsForEntityRecord(),
+		} ),
+		[ kind, name, recordId ]
+	);
+
+	const { data: record, ...querySelectRest } = useQuerySelect(
 		( query ) => {
 			if ( ! options.enabled ) {
 				return null;
@@ -87,7 +181,10 @@ export default function useEntityRecord< RecordType >(
 
 	return {
 		record,
-		...rest,
+		editedRecord,
+		hasEdits,
+		...querySelectRest,
+		...mutations,
 	};
 }
 

package/src/hooks/use-resource-permissions.ts

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * Internal dependencies
  */
@@ -65,6 +70,36 @@ type ResourcePermissionsResolution< IdType > = [
  * // <PagesList />
  * ```
  *
+ * @example
+ * ```js
+ * import { useResourcePermissions } from '@wordpress/core-data';
+ *
+ * function Page({ pageId }) {
+ *   const {
+ *     canCreate,
+ *     canUpdate,
+ *     canDelete,
+ *     isResolving
+ *   } = useResourcePermissions( 'pages', pageId );
+ *
+ *   if ( isResolving ) {
+ *     return 'Loading ...';
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {canCreate ? (<button>+ Create a new page</button>) : false}
+ *       {canUpdate ? (<button>Edit page</button>) : false}
+ *       {canDelete ? (<button>Delete page</button>) : false}
+ *       // ...
+ *     </div>
+ *   );
+ * }
+ *
+ * // Rendered in the application:
+ * // <Page pageId={ 15 } />
+ * ```
+ *
  * In the above example, when `PagesList` is rendered into an
  * application, the appropriate permissions and the resolution details will be retrieved from
  * the store state using `canUser()`, or resolved if missing.
@@ -72,7 +107,7 @@ type ResourcePermissionsResolution< IdType > = [
  * @return Entity records data.
  * @template IdType
  */
-export default function __experimentalUseResourcePermissions< IdType = void >(
+export default function useResourcePermissions< IdType = void >(
 	resource: string,
 	id?: IdType
 ): ResourcePermissionsResolution< IdType > {
@@ -81,14 +116,12 @@ export default function __experimentalUseResourcePermissions< IdType = void >(
 			const { canUser } = resolve( coreStore );
 			const create = canUser( 'create', resource );
 			if ( ! id ) {
-				return [
-					create.hasResolved,
-					{
-						status: create.status,
-						isResolving: create.isResolving,
-						canCreate: create.hasResolved && create.data,
-					},
-				];
+				return {
+					status: create.status,
+					isResolving: create.isResolving,
+					hasResolved: create.hasResolved,
+					canCreate: create.hasResolved && create.data,
+				};
 			}
 
 			const update = canUser( 'update', resource, id );
@@ -104,17 +137,26 @@ export default function __experimentalUseResourcePermissions< IdType = void >(
 			} else if ( hasResolved ) {
 				status = Status.Success;
 			}
-			return [
+			return {
+				status,
+				isResolving,
 				hasResolved,
-				{
-					status,
-					isResolving,
-					canCreate: hasResolved && create.data,
-					canUpdate: hasResolved && update.data,
-					canDelete: hasResolved && _delete.data,
-				},
-			];
+				canCreate: hasResolved && create.data,
+				canUpdate: hasResolved && update.data,
+				canDelete: hasResolved && _delete.data,
+			};
 		},
 		[ resource, id ]
 	);
 }
+
+export function __experimentalUseResourcePermissions(
+	resource: string,
+	id?: IdType
+) {
+	deprecated( `wp.data.__experimentalUseResourcePermissions`, {
+		alternative: 'wp.data.useResourcePermissions',
+		since: '6.1',
+	} );
+	return useResourcePermissions( resource, id );
+}

package/src/index.js

@@ -68,9 +68,6 @@ export const store = createReduxStore( STORE_NAME, storeConfig() );
 register( store );
 
 export { default as EntityProvider } from './entity-provider';
-export { default as useEntityRecord } from './hooks/use-entity-record';
-export { default as useEntityRecords } from './hooks/use-entity-records';
-export { default as __experimentalUseResourcePermissions } from './hooks/use-resource-permissions';
 export * from './entity-provider';
 export * from './entity-types';
 export * from './fetch';

package/src/resolvers.js

@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	camelCase,
-	compact,
-	find,
-	get,
-	includes,
-	map,
-	mapKeys,
-	uniq,
-} from 'lodash';
+import { camelCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -59,13 +50,16 @@ export const getCurrentUser =
  * @param {string}           name  Entity name.
  * @param {number|string}    key   Record's key
  * @param {Object|undefined} query Optional object of query parameters to
- *                                 include with request.
+ *                                 include with request. If requesting specific
+ *                                 fields, fields must always include the ID.
  */
 export const getEntityRecord =
 	( kind, name, key = '', query ) =>
 	async ( { select, dispatch } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+		const entityConfig = configs.find(
+			( config ) => config.name === name && config.kind === kind
+		);
 		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
 			return;
 		}
@@ -83,11 +77,13 @@ export const getEntityRecord =
 				// the ID.
 				query = {
 					...query,
-					_fields: uniq( [
-						...( getNormalizedCommaSeparable( query._fields ) ||
-							[] ),
-						entityConfig.key || DEFAULT_ENTITY_KEY,
-					] ).join(),
+					_fields: [
+						...new Set( [
+							...( getNormalizedCommaSeparable( query._fields ) ||
+								[] ),
+							entityConfig.key || DEFAULT_ENTITY_KEY,
+						] ),
+					].join(),
 				};
 			}
 
@@ -140,13 +136,16 @@ export const getEditedEntityRecord = forwardResolver( 'getEntityRecord' );
  *
  * @param {string}  kind  Entity kind.
  * @param {string}  name  Entity name.
- * @param {Object?} query Query Object.
+ * @param {Object?} query Query Object. If requesting specific fields, fields
+ *                        must always include the ID.
  */
 export const getEntityRecords =
 	( kind, name, query = {} ) =>
 	async ( { dispatch } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+		const entityConfig = configs.find(
+			( config ) => config.name === name && config.kind === kind
+		);
 		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
 			return;
 		}
@@ -164,11 +163,13 @@ export const getEntityRecords =
 				// the ID.
 				query = {
 					...query,
-					_fields: uniq( [
-						...( getNormalizedCommaSeparable( query._fields ) ||
-							[] ),
-						entityConfig.key || DEFAULT_ENTITY_KEY,
-					] ).join(),
+					_fields: [
+						...new Set( [
+							...( getNormalizedCommaSeparable( query._fields ) ||
+								[] ),
+							entityConfig.key || DEFAULT_ENTITY_KEY,
+						] ),
+					].join(),
 				};
 			}
 
@@ -313,8 +314,9 @@ export const canUser =
 		// return the expected result in the native version. Instead, API requests
 		// only return the result, without including response properties like the headers.
 		const allowHeader = response.headers?.get( 'allow' );
-		const key = compact( [ action, resource, id ] ).join( '/' );
-		const isAllowed = includes( allowHeader, method );
+		const key = [ action, resource, id ].filter( Boolean ).join( '/' );
+		const isAllowed =
+			allowHeader?.includes?.( method ) || allowHeader?.allow === method;
 		dispatch.receiveUserPermission( key, isAllowed );
 	};
 
@@ -330,7 +332,9 @@ export const canUserEditEntityRecord =
 	( kind, name, recordId ) =>
 	async ( { dispatch } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+		const entityConfig = configs.find(
+			( config ) => config.name === name && config.kind === kind
+		);
 		if ( ! entityConfig ) {
 			return;
 		}
@@ -434,13 +438,9 @@ export const __experimentalGetCurrentGlobalStylesId =
 			'theme',
 			{ status: 'active' }
 		);
-		const globalStylesURL = get( activeThemes, [
-			0,
-			'_links',
-			'wp:user-global-styles',
-			0,
-			'href',
-		] );
+		const globalStylesURL =
+			activeThemes?.[ 0 ]?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]
+				?.href;
 		if ( globalStylesURL ) {
 			const globalStylesObject = await apiFetch( {
 				url: globalStylesURL,
@@ -483,8 +483,13 @@ export const getBlockPatterns =
 		const restPatterns = await apiFetch( {
 			path: '/wp/v2/block-patterns/patterns',
 		} );
-		const patterns = map( restPatterns, ( pattern ) =>
-			mapKeys( pattern, ( value, key ) => camelCase( key ) )
+		const patterns = restPatterns?.map( ( pattern ) =>
+			Object.fromEntries(
+				Object.entries( pattern ).map( ( [ key, value ] ) => [
+					camelCase( key ),
+					value,
+				] )
+			)
 		);
 		dispatch( { type: 'RECEIVE_BLOCK_PATTERNS', patterns } );
 	};

package/src/selectors.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { set, map, find, get, filter, compact } from 'lodash';
+import { set, map, find, get, filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -296,7 +296,8 @@ interface GetEntityRecord {
  * @param  kind  Entity kind.
  * @param  name  Entity name.
  * @param  key   Record's key
- * @param  query Optional query.
+ * @param  query Optional query. If requesting specific
+ *               fields, fields must always include the ID.
  *
  * @return Record.
  */
@@ -526,7 +527,8 @@ interface GetEntityRecords {
  * @param  state State tree
  * @param  kind  Entity kind.
  * @param  name  Entity name.
- * @param  query Optional terms query.
+ * @param  query Optional terms query. If requesting specific
+ *               fields, fields must always include the ID.
  *
  * @return Records.
  */
@@ -1115,7 +1117,7 @@ export function canUser(
 	resource: string,
 	id?: GenericRecordKey
 ): boolean | undefined {
-	const key = compact( [ action, resource, id ] ).join( '/' );
+	const key = [ action, resource, id ].filter( Boolean ).join( '/' );
 	return get( state, [ 'userPermissions', key ] );
 }