feat: Update Image block failed upload visuals

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

@@ -45,13 +45,13 @@ export {
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
 } from './media-upload/constants';
+export { default as MediaUploadProgress } from './media-upload-progress';
 export {
-	default as MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from './media-upload-progress';
+} from './media-upload-progress/constants';
 export { default as BlockMediaUpdateProgress } from './block-media-update-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';

packages/block-editor/src/components/media-upload-progress/constants.js

@@ -0,0 +1,6 @@
+export const MEDIA_UPLOAD_STATE_IDLE = 0;
+export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
+export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
+export const MEDIA_UPLOAD_STATE_FAILED = 3;
+export const MEDIA_UPLOAD_STATE_RESET = 4;
+export const MEDIA_UPLOAD_STATE_PAUSED = 11;

packages/block-editor/src/components/media-upload-progress/index.native.js

@@ -15,23 +15,28 @@ import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
  * Internal dependencies
  */
 import styles from './styles.scss';
-
-export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
-export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
-export const MEDIA_UPLOAD_STATE_FAILED = 3;
-export const MEDIA_UPLOAD_STATE_RESET = 4;
+import {
+	MEDIA_UPLOAD_STATE_IDLE,
+	MEDIA_UPLOAD_STATE_UPLOADING,
+	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_FAILED,
+	MEDIA_UPLOAD_STATE_RESET,
+	MEDIA_UPLOAD_STATE_PAUSED,
+} from './constants';
 
 export class MediaUploadProgress extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.state = {
+			uploadState: MEDIA_UPLOAD_STATE_IDLE,
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
+		this.getRetryMessage = this.getRetryMessage.bind( this );
 	}
 
 	componentDidMount() {
@@ -45,7 +50,11 @@ export class MediaUploadProgress extends Component {
 	mediaUpload( payload ) {
 		const { mediaId } = this.props;
 
-		if ( payload.mediaId !== mediaId ) {
+		if (
+			payload.mediaId !== mediaId ||
+			( payload.state === this.state.uploadState &&
+				payload.progress === this.state.progress )
+		) {
 			return;
 		}
 
@@ -56,6 +65,9 @@ export class MediaUploadProgress extends Component {
 			case MEDIA_UPLOAD_STATE_SUCCEEDED:
 				this.finishMediaUploadWithSuccess( payload );
 				break;
+			case MEDIA_UPLOAD_STATE_PAUSED:
+				this.finishMediaUploadWithPause( payload );
+				break;
 			case MEDIA_UPLOAD_STATE_FAILED:
 				this.finishMediaUploadWithFailure( payload );
 				break;
@@ -68,6 +80,7 @@ export class MediaUploadProgress extends Component {
 	updateMediaProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
+			uploadState: payload.state,
 			isUploadInProgress: true,
 			isUploadFailed: false,
 		} );
@@ -77,21 +90,48 @@ export class MediaUploadProgress extends Component {
 	}
 
 	finishMediaUploadWithSuccess( payload ) {
-		this.setState( { isUploadInProgress: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+		} );
 		if ( this.props.onFinishMediaUploadWithSuccess ) {
 			this.props.onFinishMediaUploadWithSuccess( payload );
 		}
 	}
 
+	finishMediaUploadWithPause( payload ) {
+		if ( ! this.props.enablePausedUploads ) {
+			this.finishMediaUploadWithFailure( payload );
+			return;
+		}
+
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: true,
+			isUploadFailed: false,
+		} );
+		if ( this.props.onFinishMediaUploadWithFailure ) {
+			this.props.onFinishMediaUploadWithFailure( payload );
+		}
+	}
+
 	finishMediaUploadWithFailure( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: true } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: true,
+		} );
 		if ( this.props.onFinishMediaUploadWithFailure ) {
 			this.props.onFinishMediaUploadWithFailure( payload );
 		}
 	}
 
 	mediaUploadStateReset( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: false,
+		} );
 		if ( this.props.onMediaUploadStateReset ) {
 			this.props.onMediaUploadStateReset( payload );
 		}
@@ -115,15 +155,24 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	getRetryMessage() {
+		if (
+			this.state.uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+			this.props.enablePausedUploads
+		) {
+			return __( 'Waiting for connection' );
+		}
+
+		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+		return __( 'Failed to insert media.\nTap for more info.' );
+	}
+
 	render() {
 		const { renderContent = () => null } = this.props;
-		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { isUploadInProgress, isUploadFailed, uploadState } = this.state;
 		const showSpinner = this.state.isUploadInProgress;
 		const progress = this.state.progress * 100;
-		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
-		const retryMessage = __(
-			'Failed to insert media.\nTap for more info.'
-		);
+		const retryMessage = this.getRetryMessage();
 
 		const progressBarStyle = [
 			styles.progressBar,
@@ -149,6 +198,9 @@ export class MediaUploadProgress extends Component {
 					) }
 				</View>
 				{ renderContent( {
+					isUploadPaused:
+						uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+						this.props.enablePausedUploads,
 					isUploadInProgress,
 					isUploadFailed,
 					retryMessage,

packages/block-editor/src/components/media-upload-progress/test/index.native.js

@@ -14,13 +14,13 @@ import {
 /**
  * Internal dependencies
  */
+import { MediaUploadProgress } from '../';
 import {
-	MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from '../';
+} from '../constants';
 
 let uploadCallBack;
 subscribeMediaUpload.mockImplementation( ( callback ) => {

packages/block-library/src/image/edit.native.js

@@ -812,6 +812,7 @@ export class ImageEdit extends Component {
 						{ ! this.state.isCaptionSelected &&
 							getToolbarEditButton( openMediaOptions ) }
 						<MediaUploadProgress
+							enablePausedUploads
 							coverUrl={ url }
 							mediaId={ id }
 							onUpdateMediaProgress={ this.updateMediaProgress }
@@ -825,6 +826,7 @@ export class ImageEdit extends Component {
 								this.mediaUploadStateReset
 							}
 							renderContent={ ( {
+								isUploadPaused,
 								isUploadInProgress,
 								isUploadFailed,
 								retryMessage,
@@ -843,6 +845,7 @@ export class ImageEdit extends Component {
 												! isCaptionSelected
 											}
 											isUploadFailed={ isUploadFailed }
+											isUploadPaused={ isUploadPaused }
 											isUploadInProgress={
 												isUploadInProgress
 											}

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

@@ -170,7 +170,7 @@ class MediaContainer extends Component {
 			mediaWidth,
 			shouldStack,
 		} = this.props;
-		const { isUploadFailed, retryMessage } = params;
+		const { isUploadFailed, isUploadPaused, retryMessage } = params;
 		const focalPointValues = ! focalPoint
 			? IMAGE_DEFAULT_FOCAL_POINT
 			: focalPoint;
@@ -203,6 +203,7 @@ class MediaContainer extends Component {
 							focalPoint={ imageFill && focalPointValues }
 							isSelected={ isMediaSelected }
 							isUploadFailed={ isUploadFailed }
+							isUploadPaused={ isUploadPaused }
 							isUploadInProgress={ isUploadInProgress }
 							onSelectMediaUploadOption={
 								this.onSelectMediaUploadOption
@@ -340,6 +341,7 @@ class MediaContainer extends Component {
 								{ getMediaOptions() }
 
 								<MediaUploadProgress
+									enablePausedUploads
 									coverUrl={ coverUrl }
 									mediaId={ mediaId }
 									onUpdateMediaProgress={

packages/components/src/index.native.js

@@ -107,7 +107,8 @@ export { default as LinkSettings } from './mobile/link-settings';
 export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
 export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
 export { default as SegmentedControl } from './mobile/segmented-control';
-export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
+export { default as Image } from './mobile/image';
+export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as AudioPlayer } from './mobile/audio-player';

packages/components/src/mobile/image/constants.js

@@ -0,0 +1 @@
+export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };