diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index fefdf12be3995..59c30699c588f 100644 --- 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 new file mode 100644 index 0000000000000..33cc95d1987f3 --- /dev/null +++ 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 = () => ( + 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 index 98a434fcc3662..10913ed3ac360 100644 --- 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 } ) => ( + + + { mediaOptions() } + + + + ); + const getImageComponent = ( openMediaOptions, getMediaOptions ) => ( { retryMessage } } + { ! isUploadInProgress && ! isUploadFailed && finalWidth && finalHeight && showMediaEditorButton && + + } ); diff --git a/packages/block-library/src/image/icon-customize.native.js b/packages/block-library/src/image/icon-customize.native.js new file mode 100644 index 0000000000000..89f3fb47b5517 --- /dev/null +++ b/packages/block-library/src/image/icon-customize.native.js @@ -0,0 +1,6 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ; diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 89b3f1dc57627..a34c48fb7bbbc 100644 --- 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; +}