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/dependency-extraction-webpack-plugin/lib/util.js

@@ -7,7 +7,6 @@ const BUNDLED_PACKAGES = [
 	'@wordpress/interface',
 	'@wordpress/sync',
 	'@wordpress/undo-manager',
-	'@wordpress/upload-media',
 	'@wordpress/fields',
 	'@wordpress/views',
 	'@wordpress/ui',

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

@@ -78,10 +78,14 @@ export default function mediaUpload( {
 		allowedTypes,
 		filesList,
 		onFileChange: ( file ) => {
-			if ( ! imageIsUploading ) {
-				setSaveLock();
-			} else {
-				clearSaveLock();
+			// When client-side media processing is enabled, save locking
+			// is handled by useUploadSaveLock in the editor provider.
+			if ( ! window.__experimentalMediaProcessing ) {
+				if ( ! imageIsUploading ) {
+					setSaveLock();
+				} else {
+					clearSaveLock();
+				}
 			}
 			onFileChange?.( file );
 
@@ -107,7 +111,9 @@ export default function mediaUpload( {
 		},
 		maxUploadFileSize,
 		onError: ( { message } ) => {
-			clearSaveLock();
+			if ( ! window.__experimentalMediaProcessing ) {
+				clearSaveLock();
+			}
 			onError( message );
 		},
 		wpAllowedMimeTypes,

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/package.json

@@ -38,8 +38,16 @@
 		},
 		"./package.json": "./package.json"
 	},
+	"wpScript": true,
 	"types": "build-types",
-	"sideEffects": false,
+	"sideEffects": [
+		"src/index.ts",
+		"src/store/index.ts",
+		"build/index.cjs",
+		"build/store/index.cjs",
+		"build-module/index.mjs",
+		"build-module/store/index.mjs"
+	],
 	"dependencies": {
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",

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 ) ) {