From b96258756440a95a529a5b5788ffb74bfd6f9bcd Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Mon, 6 Jul 2020 18:30:21 +0200
Subject: [PATCH 01/13] Mobile - Cover block - Media editing

---
 .../media-upload-progress/index.native.js     |  2 +-
 .../block-library/src/cover/edit.native.js    | 82 +++++++++++++++----
 .../block-library/src/cover/style.native.scss | 13 +++
 .../src/media-text/media-container.native.js  | 10 +--
 packages/components/src/index.native.js       |  1 -
 .../image-with-focalpoint/style.native.scss   | 10 ---
 .../src/mobile/image/index.native.js          | 28 +++++--
 .../utils}/index.native.js                    | 57 -------------
 8 files changed, 102 insertions(+), 101 deletions(-)
 delete mode 100644 packages/components/src/mobile/image-with-focalpoint/style.native.scss
 rename packages/components/src/mobile/{image-with-focalpoint => image/utils}/index.native.js (55%)

diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index adf99249384103..c25e23f9659cd5 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -126,7 +126,7 @@ export class MediaUploadProgress extends React.Component {
 		);
 
 		return (
-			<View style={ styles.mediaUploadProgress }>
+			<View style={ styles.mediaUploadProgress } pointerEvents="box-none">
 				{ showSpinner && (
 					<View style={ styles.progressBar }>
 						<Spinner progress={ progress } />
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index df81a2f9b1d1ee..7ceb25ae41d5f3 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, TouchableWithoutFeedback } from 'react-native';
+import { Animated, View, TouchableWithoutFeedback } from 'react-native';
 import Video from 'react-native-video';
 
 /**
@@ -10,12 +10,13 @@ import Video from 'react-native-video';
 import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
+	requestImageFullscreenPreview,
 	mediaUploadSync,
 } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
 import {
 	Icon,
-	ImageWithFocalPoint,
+	Image,
 	PanelBody,
 	RangeControl,
 	ToolbarButton,
@@ -36,7 +37,7 @@ import {
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { cover as icon, replace } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 
@@ -98,6 +99,10 @@ const Cover = ( {
 		gradientValue
 	);
 
+	const [ isMediaSelected, setMediaSelected ] = useState( false );
+
+	const mediaSelectedAnimation = useRef( new Animated.Value( 1 ) ).current;
+
 	// Used to set a default color for its InnerBlocks
 	// since there's no system to inherit styles yet
 	// the RichText component will check if there are
@@ -113,6 +118,10 @@ const Cover = ( {
 	// sync with local media store
 	useEffect( mediaUploadSync, [] );
 
+	useEffect( () => {
+		startMediaSelectedAnimation();
+	}, [ isMediaSelected ] );
+
 	// initialize uploading flag to false, awaiting sync
 	const [ isUploadInProgress, setIsUploadInProgress ] = useState( false );
 
@@ -121,9 +130,23 @@ const Cover = ( {
 		id && getProtocol( url ) === 'file:'
 	);
 
+	// Check if Innerblocks are selected to reset isMediaSelected
+
+	if ( ! isParentSelected && isMediaSelected ) {
+		setMediaSelected( false );
+	}
+
 	// don't show failure if upload is in progress
 	const shouldShowFailure = didUploadFail && ! isUploadInProgress;
 
+	const startMediaSelectedAnimation = () => {
+		Animated.timing( mediaSelectedAnimation, {
+			toValue: isMediaSelected ? 0 : 1,
+			duration: 300,
+			useNativeDriver: true,
+		} ).start();
+	};
+
 	const onSelectMedia = ( media ) => {
 		setDidUploadFail( false );
 		const onSelect = attributesFromMedia( setAttributes );
@@ -145,6 +168,10 @@ const Cover = ( {
 			requestImageUploadCancelDialog( id );
 		} else if ( shouldShowFailure ) {
 			requestImageFailedRetryDialog( id );
+		} else if ( backgroundType === MEDIA_TYPE_IMAGE && isMediaSelected ) {
+			requestImageFullscreenPreview( url );
+		} else if ( backgroundType === MEDIA_TYPE_IMAGE ) {
+			setMediaSelected( true );
 		}
 	};
 
@@ -240,7 +267,10 @@ const Cover = ( {
 		>
 			<View style={ [ styles.background, backgroundColor ] }>
 				{ getMediaOptions() }
-				{ isParentSelected && toolbarControls( openMediaOptions ) }
+				{ isParentSelected &&
+					( isMediaSelected ||
+						backgroundType === VIDEO_BACKGROUND_TYPE ) &&
+					toolbarControls( openMediaOptions ) }
 				<MediaUploadProgress
 					mediaId={ id }
 					onUpdateMediaProgress={ () => {
@@ -268,12 +298,22 @@ const Cover = ( {
 						setAttributes( { id: undefined, url: undefined } );
 					} }
 				/>
+
 				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
-					<ImageWithFocalPoint
-						focalPoint={ focalPoint }
-						url={ url }
-					/>
+					<View style={ styles.imageContainer }>
+						<Image
+							focalPoint={ focalPoint }
+							isSelected={ isMediaSelected }
+							isUploadFailed={ didUploadFail }
+							isUploadInProgress={ isUploadInProgress }
+							onSelectMediaUploadOption={ onSelectMedia }
+							openMediaOptions={ openMediaOptions }
+							url={ url }
+							withFocalPoint
+						/>
+					</View>
 				) }
+
 				{ VIDEO_BACKGROUND_TYPE === backgroundType && (
 					<Video
 						muted
@@ -321,14 +361,24 @@ const Cover = ( {
 				<InnerBlocks template={ INNER_BLOCKS_TEMPLATE } />
 			</View>
 
-			<View pointerEvents="none" style={ overlayStyles }>
-				{ gradientValue && (
-					<Gradient
-						gradientValue={ gradientValue }
-						style={ styles.background }
-					/>
-				) }
-			</View>
+			<Animated.View
+				pointerEvents="none"
+				style={ [
+					styles.overlayContainer,
+					{
+						opacity: mediaSelectedAnimation,
+					},
+				] }
+			>
+				<View style={ overlayStyles }>
+					{ gradientValue && (
+						<Gradient
+							gradientValue={ gradientValue }
+							style={ styles.background }
+						/>
+					) }
+				</View>
+			</Animated.View>
 
 			<MediaUpload
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
index 59d23d8999b31d..f8e8c125666d3e 100644
--- a/packages/block-library/src/cover/style.native.scss
+++ b/packages/block-library/src/cover/style.native.scss
@@ -29,6 +29,13 @@
 	position: absolute;
 }
 
+.overlayContainer {
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	position: absolute;
+}
+
 .defaultColor {
 	color: $white;
 }
@@ -71,3 +78,9 @@
 	width: 100%;
 	height: 100%;
 }
+
+.imageContainer {
+	height: 100%;
+	position: absolute;
+	width: 100%;
+}
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
index 76c187b8d847ba..25b61ef312a9ce 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -44,8 +44,6 @@ const ICON_TYPE = {
 	RETRY: 'retry',
 };
 
-const DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
-
 export { imageFillStyles } from './media-container.js';
 
 class MediaContainer extends Component {
@@ -183,9 +181,6 @@ class MediaContainer extends Component {
 			shouldStack,
 		} = this.props;
 		const { isUploadFailed, retryMessage } = params;
-		const focalPointValues = ! focalPoint
-			? DEFAULT_FOCAL_POINT
-			: focalPoint;
 
 		return (
 			<View
@@ -213,8 +208,9 @@ class MediaContainer extends Component {
 						<Image
 							align="center"
 							alt={ mediaAlt }
-							focalPoint={ imageFill && focalPointValues }
-							isSelected={ isMediaSelected && isMediaSelected }
+							withFocalPoint={ imageFill }
+							focalPoint={ focalPoint }
+							isSelected={ isMediaSelected }
 							isUploadFailed={ isUploadFailed }
 							isUploadInProgress={ isUploadInProgress }
 							onSelectMediaUploadOption={
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 2e74337bbf8fbe..beb309356035d1 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -66,7 +66,6 @@ export { default as ModalHeaderBar } from './mobile/modal-header-bar';
 export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
-export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
 export { default as LinkSettings } from './mobile/link-settings';
diff --git a/packages/components/src/mobile/image-with-focalpoint/style.native.scss b/packages/components/src/mobile/image-with-focalpoint/style.native.scss
deleted file mode 100644
index 140d8f514569bd..00000000000000
--- a/packages/components/src/mobile/image-with-focalpoint/style.native.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.container {
-	height: 100%;
-	position: absolute;
-	width: 100%;
-}
-
-.image {
-	position: absolute;
-	width: 100%;
-}
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index e71c88310fe5a9..06abc12d5609cf 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -16,7 +16,7 @@ import { useEffect, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { MediaEdit } from '../media-edit';
-import { getImageWithFocalPointStyles } from '../image-with-focalpoint';
+import { getImageWithFocalPointStyles } from './utils';
 import styles from './style.scss';
 import SvgIconRetry from './icon-retry';
 import SvgIconCustomize from './icon-customize';
@@ -27,6 +27,8 @@ const ICON_TYPE = {
 	UPLOAD: 'upload',
 };
 
+const DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
+
 function editImageComponent( { open, mediaOptions } ) {
 	return (
 		<TouchableWithoutFeedback onPress={ open }>
@@ -55,7 +57,8 @@ const ImageComponent = ( {
 	retryMessage,
 	url,
 	width: imageWidth,
-	focalPoint,
+	focalPoint: focalPointValues,
+	withFocalPoint = false,
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
@@ -72,6 +75,11 @@ const ImageComponent = ( {
 		}
 	}, [ url ] );
 
+	const focalPoint =
+		withFocalPoint && focalPointValues
+			? focalPointValues
+			: DEFAULT_FOCAL_POINT;
+
 	const onContainerLayout = ( event ) => {
 		const { height, width } = event.nativeEvent.layout;
 
@@ -126,7 +134,7 @@ const ImageComponent = ( {
 					? imageWidth
 					: customWidth,
 		},
-		focalPoint && styles.focalPointContainer,
+		withFocalPoint && styles.focalPointContainer,
 	];
 
 	const imageStyles = [
@@ -134,14 +142,14 @@ const ImageComponent = ( {
 			opacity: isUploadInProgress ? 0.3 : 1,
 			height: containerSize?.height,
 		},
-		focalPoint && styles.focalPoint,
-		focalPoint &&
+		withFocalPoint && styles.focalPoint,
+		withFocalPoint &&
 			getImageWithFocalPointStyles(
 				focalPoint,
 				containerSize,
 				imageData
 			),
-		! focalPoint &&
+		! withFocalPoint &&
 			imageData &&
 			containerSize && {
 				height:
@@ -187,12 +195,14 @@ const ImageComponent = ( {
 						</View>
 					</View>
 				) : (
-					<View style={ focalPoint && styles.focalPointContent }>
+					<View style={ withFocalPoint && styles.focalPointContent }>
 						<Image
 							aspectRatio={ imageData?.aspectRatio }
 							style={ imageStyles }
 							source={ { uri: url } }
-							{ ...( ! focalPoint && { resizeMethod: 'scale' } ) }
+							{ ...( ! withFocalPoint && {
+								resizeMethod: 'scale',
+							} ) }
 						/>
 					</View>
 				) }
@@ -215,7 +225,7 @@ const ImageComponent = ( {
 				{ isSelected &&
 					! isUploadInProgress &&
 					! isUploadFailed &&
-					( imageData || focalPoint ) && (
+					( imageData || withFocalPoint ) && (
 						<MediaEdit
 							onSelect={ onSelectMediaUploadOption }
 							source={ { uri: url } }
diff --git a/packages/components/src/mobile/image-with-focalpoint/index.native.js b/packages/components/src/mobile/image/utils/index.native.js
similarity index 55%
rename from packages/components/src/mobile/image-with-focalpoint/index.native.js
rename to packages/components/src/mobile/image/utils/index.native.js
index 6080e374a29fe0..5011937abcc573 100644
--- a/packages/components/src/mobile/image-with-focalpoint/index.native.js
+++ b/packages/components/src/mobile/image/utils/index.native.js
@@ -1,18 +1,3 @@
-/**
- * External dependencies
- */
-import { Image, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
 function getFocalPointOffset( imageRatio, container, imageSize, focusPoint ) {
 	const containerCenter = Math.floor( container / 2 );
 	const scaledImage = Math.floor( imageSize / imageRatio );
@@ -71,45 +56,3 @@ export function getImageWithFocalPointStyles(
 
 	return imageStyle;
 }
-
-const ImageWithFocalPoint = ( { focalPoint, url } ) => {
-	const [ originalImageData, setOriginalImageData ] = useState( null );
-	const [ containerSize, setContainerSize ] = useState( null );
-
-	useEffect( () => {
-		if ( url ) {
-			Image.getSize( url, ( width, height ) => {
-				setOriginalImageData( {
-					width,
-					height,
-					aspectRatio: width / height,
-				} );
-			} );
-		}
-	}, [ url ] );
-
-	const onContainerLayout = ( event ) => {
-		const { height, width } = event.nativeEvent.layout;
-		setContainerSize( { width, height } );
-	};
-
-	return (
-		<View style={ styles.container } onLayout={ onContainerLayout }>
-			<Image
-				aspectRatio={ originalImageData?.aspectRatio }
-				style={ [
-					styles.image,
-					{ height: containerSize?.height },
-					getImageWithFocalPointStyles(
-						focalPoint,
-						containerSize,
-						originalImageData
-					),
-				] }
-				source={ { uri: url } }
-			/>
-		</View>
-	);
-};
-
-export default memo( ImageWithFocalPoint );

From 48df5ed48f1e38f0409d58d4bd15f4960702ea45 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Tue, 7 Jul 2020 17:18:01 +0200
Subject: [PATCH 02/13] Mobile - Cover block - Fix upload placeholder

---
 .../components/src/mobile/image/index.native.js     | 13 ++++++++-----
 .../components/src/mobile/image/style.native.scss   |  4 ++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 06abc12d5609cf..998b352287f9e7 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -118,10 +118,13 @@ const ImageComponent = ( {
 		styles.iconUploadDark
 	);
 
-	const placeholderStyles = usePreferredColorSchemeStyle(
-		styles.imageContainerUpload,
-		styles.imageContainerUploadDark
-	);
+	const placeholderStyles = [
+		usePreferredColorSchemeStyle(
+			styles.imageContainerUpload,
+			styles.imageContainerUploadDark
+		),
+		withFocalPoint && styles.imageContainerUploadWithFocalpoint,
+	];
 
 	const customWidth =
 		imageData?.width < containerSize?.width ? imageData?.width : '100%';
@@ -207,7 +210,7 @@ const ImageComponent = ( {
 					</View>
 				) }
 
-				{ isUploadFailed && (
+				{ isUploadFailed && retryMessage && (
 					<View
 						style={ [
 							styles.imageContainer,
diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss
index 7590acfed44382..d5a0e5315382e9 100644
--- a/packages/components/src/mobile/image/style.native.scss
+++ b/packages/components/src/mobile/image/style.native.scss
@@ -61,6 +61,10 @@
 	background-color: $gray-90;
 }
 
+.imageContainerUploadWithFocalpoint {
+	height: 100%;
+}
+
 .imageUploadingIconContainer {
 	width: 40px;
 	height: 40px;

From 819a3e5ba6c9f4e815554eb167ce1cdebca5ecaa Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Tue, 14 Jul 2020 14:14:19 +0200
Subject: [PATCH 03/13] Mobile - Cover media editing - Image edit button

---
 .../block-library/src/cover/edit.native.js    | 76 ++++++++-----------
 .../block-library/src/cover/style.native.scss |  9 +++
 .../src/media-text/media-container.native.js  | 13 +++-
 packages/components/src/index.native.js       |  3 +-
 .../image/image-editing-button.native.js      | 52 +++++++++++++
 .../src/mobile/image/index.native.js          | 68 ++++++-----------
 6 files changed, 126 insertions(+), 95 deletions(-)
 create mode 100644 packages/components/src/mobile/image/image-editing-button.native.js

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 7ceb25ae41d5f3..2a428384971a62 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Animated, View, TouchableWithoutFeedback } from 'react-native';
+import { View, TouchableWithoutFeedback } from 'react-native';
 import Video from 'react-native-video';
 
 /**
@@ -17,6 +17,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	Icon,
 	Image,
+	ImageEditingButton,
+	IMAGE_DEFAULT_FOCAL_POINT,
 	PanelBody,
 	RangeControl,
 	ToolbarButton,
@@ -99,9 +101,7 @@ const Cover = ( {
 		gradientValue
 	);
 
-	const [ isMediaSelected, setMediaSelected ] = useState( false );
-
-	const mediaSelectedAnimation = useRef( new Animated.Value( 1 ) ).current;
+	const openMediaOptionsRef = useRef();
 
 	// Used to set a default color for its InnerBlocks
 	// since there's no system to inherit styles yet
@@ -118,10 +118,6 @@ const Cover = ( {
 	// sync with local media store
 	useEffect( mediaUploadSync, [] );
 
-	useEffect( () => {
-		startMediaSelectedAnimation();
-	}, [ isMediaSelected ] );
-
 	// initialize uploading flag to false, awaiting sync
 	const [ isUploadInProgress, setIsUploadInProgress ] = useState( false );
 
@@ -130,23 +126,9 @@ const Cover = ( {
 		id && getProtocol( url ) === 'file:'
 	);
 
-	// Check if Innerblocks are selected to reset isMediaSelected
-
-	if ( ! isParentSelected && isMediaSelected ) {
-		setMediaSelected( false );
-	}
-
 	// don't show failure if upload is in progress
 	const shouldShowFailure = didUploadFail && ! isUploadInProgress;
 
-	const startMediaSelectedAnimation = () => {
-		Animated.timing( mediaSelectedAnimation, {
-			toValue: isMediaSelected ? 0 : 1,
-			duration: 300,
-			useNativeDriver: true,
-		} ).start();
-	};
-
 	const onSelectMedia = ( media ) => {
 		setDidUploadFail( false );
 		const onSelect = attributesFromMedia( setAttributes );
@@ -168,10 +150,8 @@ const Cover = ( {
 			requestImageUploadCancelDialog( id );
 		} else if ( shouldShowFailure ) {
 			requestImageFailedRetryDialog( id );
-		} else if ( backgroundType === MEDIA_TYPE_IMAGE && isMediaSelected ) {
-			requestImageFullscreenPreview( url );
 		} else if ( backgroundType === MEDIA_TYPE_IMAGE ) {
-			setMediaSelected( true );
+			requestImageFullscreenPreview( url );
 		}
 	};
 
@@ -255,10 +235,7 @@ const Cover = ( {
 		</InspectorControls>
 	);
 
-	const renderBackground = ( {
-		open: openMediaOptions,
-		getMediaOptions,
-	} ) => (
+	const renderBackground = ( openMediaOptions, getMediaOptions ) => (
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
 			onPress={ onMediaPressed }
@@ -268,8 +245,7 @@ const Cover = ( {
 			<View style={ [ styles.background, backgroundColor ] }>
 				{ getMediaOptions() }
 				{ isParentSelected &&
-					( isMediaSelected ||
-						backgroundType === VIDEO_BACKGROUND_TYPE ) &&
+					backgroundType === VIDEO_BACKGROUND_TYPE &&
 					toolbarControls( openMediaOptions ) }
 				<MediaUploadProgress
 					mediaId={ id }
@@ -302,14 +278,16 @@ const Cover = ( {
 				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
 					<View style={ styles.imageContainer }>
 						<Image
-							focalPoint={ focalPoint }
-							isSelected={ isMediaSelected }
+							editButton={ false }
+							focalPoint={
+								focalPoint || IMAGE_DEFAULT_FOCAL_POINT
+							}
+							isSelected={ isParentSelected }
 							isUploadFailed={ didUploadFail }
 							isUploadInProgress={ isUploadInProgress }
 							onSelectMediaUploadOption={ onSelectMedia }
 							openMediaOptions={ openMediaOptions }
 							url={ url }
-							withFocalPoint
 						/>
 					</View>
 				) }
@@ -354,6 +332,19 @@ const Cover = ( {
 		<View style={ styles.backgroundContainer }>
 			{ controls }
 
+			{ openMediaOptionsRef?.current && (
+				<View style={ styles.imageEditButton }>
+					<ImageEditingButton
+						isSelected={ isParentSelected }
+						isUploadFailed={ didUploadFail }
+						isUploadInProgress={ isUploadInProgress }
+						onSelectMediaUploadOption={ onSelectMedia }
+						openMediaOptions={ openMediaOptionsRef?.current }
+						url={ url }
+					/>
+				</View>
+			) }
+
 			<View
 				pointerEvents="box-none"
 				style={ [ styles.content, { minHeight: CONTAINER_HEIGHT } ] }
@@ -361,15 +352,7 @@ const Cover = ( {
 				<InnerBlocks template={ INNER_BLOCKS_TEMPLATE } />
 			</View>
 
-			<Animated.View
-				pointerEvents="none"
-				style={ [
-					styles.overlayContainer,
-					{
-						opacity: mediaSelectedAnimation,
-					},
-				] }
-			>
+			<View pointerEvents="none" style={ styles.overlayContainer }>
 				<View style={ overlayStyles }>
 					{ gradientValue && (
 						<Gradient
@@ -378,12 +361,15 @@ const Cover = ( {
 						/>
 					) }
 				</View>
-			</Animated.View>
+			</View>
 
 			<MediaUpload
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onSelect={ onSelectMedia }
-				render={ renderBackground }
+				render={ ( { open, getMediaOptions } ) => {
+					openMediaOptionsRef.current = open;
+					return renderBackground( open, getMediaOptions );
+				} }
 			/>
 
 			{ shouldShowFailure && (
diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
index f8e8c125666d3e..458b95bcddaf7c 100644
--- a/packages/block-library/src/cover/style.native.scss
+++ b/packages/block-library/src/cover/style.native.scss
@@ -84,3 +84,12 @@
 	position: absolute;
 	width: 100%;
 }
+
+.imageEditButton {
+	height: 60px;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 60px;
+	z-index: 4;
+}
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
index 25b61ef312a9ce..e7c049054e2fb1 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -12,7 +12,12 @@ import {
 	requestImageUploadCancelDialog,
 	requestImageFullscreenPreview,
 } from '@wordpress/react-native-bridge';
-import { Icon, Image, withNotices } from '@wordpress/components';
+import {
+	Icon,
+	Image,
+	IMAGE_DEFAULT_FOCAL_POINT,
+	withNotices,
+} from '@wordpress/components';
 import {
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
@@ -181,6 +186,9 @@ class MediaContainer extends Component {
 			shouldStack,
 		} = this.props;
 		const { isUploadFailed, retryMessage } = params;
+		const focalPointValues = ! focalPoint
+			? IMAGE_DEFAULT_FOCAL_POINT
+			: focalPoint;
 
 		return (
 			<View
@@ -208,8 +216,7 @@ class MediaContainer extends Component {
 						<Image
 							align="center"
 							alt={ mediaAlt }
-							withFocalPoint={ imageFill }
-							focalPoint={ focalPoint }
+							focalPoint={ imageFill && focalPointValues }
 							isSelected={ isMediaSelected }
 							isUploadFailed={ isUploadFailed }
 							isUploadInProgress={ isUploadInProgress }
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index beb309356035d1..58ef81831b5c77 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -69,7 +69,8 @@ export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
 export { default as LinkSettings } from './mobile/link-settings';
-export { default as Image } from './mobile/image';
+export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
+export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';
diff --git a/packages/components/src/mobile/image/image-editing-button.native.js b/packages/components/src/mobile/image/image-editing-button.native.js
new file mode 100644
index 00000000000000..e04a30ff9dc0ea
--- /dev/null
+++ b/packages/components/src/mobile/image/image-editing-button.native.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { MediaEdit } from '../media-edit';
+import SvgIconCustomize from './icon-customize';
+import styles from './style.scss';
+
+const ImageEditingButton = ( {
+	isSelected,
+	isUploadFailed,
+	isUploadInProgress,
+	onSelectMediaUploadOption,
+	openMediaOptions,
+	url,
+} ) => {
+	if ( ! isSelected || isUploadInProgress || isUploadFailed ) {
+		return null;
+	}
+	return (
+		<MediaEdit
+			onSelect={ onSelectMediaUploadOption }
+			source={ { uri: url } }
+			openReplaceMediaOptions={ openMediaOptions }
+			render={ ( { open, mediaOptions } ) => (
+				<TouchableWithoutFeedback onPress={ open }>
+					<View style={ styles.editContainer }>
+						<View style={ styles.edit }>
+							{ mediaOptions() }
+							<Icon
+								size={ 16 }
+								icon={ SvgIconCustomize }
+								{ ...styles.iconCustomise }
+							/>
+						</View>
+					</View>
+				</TouchableWithoutFeedback>
+			) }
+		/>
+	);
+};
+
+export default ImageEditingButton;
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 998b352287f9e7..3ff9c0f32a9bae 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { Image, Text, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -15,11 +15,10 @@ import { useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { MediaEdit } from '../media-edit';
 import { getImageWithFocalPointStyles } from './utils';
 import styles from './style.scss';
 import SvgIconRetry from './icon-retry';
-import SvgIconCustomize from './icon-customize';
+import ImageEditingButton from './image-editing-button';
 
 const ICON_TYPE = {
 	PLACEHOLDER: 'placeholder',
@@ -27,28 +26,13 @@ const ICON_TYPE = {
 	UPLOAD: 'upload',
 };
 
-const DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
-
-function editImageComponent( { open, mediaOptions } ) {
-	return (
-		<TouchableWithoutFeedback onPress={ open }>
-			<View style={ styles.editContainer }>
-				<View style={ styles.edit }>
-					{ mediaOptions() }
-					<Icon
-						size={ 16 }
-						icon={ SvgIconCustomize }
-						{ ...styles.iconCustomise }
-					/>
-				</View>
-			</View>
-		</TouchableWithoutFeedback>
-	);
-}
+export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
 
 const ImageComponent = ( {
 	align,
 	alt,
+	editButton = true,
+	focalPoint,
 	isSelected,
 	isUploadFailed,
 	isUploadInProgress,
@@ -57,8 +41,6 @@ const ImageComponent = ( {
 	retryMessage,
 	url,
 	width: imageWidth,
-	focalPoint: focalPointValues,
-	withFocalPoint = false,
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
@@ -75,11 +57,6 @@ const ImageComponent = ( {
 		}
 	}, [ url ] );
 
-	const focalPoint =
-		withFocalPoint && focalPointValues
-			? focalPointValues
-			: DEFAULT_FOCAL_POINT;
-
 	const onContainerLayout = ( event ) => {
 		const { height, width } = event.nativeEvent.layout;
 
@@ -123,7 +100,7 @@ const ImageComponent = ( {
 			styles.imageContainerUpload,
 			styles.imageContainerUploadDark
 		),
-		withFocalPoint && styles.imageContainerUploadWithFocalpoint,
+		focalPoint && styles.imageContainerUploadWithFocalpoint,
 	];
 
 	const customWidth =
@@ -137,7 +114,7 @@ const ImageComponent = ( {
 					? imageWidth
 					: customWidth,
 		},
-		withFocalPoint && styles.focalPointContainer,
+		focalPoint && styles.focalPointContainer,
 	];
 
 	const imageStyles = [
@@ -145,14 +122,14 @@ const ImageComponent = ( {
 			opacity: isUploadInProgress ? 0.3 : 1,
 			height: containerSize?.height,
 		},
-		withFocalPoint && styles.focalPoint,
-		withFocalPoint &&
+		focalPoint && styles.focalPoint,
+		focalPoint &&
 			getImageWithFocalPointStyles(
 				focalPoint,
 				containerSize,
 				imageData
 			),
-		! withFocalPoint &&
+		! focalPoint &&
 			imageData &&
 			containerSize && {
 				height:
@@ -198,12 +175,12 @@ const ImageComponent = ( {
 						</View>
 					</View>
 				) : (
-					<View style={ withFocalPoint && styles.focalPointContent }>
+					<View style={ focalPoint && styles.focalPointContent }>
 						<Image
 							aspectRatio={ imageData?.aspectRatio }
 							style={ imageStyles }
 							source={ { uri: url } }
-							{ ...( ! withFocalPoint && {
+							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',
 							} ) }
 						/>
@@ -225,17 +202,16 @@ const ImageComponent = ( {
 						</Text>
 					</View>
 				) }
-				{ isSelected &&
-					! isUploadInProgress &&
-					! isUploadFailed &&
-					( imageData || withFocalPoint ) && (
-						<MediaEdit
-							onSelect={ onSelectMediaUploadOption }
-							source={ { uri: url } }
-							openReplaceMediaOptions={ openMediaOptions }
-							render={ editImageComponent }
-						/>
-					) }
+				{ editButton && imageData && (
+					<ImageEditingButton
+						isSelected={ isSelected }
+						isUploadFailed={ isUploadFailed }
+						isUploadInProgress={ isUploadInProgress }
+						onSelectMediaUploadOption={ onSelectMediaUploadOption }
+						openMediaOptions={ openMediaOptions }
+						url={ url }
+					/>
+				) }
 			</View>
 		</View>
 	);

From 0cfa672a2b035434483f5e8192537bfdc682e36f Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Wed, 15 Jul 2020 12:22:04 +0200
Subject: [PATCH 04/13] Mobile - Image editing button - Check for url before
 rendering

---
 .../components/src/mobile/image/image-editing-button.native.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/mobile/image/image-editing-button.native.js b/packages/components/src/mobile/image/image-editing-button.native.js
index e04a30ff9dc0ea..c780716b57e6d8 100644
--- a/packages/components/src/mobile/image/image-editing-button.native.js
+++ b/packages/components/src/mobile/image/image-editing-button.native.js
@@ -23,7 +23,7 @@ const ImageEditingButton = ( {
 	openMediaOptions,
 	url,
 } ) => {
-	if ( ! isSelected || isUploadInProgress || isUploadFailed ) {
+	if ( ! isSelected || ! url || isUploadInProgress || isUploadFailed ) {
 		return null;
 	}
 	return (

From 09712fb46b348924bb38d61e39928a760dab1a64 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Fri, 17 Jul 2020 10:16:08 +0200
Subject: [PATCH 05/13] Mobile - Cover - Show selected border with the overlay
 layer

---
 packages/block-library/src/cover/edit.native.js    |  1 +
 packages/block-library/src/cover/style.native.scss | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 930def14b3d28f..9949930684e094 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -184,6 +184,7 @@ const Cover = ( {
 		},
 		// While we don't support theme colors we add a default bg color
 		! overlayColor.color && ! url ? backgroundColor : {},
+		isParentSelected && styles.overlaySelected,
 	];
 
 	const placeholderIconStyle = getStylesFromColorScheme(
diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
index 09aa3c8d8dbe41..e8e5819260c376 100644
--- a/packages/block-library/src/cover/style.native.scss
+++ b/packages/block-library/src/cover/style.native.scss
@@ -22,11 +22,20 @@
 }
 
 .overlay {
-	width: 100%;
-	height: 100%;
 	z-index: 2;
 	color: $black;
 	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.overlaySelected {
+	top: 2;
+	left: 2;
+	right: 2;
+	bottom: 2;
 }
 
 .overlayContainer {

From 310f1579e034fe6dacf89450e9438f364d490ac8 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Fri, 17 Jul 2020 11:39:47 +0200
Subject: [PATCH 06/13] Mobile - Cover - Style improvements, Media editing
 support for onRemove

---
 .../block-library/src/cover/edit.native.js    | 51 +++++++++++--------
 .../block-library/src/cover/style.native.scss |  8 +--
 .../image/image-editing-button.native.js      |  8 +--
 .../src/mobile/image/index.native.js          | 26 ++++++----
 .../src/mobile/media-edit/index.native.js     | 32 +++++++++---
 5 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 9949930684e094..4a15ff0c1f4661 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -167,6 +167,11 @@ const Cover = ( {
 		setIsVideoLoading( false );
 	};
 
+	const onClearMedia = () => {
+		setAttributes( { id: undefined, url: undefined } );
+		closeSettingsBottomSheet();
+	};
+
 	const backgroundColor = getStylesFromColorScheme(
 		styles.backgroundSolid,
 		styles.backgroundSolidDark
@@ -184,7 +189,10 @@ const Cover = ( {
 		},
 		// While we don't support theme colors we add a default bg color
 		! overlayColor.color && ! url ? backgroundColor : {},
-		isParentSelected && styles.overlaySelected,
+		isParentSelected &&
+			! isUploadInProgress &&
+			! didUploadFail &&
+			styles.overlaySelected,
 	];
 
 	const placeholderIconStyle = getStylesFromColorScheme(
@@ -242,28 +250,25 @@ const Cover = ( {
 						leftAlign
 						label={ __( 'Clear Media' ) }
 						labelStyle={ styles.clearMediaButton }
-						onPress={ () => {
-							setAttributes( { id: undefined, url: undefined } );
-							closeSettingsBottomSheet();
-						} }
+						onPress={ onClearMedia }
 					/>
 				</PanelBody>
 			) : null }
 		</InspectorControls>
 	);
 
-	const renderBackground = ( openMediaOptions, getMediaOptions ) => (
+	const renderBackground = ( getMediaOptions ) => (
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
 			onPress={ onMediaPressed }
-			onLongPress={ openMediaOptions }
+			onLongPress={ openMediaOptionsRef.current }
 			disabled={ ! isParentSelected }
 		>
 			<View style={ [ styles.background, backgroundColor ] }>
 				{ getMediaOptions() }
 				{ isParentSelected &&
 					backgroundType === VIDEO_BACKGROUND_TYPE &&
-					toolbarControls( openMediaOptions ) }
+					toolbarControls( openMediaOptionsRef.current ) }
 				<MediaUploadProgress
 					mediaId={ id }
 					onUpdateMediaProgress={ () => {
@@ -303,7 +308,7 @@ const Cover = ( {
 							isUploadFailed={ didUploadFail }
 							isUploadInProgress={ isUploadInProgress }
 							onSelectMediaUploadOption={ onSelectMedia }
-							openMediaOptions={ openMediaOptions }
+							openMediaOptions={ openMediaOptionsRef.current }
 							url={ url }
 						/>
 					</View>
@@ -349,18 +354,20 @@ const Cover = ( {
 		<View style={ styles.backgroundContainer }>
 			{ controls }
 
-			{ openMediaOptionsRef?.current && (
-				<View style={ styles.imageEditButton }>
-					<ImageEditingButton
-						isSelected={ isParentSelected }
-						isUploadFailed={ didUploadFail }
-						isUploadInProgress={ isUploadInProgress }
-						onSelectMediaUploadOption={ onSelectMedia }
-						openMediaOptions={ openMediaOptionsRef?.current }
-						url={ url }
-					/>
-				</View>
-			) }
+			{ url &&
+				openMediaOptionsRef.current &&
+				isParentSelected &&
+				! isUploadInProgress &&
+				! didUploadFail && (
+					<View style={ styles.imageEditButton }>
+						<ImageEditingButton
+							onRemove={ onClearMedia }
+							onSelectMediaUploadOption={ onSelectMedia }
+							openMediaOptions={ openMediaOptionsRef.current }
+							url={ url }
+						/>
+					</View>
+				) }
 
 			<View
 				pointerEvents="box-none"
@@ -386,7 +393,7 @@ const Cover = ( {
 				onSelect={ onSelectMedia }
 				render={ ( { open, getMediaOptions } ) => {
 					openMediaOptionsRef.current = open;
-					return renderBackground( open, getMediaOptions );
+					return renderBackground( getMediaOptions );
 				} }
 			/>
 
diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
index e8e5819260c376..4b2ab257e5c0a8 100644
--- a/packages/block-library/src/cover/style.native.scss
+++ b/packages/block-library/src/cover/style.native.scss
@@ -25,13 +25,13 @@
 	z-index: 2;
 	color: $black;
 	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
+	width: 100%;
+	height: 100%;
 }
 
 .overlaySelected {
+	width: auto;
+	height: auto;
 	top: 2;
 	left: 2;
 	right: 2;
diff --git a/packages/components/src/mobile/image/image-editing-button.native.js b/packages/components/src/mobile/image/image-editing-button.native.js
index c780716b57e6d8..19ff5ac0e484c0 100644
--- a/packages/components/src/mobile/image/image-editing-button.native.js
+++ b/packages/components/src/mobile/image/image-editing-button.native.js
@@ -16,19 +16,15 @@ import SvgIconCustomize from './icon-customize';
 import styles from './style.scss';
 
 const ImageEditingButton = ( {
-	isSelected,
-	isUploadFailed,
-	isUploadInProgress,
+	onRemove,
 	onSelectMediaUploadOption,
 	openMediaOptions,
 	url,
 } ) => {
-	if ( ! isSelected || ! url || isUploadInProgress || isUploadFailed ) {
-		return null;
-	}
 	return (
 		<MediaEdit
 			onSelect={ onSelectMediaUploadOption }
+			onRemove={ onRemove }
 			source={ { uri: url } }
 			openReplaceMediaOptions={ openMediaOptions }
 			render={ ( { open, mediaOptions } ) => (
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 3ff9c0f32a9bae..020360104b0224 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -36,6 +36,7 @@ const ImageComponent = ( {
 	isSelected,
 	isUploadFailed,
 	isUploadInProgress,
+	onRemove,
 	onSelectMediaUploadOption,
 	openMediaOptions,
 	retryMessage,
@@ -202,16 +203,21 @@ const ImageComponent = ( {
 						</Text>
 					</View>
 				) }
-				{ editButton && imageData && (
-					<ImageEditingButton
-						isSelected={ isSelected }
-						isUploadFailed={ isUploadFailed }
-						isUploadInProgress={ isUploadInProgress }
-						onSelectMediaUploadOption={ onSelectMediaUploadOption }
-						openMediaOptions={ openMediaOptions }
-						url={ url }
-					/>
-				) }
+
+				{ editButton &&
+					isSelected &&
+					imageData &&
+					! isUploadInProgress &&
+					! isUploadFailed(
+						<ImageEditingButton
+							onRemove={ onRemove }
+							onSelectMediaUploadOption={
+								onSelectMediaUploadOption
+							}
+							openMediaOptions={ openMediaOptions }
+							url={ url }
+						/>
+					) }
 			</View>
 		</View>
 	);
diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js
index 91aee58f988bf0..7d35b68d2cb834 100644
--- a/packages/components/src/mobile/media-edit/index.native.js
+++ b/packages/components/src/mobile/media-edit/index.native.js
@@ -2,13 +2,13 @@
  * External dependencies
  */
 import React from 'react';
+import { compact } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Picker } from '@wordpress/components';
-import { update, brush } from '@wordpress/icons';
 import {
 	requestMediaEditor,
 	mediaSources,
@@ -23,7 +23,6 @@ const editOption = {
 	value: MEDIA_EDITOR,
 	label: __( 'Edit' ),
 	types: [ MEDIA_TYPE_IMAGE ],
-	icon: brush,
 };
 
 const replaceOption = {
@@ -31,20 +30,31 @@ const replaceOption = {
 	value: mediaSources.deviceLibrary,
 	label: __( 'Replace' ),
 	types: [ MEDIA_TYPE_IMAGE ],
-	icon: update,
 };
 
-const options = [ editOption, replaceOption ];
+const removeOption = {
+	id: 'removeOption',
+	label: __( 'Remove' ),
+	value: 'removeOption',
+	separated: true,
+};
 
 export class MediaEdit extends React.Component {
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );
 		this.onPickerSelect = this.onPickerSelect.bind( this );
+		this.getMediaOptionsItems = this.getMediaOptionsItems.bind( this );
 	}
 
 	getMediaOptionsItems() {
-		return options;
+		const { onRemove } = this.props;
+
+		return compact( [
+			editOption,
+			replaceOption,
+			onRemove && removeOption,
+		] );
 	}
 
 	onPickerPresent() {
@@ -54,7 +64,7 @@ export class MediaEdit extends React.Component {
 	}
 
 	onPickerSelect( value ) {
-		const { onSelect, multiple = false } = this.props;
+		const { onSelect, onRemove, multiple = false } = this.props;
 
 		switch ( value ) {
 			case MEDIA_EDITOR:
@@ -64,18 +74,28 @@ export class MediaEdit extends React.Component {
 					}
 				} );
 				break;
+			case removeOption.value:
+				onRemove();
+				break;
 			default:
 				this.props.openReplaceMediaOptions();
 		}
 	}
 
 	render() {
+		const { onRemove } = this.props;
+		const options = this.getMediaOptionsItems();
+
 		const mediaOptions = () => (
 			<Picker
 				hideCancelButton
 				ref={ ( instance ) => ( this.picker = instance ) }
 				options={ this.getMediaOptionsItems() }
+				leftAlign={ true }
 				onChange={ this.onPickerSelect }
+				// translators: %s: block title e.g: "Paragraph".
+				title={ __( 'Media options' ) }
+				destructiveButtonIndex={ onRemove && options.length }
 			/>
 		);
 

From c67bf82a1d74560e221dc14922f36aa4f83675bf Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Fri, 17 Jul 2020 12:12:47 +0200
Subject: [PATCH 07/13] Mobile - Cover - Remove extra line in style

---
 packages/block-library/src/cover/style.native.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
index c76e3095657544..099344edffb297 100644
--- a/packages/block-library/src/cover/style.native.scss
+++ b/packages/block-library/src/cover/style.native.scss
@@ -120,5 +120,4 @@
 
 .mediaPlaceholderEmptyStateContainer {
 	height: 300;
-
 }

From 3e5c8ef23bb4b7c8a04308a8d847d6dbc989efd6 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Mon, 20 Jul 2020 12:55:31 +0200
Subject: [PATCH 08/13] Mobile - Media editing - Support for more picker
 options

---
 .../block-library/src/cover/edit.native.js    | 11 ++++-
 .../image/image-editing-button.native.js      |  4 +-
 .../src/mobile/image/index.native.js          |  6 +--
 .../src/mobile/media-edit/index.native.js     | 44 ++++++++++++-------
 4 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 43560f9959c612..0b2a9bfa751ea1 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -393,9 +393,18 @@ const Cover = ( {
 				! didUploadFail && (
 					<View style={ styles.imageEditButton }>
 						<ImageEditingButton
-							onRemove={ onClearMedia }
 							onSelectMediaUploadOption={ onSelectMedia }
 							openMediaOptions={ openMediaOptionsRef.current }
+							pickerOptions={ [
+								{
+									destructiveButton: true,
+									id: 'clearMedia',
+									label: __( 'Clear media' ),
+									onPress: onClearMedia,
+									separated: true,
+									value: 'clearMedia',
+								},
+							] }
 							url={ url }
 						/>
 					</View>
diff --git a/packages/components/src/mobile/image/image-editing-button.native.js b/packages/components/src/mobile/image/image-editing-button.native.js
index 19ff5ac0e484c0..472fcfce3e0bcb 100644
--- a/packages/components/src/mobile/image/image-editing-button.native.js
+++ b/packages/components/src/mobile/image/image-editing-button.native.js
@@ -16,15 +16,14 @@ import SvgIconCustomize from './icon-customize';
 import styles from './style.scss';
 
 const ImageEditingButton = ( {
-	onRemove,
 	onSelectMediaUploadOption,
 	openMediaOptions,
+	pickerOptions,
 	url,
 } ) => {
 	return (
 		<MediaEdit
 			onSelect={ onSelectMediaUploadOption }
-			onRemove={ onRemove }
 			source={ { uri: url } }
 			openReplaceMediaOptions={ openMediaOptions }
 			render={ ( { open, mediaOptions } ) => (
@@ -41,6 +40,7 @@ const ImageEditingButton = ( {
 					</View>
 				</TouchableWithoutFeedback>
 			) }
+			pickerOptions={ pickerOptions }
 		/>
 	);
 };
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 020360104b0224..88104c84b69d2d 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -36,7 +36,7 @@ const ImageComponent = ( {
 	isSelected,
 	isUploadFailed,
 	isUploadInProgress,
-	onRemove,
+	mediaPickerOptions,
 	onSelectMediaUploadOption,
 	openMediaOptions,
 	retryMessage,
@@ -208,14 +208,14 @@ const ImageComponent = ( {
 					isSelected &&
 					imageData &&
 					! isUploadInProgress &&
-					! isUploadFailed(
+					! isUploadFailed && (
 						<ImageEditingButton
-							onRemove={ onRemove }
 							onSelectMediaUploadOption={
 								onSelectMediaUploadOption
 							}
 							openMediaOptions={ openMediaOptions }
 							url={ url }
+							pickerOptions={ mediaPickerOptions }
 						/>
 					) }
 			</View>
diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js
index 7d35b68d2cb834..f666fda3106111 100644
--- a/packages/components/src/mobile/media-edit/index.native.js
+++ b/packages/components/src/mobile/media-edit/index.native.js
@@ -32,31 +32,38 @@ const replaceOption = {
 	types: [ MEDIA_TYPE_IMAGE ],
 };
 
-const removeOption = {
-	id: 'removeOption',
-	label: __( 'Remove' ),
-	value: 'removeOption',
-	separated: true,
-};
-
 export class MediaEdit extends React.Component {
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getMediaOptionsItems = this.getMediaOptionsItems.bind( this );
+		this.getDestructiveButtonIndex = this.getDestructiveButtonIndex.bind(
+			this
+		);
 	}
 
 	getMediaOptionsItems() {
-		const { onRemove } = this.props;
+		const { pickerOptions } = this.props;
 
 		return compact( [
 			editOption,
 			replaceOption,
-			onRemove && removeOption,
+			...( pickerOptions ? pickerOptions : [] ),
 		] );
 	}
 
+	getDestructiveButtonIndex() {
+		const options = this.getMediaOptionsItems();
+		const destructiveButtonIndex = options.findIndex(
+			( option ) => option?.destructiveButton
+		);
+
+		return destructiveButtonIndex !== -1
+			? destructiveButtonIndex + 1
+			: undefined;
+	}
+
 	onPickerPresent() {
 		if ( this.picker ) {
 			this.picker.presentPicker();
@@ -64,7 +71,7 @@ export class MediaEdit extends React.Component {
 	}
 
 	onPickerSelect( value ) {
-		const { onSelect, onRemove, multiple = false } = this.props;
+		const { onSelect, pickerOptions, multiple = false } = this.props;
 
 		switch ( value ) {
 			case MEDIA_EDITOR:
@@ -74,18 +81,21 @@ export class MediaEdit extends React.Component {
 					}
 				} );
 				break;
-			case removeOption.value:
-				onRemove();
-				break;
 			default:
+				const optionSelected = pickerOptions.find(
+					( option ) => option.id === value
+				);
+
+				if ( optionSelected && optionSelected.onPress ) {
+					optionSelected.onPress();
+					return;
+				}
+
 				this.props.openReplaceMediaOptions();
 		}
 	}
 
 	render() {
-		const { onRemove } = this.props;
-		const options = this.getMediaOptionsItems();
-
 		const mediaOptions = () => (
 			<Picker
 				hideCancelButton
@@ -95,7 +105,7 @@ export class MediaEdit extends React.Component {
 				onChange={ this.onPickerSelect }
 				// translators: %s: block title e.g: "Paragraph".
 				title={ __( 'Media options' ) }
-				destructiveButtonIndex={ onRemove && options.length }
+				destructiveButtonIndex={ this.getDestructiveButtonIndex() }
 			/>
 		);
 

From 3f490afd54fbb536d8d5f2e781d85220e7524149 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Mon, 20 Jul 2020 13:06:48 +0200
Subject: [PATCH 09/13] Mobile - Cover - Update clear media label

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

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 0b2a9bfa751ea1..30a22b1a8b8886 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -399,7 +399,7 @@ const Cover = ( {
 								{
 									destructiveButton: true,
 									id: 'clearMedia',
-									label: __( 'Clear media' ),
+									label: __( 'Clear Media' ),
 									onPress: onClearMedia,
 									separated: true,
 									value: 'clearMedia',

From 1440fad774997420bfbfbcb72725247a7165064c Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Mon, 20 Jul 2020 15:22:55 +0200
Subject: [PATCH 10/13] Mobile - Media Edit - Check if optionSelected is
 defined

---
 packages/components/src/mobile/media-edit/index.native.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js
index f666fda3106111..434d83ab9da3b6 100644
--- a/packages/components/src/mobile/media-edit/index.native.js
+++ b/packages/components/src/mobile/media-edit/index.native.js
@@ -82,9 +82,9 @@ export class MediaEdit extends React.Component {
 				} );
 				break;
 			default:
-				const optionSelected = pickerOptions.find(
-					( option ) => option.id === value
-				);
+				const optionSelected =
+					pickerOptions &&
+					pickerOptions.find( ( option ) => option.id === value );
 
 				if ( optionSelected && optionSelected.onPress ) {
 					optionSelected.onPress();

From 02aaf3dbe3a969b51fcaaeb06a882774b632c824 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Wed, 22 Jul 2020 12:30:33 +0200
Subject: [PATCH 11/13] Mobile - Cover - Don't show the full screen modal
 preview if there is not a url set

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

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 30a22b1a8b8886..29e8a76b57e5f8 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -160,7 +160,7 @@ const Cover = ( {
 			requestImageUploadCancelDialog( id );
 		} else if ( shouldShowFailure ) {
 			requestImageFailedRetryDialog( id );
-		} else if ( backgroundType === MEDIA_TYPE_IMAGE ) {
+		} else if ( backgroundType === MEDIA_TYPE_IMAGE && url ) {
 			requestImageFullscreenPreview( url );
 		}
 	};

From 6c85b16317794abf0d88a5b9c89a626ae6175e1d Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Wed, 22 Jul 2020 12:31:52 +0200
Subject: [PATCH 12/13] Mobile - Update release notes

---
 packages/react-native-editor/RELEASE-NOTES.txt | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-native-editor/RELEASE-NOTES.txt b/packages/react-native-editor/RELEASE-NOTES.txt
index 5133192c22eaee..5f9174b22bd71e 100644
--- a/packages/react-native-editor/RELEASE-NOTES.txt
+++ b/packages/react-native-editor/RELEASE-NOTES.txt
@@ -1,3 +1,7 @@
+1.34.0
+------
+* [***] Media editing support in Cover block.
+
 1.33.0
 ------
 * [***] Media editing support in Media & Text block.

From 76fea5db936b45e3960ea13fffb88e65fe7b7166 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Wed, 22 Jul 2020 14:05:53 +0200
Subject: [PATCH 13/13] Mobile - Update changelog

---
 packages/react-native-editor/CHANGELOG.md | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 255e08b373da23..be80d35718797a 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -1,9 +1,3 @@
-1.34.0
-------
-* [***] Media editing support in Cover block.
-
-1.33.0
-------
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/master/packages#maintaining-changelogs. -->
 
 <!--
@@ -17,6 +11,10 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+## 1.34.0
+
+* [***] Media editing support in Cover block.
+
 ## 1.33.0
 
 * [***] Media editing support in Media & Text block.