[RNMobile] Simplify media insertion flow

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

@@ -47,6 +47,8 @@ function MediaPlaceholder( props ) {
 		height,
 		backgroundColor,
 		hideContent,
+		autoOpenMediaUpload,
+		onMediaUploadCanceled,
 	} = props;
 
 	// use ref to keep media array current for callbacks during rerenders
@@ -147,6 +149,7 @@ function MediaPlaceholder( props ) {
 			<MediaUpload
 				allowedTypes={ allowedTypes }
 				onSelect={ setMedia }
+				onMediaUploadCanceled={ onMediaUploadCanceled }
 				__experimentalOnlyMediaLibrary={
 					__experimentalOnlyMediaLibrary
 				}
@@ -178,6 +181,7 @@ function MediaPlaceholder( props ) {
 								] }
 							>
 								{ getMediaOptions() }
+								{ autoOpenMediaUpload && open() }
 								{ ! hideContent && renderContent() }
 							</View>
 						</TouchableWithoutFeedback>

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

@@ -13,10 +13,17 @@ import {
 	requestMediaPicker,
 	mediaSources,
 } from '@wordpress/react-native-bridge';
-import { capturePhoto, captureVideo, image, wordpress } from '@wordpress/icons';
+import {
+	capturePhoto,
+	captureVideo,
+	image,
+	wordpress,
+	close,
+} from '@wordpress/icons';
 
 export const MEDIA_TYPE_IMAGE = 'image';
 export const MEDIA_TYPE_VIDEO = 'video';
+export const MEDIA_UPLOAD_CANCEL = `cancel_media_upload`;
 
 export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
@@ -85,14 +92,23 @@ export class MediaUpload extends React.Component {
 			mediaLibrary: true,
 		};
 
+		const cancelMediaUpload = {
+			value: MEDIA_UPLOAD_CANCEL,
+			label: __( 'Cancel' ),
+			types: [ MEDIA_TYPE_IMAGE ],
+			icon: close,
+		};
+
 		const internalSources = [
 			deviceLibrarySource,
 			cameraImageSource,
 			cameraVideoSource,
 			siteLibrarySource,
 		];
 
-		return internalSources.concat( this.state.otherMediaOptions );
+		return internalSources
+			.concat( this.state.otherMediaOptions )
+			.concat( cancelMediaUpload );
 	}
 
 	getMediaOptionsItems() {
@@ -138,7 +154,18 @@ export class MediaUpload extends React.Component {
 	}
 
 	onPickerSelect( value ) {
-		const { allowedTypes = [], onSelect, multiple = false } = this.props;
+		const {
+			allowedTypes = [],
+			onSelect,
+			multiple = false,
+			onMediaUploadCanceled,
+		} = this.props;
+
+		if ( value === MEDIA_UPLOAD_CANCEL ) {
+			onMediaUploadCanceled();
+			return;
+		}
+
 		const mediaSource = this.getAllSources()
 			.filter( ( source ) => source.value === value )
 			.shift();

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

@@ -486,16 +486,7 @@ const Cover = ( {
 						<ImageEditingButton
 							onSelectMediaUploadOption={ onSelectMedia }
 							openMediaOptions={ openMediaOptionsRef.current }
-							pickerOptions={ [
-								{
-									destructiveButton: true,
-									id: 'clearMedia',
-									label: __( 'Clear Media' ),
-									onPress: onClearMedia,
-									separated: true,
-									value: 'clearMedia',
-								},
-							] }
+							onClearMedia={ onClearMedia }
 							url={ url }
 						/>
 					</View>

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

@@ -39,7 +39,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { withSelect, withDispatch } from '@wordpress/data';
 import {
 	external,
 	link,
@@ -64,8 +64,12 @@ export class ImageEdit extends React.Component {
 	constructor( props ) {
 		super( props );
 
+		const { attributes, isSelected } = this.props;
+		const { url } = attributes;
+		const autoOpenMediaUpload = isSelected && ! url;
 		this.state = {
 			isCaptionSelected: false,
+			autoOpenMediaUpload,
 		};
 
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
@@ -90,6 +94,7 @@ export class ImageEdit extends React.Component {
 		this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(
 			this
 		);
+		this.onClearMedia = this.onClearMedia.bind( this );
 	}
 
 	componentDidMount() {
@@ -307,6 +312,11 @@ export class ImageEdit extends React.Component {
 		}
 	}
 
+	onClearMedia() {
+		this.props.setAttributes( { id: null, url: null } );
+		this.setState( { autoOpenMediaUpload: false } );
+	}
+
 	getPlaceholderIcon() {
 		return (
 			<Icon
@@ -320,8 +330,14 @@ export class ImageEdit extends React.Component {
 	}
 
 	render() {
-		const { isCaptionSelected } = this.state;
-		const { attributes, isSelected, image, imageSizes } = this.props;
+		const { isCaptionSelected, autoOpenMediaUpload } = this.state;
+		const {
+			attributes,
+			isSelected,
+			image,
+			imageSizes,
+			onDelete,
+		} = this.props;
 		const {
 			align,
 			url,
@@ -407,6 +423,8 @@ export class ImageEdit extends React.Component {
 						onSelect={ this.onSelectMediaUploadOption }
 						icon={ this.getPlaceholderIcon() }
 						onFocus={ this.props.onFocus }
+						autoOpenMediaUpload={ autoOpenMediaUpload }
+						onMediaUploadCanceled={ onDelete }
 					/>
 				</View>
 			);
@@ -465,6 +483,7 @@ export class ImageEdit extends React.Component {
 										onSelectMediaUploadOption={
 											this.onSelectMediaUploadOption
 										}
+										onClearMedia={ this.onClearMedia }
 										openMediaOptions={ openMediaOptions }
 										retryMessage={ retryMessage }
 										url={ url }
@@ -517,5 +536,12 @@ export default compose( [
 			imageSizes,
 		};
 	} ),
+	withDispatch( ( dispatch, { clientId, rootClientId, onDelete } ) => {
+		const { removeBlock } = dispatch( 'core/block-editor' );
+		return {
+			onDelete:
+				onDelete || ( () => removeBlock( clientId, rootClientId ) ),
+		};
+	} ),
 	withPreferredColorScheme,
 ] )( ImageEdit );

packages/components/src/mobile/image/image-editing-button.native.js

@@ -7,6 +7,7 @@ import { TouchableWithoutFeedback, View } from 'react-native';
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -18,7 +19,7 @@ import styles from './style.scss';
 const ImageEditingButton = ( {
 	onSelectMediaUploadOption,
 	openMediaOptions,
-	pickerOptions,
+	onClearMedia,
 	url,
 } ) => {
 	return (
@@ -40,7 +41,16 @@ const ImageEditingButton = ( {
 					</View>
 				</TouchableWithoutFeedback>
 			) }
-			pickerOptions={ pickerOptions }
+			pickerOptions={ [
+				{
+					destructiveButton: true,
+					id: 'clearMedia',
+					label: __( 'Clear Media' ),
+					onPress: onClearMedia,
+					separated: true,
+					value: 'clearMedia',
+				},
+			] }
 		/>
 	);
 };

packages/components/src/mobile/image/index.native.js

@@ -37,9 +37,9 @@ const ImageComponent = ( {
 	isSelected,
 	isUploadFailed,
 	isUploadInProgress,
-	mediaPickerOptions,
 	onSelectMediaUploadOption,
 	openMediaOptions,
+	onClearMedia,
 	resizeMode,
 	retryMessage,
 	url,
@@ -225,7 +225,7 @@ const ImageComponent = ( {
 							}
 							openMediaOptions={ openMediaOptions }
 							url={ url }
-							pickerOptions={ mediaPickerOptions }
+							onClearMedia={ onClearMedia }
 						/>
 					) }
 			</View>