DataViews Quick Edit: Rely on the global save flow instead of a custo…

…m save button (#64389) Co-authored-by: youknowriad <[email protected]> Co-authored-by: oandregal <[email protected]>
WordPress · Aug 14, 2024 · a0a4b7a · a0a4b7a
1 parent 131f1c3
commit a0a4b7a
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 72 deletions.
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -16,6 +16,7 @@
 -   `setSelection` prop has been removed. Please use `onChangeSelection` instead.
 -   `header` field property has been renamed to `label`.
 -   `DataForm`'s `visibleFields` prop has been renamed to `fields`.
+-   `DataForm`'s `onChange` prop has been update to receive as argument only the fields that have changed.
 
 ### New features
 

diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -109,7 +109,12 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 				...form,
 				type,
 			} }
-			onChange={ setPost }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
 		/>
 	);
 };
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
@@ -41,11 +41,7 @@ function Edit< Item >( {
 	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
-		( newValue: string | null ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
-				[ id ]: newValue,
-			} ) ),
+		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
 		[ id, onChange ]
 	);
 

diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
@@ -51,10 +51,9 @@ function Edit< Item >( {
 	const value = field.getValue( { item: data } ) ?? '';
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
+			onChange( {
 				[ id ]: Number( newValue ),
-			} ) ),
+			} ),
 		[ id, onChange ]
 	);
 

diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
@@ -42,10 +42,9 @@ function Edit< Item >( {
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( ( prevItem: Item ) => ( {
-				...prevItem,
+			onChange( {
 				[ id ]: newValue,
-			} ) ),
+			} ),
 		[ id, onChange ]
 	);
 

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import type {
-	ReactElement,
-	ComponentType,
-	Dispatch,
-	SetStateAction,
-} from 'react';
+import type { ReactElement, ComponentType } from 'react';
 
 /**
  * Internal dependencies
@@ -181,7 +176,7 @@ export type Form = {
 export type DataFormControlProps< Item > = {
 	data: Item;
 	field: NormalizedField< Item >;
-	onChange: Dispatch< SetStateAction< Item > >;
+	onChange: ( value: Record< string, any > ) => void;
 	hideLabelFromVision?: boolean;
 };
 
@@ -516,5 +511,5 @@ export interface DataFormProps< Item > {
 	data: Item;
 	fields: Field< Item >[];
 	form: Form;
-	onChange: Dispatch< SetStateAction< Item > >;
+	onChange: ( value: Record< string, any > ) => void;
 }
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
@@ -7,15 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { DataForm, isItemValid } from '@wordpress/dataviews';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { DataForm } from '@wordpress/dataviews';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import {
-	Button,
-	FlexItem,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useState, useMemo } from '@wordpress/element';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
@@ -29,14 +25,12 @@ const { PostCardPanel } = unlock( editorPrivateApis );
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
-	const { initialEdits } = useSelect(
+	const { record } = useSelect(
 		( select ) => {
-			if ( ids.length !== 1 ) {
-			}
 			return {
-				initialEdits:
+				record:
 					ids.length === 1
-						? select( coreDataStore ).getEntityRecord(
+						? select( coreDataStore ).getEditedEntityRecord(
 								'postType',
 								postType,
 								ids[ 0 ]
@@ -46,60 +40,39 @@ function PostEditForm( { postType, postId } ) {
 		},
 		[ postType, ids ]
 	);
-	const registry = useRegistry();
-	const { saveEntityRecord } = useDispatch( coreDataStore );
+	const [ multiEdits, setMultiEdits ] = useState( {} );
+	const { editEntityRecord } = useDispatch( coreDataStore );
 	const { fields } = usePostFields();
 	const form = {
 		type: 'panel',
 		fields: [ 'title', 'author', 'date', 'comment_status' ],
 	};
-	const [ edits, setEdits ] = useState( initialEdits );
-	const itemWithEdits = useMemo( () => {
-		return {
-			...initialEdits,
-			...edits,
-		};
-	}, [ initialEdits, edits ] );
-	const onSubmit = async ( event ) => {
-		event.preventDefault();
-
-		if ( ! isItemValid( itemWithEdits, fields, form ) ) {
-			return;
-		}
-
-		const { getEntityRecord } = registry.resolveSelect( coreDataStore );
+	const onChange = ( edits ) => {
 		for ( const id of ids ) {
-			const item = await getEntityRecord( 'postType', postType, id );
-			saveEntityRecord( 'postType', postType, {
-				...item,
-				...edits,
-			} );
+			editEntityRecord( 'postType', postType, id, edits );
+			if ( ids.length > 1 ) {
+				setMultiEdits( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) );
+			}
 		}
 	};
+	useEffect( () => {
+		setMultiEdits( {} );
+	}, [ ids ] );
 
-	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
 	return (
-		<VStack as="form" onSubmit={ onSubmit } spacing={ 4 }>
+		<VStack spacing={ 4 }>
 			{ ids.length === 1 && (
 				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
 			) }
 			<DataForm
-				data={ itemWithEdits }
+				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }
 				form={ form }
-				onChange={ setEdits }
+				onChange={ onChange }
 			/>
-			<FlexItem>
-				<Button
-					variant="primary"
-					type="submit"
-					accessibleWhenDisabled
-					disabled={ isUpdateDisabled }
-					__next40pxDefaultSize
-				>
-					{ __( 'Update' ) }
-				</Button>
-			</FlexItem>
 		</VStack>
 	);
 }

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
@@ -234,7 +234,12 @@ const useDuplicatePostAction = ( postType ) => {
 									data={ item }
 									fields={ fields }
 									form={ formDuplicateAction }
-									onChange={ setItem }
+									onChange={ ( changes ) =>
+										setItem( {
+											...item,
+											...changes,
+										} )
+									}
 								/>
 								<HStack spacing={ 2 } justify="end">
 									<Button

diff --git a/packages/editor/src/dataviews/actions/reorder-page.tsx b/packages/editor/src/dataviews/actions/reorder-page.tsx
@@ -81,7 +81,12 @@ function ReorderModal( {
 					data={ item }
 					fields={ fields }
 					form={ formOrderAction }
-					onChange={ setItem }
+					onChange={ ( changes ) =>
+						setItem( {
+							...item,
+							...changes,
+						} )
+					}
 				/>
 				<HStack justify="right">
 					<Button