[RNMobile] Simplify media insertion flow

packages/block-editor/src/components/inserter/menu.native.js

@@ -237,6 +237,8 @@ export default compose(
 			insertDefaultBlock,
 		} = dispatch( 'core/block-editor' );
 
+		const { addLastBlockInserted } = dispatch( 'core/editor' );
+
 		return {
 			showInsertionPoint() {
 				if ( ownProps.shouldReplaceBlock ) {
@@ -274,6 +276,10 @@ export default compose(
 					innerBlocks
 				);
 
+				const { clientId } = insertedBlock;
+
+				addLastBlockInserted( clientId );
+
 				insertBlock(
 					insertedBlock,
 					ownProps.insertionIndex,

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

@@ -47,6 +47,7 @@ function MediaPlaceholder( props ) {
 		height,
 		backgroundColor,
 		hideContent,
+		autoOpenMediaUpload,
 	} = props;
 
 	// use ref to keep media array current for callbacks during rerenders
@@ -152,6 +153,7 @@ function MediaPlaceholder( props ) {
 				}
 				multiple={ multiple }
 				isReplacingMedia={ false }
+				autoOpenMediaUpload={ autoOpenMediaUpload }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
 						<TouchableWithoutFeedback

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

@@ -2,6 +2,9 @@
  * External dependencies
  */
 import React from 'react';
+import { Platform } from 'react-native';
+
+import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -28,20 +31,21 @@ export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 
+const PICKER_OPENING_DELAY = 200;
+
 export class MediaUpload extends React.Component {
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getAllSources = this.getAllSources.bind( this );
-
 		this.state = {
 			otherMediaOptions: [],
 		};
 	}
 
 	componentDidMount() {
-		const { allowedTypes = [] } = this.props;
+		const { allowedTypes = [], autoOpenMediaUpload } = this.props;
 		getOtherMediaOptions( allowedTypes, ( otherMediaOptions ) => {
 			const otherMediaOptionsWithIcons = otherMediaOptions.map(
 				( option ) => {
@@ -55,6 +59,10 @@ export class MediaUpload extends React.Component {
 
 			this.setState( { otherMediaOptions: otherMediaOptionsWithIcons } );
 		} );
+
+		if ( autoOpenMediaUpload ) {
+			this.onPickerPresent();
+		}
 	}
 
 	getAllSources() {
@@ -138,8 +146,20 @@ export class MediaUpload extends React.Component {
 	}
 
 	onPickerPresent() {
+		const { autoOpenMediaUpload } = this.props;
+		const isIOS = Platform.OS === 'ios';
+
 		if ( this.picker ) {
-			this.picker.presentPicker();
+			// the delay below is required because on iOS this action sheet gets dismissed by the close event of the Inserter
+			// so this delay allows the Inserter to be closed fully before presenting action sheet.
+			if ( autoOpenMediaUpload && isIOS ) {
+				delay(
+					() => this.picker.presentPicker(),
+					PICKER_OPENING_DELAY
+				);
+			} else {
+				this.picker.presentPicker();
+			}
 		}
 	}
 

packages/block-library/src/gallery/edit.js

@@ -33,7 +33,7 @@ import {
 import { Platform, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { useDispatch, withSelect } from '@wordpress/data';
+import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
 
@@ -79,6 +79,7 @@ function GalleryEdit( props ) {
 		imageSizes,
 		resizedImages,
 		onFocus,
+		wasBlockJustInserted,
 	} = props;
 	const {
 		columns = defaultColumnsNumber( attributes ),
@@ -341,6 +342,9 @@ function GalleryEdit( props ) {
 			onError={ onUploadError }
 			notices={ hasImages ? undefined : noticeUI }
 			onFocus={ onFocus }
+			autoOpenMediaUpload={
+				! hasImages && isSelected && wasBlockJustInserted()
+			}
 		/>
 	);
 
@@ -460,6 +464,22 @@ export default compose( [
 			resizedImages,
 		};
 	} ),
+	withDispatch( ( dispatch, { clientId }, { select } ) => {
+		return {
+			wasBlockJustInserted() {
+				const { clearLastBlockInserted } = dispatch( 'core/editor' );
+				const { wasBlockJustInserted } = select( 'core/editor' );
+
+				const result = wasBlockJustInserted( clientId );
+
+				if ( result ) {
+					clearLastBlockInserted( clientId );
+					return true;
+				}
+				return false;
+			},
+		};
+	} ),
 	withNotices,
 	withViewportMatch( { isNarrow: '< small' } ),
 ] )( GalleryEdit );

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

@@ -41,7 +41,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getProtocol, hasQueryArg } 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,
@@ -66,7 +66,6 @@ const getUrlForSlug = ( image, { sizeSlug } ) => {
 export class ImageEdit extends React.Component {
 	constructor( props ) {
 		super( props );
-
 		this.state = {
 			isCaptionSelected: false,
 		};
@@ -93,6 +92,7 @@ export class ImageEdit extends React.Component {
 		this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(
 			this
 		);
+		this.onClearMedia = this.onClearMedia.bind( this );
 	}
 
 	componentDidMount() {
@@ -317,6 +317,10 @@ export class ImageEdit extends React.Component {
 		}
 	}
 
+	onClearMedia() {
+		this.props.setAttributes( { id: null, url: null } );
+	}
+
 	getPlaceholderIcon() {
 		return (
 			<Icon
@@ -346,6 +350,7 @@ export class ImageEdit extends React.Component {
 			image,
 			imageSizes,
 			clientId,
+			wasBlockJustInserted,
 		} = this.props;
 		const {
 			align,
@@ -438,6 +443,9 @@ export class ImageEdit extends React.Component {
 						onSelect={ this.onSelectMediaUploadOption }
 						icon={ this.getPlaceholderIcon() }
 						onFocus={ this.props.onFocus }
+						autoOpenMediaUpload={
+							isSelected && ! url && wasBlockJustInserted()
+						}
 					/>
 				</View>
 			);
@@ -497,6 +505,16 @@ export class ImageEdit extends React.Component {
 											this.onSelectMediaUploadOption
 										}
 										openMediaOptions={ openMediaOptions }
+										mediaPickerOptions={ [
+											{
+												destructiveButton: true,
+												id: 'clearMedia',
+												label: __( 'Clear Media' ),
+												onPress: this.onClearMedia,
+												separated: true,
+												value: 'clearMedia',
+											},
+										] }
 										retryMessage={ retryMessage }
 										url={ url }
 										shapeStyle={ styles[ className ] }
@@ -556,5 +574,21 @@ export default compose( [
 			imageSizes,
 		};
 	} ),
+	withDispatch( ( dispatch, { clientId }, { select } ) => {
+		return {
+			wasBlockJustInserted() {
+				const { clearLastBlockInserted } = dispatch( 'core/editor' );
+				const { wasBlockJustInserted } = select( 'core/editor' );
+
+				const result = wasBlockJustInserted( clientId );
+
+				if ( result ) {
+					clearLastBlockInserted( clientId );
+					return true;
+				}
+				return false;
+			},
+		};
+	} ),
 	withPreferredColorScheme,
 ] )( ImageEdit );

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

@@ -19,7 +19,7 @@ import {
 	ToolbarGroup,
 	PanelBody,
 } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { withPreferredColorScheme, compose } from '@wordpress/compose';
 import {
 	BlockCaption,
 	MediaPlaceholder,
@@ -35,6 +35,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { video as SvgIcon, replace } from '@wordpress/icons';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -189,7 +190,12 @@ class VideoEdit extends React.Component {
 	}
 
 	render() {
-		const { setAttributes, attributes, isSelected } = this.props;
+		const {
+			setAttributes,
+			attributes,
+			isSelected,
+			wasBlockJustInserted,
+		} = this.props;
 		const { id, src } = attributes;
 		const { videoContainerHeight } = this.state;
 
@@ -221,6 +227,9 @@ class VideoEdit extends React.Component {
 						onSelect={ this.onSelectMediaUploadOption }
 						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
 						onFocus={ this.props.onFocus }
+						autoOpenMediaUpload={
+							isSelected && ! src && wasBlockJustInserted()
+						}
 					/>
 				</View>
 			);
@@ -359,4 +368,22 @@ class VideoEdit extends React.Component {
 	}
 }
 
-export default withPreferredColorScheme( VideoEdit );
+export default compose( [
+	withDispatch( ( dispatch, { clientId }, { select } ) => {
+		return {
+			wasBlockJustInserted() {
+				const { clearLastBlockInserted } = dispatch( 'core/editor' );
+				const { wasBlockJustInserted } = select( 'core/editor' );
+
+				const result = wasBlockJustInserted( clientId );
+
+				if ( result ) {
+					clearLastBlockInserted( clientId );
+					return true;
+				}
+				return false;
+			},
+		};
+	} ),
+	withPreferredColorScheme,
+] )( VideoEdit );

packages/components/src/mobile/picker/index.ios.js

@@ -20,7 +20,7 @@ class Picker extends Component {
 			anchor,
 		} = this.props;
 		const labels = options.map( ( { label } ) => label );
-		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
+		const fullOptions = [ __( 'Dismiss' ) ].concat( labels );
 
 		ActionSheetIOS.showActionSheetWithOptions(
 			{

packages/editor/src/store/actions.native.js

@@ -84,3 +84,31 @@ export function removeNotice( id ) {
 		id,
 	};
 }
+
+/**
+ * Returns an action object to track the last block that was inserted.
+ *
+ * @param {Object} clientId The client id of the block.
+ *
+ * @return {Object} Action object.
+ */
+export function addLastBlockInserted( clientId ) {
+	return {
+		type: 'ADD_LAST_BLOCK_INSERTED',
+		clientId,
+	};
+}
+
+/**
+ * Returns an action object to clear the last block that was inserted.
+ *
+ * @param {Object} clientId The id of the block to remove.
+ *
+ * @return {Object} Action object.
+ */
+export function clearLastBlockInserted( clientId ) {
+	return {
+		type: 'CLEAR_LAST_BLOCK_INSERTED',
+		clientId,
+	};
+}

packages/editor/src/store/reducer.native.js

@@ -85,6 +85,25 @@ export function notices( state = [], action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the block insertion event list state.
+ *
+ * @param {Object}  state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function lastBlockInserted( state = {}, action ) {
+	switch ( action.type ) {
+		case 'ADD_LAST_BLOCK_INSERTED':
+			return { ...state, clientId: action.clientId };
+
+		case 'CLEAR_LAST_BLOCK_INSERTED':
+			return {};
+	}
+	return state;
+}
+
 export default optimist(
 	combineReducers( {
 		postId,
@@ -99,5 +118,6 @@ export default optimist(
 		editorSettings,
 		clipboard,
 		notices,
+		lastBlockInserted,
 	} )
 );

packages/editor/src/store/selectors.native.js

@@ -77,3 +77,14 @@ export function getClipboard( state ) {
 export function getNotices( state ) {
 	return state.notices;
 }
+
+/**
+ * Tells if the block with the passed clientId was just inserted.
+ *
+ * @param {Object} state Global application state.
+ * @param {Object} clientId client id of the block.
+ * @return {boolean} If a client id exists within the lastBlockInserted state then the block was just inserted.
+ */
+export function wasBlockJustInserted( state, clientId ) {
+	return state.lastBlockInserted.clientId === clientId;
+}