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]