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

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, TouchableWithoutFeedback } from 'react-native';
+import { View, TouchableWithoutFeedback, Platform } from 'react-native';
 import { isEmpty, get, find, map } from 'lodash';
 
 /**
@@ -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,62 @@ export class ImageEdit extends Component {
 		this.onSetSizeSlug( newValue );
 	}
 
+	onSetFeatured( mediaId ) {
+		const { closeSettingsBottomSheet } = this.props;
+		setFeaturedImage( mediaId );
+		closeSettingsBottomSheet();
+	}
+
+	getSetFeaturedButton( isFeaturedImage ) {
+		const { attributes, getStylesFromColorScheme } = this.props;
+
+		// eslint-disable-next-line no-unused-vars
+		const androidOnly = Platform.OS === 'android';
+
+		const featuredButtonStyle = getStylesFromColorScheme(
+			styles.featuredButton,
+			styles.featuredButtonDark
+		);
+
+		const setFeaturedButtonStyle = getStylesFromColorScheme(
+			styles.setFeaturedButton,
+			styles.setFeaturedButtonDark
+		);
+
+		return (
+			<>
+				{
+					// eslint-disable-next-line no-undef
+					androidOnly && (
+						<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 {
@@ -443,13 +502,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 ) => (
 			<BlockControls>
 				<ToolbarGroup>
@@ -487,6 +546,7 @@ export class ImageEdit extends Component {
 				<PanelBody title={ __( 'Link Settings' ) }>
 					{ this.getLinkSettings( true ) }
 				</PanelBody>
+				{ this.getSetFeaturedButton( isFeaturedImage ) }
 			</InspectorControls>
 		);
 
@@ -631,5 +691,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

@@ -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<Object> 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;

packages/react-native-bridge/index.js

@@ -246,6 +246,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-editor/CHANGELOG.md

@@ -23,6 +23,7 @@ For each user feature we should also add a importance categorization label  to i
 
 -   [***] Search block now available on mobile! [https://github.com/WordPress/gutenberg/pull/30783]
 -   [*] Image block: Add a "featured" banner. (Android only) [#30806]
+-   [*] Image block: "Set as featured" button within image block settings. (Android only) [#28854]
 -   [**] The media upload options of the Image, Video and Gallery block automatically opens when the respective block is inserted. [#29546]
 -   [**] The media upload options of the File and Audio block automatically opens when the respective block is inserted. [#31025]
 -   [*] Fixed a bug where the Search block was stealing focus from the Image block upon updating image asset [#31393]

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) {
             }