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

packages/block-library/src/image/edit.native.js

@@ -14,6 +14,9 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 	requestImageFullscreenPreview,
+	setFeaturedImage,
+	getFeaturedImageId,
+	subscribeFeaturedImageIdChange,
 } from '@wordpress/react-native-bridge';
 import {
 	CycleSelectControl,
@@ -25,6 +28,7 @@ import {
 	Image,
 	WIDE_ALIGNMENTS,
 	LinkSettingsNavigation,
+	BottomSheet,
 } from '@wordpress/components';
 import {
 	BlockCaption,
@@ -69,6 +73,7 @@ export class ImageEdit extends Component {
 
 		this.state = {
 			isCaptionSelected: false,
+			isFeaturedImage: false,
 		};
 
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
@@ -82,12 +87,15 @@ export class ImageEdit extends Component {
 			this
 		);
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
+		this.featuredImageIdChange = this.featuredImageIdChange.bind( this );
 		this.updateAlt = this.updateAlt.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
 		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
 		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.onGetFeatured = this.onGetFeatured.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.updateAlignment = this.updateAlignment.bind( this );
 		this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(
@@ -150,6 +158,12 @@ export class ImageEdit extends Component {
 		) {
 			mediaUploadSync();
 		}
+
+		if ( attributes.id ) {
+			this.onGetFeatured();
+		}
+
+		this.addFeaturedImageIdListener();
 	}
 
 	componentWillUnmount() {
@@ -163,13 +177,52 @@ export class ImageEdit extends Component {
 				this.props.attributes.id
 			);
 		}
+
+		this.removeFeaturedImageIdListener();
 	}
 
 	componentDidUpdate( previousProps ) {
 		if ( ! previousProps.image && this.props.image ) {
 			const { image, attributes } = this.props;
 			const url = getUrlForSlug( image, attributes ) || image.source_url;
 			this.props.setAttributes( { url } );
+			if ( attributes.id ) {
+				this.onGetFeatured();
+			}
+		}
+	}
+
+	featuredImageIdChange( payload ) {
+		const { attributes } = this.props;
+
+		const featuredImageId = payload.featuredImageId;
+
+		if ( featuredImageId === attributes.id ) {
+			this.setState( {
+				isFeaturedImage: true,
+			} );
+		} else {
+			this.setState( {
+				isFeaturedImage: false,
+			} );
+		}
+	}
+
+	addFeaturedImageIdListener() {
+		//if we already have a subscription not worth doing it again
+		if ( this.subscriptionParentFeaturedImageIdChange ) {
+			return;
+		}
+		this.subscriptionParentFeaturedImageIdChange = subscribeFeaturedImageIdChange(
+			( payload ) => {
+				this.featuredImageIdChange( payload );
+			}
+		);
+	}
+
+	removeFeaturedImageIdListener() {
+		if ( this.subscriptionParentFeaturedImageIdChange ) {
+			this.subscriptionParentFeaturedImageIdChange.remove();
 		}
 	}
 
@@ -270,6 +323,16 @@ export class ImageEdit extends Component {
 		} );
 	}
 
+	onSetFeatured() {
+		const { attributes } = this.props;
+		setFeaturedImage( attributes.id );
+	}
+
+	onGetFeatured() {
+		const { attributes } = this.props;
+		getFeaturedImageId( attributes.id );
+	}
+
 	onSetLinkDestination( href ) {
 		this.props.setAttributes( {
 			linkDestination: LINK_DESTINATION_CUSTOM,
@@ -398,7 +461,7 @@ export class ImageEdit extends Component {
 	}
 
 	render() {
-		const { isCaptionSelected } = this.state;
+		const { isCaptionSelected, isFeaturedImage } = this.state;
 		const { attributes, isSelected, image, clientId } = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
 
@@ -450,6 +513,15 @@ export class ImageEdit extends Component {
 				<PanelBody title={ __( 'Link Settings' ) }>
 					{ this.getLinkSettings( true ) }
 				</PanelBody>
+				<PanelBody>
+					{ ! isFeaturedImage && (
+						<BottomSheet.Cell
+							label={ __( 'Set as Featured Image ' ) }
+							labelStyle={ styles.setFeaturedButton }
+							onPress={ this.onSetFeatured }
+						/>
+					) }
+				</PanelBody>
 			</InspectorControls>
 		);
 
@@ -487,6 +559,7 @@ export class ImageEdit extends Component {
 						{ isSelected && getMediaOptions() }
 						{ ! this.state.isCaptionSelected &&
 							getToolbarEditButton( openMediaOptions ) }
+						{ this.state.isFeaturedImage }
 						<MediaUploadProgress
 							coverUrl={ url }
 							mediaId={ id }
@@ -512,6 +585,7 @@ export class ImageEdit extends Component {
 										isSelected={
 											isSelected && ! isCaptionSelected
 										}
+										isFeaturedImage={ isFeaturedImage }
 										isUploadFailed={ isUploadFailed }
 										isUploadInProgress={
 											isUploadInProgress

packages/block-library/src/image/styles.native.scss

@@ -30,3 +30,12 @@
 	padding-right: 0;
 	padding-bottom: $grid-unit;
 }
+
+.setFeaturedButton {
+	text-align: center;
+	color: $blue-50;
+}
+
+.setFeaturedButtonDark {
+	color: $blue-30;
+}

packages/components/src/mobile/image/featured-banner.native.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+// import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export class FeaturedBanner extends Component {
+	render() {
+		return (
+			<View style={ styles.featuredBannerContainer }>
+				<Text style={ styles.featuredBanner }>Featured</Text>
+			</View>
+		);
+	}
+}
+
+export default FeaturedBanner;

packages/components/src/mobile/image/index.native.js

@@ -19,6 +19,7 @@ import { getImageWithFocalPointStyles } from './utils';
 import styles from './style.scss';
 import SvgIconRetry from './icon-retry';
 import ImageEditingButton from './image-editing-button';
+import FeaturedBanner from './featured-banner';
 
 const ICON_TYPE = {
 	PLACEHOLDER: 'placeholder',
@@ -36,6 +37,7 @@ const ImageComponent = ( {
 	height: imageHeight,
 	highlightSelected = true,
 	isSelected,
+	isFeaturedImage,
 	isUploadFailed,
 	isUploadInProgress,
 	mediaPickerOptions,
@@ -241,6 +243,8 @@ const ImageComponent = ( {
 				) }
 			</View>
 
+			{ isFeaturedImage && <FeaturedBanner /> }
+
 			{ editButton && isSelected && ! isUploadInProgress && (
 				<ImageEditingButton
 					onSelectMediaUploadOption={ onSelectMediaUploadOption }

packages/components/src/mobile/image/style.native.scss

@@ -110,6 +110,23 @@
 	right: 5px;
 }
 
+.featuredBannerContainer {
+	padding: 30px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2;
+}
+
+.featuredBanner {
+	position: absolute;
+	padding: 10px;
+	top: 5px;
+	left: 5px;
+	color: #fff;
+	background-color: $gray-dark;
+}
+
 .iconCustomise {
 	fill: #fff;
 	position: absolute;

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java

@@ -44,6 +44,10 @@ interface MediaSaveEventEmitter {
         void onReplaceMediaFilesEditedBlock(final String mediaFiles, final String blockId);
     }
 
+    interface FeaturedImageEmitter {
+        void featuredImageIdNotifier(int mediaId);
+    }
+
     interface ReplaceUnsupportedBlockCallback {
         void replaceUnsupportedBlock(String content, String blockId);
     }
@@ -141,6 +145,10 @@ public static GutenbergUserEvent getEnum(String eventName) {
 
     void requestImageUploadCancel(int mediaId);
 
+    void setFeaturedImage(int mediaId);
+
+    void getFeaturedImageId(int mediaId);
+
     void editorDidEmitLog(String message, LogLevel logLevel);
 
     void editorDidAutosave();

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java

@@ -69,6 +69,8 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MAP_KEY_REPLACE_BLOCK_HTML = "html";
     private static final String MAP_KEY_REPLACE_BLOCK_BLOCK_ID = "clientId";
 
+    public static final String MAP_KEY_FEATURED_IMAGE_ID = "featuredImageId";
+
     private boolean mIsDarkMode;
 
     public RNReactNativeGutenbergBridgeModule(ReactApplicationContext reactContext,
@@ -226,6 +228,16 @@ public void requestImageUploadCancel(final int mediaId) {
         mGutenbergBridgeJS2Parent.requestImageUploadCancel(mediaId);
     }
 
+    @ReactMethod
+    public void setFeaturedImage(final int mediaId) {
+        mGutenbergBridgeJS2Parent.setFeaturedImage(mediaId);
+    }
+
+    @ReactMethod
+    public void getFeaturedImageId(final int mediaId) {
+        mGutenbergBridgeJS2Parent.getFeaturedImageId(mediaId);
+    }
+
     @ReactMethod
     public void requestImageFullscreenPreview(String mediaUrl) {
         mGutenbergBridgeJS2Parent.requestImageFullscreenPreview(mediaUrl);

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

@@ -1,5 +1,6 @@
 package org.wordpress.mobile.WPAndroidGlue;
 
+import android.util.Log;
 import android.util.Pair;
 
 import androidx.annotation.Nullable;
@@ -10,6 +11,7 @@
 
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaUploadEventEmitter;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaSaveEventEmitter;
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.FeaturedImageEmitter;
 
 import java.util.Queue;
 import java.util.concurrent.ConcurrentLinkedQueue;
@@ -18,8 +20,9 @@
 import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_NEW_ID;
 import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_URL;
 import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_MEDIA_FINAL_SAVE_RESULT_SUCCESS_VALUE;
+import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_FEATURED_IMAGE_ID;
 
-public class DeferredEventEmitter implements MediaUploadEventEmitter, MediaSaveEventEmitter {
+public class DeferredEventEmitter implements MediaUploadEventEmitter, MediaSaveEventEmitter, FeaturedImageEmitter {
     public interface JSEventEmitter {
         void emitToJS(String eventName, @Nullable WritableMap data);
     }
@@ -40,6 +43,8 @@ public interface JSEventEmitter {
     private static final String EVENT_NAME_MEDIA_SAVE = "mediaSave";
     private static final String EVENT_NAME_MEDIA_REPLACE_BLOCK = "replaceBlock";
 
+    private static final String EVENT_FEATURED_IMAGE_ID = "featuredImageIdChange";
+
     private static final String MAP_KEY_MEDIA_FILE_STATE = "state";
     private static final String MAP_KEY_MEDIA_FILE_MEDIA_ACTION_PROGRESS = "progress";
     private static final String MAP_KEY_MEDIA_FILE_MEDIA_SERVER_ID = "mediaServerId";
@@ -205,6 +210,12 @@ public void onMediaCollectionSaveResult(String firstMediaIdInCollection, boolean
         }
     }
 
+    public void featuredImageIdNotifier(int mediaId) {
+        WritableMap writableMap = new WritableNativeMap();
+        writableMap.putInt(MAP_KEY_FEATURED_IMAGE_ID, mediaId);
+        queueActionToJS(EVENT_FEATURED_IMAGE_ID, writableMap);
+    }
+
     @Override public void onReplaceMediaFilesEditedBlock(String mediaFiles, String blockId) {
         WritableMap writableMap = new WritableNativeMap();
         writableMap.putString(MAP_KEY_REPLACE_BLOCK_HTML, mediaFiles);