From d0338f8826d6ae1473bb38d11182c7a1230eb695 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 11:17:08 -0300 Subject: [PATCH 01/12] Creates a MediaEdit component that shows a picker --- .../src/components/index.native.js | 1 + .../src/components/media-edit/index.native.js | 82 +++++++++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 packages/block-editor/src/components/media-edit/index.native.js 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..cf7bde9b22d49 --- /dev/null +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -0,0 +1,82 @@ +/** + * External dependencies + */ +import React from 'react'; +import { + requestMediaPicker, + mediaSources, +} from 'react-native-gutenberg-bridge'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Picker } from '@wordpress/components'; + +export const MEDIA_TYPE_IMAGE = 'image'; + +const editOption = { + id: mediaSources.mediaEditor, + value: mediaSources.mediaEditor, + 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 ); + } + + componentDidMount() { + const { allowedTypes = [] } = this.props; + } + + 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 ) ); + requestMediaPicker( mediaSource.id, types, multiple, ( media ) => { + if ( ( multiple && media ) || ( media && media.id ) ) { + onSelect(media) + } + } ); + } + + render() { + const getMediaOptions = () => ( + this.picker = instance } + options={ this.getMediaOptionsItems() } + onChange={ this.onPickerSelect } + /> + ); + + return this.props.render( { open: this.onPickerPresent, getMediaOptions } ); + } +} + +export default MediaEdit; From 320753c8ebd54967af45c2658b345d25eab019d0 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 11:17:55 -0300 Subject: [PATCH 02/12] Add Gridicon's customize icon --- packages/block-library/src/image/icon-customize.native.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 packages/block-library/src/image/icon-customize.native.js 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..302e763cc3227 --- /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 ; From a5e02a7dcbc34b1d3e058e6af90f73ab68540884 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 11:18:45 -0300 Subject: [PATCH 03/12] Show a button in images block that displays a picker --- .../block-library/src/image/edit.native.js | 21 +++++++++++++++++++ .../src/image/styles.native.scss | 17 +++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 6a844fc78cbca..69bdb2223dd4b 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'; @@ -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, getMediaOptions ) => ( + + + { getMediaOptions() } + + + + ) + const getImageComponent = ( openMediaOptions, getMediaOptions ) => ( { retryMessage } } + { !isUploadInProgress && !isUploadFailed && finalWidth && finalHeight && showMediaEditorButton && + { + return editImageComponent( open, getMediaOptions ); + } } + /> + } ); 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; +} From 2f7f12eee545c23e7cd0e5e2d15ba556923e76ea Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 12:13:38 -0300 Subject: [PATCH 04/12] Fix lint issues --- .../src/components/media-edit/index.native.js | 8 ++------ packages/block-library/src/image/edit.native.js | 6 +++--- packages/block-library/src/image/icon-customize.native.js | 2 +- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js index cf7bde9b22d49..3784235c542ba 100644 --- a/packages/block-editor/src/components/media-edit/index.native.js +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -40,12 +40,8 @@ export class MediaEdit extends React.Component { this.onPickerSelect = this.onPickerSelect.bind( this ); } - componentDidMount() { - const { allowedTypes = [] } = this.props; - } - getMediaOptionsItems() { - return options + return options; } onPickerPresent() { @@ -60,7 +56,7 @@ export class MediaEdit extends React.Component { const types = allowedTypes.filter( ( type ) => mediaSource.types.includes( type ) ); requestMediaPicker( mediaSource.id, types, multiple, ( media ) => { if ( ( multiple && media ) || ( media && media.id ) ) { - onSelect(media) + onSelect( media ); } } ); } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 69bdb2223dd4b..deca5019dda5e 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -9,7 +9,7 @@ import { requestImageFailedRetryDialog, requestImageUploadCancelDialog, requestImageFullscreenPreview, - showMediaEditorButton + showMediaEditorButton, } from 'react-native-gutenberg-bridge'; import { isEmpty, map, get } from 'lodash'; @@ -405,7 +405,7 @@ export class ImageEdit extends React.Component { - ) + ); const getImageComponent = ( openMediaOptions, getMediaOptions ) => ( { retryMessage } } - { !isUploadInProgress && !isUploadFailed && finalWidth && finalHeight && showMediaEditorButton && + { ! 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 index 302e763cc3227..89f3fb47b5517 100644 --- a/packages/block-library/src/image/icon-customize.native.js +++ b/packages/block-library/src/image/icon-customize.native.js @@ -3,4 +3,4 @@ */ import { Path, SVG } from '@wordpress/components'; -export default ; +export default ; From 9eedddd88911a5329ec6f365ae8a140e78540633 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 12:59:42 -0300 Subject: [PATCH 05/12] Fix no-shadow error --- packages/block-library/src/image/edit.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index deca5019dda5e..ba2022c7ec294 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -474,8 +474,8 @@ export class ImageEdit extends React.Component { { ! isUploadInProgress && ! isUploadFailed && finalWidth && finalHeight && showMediaEditorButton && { - return editImageComponent( open, getMediaOptions ); + render={ ( { open, mediaOptions } ) => { + return editImageComponent( open, mediaOptions ); } } /> } From 2ecc4529e3d2c182320c9b851b39f91643bd312b Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 16:58:34 -0300 Subject: [PATCH 06/12] Fix the name of the params --- .../block-editor/src/components/media-edit/index.native.js | 4 ++-- packages/block-library/src/image/edit.native.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js index 3784235c542ba..df6b9cc1a0389 100644 --- a/packages/block-editor/src/components/media-edit/index.native.js +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -62,7 +62,7 @@ export class MediaEdit extends React.Component { } render() { - const getMediaOptions = () => ( + const mediaOptions = () => ( this.picker = instance } @@ -71,7 +71,7 @@ export class MediaEdit extends React.Component { /> ); - return this.props.render( { open: this.onPickerPresent, getMediaOptions } ); + return this.props.render( { open: this.onPickerPresent, mediaOptions } ); } } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index ba2022c7ec294..d5a48fda193cb 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -397,11 +397,11 @@ export class ImageEdit extends React.Component { const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO; - const editImageComponent = ( openMediaOptions, getMediaOptions ) => ( + const editImageComponent = ( openMediaOptions, mediaOptions ) => ( - { getMediaOptions() } + { mediaOptions() } From 596909133c14be85c60cd77aeb39ab479747ea7f Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 18:23:54 -0300 Subject: [PATCH 07/12] When "Edit" is selected, request the Media Editor --- .../src/components/media-edit/index.native.js | 13 +++++++++++-- packages/block-library/src/image/edit.native.js | 1 + 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js index df6b9cc1a0389..a6ca53a2046b9 100644 --- a/packages/block-editor/src/components/media-edit/index.native.js +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -4,6 +4,7 @@ import React from 'react'; import { requestMediaPicker, + requestMediaEditor, mediaSources, } from 'react-native-gutenberg-bridge'; @@ -54,11 +55,19 @@ export class MediaEdit extends React.Component { 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 ) ); - requestMediaPicker( mediaSource.id, types, multiple, ( media ) => { + const mediaCallback = ( media ) => { if ( ( multiple && media ) || ( media && media.id ) ) { onSelect( media ); } - } ); + } + + switch ( value ) { + case mediaSources.mediaEditor: + requestMediaEditor( this.props.source.uri, mediaCallback ); + break; + default: + requestMediaPicker( mediaSource.id, types, multiple, mediaCallback ); + } } render() { diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index d5a48fda193cb..3dafc633ec2c0 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -474,6 +474,7 @@ export class ImageEdit extends React.Component { { ! isUploadInProgress && ! isUploadFailed && finalWidth && finalHeight && showMediaEditorButton && { return editImageComponent( open, mediaOptions ); } } From 0f936c0f594b1e6e95b469e050c5ad7ddc53f831 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Fri, 17 Jan 2020 18:55:34 -0300 Subject: [PATCH 08/12] Fix lint issues --- .../block-editor/src/components/media-edit/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js index a6ca53a2046b9..a9215d637ae8e 100644 --- a/packages/block-editor/src/components/media-edit/index.native.js +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -59,11 +59,11 @@ export class MediaEdit extends React.Component { if ( ( multiple && media ) || ( media && media.id ) ) { onSelect( media ); } - } + }; switch ( value ) { case mediaSources.mediaEditor: - requestMediaEditor( this.props.source.uri, mediaCallback ); + requestMediaEditor( this.props.source.uri, mediaCallback ); break; default: requestMediaPicker( mediaSource.id, types, multiple, mediaCallback ); From 905656e7c0b42bf383d8ece80757befedbd36a6b Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Wed, 22 Jan 2020 16:02:07 -0300 Subject: [PATCH 09/12] Change media editor ID to a constant --- .../src/components/media-edit/index.native.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js index a9215d637ae8e..8899ee29ab93f 100644 --- a/packages/block-editor/src/components/media-edit/index.native.js +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -16,9 +16,11 @@ import { Picker } from '@wordpress/components'; export const MEDIA_TYPE_IMAGE = 'image'; +export const MEDIA_EDITOR = 'MEDIA_EDITOR'; + const editOption = { - id: mediaSources.mediaEditor, - value: mediaSources.mediaEditor, + id: MEDIA_EDITOR, + value: MEDIA_EDITOR, label: __( 'Edit' ), types: [ MEDIA_TYPE_IMAGE ], icon: 'admin-appearance', @@ -62,7 +64,7 @@ export class MediaEdit extends React.Component { }; switch ( value ) { - case mediaSources.mediaEditor: + case MEDIA_EDITOR: requestMediaEditor( this.props.source.uri, mediaCallback ); break; default: From dd1c93e9a18c3fbc8ddc2dbd10fb677fe170cea2 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Wed, 22 Jan 2020 16:26:42 -0300 Subject: [PATCH 10/12] When "Replace" is tapped, show all available media options --- .../src/components/media-edit/index.native.js | 15 ++++++--------- packages/block-library/src/image/edit.native.js | 1 + 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js index 8899ee29ab93f..565cc8ecc8aae 100644 --- a/packages/block-editor/src/components/media-edit/index.native.js +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -55,20 +55,17 @@ export class MediaEdit extends React.Component { 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 ); + requestMediaEditor( this.props.source.uri, ( media ) => { + if ( ( multiple && media ) || ( media && media.id ) ) { + onSelect( media ); + } + } ); break; default: - requestMediaPicker( mediaSource.id, types, multiple, mediaCallback ); + this.props.openReplaceMediaOptions() } } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 843d7559cc458..cb4d37f1fa909 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -475,6 +475,7 @@ export class ImageEdit extends React.Component { { return editImageComponent( open, mediaOptions ); } } From e72a22ac434f7f5d0116c81e276eebd6dc8cda11 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Wed, 22 Jan 2020 16:57:33 -0300 Subject: [PATCH 11/12] Fix lint issues --- .../block-editor/src/components/media-edit/index.native.js | 5 ++--- packages/block-library/src/image/edit.native.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/media-edit/index.native.js b/packages/block-editor/src/components/media-edit/index.native.js index 565cc8ecc8aae..33cc95d1987f3 100644 --- a/packages/block-editor/src/components/media-edit/index.native.js +++ b/packages/block-editor/src/components/media-edit/index.native.js @@ -3,7 +3,6 @@ */ import React from 'react'; import { - requestMediaPicker, requestMediaEditor, mediaSources, } from 'react-native-gutenberg-bridge'; @@ -54,7 +53,7 @@ export class MediaEdit extends React.Component { } onPickerSelect( value ) { - const { allowedTypes = [], onSelect, multiple = false } = this.props; + const { onSelect, multiple = false } = this.props; switch ( value ) { case MEDIA_EDITOR: @@ -65,7 +64,7 @@ export class MediaEdit extends React.Component { } ); break; default: - this.props.openReplaceMediaOptions() + this.props.openReplaceMediaOptions(); } } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index cb4d37f1fa909..201b5a809217b 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -475,7 +475,7 @@ export class ImageEdit extends React.Component { { return editImageComponent( open, mediaOptions ); } } From e1133106d76ca04b9710b5f6d4a3aaf59c2a1a73 Mon Sep 17 00:00:00 2001 From: Leandro Alonso Date: Mon, 27 Jan 2020 20:56:05 -0300 Subject: [PATCH 12/12] Avoid destructuring --- packages/block-library/src/image/edit.native.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index e8339036d3997..80937e7899160 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -397,7 +397,7 @@ export class ImageEdit extends React.Component { const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO; - const editImageComponent = ( openMediaOptions, mediaOptions ) => ( + const editImageComponent = ( { openMediaOptions, mediaOptions } ) => ( @@ -476,9 +476,7 @@ export class ImageEdit extends React.Component { onSelect={ this.onSelectMediaUploadOption } source={ { uri: url } } openReplaceMediaOptions={ openMediaOptions } - render={ ( { open, mediaOptions } ) => { - return editImageComponent( open, mediaOptions ); - } } + render={ editImageComponent } /> }