Extend Image styles

WordPress · Aug 13, 2020 · 16753b5 · 16753b5
1 parent 8dea12b
commit 16753b5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-styles/style.native.scss b/packages/block-editor/src/components/block-styles/style.native.scss
@@ -1,38 +1,41 @@
+$outline-space: 3px;
+$image-height: 64px;
+
 .image {
-	height: 58px;
-	margin-left: 3px;
-	margin-right: 3px;
-	margin-top: 3px;
-	margin-bottom: 3px;
+	height: $image-height - 2 * $outline-space;
+	margin-left: $outline-space;
+	margin-right: $outline-space;
+	margin-top: $outline-space;
+	margin-bottom: $outline-space;
 }
 
 .container {
 	padding-right: $grid-unit;
 	padding-bottom: $grid-unit;
-	align-items: center;
 }
 
 .imageWrapper {
-	height: 64px;
-	justify-content: center;
+	height: $image-height;
+	width: 100%;
 }
 
 .rounded {
-	border-radius: 32px;
+	border-radius: $image-height / 2;
 	overflow: hidden;
 }
 
 .label {
 	color: $gray-dark;
 	padding-top: $grid-unit;
+	text-align: center;
 }
 
 .labelDark {
 	color: $white;
 }
 
 .outline {
-	height: 64px;
+	height: $image-height;
 	border-color: $blue-wordpress;
 	border-width: 1px;
 	position: absolute;

diff --git a/packages/block-editor/src/components/block-styles/variation.native.js b/packages/block-editor/src/components/block-styles/variation.native.js
@@ -6,9 +6,9 @@ import {
 	TouchableWithoutFeedback,
 	Text,
 	Dimensions,
-	Image,
 	Animated,
 	Easing,
+	Image,
 } from 'react-native';
 /**
  * WordPress dependencies
@@ -66,8 +66,8 @@ function StyleVariation( { onPress, isActive, style, url } ) {
 				animateOutline();
 			} }
 		>
-			<View style={ styles.container }>
-				<View style={ [ styles.imageWrapper, { width: itemWidth } ] }>
+			<View style={ [ styles.container, { width: itemWidth } ] }>
+				<View style={ styles.imageWrapper }>
 					{ isActive && (
 						<Animated.View
 							style={ [

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -483,7 +483,7 @@ export class ImageEdit extends React.Component {
 										retryMessage={ retryMessage }
 										url={ url }
 										width={ width }
-										style={ styles[ className ] }
+										imageShapeStyle={ styles[ className ] }
 									/>
 								);
 							} }

diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
@@ -41,7 +41,7 @@ const ImageComponent = ( {
 	openMediaOptions,
 	retryMessage,
 	url,
-	style,
+	imageShapeStyle,
 	width: imageWidth,
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
@@ -139,6 +139,7 @@ const ImageComponent = ( {
 						? containerSize?.width / imageData?.aspectRatio
 						: undefined,
 			},
+		imageShapeStyle,
 	];
 
 	return (
@@ -180,7 +181,7 @@ const ImageComponent = ( {
 					<View style={ focalPoint && styles.focalPointContent }>
 						<Image
 							aspectRatio={ imageData?.aspectRatio }
-							style={ [ imageStyles, style ] }
+							style={ imageStyles }
 							source={ { uri: url } }
 							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',