[RNMobile] Add media edit icon to image block (#19723)

* Creates a MediaEdit component that shows a picker * Add Gridicon's customize icon * Show a button in images block that displays a picker * Fix lint issues * Fix no-shadow error * Fix the name of the params * When "Edit" is selected, request the Media Editor * Fix lint issues * Change media editor ID to a constant * When "Replace" is tapped, show all available media options * Fix lint issues * Avoid destructuring
WordPress · Jan 28, 2020 · a38b633 · a38b633
1 parent a911562
commit a38b633
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/index.native.js b/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';

diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import {
+	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 { onSelect, multiple = false } = this.props;
+
+		switch ( value ) {
+			case MEDIA_EDITOR:
+				requestMediaEditor( this.props.source.uri, ( media ) => {
+					if ( ( multiple && media ) || ( media && media.id ) ) {
+						onSelect( media );
+					}
+				} );
+				break;
+			default:
+				this.props.openReplaceMediaOptions();
+		}
+	}
+
+	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;
diff --git a/packages/block-library/src/image/edit.native.js b/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';
 
@@ -34,6 +35,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 { image as icon } from '@wordpress/icons';
 import styles from './styles.scss';
 import { 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,14 @@ 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 } }
+												openReplaceMediaOptions={ openMediaOptions }
+												render={ editImageComponent }
+											/>
+										}
 									</ImageBackground>
 								</View>
 							);

diff --git a/packages/block-library/src/image/icon-customize.native.js b/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>;
diff --git a/packages/block-library/src/image/styles.native.scss b/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;
+}