diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 521b143e6c2a2..2ba6f707422eb 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -28,6 +28,7 @@ import {
BlockControls,
InspectorControls,
BottomSheet,
+ Picker,
} from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import { isURL } from '@wordpress/url';
@@ -43,6 +44,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';
const LINK_DESTINATION_NONE = 'none';
@@ -173,6 +178,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;
@@ -185,33 +198,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 (
-
- );
- }
+ const onMediaCaptureButtonPressed = () => {
+ requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
+ if ( mediaUri ) {
+ this.addMediaUploadListener( );
+ setAttributes( { url: mediaUri, id: mediaId } );
+ }
+ } );
+ };
const onImageSettingsButtonPressed = () => {
this.setState( { showSettings: true } );
@@ -221,12 +224,18 @@ class ImageEdit extends React.Component {
this.setState( { showSettings: false } );
};
+ let picker;
+
+ const onMediaOptionsButtonPressed = () => {
+ picker.presentPicker();
+ };
+
const toolbarEditButton = (
);
@@ -262,6 +271,36 @@ class ImageEdit extends React.Component {
);
+ const mediaOptions = this.getMediaOptionsItems();
+
+ const getMediaOptions = () => (
+ 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 (
+
+ { getMediaOptions() }
+
+
+ );
+ }
+
const showSpinner = this.state.isUploadInProgress;
const opacity = this.state.isUploadInProgress ? 0.3 : 1;
const progress = this.state.progress * 100;
@@ -300,6 +339,7 @@ class ImageEdit extends React.Component {
return (
{ getInspectorControls() }
+ { getMediaOptions() }
-
- { __( 'Image' ) }
-
-
- { __( 'Upload a new image or select a file from your library.' ) }
-
-
-
-
+
+
+
+
+ { __( 'Image' ) }
+
+
+ { __( 'CHOOSE IMAGE' ) }
+
-
-
+
);
}
diff --git a/packages/editor/src/components/media-placeholder/styles.native.scss b/packages/editor/src/components/media-placeholder/styles.native.scss
index 0014afe089ac5..964bb4371310d 100644
--- a/packages/editor/src/components/media-placeholder/styles.native.scss
+++ b/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;
}
diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js
index d05eb73e1c925..986e220e41a36 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js
+++ b/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"
>
diff --git a/packages/editor/src/components/mobile/picker/index.android.js b/packages/editor/src/components/mobile/picker/index.android.js
index 8dd1d909b1281..47dd8abb0dc35 100644
--- a/packages/editor/src/components/mobile/picker/index.android.js
+++ b/packages/editor/src/components/mobile/picker/index.android.js
@@ -45,16 +45,17 @@ export default class Picker extends Component {
{ this.props.options.map( ( option, index ) =>
this.onCellPress( option.value ) }
/>
) }
-
+ /> }
);