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]>
WordPress · Jul 22, 2024 · a23699c · a23699c
1 parent e78e4e3
commit a23699c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor/package.json b/packages/editor/package.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",

diff --git a/packages/editor/src/utils/media-upload/index.js b/packages/editor/src/utils/media-upload/index.js
@@ -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,
  } );
 }