Mobile: Implemented media options sheet

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

@@ -20,7 +20,7 @@ import {
 /**
  * Internal dependencies
  */
-import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor';
+import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet, Picker } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner, Dashicon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
@@ -34,6 +34,10 @@ const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
 const MEDIA_UPLOAD_STATE_FAILED = 3;
 const MEDIA_UPLOAD_STATE_RESET = 4;
 
+const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE = 'choose_from_device';
+const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO = 'take_photo';
+const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY = 'wordpress_media_library';
+
 const LINK_DESTINATION_CUSTOM = 'custom';
 
 class ImageEdit extends React.Component {
@@ -164,6 +168,14 @@ class ImageEdit extends React.Component {
 		} ) );
 	}
 
+	getMediaOptionsItems() {
+		return [
+			{ icon: 'wordpress-alt', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE, label: __( 'Choose from device' ) },
+			{ icon: 'camera', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO, label: __( 'Take a Photo' ) },
+			{ icon: 'format-image', value: MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY, label: __( 'WordPress Media Library' ) },
+		];
+	}
+
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { url, caption, height, width, alt, href } = attributes;
@@ -176,33 +188,23 @@ class ImageEdit extends React.Component {
 			} );
 		};
 
-		if ( ! url ) {
-			const onMediaUploadButtonPressed = () => {
-				requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
-					if ( mediaUri ) {
-						this.addMediaUploadListener( );
-						setAttributes( { url: mediaUri, id: mediaId } );
-					}
-				} );
-			};
-
-			const onMediaCaptureButtonPressed = () => {
-				requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
-					if ( mediaUri ) {
-						this.addMediaUploadListener( );
-						setAttributes( { url: mediaUri, id: mediaId } );
-					}
-				} );
-			};
+		const onMediaUploadButtonPressed = () => {
+			requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
+				if ( mediaUri ) {
+					this.addMediaUploadListener( );
+					setAttributes( { url: mediaUri, id: mediaId } );
+				}
+			} );
+		};
 
-			return (
-				<MediaPlaceholder
-					onUploadMediaPressed={ onMediaUploadButtonPressed }
-					onMediaLibraryPressed={ onMediaLibraryButtonPressed }
-					onCapturePhotoPressed={ onMediaCaptureButtonPressed }
-				/>
-			);
-		}
+		const onMediaCaptureButtonPressed = () => {
+			requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
+				if ( mediaUri ) {
+					this.addMediaUploadListener( );
+					setAttributes( { url: mediaUri, id: mediaId } );
+				}
+			} );
+		};
 
 		const onImageSettingsButtonPressed = () => {
 			this.setState( { showSettings: true } );
@@ -212,12 +214,18 @@ class ImageEdit extends React.Component {
 			this.setState( { showSettings: false } );
 		};
 
+		let picker;
+
+		const onMediaOptionsButtonPressed = () => {
+			picker.presentPicker();
+		};
+
 		const toolbarEditButton = (
 			<Toolbar>
 				<ToolbarButton
 					label={ __( 'Edit image' ) }
 					icon="edit"
-					onClick={ onMediaLibraryButtonPressed }
+					onClick={ onMediaOptionsButtonPressed }
 				/>
 			</Toolbar>
 		);
@@ -244,7 +252,7 @@ class ImageEdit extends React.Component {
 					label={ __( 'Image Size' ) }
 					value={ 'Large' } // Temporary for UI implementation.
 					options={ sizeOptions }
-					onChangeValue={ () => {} } // Temporary for UI implementation.
+					onChangeValue={ ( ) => { } } // Temporary for UI implementation.
 				/>
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }
@@ -262,6 +270,36 @@ class ImageEdit extends React.Component {
 			</BottomSheet>
 		);
 
+		const mediaOptions = this.getMediaOptionsItems();
+
+		const getMediaOptions = () => (
+			<Picker
+				hideCancelButton={ true }
+				ref={ ( instance ) => picker = instance }
+				options={ mediaOptions }
+				onChange={ ( value ) => {
+					if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE ) {
+						onMediaUploadButtonPressed();
+					} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_PHOTO ) {
+						onMediaCaptureButtonPressed();
+					} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) {
+						onMediaLibraryButtonPressed();
+					}
+				} }
+			/>
+		);
+
+		if ( ! url ) {
+			return (
+				<View style={ { flex: 1 } } >
+					{ getMediaOptions() }
+					<MediaPlaceholder
+						onMediaOptionsPressed={ onMediaOptionsButtonPressed }
+					/>
+				</View>
+			);
+		}
+
 		const showSpinner = this.state.isUploadInProgress;
 		const opacity = this.state.isUploadInProgress ? 0.3 : 1;
 		const progress = this.state.progress * 100;
@@ -300,6 +338,7 @@ class ImageEdit extends React.Component {
 							return (
 								<View style={ { flex: 1 } } >
 									{ getInspectorControls() }
+									{ getMediaOptions() }
 									<ImageBackground
 										style={ { width: finalWidth, height: finalHeight, opacity } }
 										resizeMethod="scale"

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

@@ -12,3 +12,4 @@ export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as InspectorControls } from './inspector-controls';
 export { default as BottomSheet } from './mobile/bottom-sheet';
+export { default as Picker } from './mobile/picker';

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

@@ -1,27 +1,26 @@
 /**
  * External dependencies
  */
-import { View, Text, Button } from 'react-native';
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
 
 import styles from './styles.scss';
 
 import { __ } from '@wordpress/i18n';
+import { Dashicon } from '@wordpress/components';
 
 function MediaPlaceholder( props ) {
 	return (
-		<View style={ styles.emptyStateContainer }>
-			<Text style={ styles.emptyStateTitle }>
-				{ __( 'Image' ) }
-			</Text>
-			<Text style={ styles.emptyStateDescription }>
-				{ __( 'Upload a new image or select a file from your library.' ) }
-			</Text>
-			<View style={ styles.emptyStateButtonsContainer }>
-				<Button title={ __( 'Device Library' ) } onPress={ props.onUploadMediaPressed } />
-				<Button title={ __( 'Take photo' ) } onPress={ props.onCapturePhotoPressed } />
+		<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
+			<View style={ styles.emptyStateContainer }>
+				<Dashicon icon={ 'format-image' } />
+				<Text style={ styles.emptyStateTitle }>
+					{ __( 'Image' ) }
+				</Text>
+				<Text style={ styles.emptyStateDescription }>
+					{ __( 'CHOOSE IMAGE' ) }
+				</Text>
 			</View>
-			<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPressed } />
-		</View>
+		</TouchableWithoutFeedback>
 	);
 }
 

packages/editor/src/components/media-placeholder/styles.native.scss

@@ -1,5 +1,9 @@
 .emptyStateContainer {
+	flex: 1;
+	height: 142;
+	flex-direction: column;
 	align-items: center;
+	justify-content: center;
 	background-color: #f2f2f2;
 	padding-left: 12;
 	padding-right: 12;
@@ -9,18 +13,15 @@
 
 .emptyStateTitle {
 	text-align: center;
-	font-weight: 600;
-	padding-bottom: 12;
+	margin-top: 8;
+	margin-bottom: 10;
+	font-size: 14;
+	color: #2e4453;
 }
 
 .emptyStateDescription {
 	text-align: center;
-}
-
-.emptyStateButtonsContainer {
-	margin-top: 15;
-	margin-bottom: 15;
-	flex-direction: row;
-	justify-content: space-evenly;
-	width: 100%;
+	color: #0087be;
+	font-size: 14;
+	font-weight: 500;
 }

packages/editor/src/components/mobile/bottom-sheet/index.native.js

@@ -57,6 +57,7 @@ class BottomSheet extends Component {
 				backdropTransitionOutTiming={ 500 }
 				backdropOpacity={ 0.2 }
 				onBackdropPress={ this.props.onClose }
+				onBackButtonPress={ this.props.onClose }
 				onSwipe={ this.props.onClose }
 				swipeDirection="down"
 			>

packages/editor/src/components/mobile/picker/index.android.js

@@ -45,16 +45,17 @@ export default class Picker extends Component {
 				<View>
 					{ this.props.options.map( ( option, index ) =>
 						<BottomSheet.Cell
+							icon={ option.icon }
 							key={ index }
 							label={ option.label }
 							onPress={ () => this.onCellPress( option.value ) }
 						/>
 					) }
-					<BottomSheet.Cell
+					{ ! this.props.hideCancelButton && <BottomSheet.Cell
 						label={ __( 'Cancel' ) }
 						onPress={ this.onClose }
 						drawSeparator={ false }
-					/>
+					/> }
 				</View>
 			</BottomSheet>
 		);