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

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 (
+			<>
+				<PanelBody>
+					{ isFeaturedImage ? (
+						<BottomSheet.Cell
+							label={ __( 'Remove as Featured Image ' ) }
+							labelStyle={ [
+								featuredButtonStyle,
+								styles.removeFeaturedButton,
+							] }
+							onPress={ () => this.onSetFeatured( 0 ) }
+						/>
+					) : (
+						<BottomSheet.Cell
+							label={ __( 'Set as Featured Image ' ) }
+							labelStyle={ [
+								featuredButtonStyle,
+								setFeaturedButtonStyle,
+							] }
+							onPress={ () =>
+								this.onSetFeatured( attributes.id )
+							}
+						/>
+					) }
+				</PanelBody>
+			</>
+		);
+	}
+
 	render() {
 		const { isCaptionSelected } = this.state;
 		const {
@@ -489,6 +540,7 @@ export class ImageEdit extends Component {
 				<PanelBody title={ __( 'Link Settings' ) }>
 					{ this.getLinkSettings( true ) }
 				</PanelBody>
+				{ this.getSetFeaturedButton( isFeaturedImage ) }
 			</InspectorControls>
 		);
 
@@ -633,5 +685,12 @@ export default compose( [
 			),
 		};
 	} ),
+	withDispatch( ( dispatch ) => {
+		return {
+			closeSettingsBottomSheet() {
+				dispatch( 'core/edit-post' ).closeGeneralSidebar();
+			},
+		};
+	} ),
 	withPreferredColorScheme,
 ] )( ImageEdit );

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;
+}

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

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

packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

@@ -85,6 +85,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;
@@ -172,6 +173,10 @@ public interface OnReattachMediaSavingQueryListener {
         void onQueryCurrentProgressForSavingMedia();
     }
 
+    public interface OnSetFeaturedImageListener {
+        void onSetFeaturedImageButtonClicked(int mediaId);
+    }
+
     public interface OnEditorMountListener {
         void onEditorDidMount(ArrayList<Object> unsupportedBlockNames);
     }
@@ -317,6 +322,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());
@@ -539,6 +549,7 @@ public void attachToContainer(ViewGroup viewGroup,
                                   OnMediaLibraryButtonListener onMediaLibraryButtonListener,
                                   OnReattachMediaUploadQueryListener onReattachMediaUploadQueryListener,
                                   OnReattachMediaSavingQueryListener onReattachMediaSavingQueryListener,
+                                  OnSetFeaturedImageListener onSetFeaturedImageListener,
                                   OnEditorMountListener onEditorMountListener,
                                   OnEditorAutosaveListener onEditorAutosaveListener,
                                   OnAuthHeaderRequestedListener onAuthHeaderRequestedListener,
@@ -557,6 +568,7 @@ public void attachToContainer(ViewGroup viewGroup,
         mOnMediaLibraryButtonListener = onMediaLibraryButtonListener;
         mOnReattachMediaUploadQueryListener = onReattachMediaUploadQueryListener;
         mOnReattachMediaSavingQueryListener = onReattachMediaSavingQueryListener;
+        mOnSetFeaturedImageListener = onSetFeaturedImageListener;
         mOnEditorMountListener = onEditorMountListener;
         mOnEditorAutosaveListener = onEditorAutosaveListener;
         mRequestExecutor = fetchExecutor;

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,

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/android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -114,6 +114,10 @@ public void requestImageUploadCancelDialog(int mediaId) {
             public void requestImageUploadCancel(int mediaId) {
             }
 
+            @Override
+            public void setFeaturedImage(int mediaId) {
+            }
+
             @Override
             public void editorDidMount(ReadableArray unsupportedBlockNames) {
             }

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