[RNMobile] Add media edit icon to image block

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

@@ -20,6 +20,7 @@ export {
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from './media-upload';
 export { default as MediaUploadProgress } from './media-upload-progress';
+export { default as MediaEdit } from './media-edit';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 export { default as BlockCaption } from './block-caption';

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

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import {
+	requestMediaPicker,
+	requestMediaEditor,
+	mediaSources,
+} from 'react-native-gutenberg-bridge';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Picker } from '@wordpress/components';
+
+export const MEDIA_TYPE_IMAGE = 'image';
+
+export const MEDIA_EDITOR = 'MEDIA_EDITOR';
+
+const editOption = {
+	id: MEDIA_EDITOR,
+	value: MEDIA_EDITOR,
+	label: __( 'Edit' ),
+	types: [ MEDIA_TYPE_IMAGE ],
+	icon: 'admin-appearance',
+};
+
+const replaceOption = {
+	id: mediaSources.deviceLibrary,
+	value: mediaSources.deviceLibrary,
+	label: __( 'Replace' ),
+	types: [ MEDIA_TYPE_IMAGE ],
+	icon: 'update',
+};
+
+const options = [ editOption, replaceOption ];
+
+export class MediaEdit extends React.Component {
+	constructor( props ) {
+		super( props );
+		this.onPickerPresent = this.onPickerPresent.bind( this );
+		this.onPickerSelect = this.onPickerSelect.bind( this );
+	}
+
+	getMediaOptionsItems() {
+		return options;
+	}
+
+	onPickerPresent() {
+		if ( this.picker ) {
+			this.picker.presentPicker();
+		}
+	}
+
+	onPickerSelect( value ) {
+		const { allowedTypes = [], onSelect, multiple = false } = this.props;
+		const mediaSource = this.getMediaOptionsItems().filter( ( source ) => source.value === value ).shift();
+		const types = allowedTypes.filter( ( type ) => mediaSource.types.includes( type ) );
+		const mediaCallback = ( media ) => {
+			if ( ( multiple && media ) || ( media && media.id ) ) {
+				onSelect( media );
+			}
+		};
+
+		switch ( value ) {
+			case MEDIA_EDITOR:
+				requestMediaEditor( this.props.source.uri, mediaCallback );
+				break;
+			default:
+				requestMediaPicker( mediaSource.id, types, multiple, mediaCallback );
+		}
+	}
+
+	render() {
+		const mediaOptions = () => (
+			<Picker
+				hideCancelButton
+				ref={ ( instance ) => this.picker = instance }
+				options={ this.getMediaOptionsItems() }
+				onChange={ this.onPickerSelect }
+			/>
+		);
+
+		return this.props.render( { open: this.onPickerPresent, mediaOptions } );
+	}
+}
+
+export default MediaEdit;

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

@@ -9,6 +9,7 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 	requestImageFullscreenPreview,
+	showMediaEditorButton,
 } from 'react-native-gutenberg-bridge';
 import { isEmpty, map, get } from 'lodash';
 
@@ -35,6 +36,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	BlockAlignmentToolbar,
+	MediaEdit,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
@@ -48,6 +50,7 @@ import { withSelect } from '@wordpress/data';
 import styles from './styles.scss';
 import SvgIcon, { editImageIcon } from './icon';
 import SvgIconRetry from './icon-retry';
+import SvgIconCustomize from './icon-customize';
 import { getUpdatedLinkTargetSettings } from './utils';
 
 import {
@@ -394,6 +397,16 @@ export class ImageEdit extends React.Component {
 
 		const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
 
+		const editImageComponent = ( openMediaOptions, mediaOptions ) => (
+			<TouchableWithoutFeedback
+				onPress={ openMediaOptions }>
+				<View style={ styles.edit }>
+					{ mediaOptions() }
+					<Icon icon={ SvgIconCustomize } { ...styles.iconCustomise } />
+				</View>
+			</TouchableWithoutFeedback>
+		);
+
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
@@ -458,6 +471,15 @@ export class ImageEdit extends React.Component {
 												<Text style={ styles.uploadFailedText }>{ retryMessage }</Text>
 											</View>
 										}
+										{ ! isUploadInProgress && ! isUploadFailed && finalWidth && finalHeight && showMediaEditorButton &&
+											<MediaEdit allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
+												onSelect={ this.onSelectMediaUploadOption }
+												source={ { uri: url } }
+												render={ ( { open, mediaOptions } ) => {
+													return editImageComponent( open, mediaOptions );
+												} }
+											/>
+										}
 									</ImageBackground>
 								</View>
 							);

packages/block-library/src/image/icon-customize.native.js

@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default <SVG xmlns="http://www.w3.org/2000/svg"><Path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z" /></SVG>;

packages/block-library/src/image/styles.native.scss

@@ -83,3 +83,20 @@
 	justify-content: center;
 	align-items: center;
 }
+
+.edit {
+	width: 44px;
+	height: 44px;
+	background-color: $dark-opacity-500;
+	border-radius: 22px;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+
+.iconCustomise {
+	fill: #fff;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+}