[RNMobile] Prevent "Undo Level" after Setting Featured Image via Image Block

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

@@ -26,6 +26,7 @@ import {
 	BottomSheet,
 	BottomSheetTextControl,
 	BottomSheetSelectControl,
+	FooterMessageControl,
 	FooterMessageLink,
 	Badge,
 } from '@wordpress/components';
@@ -460,6 +461,7 @@ export class ImageEdit extends Component {
 					setFeaturedButtonStyle,
 					styles.removeFeaturedButton,
 				] }
+				cellContainerStyle={ styles.setFeaturedCellContainer }
 				onPress={ () =>
 					this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET )
 				}
@@ -470,17 +472,12 @@ export class ImageEdit extends Component {
 			<BottomSheet.Cell
 				label={ __( 'Set as Featured Image ' ) }
 				labelStyle={ setFeaturedButtonStyle }
+				cellContainerStyle={ styles.setFeaturedCellContainer }
 				onPress={ () => this.onSetFeatured( attributes.id ) }
 			/>
 		);
 
-		return (
-			<PanelBody>
-				{ isFeaturedImage
-					? removeFeaturedButton()
-					: setFeaturedButton() }
-			</PanelBody>
-		);
+		return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
 	}
 
 	render() {
@@ -564,8 +561,21 @@ export class ImageEdit extends Component {
 				<PanelBody title={ __( 'Link Settings' ) }>
 					{ this.getLinkSettings( true ) }
 				</PanelBody>
-				{ canImageBeFeatured &&
-					this.getFeaturedButtonPanel( isFeaturedImage ) }
+				<PanelBody
+					title={ __( 'Featured Image' ) }
+					titleStyle={ styles.featuredImagePanelTitle }
+				>
+					{ canImageBeFeatured &&
+						this.getSetFeaturedButton( isFeaturedImage ) }
+				</PanelBody>
+				<PanelBody>
+					<FooterMessageControl
+						label={ __(
+							'Changes to featured image will not be affected by the undo/redo buttons.'
+						) }
+						cellContainerStyle={ styles.setFeaturedCellContainer }
+					/>
+				</PanelBody>
 			</InspectorControls>
 		);
 

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

@@ -31,16 +31,21 @@
 	padding-bottom: $grid-unit;
 }
 
+.featuredImagePanelTitle {
+	padding-bottom: 0;
+}
+
+.setFeaturedCellContainer {
+	align-items: flex-start;
+}
+
 .setFeaturedButton {
-	border-top-width: $border-width;
-	border-top-color: $light-gray-400;
-	padding: $grid-unit-20;
-	text-align: center;
+	text-align: left;
 	color: $blue-50;
+	padding: $grid-unit-15 0;
 }
 
 .setFeaturedButtonDark {
-	border-top-color: $gray-70;
 	color: $blue-30;
 }
 

packages/components/src/panel/body.native.js

@@ -9,11 +9,13 @@ import { Text, View } from 'react-native';
 import styles from './body.scss';
 import BottomSeparatorCover from './bottom-separator-cover';
 
-export function PanelBody( { children, title, style = {} } ) {
+export function PanelBody( { children, title, style, titleStyle = {} } ) {
 	return (
 		<View style={ [ styles.panelContainer, style ] }>
 			{ title && (
-				<Text style={ styles.sectionHeaderText }>{ title }</Text>
+				<Text style={ [ styles.sectionHeaderText, titleStyle ] }>
+					{ title }
+				</Text>
 			) }
 			{ children }
 			<BottomSeparatorCover />

packages/edit-post/src/editor.native.js

@@ -93,9 +93,15 @@ class Editor extends Component {
 
 		this.subscriptionParentFeaturedImageIdNativeUpdated = subscribeFeaturedImageIdNativeUpdated(
 			( payload ) => {
-				editEntityRecord( 'postType', postType, postId, {
-					featured_media: payload.featuredImageId,
-				} );
+				editEntityRecord(
+					'postType',
+					postType,
+					postId,
+					{ featured_media: payload.featuredImageId },
+					{
+						undoIgnore: true,
+					}
+				);
 			}
 		);
 	}