[Mobile] - Image block - Fix height and border regression (#34957)

* Mobile - Fix Image block height regression

* Mobile - Image block - Check context exists

Author: Gerardo Pacheco

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

@@ -509,11 +509,14 @@ export class ImageEdit extends Component {
 			image,
 			clientId,
 			imageDefaultSize,
-			context: { imageCrop = false } = {},
+			context,
 			featuredImageId,
 			wasBlockJustInserted,
 		} = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
+		const hasImageContext = context
+			? Object.keys( context ).length > 0
+			: false;
 
 		const imageSizes = Array.isArray( this.props.imageSizes )
 			? this.props.imageSizes
@@ -627,9 +630,11 @@ export class ImageEdit extends Component {
 
 		const additionalImageProps = {
 			height: '100%',
-			resizeMode: imageCrop ? 'cover' : 'contain',
+			resizeMode: context?.imageCrop ? 'cover' : 'contain',
 		};
 
+		const imageContainerStyles = [ hasImageContext && styles.fixedHeight ];
+
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<Badge label={ __( 'Featured' ) } show={ isFeaturedImage }>
 				<TouchableWithoutFeedback
@@ -662,7 +667,7 @@ export class ImageEdit extends Component {
 								retryMessage,
 							} ) => {
 								return (
-									<View style={ styles.isGallery }>
+									<View style={ imageContainerStyles }>
 										<Image
 											align={
 												align && alignToFlex[ align ]
@@ -686,7 +691,9 @@ export class ImageEdit extends Component {
 											url={ url }
 											shapeStyle={ styles[ className ] }
 											width={ this.getWidth() }
-											{ ...additionalImageProps }
+											{ ...( hasImageContext
+												? additionalImageProps
+												: {} ) }
 										/>
 									</View>
 								);

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

@@ -31,7 +31,7 @@
 	padding-bottom: $grid-unit;
 }
 
-.isGallery {
+.fixedHeight {
 	height: 150;
 	overflow: visible;
 }