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

…e Block (#33057)

* Ignore edits to featured image in undo history

"editEntityRecord" includes an "undoIgnore: true" parameter that makes it possible to ignore an edit in the undo history. Reference: https://developer.wordpress.org/block-editor/reference-guides/data/data-core/#editEntityRecord

With this commit, that parameter is set to true so that a new undo level *isn't* created after the featured image is updated via the app.

* Add "featured image" section heading

By adding the settings for changing a featured image under their own section heading, it's being clearly separated from the other sections.

This will help with the overall alignment/rhythm of the settings panel, which is important given we're adding an additional note.

* Add FooterMessageControl to settings

We're adding a note to the image block's setting to let users know that they won't be able to revert changes via the undo/redo button.

* Tweak featured button styles

With this commit, we're aligning the featured button to the left and changing its border to display at the bottom. This follows design feedback here: #33057 (comment)

* Tweaks to footer text

This commit updates the footer text following feedback from editorial.

* Remove bottom border from button

* Remove bottom padding from button

* Align button and footer text to top

With this commit, the content in the "Set as Featured" button and the footer message is aligned to the top of their containers.

This will prevent flexbox from automatically adding spacing to the top of their containers, which goes against the design we want.

* Add title style to "Featured Image" panel

As we need to tweak the spacing around the panel's title, I've added a new "titleStyle" prop to the PanelBody component.

That prop is then used to remove the bottom spacing for the "Featured Image" panel's title.

The prop can now be re-used by anyone else who needs to tweak the title in a PanelBody in the future.

* Add top/bottom padding to button

Following the previous changes, this commit increases the height and "tappable area" of the "Set/Remove as Featured Image" button by adding both top and bottom padding.

* Update function name

Due to an error when merging, the code was referencing an old function name, "getSetFeaturedButton". It should instead reference the name name, "getFeaturedButtonPanel".

* Update selector name

For consistency with other selectors, this commit updates the name of "setFeaturedCellContainer" to "setFeaturedButtonCellContainer".

* Group FooterMessageControl into "Featured" panel

The placement of the component is moved within the main "Featured Image" panel, as this is more semantically correct than having the component within its own, separate panel.

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,8 @@ export class ImageEdit extends Component {
 					setFeaturedButtonStyle,
 					styles.removeFeaturedButton,
 				] }
+				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
+				separatorType={ 'none' }
 				onPress={ () =>
 					this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET )
 				}
@@ -470,17 +473,13 @@ export class ImageEdit extends Component {
 			<BottomSheet.Cell
 				label={ __( 'Set as Featured Image ' ) }
 				labelStyle={ setFeaturedButtonStyle }
+				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
+				separatorType={ 'none' }
 				onPress={ () => this.onSetFeatured( attributes.id ) }
 			/>
 		);
 
-		return (
-			<PanelBody>
-				{ isFeaturedImage
-					? removeFeaturedButton()
-					: setFeaturedButton() }
-			</PanelBody>
-		);
+		return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
 	}
 
 	render() {
@@ -564,8 +563,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.getFeaturedButtonPanel( isFeaturedImage ) }
+					<FooterMessageControl
+						label={ __(
+							'Changes to featured image will not be affected by the undo/redo buttons.'
+						) }
+						cellContainerStyle={
+							styles.setFeaturedButtonCellContainer
+						}
+					/>
+				</PanelBody>
 			</InspectorControls>
 		);
 

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

@@ -31,16 +31,21 @@
 	padding-bottom: $grid-unit;
 }
 
+.featuredImagePanelTitle {
+	padding-bottom: 0;
+}
+
+.setFeaturedButtonCellContainer {
+	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,
+					}
+				);
 			}
 		);
 	}