[Gutenberg Data Tutorial] Part 4: Building a new record form (#39261)

The fourth part of the Create your First App with Gutenberg Data tutorial, this time focused on creating new records. See #38250.

Co-authored-by: Dave Smith <[email protected]>

docs/how-to-guides/data-basics/3-building-an-edit-form.md

@@ -420,15 +420,29 @@ export function EditPageForm( { pageId, onSaveFinished } ) {
 		// ...
 		<div className="form-buttons">
 			<Button onClick={ handleSave } variant="primary" disabled={ ! hasEdits || isSaving }>
-				{ isSaving ? <Spinner/> : 'Save' }
+				{ isSaving ? (
+					<>
+						<Spinner/>
+						Saving
+					</>
+				) : 'Save' }
+			</Button>
+			<Button
+				onClick={ onCancel }
+				variant="tertiary"
+				disabled={ isSaving }
+			>
+				Cancel
 			</Button>
 		</div>
 		// ...
 	);
 }
 ```
 
-Note that we disable the save button when there are no edits and when the page is currently being saved. This is to prevent the user from accidentally pressing the button twice.
+Note that we disable the _save_ button when there are no edits and when the page is currently being saved. This is to prevent the user from accidentally pressing the button twice.
+
+Also, interrupting a *save* in progress is not supported by `@wordpress/data` so we also conditionally disabled the _cancel_ button.
 
 Here's what it looks like in action:
 
@@ -503,9 +517,18 @@ export function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 					variant="primary"
 					disabled={ ! hasEdits || isSaving }
 				>
-					{ isSaving ? <Spinner /> : 'Save' }
+					{ isSaving ? (
+						<>
+							<Spinner/>
+							Saving
+						</>
+					) : 'Save' }
 				</Button>
-				<Button onClick={ onCancel } variant="tertiary">
+				<Button
+					onClick={ onCancel }
+					variant="tertiary"
+					disabled={ isSaving }
+				>
 					Cancel
 				</Button>
 			</div>