[RNMobile] Add "Set as Featured Image" Button to Image Block (iOS Only)

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 ) => (
 			<BlockControls>
 				<ToolbarGroup>
@@ -546,9 +546,8 @@ export class ImageEdit extends Component {
 				<PanelBody title={ __( 'Link Settings' ) }>
 					{ this.getLinkSettings( true ) }
 				</PanelBody>
-				{ androidOnly &&
-					canImageBeFeatured &&
-					this.getSetFeaturedButton( isFeaturedImage ) }
+				{ canImageBeFeatured &&
+					this.getFeaturedButtonPanel( isFeaturedImage ) }
 			</InspectorControls>
 		);
 

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()

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)

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 {

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