From 8af65190cce350f74bf9ffc342176a6ac3908212 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 29 Apr 2021 17:27:46 +0100 Subject: [PATCH 01/12] Set up "featuredImageId" as "initialProps" and send gutenbergFeaturedImageId() over the bridge gutenbergFeaturedImageId() will be used to gather the initial ID of a post's featured image when the editor first loads in iOS. --- packages/react-native-bridge/ios/Gutenberg.swift | 2 ++ .../react-native-bridge/ios/GutenbergBridgeDataSource.swift | 5 +++++ 2 files changed, 7 insertions(+) diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift index d6cc760538512..0e081dba33f93 100644 --- a/packages/react-native-bridge/ios/Gutenberg.swift +++ b/packages/react-native-bridge/ios/Gutenberg.swift @@ -64,6 +64,8 @@ public class Gutenberg: NSObject { initialProps["initialTitle"] = initialTitle } + initialProps["featuredImageId"] = dataSource.gutenbergFeaturedImageId() + initialProps["postType"] = dataSource.gutenbergPostType() if let locale = dataSource.gutenbergLocale() { diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift index d6023f4d1508d..b6bc79f9c977c 100644 --- a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift +++ b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift @@ -13,6 +13,11 @@ public protocol GutenbergBridgeDataSource: class { /// - Returns: The HTML initial title or nil. func gutenbergInitialTitle() -> String? + /// Asks the data source for the initial featured image id to be presented by the editor. + /// + /// - Returns: The initial id of the post's featured image, zero if no featured image is set. + func gutenbergFeaturedImageId() -> NSNumber? + /// Asks the data source for the post type to be presented by the editor. /// Return `nil` to assume a `post` type. /// From ce205be6ede36997893e9bd1de020b6c3c1f53f7 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 29 Apr 2021 17:32:38 +0100 Subject: [PATCH 02/12] Set up "featuredImageIdNativeUpdated" to fetch details of an updated featured image over the bridge --- packages/react-native-bridge/ios/Gutenberg.swift | 4 ++++ .../ios/RNReactNativeGutenbergBridge.swift | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift index 0e081dba33f93..10ebd66403260 100644 --- a/packages/react-native-bridge/ios/Gutenberg.swift +++ b/packages/react-native-bridge/ios/Gutenberg.swift @@ -120,6 +120,10 @@ public class Gutenberg: NSObject { sendEvent(.updateHtml, body: ["html": html]) } + public func featuredImageIdNativeUpdated(mediaId: Int32) { + sendEvent(.featuredImageIdNativeUpdated, body: ["featuredImageId": mediaId]) + } + public func replace(block: Block) { sendEvent(.replaceBlock, body: ["html": block.content, "clientId": block.id]) } diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift index 82f19d50a5a15..6cd853b16d80d 100644 --- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift +++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift @@ -366,6 +366,7 @@ extension RNReactNativeGutenbergBridge { case setTitle case toggleHTMLMode case updateHtml + case featuredImageIdNativeUpdated case mediaUpload case setFocusOnTitle case mediaAppend From 9fe80230dab08f142023f535494791f1881164cf Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 29 Apr 2021 17:34:28 +0100 Subject: [PATCH 03/12] Removed isAndroid conditional surrounding "featuredImageIdNativeUpdated" listener --- packages/react-native-bridge/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js index 73099bd1eff3d..9db3a9e93607f 100644 --- a/packages/react-native-bridge/index.js +++ b/packages/react-native-bridge/index.js @@ -63,12 +63,10 @@ export function subscribeUpdateHtml( callback ) { } export function subscribeFeaturedImageIdNativeUpdated( callback ) { - return isAndroid - ? gutenbergBridgeEvents.addListener( - 'featuredImageIdNativeUpdated', - callback - ) - : undefined; + return gutenbergBridgeEvents.addListener( + 'featuredImageIdNativeUpdated', + callback + ); } /** From bece4b5e406c6f8523aa19842d047839c960c2f3 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 29 Apr 2021 18:46:05 +0100 Subject: [PATCH 04/12] Update style.css to ensure badge is rounded on iOS "border-radius" doesn't function as intended on iOS devices without use of "overflow: hidden". --- packages/components/src/mobile/badge/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/mobile/badge/style.scss b/packages/components/src/mobile/badge/style.scss index beae07d5360d0..2b448b7fe75d7 100644 --- a/packages/components/src/mobile/badge/style.scss +++ b/packages/components/src/mobile/badge/style.scss @@ -12,4 +12,5 @@ border-radius: 3px; background-color: $gray-70; border-color: $gray-70; + overflow: hidden; } From f32618aceb2a412f30491db0c050ba44fd9a2176 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 29 Apr 2021 20:22:26 +0100 Subject: [PATCH 05/12] Add gutenbergFeaturedImageId() to GutenbergDemo/GutenbergViewController.swift This is to align the code in the demo file with the code in GutenbergBridgeDataSource, so that it runs as expected. --- .../ios/GutenbergDemo/GutenbergViewController.swift | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift index 162fb297c28f0..64b8dba67e7f7 100644 --- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift +++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift @@ -279,6 +279,10 @@ extension GutenbergViewController: GutenbergBridgeDataSource { return nil } + func gutenbergFeaturedImageId() -> NSNumber? { + return nil + } + func gutenbergCapabilities() -> [Capabilities : Bool] { return [ .mentions: true, From 8f5b80ec03d4a0ae81de527b9433e7902b57ebf4 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 3 May 2021 10:18:30 +0100 Subject: [PATCH 06/12] Remove androidOnly conditional surrounding "set as featured" button --- .../block-library/src/image/edit.native.js | 65 ++++++++++++++++++- .../src/image/styles.native.scss | 23 +++++++ 2 files changed, 85 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 998f1f7c8888b..1ce899abe30b3 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -14,6 +14,7 @@ import { requestImageFailedRetryDialog, requestImageUploadCancelDialog, requestImageFullscreenPreview, + setFeaturedImage, } from '@wordpress/react-native-bridge'; import { CycleSelectControl, @@ -24,6 +25,7 @@ import { Image, WIDE_ALIGNMENTS, LinkSettingsNavigation, + BottomSheet, BottomSheetTextControl, FooterMessageLink, Badge, @@ -44,7 +46,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { getProtocol, hasQueryArg } from '@wordpress/url'; import { doAction, hasAction } from '@wordpress/hooks'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { image as placeholderIcon, replace, @@ -89,6 +91,7 @@ export class ImageEdit extends Component { this.onSetNewTab = this.onSetNewTab.bind( this ); this.onSetSizeSlug = this.onSetSizeSlug.bind( this ); this.onImagePressed = this.onImagePressed.bind( this ); + this.onSetFeatured = this.onSetFeatured.bind( this ); this.onFocusCaption = this.onFocusCaption.bind( this ); this.updateAlignment = this.updateAlignment.bind( this ); this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind( @@ -430,6 +433,54 @@ export class ImageEdit extends Component { this.onSetSizeSlug( newValue ); } + onSetFeatured( mediaId ) { + const { closeSettingsBottomSheet } = this.props; + closeSettingsBottomSheet(); + setFeaturedImage( mediaId ); + } + + getSetFeaturedButton( isFeaturedImage ) { + const { attributes, getStylesFromColorScheme } = this.props; + + const featuredButtonStyle = getStylesFromColorScheme( + styles.featuredButton, + styles.featuredButtonDark + ); + + const setFeaturedButtonStyle = getStylesFromColorScheme( + styles.setFeaturedButton, + styles.setFeaturedButtonDark + ); + + return ( + <> + + { isFeaturedImage ? ( + this.onSetFeatured( 0 ) } + /> + ) : ( + + this.onSetFeatured( attributes.id ) + } + /> + ) } + + + ); + } + render() { const { isCaptionSelected } = this.state; const { @@ -443,13 +494,13 @@ export class ImageEdit extends Component { } = this.props; const { align, url, alt, id, sizeSlug, className } = attributes; + const isFeaturedImage = featuredImageId === attributes.id; + const sizeOptionsValid = find( this.sizeOptions, [ 'value', imageDefaultSize, ] ); - const isFeaturedImage = featuredImageId === attributes.id; - const getToolbarEditButton = ( open ) => ( @@ -487,6 +538,7 @@ export class ImageEdit extends Component { { this.getLinkSettings( true ) } + { this.getSetFeaturedButton( isFeaturedImage ) } ); @@ -631,5 +683,12 @@ export default compose( [ ), }; } ), + withDispatch( ( dispatch ) => { + return { + closeSettingsBottomSheet() { + dispatch( 'core/edit-post' ).closeGeneralSidebar(); + }, + }; + } ), withPreferredColorScheme, ] )( ImageEdit ); diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 008a3500effba..de0bc13535bac 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -30,3 +30,26 @@ padding-right: 0; padding-bottom: $grid-unit; } + +.featuredButton { + border-top-width: $border-width; + border-top-color: $light-gray-400; + padding: $grid-unit-20; + text-align: center; +} + +.featuredButtonDark { + border-top-color: $gray-70; +} + +.setFeaturedButton { + color: $blue-50; +} + +.setFeaturedButtonDark { + color: $blue-30; +} + +.removeFeaturedButton { + color: $alert-red; +} From d173d5d5070a83364ccbf83288481c3b81322ace Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 3 May 2021 10:24:57 +0100 Subject: [PATCH 07/12] Add "setFeaturedImage" method to bridge for iOS --- .../GutenbergBridgeJS2Parent.java | 2 ++ .../RNReactNativeGutenbergBridgeModule.java | 5 +++++ packages/react-native-bridge/index.js | 4 ++++ .../react-native-bridge/ios/GutenbergBridgeDelegate.swift | 4 ++++ .../react-native-bridge/ios/RNReactNativeGutenbergBridge.m | 1 + .../ios/RNReactNativeGutenbergBridge.swift | 7 +++++++ .../app/src/main/java/com/gutenberg/MainApplication.java | 4 ++++ .../ios/GutenbergDemo/GutenbergViewController.swift | 4 ++++ 8 files changed, 31 insertions(+) diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java index 01ba63621525d..53007c7db147f 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java @@ -122,6 +122,8 @@ public static MediaType getEnum(String value) { void requestImageUploadCancel(int mediaId); + void setFeaturedImage(int mediaId); + void editorDidEmitLog(String message, LogLevel logLevel); void editorDidAutosave(); diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java index 7cdd5d9c33cee..199eb2454476d 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java @@ -227,6 +227,11 @@ public void requestImageUploadCancel(final int mediaId) { mGutenbergBridgeJS2Parent.requestImageUploadCancel(mediaId); } + @ReactMethod + public void setFeaturedImage(final int mediaId) { + mGutenbergBridgeJS2Parent.setFeaturedImage(mediaId); + } + @ReactMethod public void requestImageFullscreenPreview(String mediaUrl) { mGutenbergBridgeJS2Parent.requestImageFullscreenPreview(mediaUrl); diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js index 9db3a9e93607f..46a7bc244a464 100644 --- a/packages/react-native-bridge/index.js +++ b/packages/react-native-bridge/index.js @@ -244,6 +244,10 @@ export function requestImageUploadCancel( mediaId ) { return RNReactNativeGutenbergBridge.requestImageUploadCancel( mediaId ); } +export function setFeaturedImage( mediaId ) { + return RNReactNativeGutenbergBridge.setFeaturedImage( mediaId ); +} + export function getOtherMediaOptions( filter, callback ) { return RNReactNativeGutenbergBridge.getOtherMediaOptions( filter, diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift index 5e96b4e421795..5ff5668df6930 100644 --- a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift +++ b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift @@ -160,6 +160,10 @@ public protocol GutenbergBridgeDelegate: class { /// func gutenbergDidRequestMediaUploadCancelation(for mediaID: Int32) + /// Tells the delegate that an image block requested for the featured image to be set. + /// + func gutenbergDidRequestToSetFeaturedImage(for mediaID: Int32) + /// Tells the delegate that the Gutenberg module has finished loading. /// func gutenbergDidLoad() diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m index e556498943fcc..47d097747871e 100644 --- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m +++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m @@ -10,6 +10,7 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject) RCT_EXTERN_METHOD(requestImageFailedRetryDialog:(int)mediaID) RCT_EXTERN_METHOD(requestImageUploadCancelDialog:(int)mediaID) RCT_EXTERN_METHOD(requestImageUploadCancel:(int)mediaID) +RCT_EXTERN_METHOD(setFeaturedImage:(int)mediaID) RCT_EXTERN_METHOD(requestMediaImport:(NSString *)sourceURL callback:(RCTResponseSenderBlock)callback) RCT_EXTERN_METHOD(editorDidLayout) RCT_EXTERN_METHOD(editorDidMount:(NSArray *)unsupportedBlockNames) diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift index 6cd853b16d80d..0f604b6fc70e5 100644 --- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift +++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift @@ -129,6 +129,13 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter { } } + @objc + func setFeaturedImage(_ mediaID: Int32) { + DispatchQueue.main.async { + self.delegate?.gutenbergDidRequestToSetFeaturedImage(for: mediaID) + } + } + @objc func editorDidLayout() { DispatchQueue.main.async { diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java index 0c0f16c4d07a3..67a5d0414809f 100644 --- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java +++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java @@ -112,6 +112,10 @@ public void requestImageUploadCancelDialog(int mediaId) { public void requestImageUploadCancel(int mediaId) { } + @Override + public void setFeaturedImage(int mediaId) { + } + @Override public void editorDidMount(ReadableArray unsupportedBlockNames) { } diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift index 64b8dba67e7f7..f524857541f12 100644 --- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift +++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift @@ -143,6 +143,10 @@ extension GutenbergViewController: GutenbergBridgeDelegate { print("Gutenberg request for media uploads to be resync") } + func gutenbergDidRequestToSetFeaturedImage() { + print("Gutenberg request to set featured image") + } + func gutenbergDidRequestMediaUploadActionDialog(for mediaID: Int32) { guard let progress = mediaUploadCoordinator.progressForUpload(mediaID: mediaID) else { return From 8ff12dd9ca54b6ac999a91a31f3836442d15f785 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 3 May 2021 14:47:52 +0100 Subject: [PATCH 08/12] Update gutenbergDidRequestToSetFeaturedImage() in GutenbergDemo/GutenbergViewController This update ensures the function conforms to the pattern set out for it in GutenbergBridgeDelegate --- .../ios/GutenbergDemo/GutenbergViewController.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift index f524857541f12..ee10eef6ca850 100644 --- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift +++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift @@ -143,7 +143,7 @@ extension GutenbergViewController: GutenbergBridgeDelegate { print("Gutenberg request for media uploads to be resync") } - func gutenbergDidRequestToSetFeaturedImage() { + func gutenbergDidRequestToSetFeaturedImage(for mediaID: Int32) { print("Gutenberg request to set featured image") } From 53f3ec5b9959e64499d25dd038a81da463ef1b91 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Mon, 3 May 2021 15:25:34 +0100 Subject: [PATCH 09/12] Update WPAndroidGlueCode with setFeaturedImage() bridge functions --- .../mobile/WPAndroidGlue/WPAndroidGlueCode.java | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java index ba2ecc8aca706..291652e34fa99 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java +++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java @@ -84,6 +84,7 @@ public class WPAndroidGlueCode { private OnMediaLibraryButtonListener mOnMediaLibraryButtonListener; private OnReattachMediaUploadQueryListener mOnReattachMediaUploadQueryListener; private OnReattachMediaSavingQueryListener mOnReattachMediaSavingQueryListener; + private OnSetFeaturedImageListener mOnSetFeaturedImageListener; private OnEditorMountListener mOnEditorMountListener; private OnEditorAutosaveListener mOnEditorAutosaveListener; private OnImageFullscreenPreviewListener mOnImageFullscreenPreviewListener; @@ -171,6 +172,10 @@ public interface OnReattachMediaSavingQueryListener { void onQueryCurrentProgressForSavingMedia(); } + public interface OnSetFeaturedImageListener { + void onSetFeaturedImageButtonClicked(int mediaId); + } + public interface OnEditorMountListener { void onEditorDidMount(ArrayList unsupportedBlockNames); } @@ -316,6 +321,11 @@ public void requestImageUploadCancel(int mediaId) { mOnMediaLibraryButtonListener.onCancelUploadForMediaDueToDeletedBlock(mediaId); } + @Override + public void setFeaturedImage(int mediaId) { + mOnSetFeaturedImageListener.onSetFeaturedImageButtonClicked(mediaId); + } + @Override public void editorDidMount(ReadableArray unsupportedBlockNames) { mOnEditorMountListener.onEditorDidMount(unsupportedBlockNames.toArrayList()); @@ -537,6 +547,7 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener onMediaLibraryButtonListener, OnReattachMediaUploadQueryListener onReattachMediaUploadQueryListener, OnReattachMediaSavingQueryListener onReattachMediaSavingQueryListener, + OnSetFeaturedImageListener onSetFeaturedImageListener, OnEditorMountListener onEditorMountListener, OnEditorAutosaveListener onEditorAutosaveListener, OnAuthHeaderRequestedListener onAuthHeaderRequestedListener, @@ -555,6 +566,7 @@ public void attachToContainer(ViewGroup viewGroup, mOnMediaLibraryButtonListener = onMediaLibraryButtonListener; mOnReattachMediaUploadQueryListener = onReattachMediaUploadQueryListener; mOnReattachMediaSavingQueryListener = onReattachMediaSavingQueryListener; + mOnSetFeaturedImageListener = onSetFeaturedImageListener; mOnEditorMountListener = onEditorMountListener; mOnEditorAutosaveListener = onEditorAutosaveListener; mRequestExecutor = fetchExecutor; From d17376307ca4f15cc694db95933c35dbb8e3181b Mon Sep 17 00:00:00 2001 From: Siobhan Date: Wed, 2 Jun 2021 16:36:49 +0100 Subject: [PATCH 10/12] Update function name for clarity Following feedback, the getSetFeaturedButton function has been re-named to getFeaturedButtonPanel for clarity. --- 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 d0cf7a3e34381..8cbda1d6e342a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -439,7 +439,7 @@ export class ImageEdit extends Component { setFeaturedImage( mediaId ); } - getSetFeaturedButton( isFeaturedImage ) { + getFeaturedButtonPanel( isFeaturedImage ) { const { attributes, getStylesFromColorScheme } = this.props; const featuredButtonStyle = getStylesFromColorScheme( @@ -540,7 +540,7 @@ export class ImageEdit extends Component { { this.getLinkSettings( true ) } - { this.getSetFeaturedButton( isFeaturedImage ) } + { this.getFeaturedButtonPanel( isFeaturedImage ) } ); From a6e020638630958b5c56f53b477ccc204374bb78 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 3 Jun 2021 12:32:20 +0100 Subject: [PATCH 11/12] Remove androidOnly const With this PR, the featured button will work on iOS and this const will no longer be needed. --- packages/block-library/src/image/edit.native.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 219032b885bd8..8e2bb41b7770e 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -506,9 +506,6 @@ export class ImageEdit extends Component { const isFeaturedImage = canImageBeFeatured && featuredImageId === attributes.id; - // eslint-disable-next-line no-unused-vars - const androidOnly = Platform.OS === 'android'; - const getToolbarEditButton = ( open ) => ( From 60d205c4ebbd4f137460448f136076dd5725876a Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 4 Jun 2021 11:27:52 +0100 Subject: [PATCH 12/12] Add upload check to 'canImageBeFeatured' An image can't be set as featured unless it's been successfully uploaded to the site's media library, but the 'canImageBeFeatured' check didn't account for this. A temporary negative ID is given to images that are in progress or fail to upload. With this commit, a check for whether an image's ID is more than zero is added to 'canImageBeFeatured' in order to account for those times. Note, 'this.state.isUploadInProgress' isn't used, as it doesn't account for times where an upload fails. Instead, a ID check acts as a catch all. --- packages/block-library/src/image/edit.native.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 8e2bb41b7770e..0bfe63e9a416e 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -500,8 +500,11 @@ export class ImageEdit extends Component { ] ); // By default, it's only possible to set images that have been uploaded to a site's library as featured. - // Images that haven't been uploaded to a site's library have an id of 'undefined', which the 'canImageBeFeatured' check filters out. - const canImageBeFeatured = typeof attributes.id !== 'undefined'; + // The 'canImageBeFeatured' check filters out images that haven't been uploaded based on the following: + // - Images that are embedded in a post but are uploaded elsewhere have an id of 'undefined'. + // - Image that are uploading or have failed to upload are given a temporary negative ID. + const canImageBeFeatured = + typeof attributes.id !== 'undefined' && attributes.id > 0; const isFeaturedImage = canImageBeFeatured && featuredImageId === attributes.id;