fix: Media & Text block displays video upload errors (#59288)

* fix: Media & Text block displays video upload errors

When the paused state and messaging was implemented for image uploads,
it was inadvertently applied to Media & Text blocks. This resulted in a
lack of any failed upload messages when a video was attached to the
Media & Text block.

* test: Media & Text block displays video upload errors

* docs: Add change log entry

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

@@ -49,6 +49,7 @@ export { default as MediaUploadProgress } from './media-upload-progress';
 export {
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_PAUSED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
 } from './media-upload-progress/constants';

packages/block-library/src/media-text/media-container.native.js

@@ -341,7 +341,9 @@ class MediaContainer extends Component {
 								{ getMediaOptions() }
 
 								<MediaUploadProgress
-									enablePausedUploads
+									enablePausedUploads={
+										mediaType === MEDIA_TYPE_IMAGE
+									}
 									coverUrl={ coverUrl }
 									mediaId={ mediaId }
 									onUpdateMediaProgress={

packages/block-library/src/media-text/test/edit.native.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	requestMediaPicker,
+	sendMediaUpload,
+	subscribeMediaUpload,
+} from '@wordpress/react-native-bridge';
+import { MEDIA_UPLOAD_STATE_PAUSED } from '@wordpress/block-editor';
+
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
+
+setupCoreBlocks( [ 'core/media-text' ] );
+
+describe( 'Media & Text block edit', () => {
+	it( 'should display an error message for failed video uploads', async () => {
+		requestMediaPicker.mockImplementation(
+			( source, filter, multiple, callback ) => {
+				callback( {
+					id: 1,
+					url: 'file://video.mp4',
+					type: 'video',
+				} );
+			}
+		);
+		await initializeEditor();
+		await addBlock( screen, 'Media & Text' );
+		fireEvent.press( screen.getByText( 'Add image or video' ) );
+		fireEvent.press( screen.getByText( 'Choose from device' ) );
+
+		sendMediaUpload( {
+			mediaId: 1,
+			state: MEDIA_UPLOAD_STATE_PAUSED,
+			progress: 0,
+		} );
+
+		expect(
+			screen.getByText( 'Failed to insert media.\nTap for more info.' )
+		).toBeVisible();
+	} );
+} );

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 -   [*] Prevent crash when autoscrolling to blocks [#59110]
+-   [*] Media & Text blocks correctly show an error message when the attached video upload fails [#59288]
 
 ## 1.112.0
 -   [*] [internal] Upgrade React Native to version 0.71.15 [#57667]