Propose hooks for creating, deleting, and updating entity records alo…

…ngside usage examples

packages/core-data/src/hooks/use-entity-record-create.ts

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as coreStore } from '../';
+
+export default function useEntityRecordCreate( kind, type ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { getLastEntitySaveError } = useSelect( coreStore );
+
+	return useMemo(
+		() => ( {
+			create: async ( record ) => {
+				const result = await saveEntityRecord( kind, type, record );
+				const error = getLastEntitySaveError( kind, type );
+				// Error may be null, but the result is only available if everything worked correctly.
+				if ( ! result ) {
+					throw error;
+				}
+				return result;
+			},
+		} ),
+		[ kind, type ]
+	);
+}

packages/core-data/src/hooks/use-entity-record-delete.ts

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as coreStore } from '../';
+
+export default function useEntityRecordDelete( kind, type, id ) {
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const { getLastEntityDeleteError } = useSelect( coreStore );
+
+	return useMemo(
+		() => ( {
+			deleteRecord: async () => {
+				const result = await deleteEntityRecord( kind, type, id );
+				const error = getLastEntityDeleteError( kind, type, id );
+				// Error may be null, but the result is only available if everything worked correctly.
+				if ( ! result ) {
+					throw error;
+				}
+				return result;
+			},
+		} ),
+		[ kind, type, id ]
+	);
+}

packages/core-data/src/hooks/use-entity-record-update.ts

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as coreStore } from '../';
+
+export default function useEntityRecordUpdate( kind, type, id ) {
+	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
+		coreStore
+	);
+	const { getLastEntitySaveError } = useSelect( coreStore );
+	return useMemo(
+		() => ( {
+			applyEdits: ( record ) =>
+				editEntityRecord( kind, type, id, record ),
+			saveEdits: async () => {
+				const result = await saveEditedEntityRecord( kind, type, id );
+				const error = getLastEntitySaveError( kind, type, id );
+				// Error may be null, but the result is only available if everything worked correctly.
+				if ( ! result ) {
+					throw error;
+				}
+				return result;
+			},
+		} ),
+		[ kind, type, id ]
+	);
+}

packages/core-data/src/index.js

@@ -75,6 +75,9 @@ register( store );
 export { default as EntityProvider } from './entity-provider';
 export { default as __experimentalUseEntityRecord } from './hooks/use-entity-record';
 export { default as __experimentalUseEntityRecords } from './hooks/use-entity-records';
+export { default as __experimentalUseEntityRecordUpdate } from './hooks/use-entity-record-update';
+export { default as __experimentalUseEntityRecordCreate } from './hooks/use-entity-record-create';
+export { default as __experimentalUseEntityRecordDelete } from './hooks/use-entity-record-delete';
 export * from './entity-provider';
 export * from './fetch';
 export * from './entity-types';

packages/edit-post/src/components/header/template-title/delete-template.js

@@ -15,7 +15,8 @@ import {
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalUseEntityRecordDelete as useEntityRecordDelete } from '@wordpress/core-data';
+
 import { useState } from '@wordpress/element';
 
 /**
@@ -28,7 +29,11 @@ export default function DeleteTemplate() {
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const { getEditorSettings } = useSelect( editorStore );
 	const { updateEditorSettings, editPost } = useDispatch( editorStore );
-	const { deleteEntityRecord } = useDispatch( coreStore );
+	const { deleteRecord } = useEntityRecordDelete(
+		'postType',
+		'wp_template',
+		template.id
+	);
 	const { template } = useSelect( ( select ) => {
 		const { isEditingTemplate, getEditedPostTemplate } = select(
 			editPostStore
@@ -67,7 +72,7 @@ export default function DeleteTemplate() {
 			...settings,
 			availableTemplates: newAvailableTemplates,
 		} );
-		deleteEntityRecord( 'postType', 'wp_template', template.id );
+		deleteRecord();
 	};
 
 	return (

packages/edit-site/src/components/add-new-template/new-template-part.js

@@ -7,11 +7,11 @@ import { kebabCase } from 'lodash';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalUseEntityRecordCreate as useEntityRecordCreate } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -23,8 +23,7 @@ export default function NewTemplatePart( { postType } ) {
 	const history = useHistory();
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
-	const { getLastEntitySaveError } = useSelect( coreStore );
+	const { create } = useEntityRecordCreate( 'postType', 'wp_template_part' );
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -41,25 +40,12 @@ export default function NewTemplatePart( { postType } ) {
 				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
 				'wp-custom-part';
 
-			const templatePart = await saveEntityRecord(
-				'postType',
-				'wp_template_part',
-				{
-					slug: cleanSlug,
-					title,
-					content: '',
-					area,
-				}
-			);
-
-			const lastEntitySaveError = getLastEntitySaveError(
-				'postType',
-				'wp_template_part',
-				templatePart.id
-			);
-			if ( lastEntitySaveError ) {
-				throw lastEntitySaveError;
-			}
+			const templatePart = await create( {
+				slug: cleanSlug,
+				title,
+				content: '',
+				area,
+			} );
 
 			setIsModalOpen( false );
 

packages/edit-site/src/components/add-new-template/new-template.js

@@ -13,7 +13,10 @@ import {
 	NavigableMenu,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseEntityRecordCreate as useEntityRecordCreate,
+} from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import {
 	archive,
@@ -84,36 +87,22 @@ export default function NewTemplate( { postType } ) {
 		} ),
 		[]
 	);
-	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { getLastEntitySaveError } = useSelect( coreStore );
+	const { create } = useEntityRecordCreate( 'postType', 'wp_template' );
 
 	async function createTemplate( { slug } ) {
 		try {
 			const { title, description } = find( defaultTemplateTypes, {
 				slug,
 			} );
 
-			const template = await saveEntityRecord(
-				'postType',
-				'wp_template',
-				{
-					excerpt: description,
-					// Slugs need to be strings, so this is for template `404`
-					slug: slug.toString(),
-					status: 'publish',
-					title,
-				}
-			);
-
-			const lastEntitySaveError = getLastEntitySaveError(
-				'postType',
-				'wp_template',
-				template.id
-			);
-			if ( lastEntitySaveError ) {
-				throw lastEntitySaveError;
-			}
+			const template = await create( {
+				excerpt: description,
+				// Slugs need to be strings, so this is for template `404`
+				slug: slug.toString(),
+				status: 'publish',
+				title,
+			} );
 
 			// Navigate to the created template editor.
 			history.push( {

packages/edit-site/src/components/list/actions/rename-menu-item.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	Button,
 	Flex,
@@ -12,16 +12,17 @@ import {
 	Modal,
 	TextControl,
 } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalUseEntityRecordUpdate as useEntityRecordUpdate } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 
 export default function RenameMenuItem( { template, onClose } ) {
 	const [ title, setTitle ] = useState( () => template.title.rendered );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { getLastEntitySaveError } = useSelect( coreStore );
-	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
-		coreStore
+	const { applyEdits, saveEdits } = useEntityRecordUpdate(
+		'postType',
+		template.type,
+		template.id
 	);
 	const { createSuccessNotice, createErrorNotice } = useDispatch(
 		noticesStore
@@ -35,7 +36,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 		event.preventDefault();
 
 		try {
-			await editEntityRecord( 'postType', template.type, template.id, {
+			await applyEdits( {
 				title,
 			} );
 
@@ -45,21 +46,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 			onClose();
 
 			// Persist edited entity.
-			await saveEditedEntityRecord(
-				'postType',
-				template.type,
-				template.id
-			);
-
-			const lastError = getLastEntitySaveError(
-				'postType',
-				template.type,
-				template.id
-			);
-
-			if ( lastError ) {
-				throw lastError;
-			}
+			await saveEdits();
 
 			createSuccessNotice( __( 'Entity renamed.' ), {
 				type: 'snackbar',