Lock save button during Client Side Media processing and uploading

packages/block-editor/src/components/provider/index.js

@@ -51,7 +51,7 @@ function mediaUpload(
 	}
 ) {
 	void registry.dispatch( uploadStore ).addItems( {
-		files: filesList,
+		files: Array.from( filesList ),
 		onChange: onFileChange,
 		onSuccess,
 		onBatchSuccess,

packages/editor/package.json

@@ -98,6 +98,7 @@
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/server-side-render": "file:../server-side-render",
+		"@wordpress/upload-media": "file:../upload-media",
 		"@wordpress/url": "file:../url",
 		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",

packages/editor/src/components/provider/index.js

@@ -30,6 +30,7 @@ import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
 import NavigationBlockEditingMode from './navigation-block-editing-mode';
 import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
 import useCommands from '../commands';
+import useUploadSaveLock from './use-upload-save-lock';
 import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
@@ -352,6 +353,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Register the editor commands.
 		useCommands();
 
+		// Lock post saving when media uploads are in progress (experimental feature).
+		useUploadSaveLock();
+
 		if ( ! isReady || ! mode ) {
 			return null;
 		}

packages/editor/src/components/provider/use-upload-save-lock.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as uploadStore } from '@wordpress/upload-media';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+const LOCK_NAME = 'upload-in-progress';
+
+/**
+ * A hook that locks post saving and autosaving while media uploads are in progress.
+ * This prevents users from publishing or saving while files are still uploading.
+ *
+ * Only active when the experimental media processing feature is enabled.
+ */
+export default function useUploadSaveLock() {
+	const isExperimentEnabled = window.__experimentalMediaProcessing;
+
+	const isUploading = useSelect(
+		( select ) => {
+			if ( ! isExperimentEnabled ) {
+				return false;
+			}
+			return select( uploadStore ).isUploading();
+		},
+		[ isExperimentEnabled ]
+	);
+
+	const {
+		lockPostSaving,
+		unlockPostSaving,
+		lockPostAutosaving,
+		unlockPostAutosaving,
+	} = useDispatch( editorStore );
+
+	useEffect( () => {
+		if ( ! isExperimentEnabled ) {
+			return;
+		}
+
+		if ( isUploading ) {
+			lockPostSaving( LOCK_NAME );
+			lockPostAutosaving( LOCK_NAME );
+		} else {
+			unlockPostSaving( LOCK_NAME );
+			unlockPostAutosaving( LOCK_NAME );
+		}
+
+		return () => {
+			unlockPostSaving( LOCK_NAME );
+			unlockPostAutosaving( LOCK_NAME );
+		};
+	}, [
+		isExperimentEnabled,
+		isUploading,
+		lockPostSaving,
+		unlockPostSaving,
+		lockPostAutosaving,
+		unlockPostAutosaving,
+	] );
+}

packages/editor/src/utils/media-upload/index.js

@@ -62,13 +62,19 @@ export default function mediaUpload( {
 			? currentPost.id
 			: currentPost?.wp_id;
 	const setSaveLock = () => {
+		if ( window.__experimentalMediaProcessing ) {
+			return; // Skip - handled by useUploadSaveLock in editor provider
+		}
 		lockPostSaving( lockKey );
 		lockPostAutosaving( lockKey );
 		imageIsUploading = true;
 	};
 
 	const postData = currentPostId ? { post: currentPostId } : {};
 	const clearSaveLock = () => {
+		if ( window.__experimentalMediaProcessing ) {
+			return; // Skip - handled by useUploadSaveLock in editor provider
+		}
 		unlockPostSaving( lockKey );
 		unlockPostAutosaving( lockKey );
 		imageIsUploading = false;

packages/editor/tsconfig.json

@@ -35,6 +35,7 @@
 		{ "path": "../private-apis" },
 		{ "path": "../rich-text" },
 		{ "path": "../url" },
+		{ "path": "../upload-media" },
 		{ "path": "../warning" },
 		{ "path": "../wordcount" }
 	]

packages/upload-media/src/store/private-actions.ts

@@ -219,7 +219,7 @@ export function processItem( id: QueueItemId ) {
 				onSuccess?.( [ attachment ] );
 			}
 
-			// dispatch.removeItem( id );
+			dispatch.removeItem( id );
 			dispatch.revokeBlobUrls( id );
 
 			if ( batchId && select.isBatchUploaded( batchId ) ) {