From 7f3476a9b3b99af089bbc27a064c992468943a05 Mon Sep 17 00:00:00 2001
From: Leandro Alonso <contato@leandroalonso.com>
Date: Thu, 30 Jan 2020 08:07:32 -0300
Subject: [PATCH 1/2] Only shows the media edit icon if the block is selected

Also, matches the style of the native gallery block buttons
---
 packages/block-library/src/image/edit.native.js  | 10 ++++++----
 .../src/image/icon-customize.native.js           |  2 +-
 .../block-library/src/image/styles.native.scss   | 16 ++++++++++++----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 7f27f99dd1de39..6928494c9ab3f2 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -400,9 +400,11 @@ export class ImageEdit extends React.Component {
 		const editImageComponent = ( { open, mediaOptions } ) => (
 			<TouchableWithoutFeedback
 				onPress={ open }>
-				<View style={ styles.edit }>
-					{ mediaOptions() }
-					<Icon icon={ SvgIconCustomize } { ...styles.iconCustomise } />
+				<View style={ styles.editContainer }>
+					<View style={ styles.edit }>
+						{ mediaOptions() }
+						<Icon size={ 16 } icon={ SvgIconCustomize } { ...styles.iconCustomise } />
+					</View>
 				</View>
 			</TouchableWithoutFeedback>
 		);
@@ -471,7 +473,7 @@ export class ImageEdit extends React.Component {
 												<Text style={ styles.uploadFailedText }>{ retryMessage }</Text>
 											</View>
 										}
-										{ ! isUploadInProgress && ! isUploadFailed && finalWidth && finalHeight && showMediaEditorButton &&
+										{ isSelected && ! isUploadInProgress && ! isUploadFailed && finalWidth && finalHeight && showMediaEditorButton &&
 											<MediaEdit allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
 												onSelect={ this.onSelectMediaUploadOption }
 												source={ { uri: url } }
diff --git a/packages/block-library/src/image/icon-customize.native.js b/packages/block-library/src/image/icon-customize.native.js
index 89f3fb47b55177..b0da0bdacd935f 100644
--- a/packages/block-library/src/image/icon-customize.native.js
+++ b/packages/block-library/src/image/icon-customize.native.js
@@ -3,4 +3,4 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export default <SVG xmlns="http://www.w3.org/2000/svg"><Path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z" /></SVG>;
+export default <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z" /></SVG>;
diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
index a34c48fb7bbbc4..d4c512ea423cdd 100644
--- a/packages/block-library/src/image/styles.native.scss
+++ b/packages/block-library/src/image/styles.native.scss
@@ -84,10 +84,18 @@
 	align-items: center;
 }
 
-.edit {
+.editContainer {
 	width: 44px;
 	height: 44px;
-	background-color: $dark-opacity-500;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.edit {
+	width: 30px;
+	height: 30px;
+	background-color: $gray-dark;
 	border-radius: 22px;
 	position: absolute;
 	top: 5px;
@@ -97,6 +105,6 @@
 .iconCustomise {
 	fill: #fff;
 	position: absolute;
-	top: 10px;
-	left: 10px;
+	top: 7px;
+	left: 7px;
 }

From 03123f0f67626312d8199588c2a0ceab813436d0 Mon Sep 17 00:00:00 2001
From: Leandro Alonso <contato@leandroalonso.com>
Date: Fri, 31 Jan 2020 10:02:52 -0300
Subject: [PATCH 2/2] Fix lint

---
 packages/block-library/src/image/icon-customize.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/icon-customize.native.js b/packages/block-library/src/image/icon-customize.native.js
index d1add59bd94498..57fc39c7c29f1b 100644
--- a/packages/block-library/src/image/icon-customize.native.js
+++ b/packages/block-library/src/image/icon-customize.native.js
@@ -4,7 +4,7 @@
 import { Path, SVG } from '@wordpress/components';
 
 export default (
-	<SVG xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z" />
 	</SVG>
 );