Lock post saving during image uploads (#41120)

Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: ryanwelcher <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: mtias <[email protected]>

Author: 9 people

package-lock.json

@@ -75,7 +75,8 @@
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"remove-accents": "^0.5.0"
+		"remove-accents": "^0.5.0",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

packages/editor/package.json

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
 /**
  * WordPress dependencies
  */
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
 
 /**
@@ -32,7 +37,16 @@ export default function mediaUpload( {
 	onFileChange,
 } ) {
 	const { getCurrentPost, getEditorSettings } = select( editorStore );
+	const {
+		lockPostAutosaving,
+		unlockPostAutosaving,
+		lockPostSaving,
+		unlockPostSaving,
+	} = dispatch( editorStore );
+
 	const wpAllowedMimeTypes = getEditorSettings().allowedMimeTypes;
+	const lockKey = `image-upload-${ uuid() }`;
+	let imageIsUploading = false;
 	maxUploadFileSize =
 		maxUploadFileSize || getEditorSettings().maxUploadFileSize;
 	const currentPost = getCurrentPost();
@@ -41,18 +55,39 @@ export default function mediaUpload( {
 		typeof currentPost?.id === 'number'
 			? currentPost.id
 			: currentPost?.wp_id;
+	const setSaveLock = () => {
+		lockPostSaving( lockKey );
+		lockPostAutosaving( lockKey );
+		imageIsUploading = true;
+	};
+
 	const postData = currentPostId ? { post: currentPostId } : {};
+	const clearSaveLock = () => {
+		unlockPostSaving( lockKey );
+		unlockPostAutosaving( lockKey );
+		imageIsUploading = false;
+	};
 
 	uploadMedia( {
 		allowedTypes,
 		filesList,
-		onFileChange,
+		onFileChange: ( file ) => {
+			if ( ! imageIsUploading ) {
+				setSaveLock();
+			} else {
+				clearSaveLock();
+			}
+			onFileChange( file );
+		},
 		additionalData: {
 			...postData,
 			...additionalData,
 		},
 		maxUploadFileSize,
-		onError: ( { message } ) => onError( message ),
+		onError: ( { message } ) => {
+			clearSaveLock();
+			onError( message );
+		},
 		wpAllowedMimeTypes,
 	} );
 }