@wordpress/core-data 7.2.0 → 7.4.0

package/src/hooks/use-entity-block-editor.js

@@ -0,0 +1,148 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../name';
+import useEntityId from './use-entity-id';
+import { updateFootnotesFromMeta } from '../footnotes';
+
+const EMPTY_ARRAY = [];
+const parsedBlocksCache = new WeakMap();
+
+/**
+ * Hook that returns block content getters and setters for
+ * the nearest provided entity of the specified type.
+ *
+ * The return value has the shape `[ blocks, onInput, onChange ]`.
+ * `onInput` is for block changes that don't create undo levels
+ * or dirty the post, non-persistent changes, and `onChange` is for
+ * persistent changes. They map directly to the props of a
+ * `BlockEditorProvider` and are intended to be used with it,
+ * or similar components or hooks.
+ *
+ * @param {string} kind         The entity kind.
+ * @param {string} name         The entity name.
+ * @param {Object} options
+ * @param {string} [options.id] An entity ID to use instead of the context-provided one.
+ *
+ * @return {[unknown[], Function, Function]} The block array and setters.
+ */
+export default function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
+	const providerId = useEntityId( kind, name );
+	const id = _id ?? providerId;
+	const { getEntityRecord, getEntityRecordEdits } = useSelect( STORE_NAME );
+	const { content, editedBlocks, meta } = useSelect(
+		( select ) => {
+			if ( ! id ) {
+				return {};
+			}
+			const { getEditedEntityRecord } = select( STORE_NAME );
+			const editedRecord = getEditedEntityRecord( kind, name, id );
+			return {
+				editedBlocks: editedRecord.blocks,
+				content: editedRecord.content,
+				meta: editedRecord.meta,
+			};
+		},
+		[ kind, name, id ]
+	);
+	const { __unstableCreateUndoLevel, editEntityRecord } =
+		useDispatch( STORE_NAME );
+
+	const blocks = useMemo( () => {
+		if ( ! id ) {
+			return undefined;
+		}
+
+		if ( editedBlocks ) {
+			return editedBlocks;
+		}
+
+		if ( ! content || typeof content !== 'string' ) {
+			return EMPTY_ARRAY;
+		}
+
+		// If there's an edit, cache the parsed blocks by the edit.
+		// If not, cache by the original enity record.
+		const edits = getEntityRecordEdits( kind, name, id );
+		const isUnedited = ! edits || ! Object.keys( edits ).length;
+		const cackeKey = isUnedited ? getEntityRecord( kind, name, id ) : edits;
+		let _blocks = parsedBlocksCache.get( cackeKey );
+
+		if ( ! _blocks ) {
+			_blocks = parse( content );
+			parsedBlocksCache.set( cackeKey, _blocks );
+		}
+
+		return _blocks;
+	}, [
+		kind,
+		name,
+		id,
+		editedBlocks,
+		content,
+		getEntityRecord,
+		getEntityRecordEdits,
+	] );
+
+	const updateFootnotes = useCallback(
+		( _blocks ) => updateFootnotesFromMeta( _blocks, meta ),
+		[ meta ]
+	);
+
+	const onChange = useCallback(
+		( newBlocks, options ) => {
+			const noChange = blocks === newBlocks;
+			if ( noChange ) {
+				return __unstableCreateUndoLevel( kind, name, id );
+			}
+			const { selection, ...rest } = options;
+
+			// We create a new function here on every persistent edit
+			// to make sure the edit makes the post dirty and creates
+			// a new undo level.
+			const edits = {
+				selection,
+				content: ( { blocks: blocksForSerialization = [] } ) =>
+					__unstableSerializeAndClean( blocksForSerialization ),
+				...updateFootnotes( newBlocks ),
+			};
+
+			editEntityRecord( kind, name, id, edits, {
+				isCached: false,
+				...rest,
+			} );
+		},
+		[
+			kind,
+			name,
+			id,
+			blocks,
+			updateFootnotes,
+			__unstableCreateUndoLevel,
+			editEntityRecord,
+		]
+	);
+
+	const onInput = useCallback(
+		( newBlocks, options ) => {
+			const { selection, ...rest } = options;
+			const footnotesChanges = updateFootnotes( newBlocks );
+			const edits = { selection, ...footnotesChanges };
+
+			editEntityRecord( kind, name, id, edits, {
+				isCached: true,
+				...rest,
+			} );
+		},
+		[ kind, name, id, updateFootnotes, editEntityRecord ]
+	);
+
+	return [ blocks, onInput, onChange ];
+}

package/src/hooks/use-entity-id.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { EntityContext } from '../entity-context';
+
+/**
+ * Hook that returns the ID for the nearest
+ * provided entity of the specified type.
+ *
+ * @param {string} kind The entity kind.
+ * @param {string} name The entity name.
+ */
+export default function useEntityId( kind, name ) {
+	const context = useContext( EntityContext );
+	return context?.[ kind ]?.[ name ];
+}

package/src/hooks/use-entity-prop.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../name';
+import useEntityId from './use-entity-id';
+
+/**
+ * Hook that returns the value and a setter for the
+ * specified property of the nearest provided
+ * entity of the specified type.
+ *
+ * @param {string} kind  The entity kind.
+ * @param {string} name  The entity name.
+ * @param {string} prop  The property name.
+ * @param {string} [_id] An entity ID to use instead of the context-provided one.
+ *
+ * @return {[*, Function, *]} An array where the first item is the
+ *                            property value, the second is the
+ *                            setter and the third is the full value
+ * 							  object from REST API containing more
+ * 							  information like `raw`, `rendered` and
+ * 							  `protected` props.
+ */
+export default function useEntityProp( kind, name, prop, _id ) {
+	const providerId = useEntityId( kind, name );
+	const id = _id ?? providerId;
+
+	const { value, fullValue } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getEditedEntityRecord } =
+				select( STORE_NAME );
+			const record = getEntityRecord( kind, name, id ); // Trigger resolver.
+			const editedRecord = getEditedEntityRecord( kind, name, id );
+			return record && editedRecord
+				? {
+						value: editedRecord[ prop ],
+						fullValue: record[ prop ],
+				  }
+				: {};
+		},
+		[ kind, name, id, prop ]
+	);
+	const { editEntityRecord } = useDispatch( STORE_NAME );
+	const setValue = useCallback(
+		( newValue ) => {
+			editEntityRecord( kind, name, id, {
+				[ prop ]: newValue,
+			} );
+		},
+		[ editEntityRecord, kind, name, id, prop ]
+	);
+
+	return [ value, setValue, fullValue ];
+}

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -41,20 +42,34 @@ type ResourcePermissionsResolution< IdType > = [
 		( IdType extends void ? SpecificResourcePermissionsResolution : {} ),
 ];
 
+type EntityResource = { kind: string; name: string; id?: string | number };
+
+function useResourcePermissions< IdType = void >(
+	resource: string,
+	id?: IdType
+): ResourcePermissionsResolution< IdType >;
+
+function useResourcePermissions< IdType = void >(
+	resource: EntityResource,
+	id?: never
+): ResourcePermissionsResolution< IdType >;
+
 /**
  * Resolves resource permissions.
  *
  * @since 6.1.0 Introduced in WordPress core.
  *
- * @param    resource The resource in question, e.g. media.
- * @param    id       ID of a specific resource entry, if needed, e.g. 10.
+ * @param    resource Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }`
+ *                    or REST base as a string - `media`.
+ * @param    id       Optional ID of the resource to check, e.g. 10. Note: This argument is discouraged
+ *                    when using an entity object as a resource to check permissions and will be ignored.
  *
  * @example
  * ```js
  * import { useResourcePermissions } from '@wordpress/core-data';
  *
  * function PagesList() {
- *   const { canCreate, isResolving } = useResourcePermissions( 'pages' );
+ *   const { canCreate, isResolving } = useResourcePermissions( { kind: 'postType', name: 'page' } );
  *
  *   if ( isResolving ) {
  *     return 'Loading ...';
@@ -82,7 +97,7 @@ type ResourcePermissionsResolution< IdType > = [
  *     canUpdate,
  *     canDelete,
  *     isResolving
- *   } = useResourcePermissions( 'pages', pageId );
+ *   } = useResourcePermissions( { kind: 'postType', name: 'page', id: pageId } );
  *
  *   if ( isResolving ) {
  *     return 'Loading ...';
@@ -109,15 +124,35 @@ type ResourcePermissionsResolution< IdType > = [
  * @return Entity records data.
  * @template IdType
  */
-export default function useResourcePermissions< IdType = void >(
-	resource: string,
+function useResourcePermissions< IdType = void >(
+	resource: string | EntityResource,
 	id?: IdType
 ): ResourcePermissionsResolution< IdType > {
+	// Serialize `resource` to a string that can be safely used as a React dep.
+	// We can't just pass `resource` as one of the deps, because if it is passed
+	// as an object literal, then it will be a different object on each call even
+	// if the values remain the same.
+	const isEntity = typeof resource === 'object';
+	const resourceAsString = isEntity ? JSON.stringify( resource ) : resource;
+
+	if ( isEntity && typeof id !== 'undefined' ) {
+		warning(
+			`When 'resource' is an entity object, passing 'id' as a separate argument isn't supported.`
+		);
+	}
+
 	return useQuerySelect(
 		( resolve ) => {
+			const hasId = isEntity ? !! resource.id : !! id;
 			const { canUser } = resolve( coreStore );
-			const create = canUser( 'create', resource );
-			if ( ! id ) {
+			const create = canUser(
+				'create',
+				isEntity
+					? { kind: resource.kind, name: resource.name }
+					: resource
+			);
+
+			if ( ! hasId ) {
 				const read = canUser( 'read', resource );
 
 				const isResolving = create.isResolving || read.isResolving;
@@ -168,10 +203,12 @@ export default function useResourcePermissions< IdType = void >(
 				canDelete: hasResolved && _delete.data,
 			};
 		},
-		[ resource, id ]
+		[ resourceAsString, id ]
 	);
 }
 
+export default useResourcePermissions;
+
 export function __experimentalUseResourcePermissions(
 	resource: string,
 	id?: unknown

package/src/resolvers.js

@@ -15,7 +15,13 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import { STORE_NAME } from './name';
 import { getOrLoadEntitiesConfig, DEFAULT_ENTITY_KEY } from './entities';
-import { forwardResolver, getNormalizedCommaSeparable } from './utils';
+import {
+	forwardResolver,
+	getNormalizedCommaSeparable,
+	getUserPermissionCacheKey,
+	getUserPermissionsFromResponse,
+	ALLOWED_RESOURCE_ACTIONS,
+} from './utils';
 import { getSyncProvider } from './sync';
 import { fetchBlockPatterns } from './fetch';
 
@@ -58,12 +64,12 @@ export const getCurrentUser =
  */
 export const getEntityRecord =
 	( kind, name, key = '', query ) =>
-	async ( { select, dispatch } ) => {
+	async ( { select, dispatch, registry } ) => {
 		const configs = await dispatch( getOrLoadEntitiesConfig( kind, name ) );
 		const entityConfig = configs.find(
 			( config ) => config.name === name && config.kind === kind
 		);
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		if ( ! entityConfig ) {
 			return;
 		}
 
@@ -165,8 +171,29 @@ export const getEntityRecord =
 					}
 				}
 
-				const record = await apiFetch( { path } );
-				dispatch.receiveEntityRecords( kind, name, record, query );
+				const response = await apiFetch( { path, parse: false } );
+				const record = await response.json();
+				const permissions = getUserPermissionsFromResponse( response );
+
+				registry.batch( () => {
+					dispatch.receiveEntityRecords( kind, name, record, query );
+
+					for ( const action of ALLOWED_RESOURCE_ACTIONS ) {
+						const permissionKey = getUserPermissionCacheKey(
+							action,
+							{ kind, name, id: key }
+						);
+
+						dispatch.receiveUserPermission(
+							permissionKey,
+							permissions[ action ]
+						);
+						dispatch.finishResolution( 'canUser', [
+							action,
+							{ kind, name, id: key },
+						] );
+					}
+				} );
 			}
 		} finally {
 			dispatch.__unstableReleaseStoreLock( lock );
@@ -198,7 +225,7 @@ export const getEntityRecords =
 		const entityConfig = configs.find(
 			( config ) => config.name === name && config.kind === kind
 		);
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		if ( ! entityConfig ) {
 			return;
 		}
 
@@ -281,16 +308,10 @@ export const getEntityRecords =
 						.filter( ( record ) => record?.[ key ] )
 						.map( ( record ) => [ kind, name, record[ key ] ] );
 
-					dispatch( {
-						type: 'START_RESOLUTIONS',
-						selectorName: 'getEntityRecord',
-						args: resolutionsArgs,
-					} );
-					dispatch( {
-						type: 'FINISH_RESOLUTIONS',
-						selectorName: 'getEntityRecord',
-						args: resolutionsArgs,
-					} );
+					dispatch.finishResolutions(
+						'getEntityRecord',
+						resolutionsArgs
+					);
 				}
 
 				dispatch.__unstableReleaseStoreLock( lock );
@@ -352,25 +373,47 @@ export const getEmbedPreview =
  * Checks whether the current user can perform the given action on the given
  * REST resource.
  *
- * @param {string}  requestedAction Action to check. One of: 'create', 'read', 'update',
- *                                  'delete'.
- * @param {string}  resource        REST resource to check, e.g. 'media' or 'posts'.
- * @param {?string} id              ID of the rest resource to check.
+ * @param {string}        requestedAction Action to check. One of: 'create', 'read', 'update',
+ *                                        'delete'.
+ * @param {string|Object} resource        Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }`
+ *                                        or REST base as a string - `media`.
+ * @param {?string}       id              ID of the rest resource to check.
  */
 export const canUser =
 	( requestedAction, resource, id ) =>
 	async ( { dispatch, registry } ) => {
-		const { hasStartedResolution } = registry.select( STORE_NAME );
+		if ( ! ALLOWED_RESOURCE_ACTIONS.includes( requestedAction ) ) {
+			throw new Error( `'${ requestedAction }' is not a valid action.` );
+		}
 
-		const resourcePath = id ? `${ resource }/${ id }` : resource;
-		const retrievedActions = [ 'create', 'read', 'update', 'delete' ];
+		let resourcePath = null;
+		if ( typeof resource === 'object' ) {
+			if ( ! resource.kind || ! resource.name ) {
+				throw new Error( 'The entity resource object is not valid.' );
+			}
 
-		if ( ! retrievedActions.includes( requestedAction ) ) {
-			throw new Error( `'${ requestedAction }' is not a valid action.` );
+			const configs = await dispatch(
+				getOrLoadEntitiesConfig( resource.kind, resource.name )
+			);
+			const entityConfig = configs.find(
+				( config ) =>
+					config.name === resource.name &&
+					config.kind === resource.kind
+			);
+			if ( ! entityConfig ) {
+				return;
+			}
+
+			resourcePath =
+				entityConfig.baseURL + ( resource.id ? '/' + resource.id : '' );
+		} else {
+			resourcePath = `/wp/v2/${ resource }` + ( id ? '/' + id : '' );
 		}
 
+		const { hasStartedResolution } = registry.select( STORE_NAME );
+
 		// Prevent resolving the same resource twice.
-		for ( const relatedAction of retrievedActions ) {
+		for ( const relatedAction of ALLOWED_RESOURCE_ACTIONS ) {
 			if ( relatedAction === requestedAction ) {
 				continue;
 			}
@@ -387,7 +430,7 @@ export const canUser =
 		let response;
 		try {
 			response = await apiFetch( {
-				path: `/wp/v2/${ resourcePath }`,
+				path: resourcePath,
 				method: 'OPTIONS',
 				parse: false,
 			} );
@@ -397,29 +440,23 @@ export const canUser =
 			return;
 		}
 
-		// Optional chaining operator is used here because the API requests don't
-		// 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 allowedMethods = allowHeader?.allow || allowHeader || '';
-
-		const permissions = {};
-		const methods = {
-			create: 'POST',
-			read: 'GET',
-			update: 'PUT',
-			delete: 'DELETE',
-		};
-		for ( const [ actionName, methodName ] of Object.entries( methods ) ) {
-			permissions[ actionName ] = allowedMethods.includes( methodName );
-		}
+		const permissions = getUserPermissionsFromResponse( response );
+		registry.batch( () => {
+			for ( const action of ALLOWED_RESOURCE_ACTIONS ) {
+				const key = getUserPermissionCacheKey( action, resource, id );
 
-		for ( const action of retrievedActions ) {
-			dispatch.receiveUserPermission(
-				`${ action }/${ resourcePath }`,
-				permissions[ action ]
-			);
-		}
+				dispatch.receiveUserPermission( key, permissions[ action ] );
+
+				// Mark related action resolutions as finished.
+				if ( action !== requestedAction ) {
+					dispatch.finishResolution( 'canUser', [
+						action,
+						resource,
+						id,
+					] );
+				}
+			}
+		} );
 	};
 
 /**
@@ -433,16 +470,7 @@ export const canUser =
 export const canUserEditEntityRecord =
 	( kind, name, recordId ) =>
 	async ( { dispatch } ) => {
-		const configs = await dispatch( getOrLoadEntitiesConfig( kind, name ) );
-		const entityConfig = configs.find(
-			( config ) => config.name === name && config.kind === kind
-		);
-		if ( ! entityConfig ) {
-			return;
-		}
-
-		const resource = entityConfig.__unstable_rest_base;
-		await dispatch( canUser( 'update', resource, recordId ) );
+		await dispatch( canUser( 'update', { kind, name, id: recordId } ) );
 	};
 
 /**
@@ -543,13 +571,17 @@ export const __experimentalGetCurrentGlobalStylesId =
 		const globalStylesURL =
 			activeThemes?.[ 0 ]?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]
 				?.href;
-		if ( globalStylesURL ) {
-			const globalStylesObject = await apiFetch( {
-				url: globalStylesURL,
-			} );
-			dispatch.__experimentalReceiveCurrentGlobalStylesId(
-				globalStylesObject.id
-			);
+		if ( ! globalStylesURL ) {
+			return;
+		}
+
+		// Regex matches the ID at the end of a URL or immediately before
+		// the query string.
+		const matches = globalStylesURL.match( /\/(\d+)(?:\?|$)/ );
+		const id = matches ? Number( matches[ 1 ] ) : null;
+
+		if ( id ) {
+			dispatch.__experimentalReceiveCurrentGlobalStylesId( id );
 		}
 	};
 
@@ -736,7 +768,7 @@ export const getRevisions =
 			( config ) => config.name === name && config.kind === kind
 		);
 
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		if ( ! entityConfig ) {
 			return;
 		}
 
@@ -820,16 +852,8 @@ export const getRevisions =
 						record[ key ],
 					] );
 
-				dispatch( {
-					type: 'START_RESOLUTIONS',
-					selectorName: 'getRevision',
-					args: resolutionsArgs,
-				} );
-				dispatch( {
-					type: 'FINISH_RESOLUTIONS',
-					selectorName: 'getRevision',
-					args: resolutionsArgs,
-				} );
+				dispatch.startResolutions( 'getRevision', resolutionsArgs );
+				dispatch.finishResolutions( 'getRevision', resolutionsArgs );
 			}
 		}
 	};
@@ -861,7 +885,7 @@ export const getRevision =
 			( config ) => config.name === name && config.kind === kind
 		);
 
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		if ( ! entityConfig ) {
 			return;
 		}