diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index da026f95422769..0bfe63e9a416e1 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { View, TouchableWithoutFeedback, Platform } from 'react-native'; +import { View, TouchableWithoutFeedback } from 'react-native'; import { isEmpty, get, find, map } from 'lodash'; /** @@ -443,7 +443,7 @@ export class ImageEdit extends Component { closeSettingsBottomSheet(); } - getSetFeaturedButton( isFeaturedImage ) { + getFeaturedButtonPanel( isFeaturedImage ) { const { attributes, getStylesFromColorScheme } = this.props; const setFeaturedButtonStyle = getStylesFromColorScheme( @@ -500,15 +500,15 @@ 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; - // eslint-disable-next-line no-unused-vars - const androidOnly = Platform.OS === 'android'; - const getToolbarEditButton = ( open ) => ( @@ -546,9 +546,8 @@ export class ImageEdit extends Component { { this.getLinkSettings( true ) } - { androidOnly && - canImageBeFeatured && - this.getSetFeaturedButton( isFeaturedImage ) } + { canImageBeFeatured && + this.getFeaturedButtonPanel( isFeaturedImage ) } ); diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift index f89563063e63a5..249d30c3a7a24d 100644 --- a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift +++ b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift @@ -162,6 +162,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 e556498943fccb..47d097747871e0 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 6cd853b16d80d3..0f604b6fc70e57 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/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift index 1ba76a357ea0e5..a47bdfea4cd62b 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(for mediaID: Int32) { + print("Gutenberg request to set featured image") + } + func gutenbergDidRequestMediaUploadActionDialog(for mediaID: Int32) { guard let progress = mediaUploadCoordinator.progressForUpload(mediaID: mediaID) else { return