[Mobile] - Cover block - Media editing

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 } />

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

@@ -11,12 +11,15 @@ import { noop } from 'lodash';
 import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
+	requestImageFullscreenPreview,
 	mediaUploadSync,
 } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
 import {
 	Icon,
-	ImageWithFocalPoint,
+	Image,
+	ImageEditingButton,
+	IMAGE_DEFAULT_FOCAL_POINT,
 	PanelBody,
 	RangeControl,
 	BottomSheet,
@@ -39,7 +42,7 @@ import {
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } 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';
 
@@ -108,6 +111,8 @@ const Cover = ( {
 		gradientValue
 	);
 
+	const openMediaOptionsRef = useRef();
+
 	// 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
@@ -155,6 +160,8 @@ const Cover = ( {
 			requestImageUploadCancelDialog( id );
 		} else if ( shouldShowFailure ) {
 			requestImageFailedRetryDialog( id );
+		} else if ( backgroundType === MEDIA_TYPE_IMAGE && url ) {
+			requestImageFullscreenPreview( url );
 		}
 	};
 
@@ -168,6 +175,11 @@ const Cover = ( {
 		setIsVideoLoading( false );
 	};
 
+	const onClearMedia = () => {
+		setAttributes( { id: undefined, url: undefined } );
+		closeSettingsBottomSheet();
+	};
+
 	function setColor( color ) {
 		setAttributes( {
 			// clear all related attributes (only one should be set)
@@ -195,6 +207,10 @@ const Cover = ( {
 		},
 		// While we don't support theme colors we add a default bg color
 		! overlayColor.color && ! url ? backgroundColor : {},
+		isParentSelected &&
+			! isUploadInProgress &&
+			! didUploadFail &&
+			styles.overlaySelected,
 	];
 
 	const placeholderIconStyle = getStylesFromColorScheme(
@@ -252,29 +268,25 @@ const Cover = ( {
 						leftAlign
 						label={ __( 'Clear Media' ) }
 						labelStyle={ styles.clearMediaButton }
-						onPress={ () => {
-							setAttributes( { id: undefined, url: undefined } );
-							closeSettingsBottomSheet();
-						} }
+						onPress={ onClearMedia }
 					/>
 				</PanelBody>
 			) : null }
 		</InspectorControls>
 	);
 
-	const renderBackground = ( {
-		open: openMediaOptions,
-		getMediaOptions,
-	} ) => (
+	const renderBackground = ( getMediaOptions ) => (
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
 			onPress={ onMediaPressed }
-			onLongPress={ openMediaOptions }
+			onLongPress={ openMediaOptionsRef.current }
 			disabled={ ! isParentSelected }
 		>
 			<View style={ [ styles.background, backgroundColor ] }>
 				{ getMediaOptions() }
-				{ isParentSelected && toolbarControls( openMediaOptions ) }
+				{ isParentSelected &&
+					backgroundType === VIDEO_BACKGROUND_TYPE &&
+					toolbarControls( openMediaOptionsRef.current ) }
 				<MediaUploadProgress
 					mediaId={ id }
 					onUpdateMediaProgress={ () => {
@@ -302,12 +314,24 @@ const Cover = ( {
 						setAttributes( { id: undefined, url: undefined } );
 					} }
 				/>
+
 				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
-					<ImageWithFocalPoint
-						focalPoint={ focalPoint }
-						url={ url }
-					/>
+					<View style={ styles.imageContainer }>
+						<Image
+							editButton={ false }
+							focalPoint={
+								focalPoint || IMAGE_DEFAULT_FOCAL_POINT
+							}
+							isSelected={ isParentSelected }
+							isUploadFailed={ didUploadFail }
+							isUploadInProgress={ isUploadInProgress }
+							onSelectMediaUploadOption={ onSelectMedia }
+							openMediaOptions={ openMediaOptionsRef.current }
+							url={ url }
+						/>
+					</View>
 				) }
+
 				{ VIDEO_BACKGROUND_TYPE === backgroundType && (
 					<Video
 						muted
@@ -362,27 +386,56 @@ const Cover = ( {
 		<View style={ styles.backgroundContainer }>
 			{ controls }
 
+			{ url &&
+				openMediaOptionsRef.current &&
+				isParentSelected &&
+				! isUploadInProgress &&
+				! didUploadFail && (
+					<View style={ styles.imageEditButton }>
+						<ImageEditingButton
+							onSelectMediaUploadOption={ onSelectMedia }
+							openMediaOptions={ openMediaOptionsRef.current }
+							pickerOptions={ [
+								{
+									destructiveButton: true,
+									id: 'clearMedia',
+									label: __( 'Clear Media' ),
+									onPress: onClearMedia,
+									separated: true,
+									value: 'clearMedia',
+								},
+							] }
+							url={ url }
+						/>
+					</View>
+				) }
+
 			<View
 				pointerEvents="box-none"
 				style={ [ styles.content, { minHeight: CONTAINER_HEIGHT } ] }
 			>
 				<InnerBlocks template={ INNER_BLOCKS_TEMPLATE } />
 			</View>
 
-			<View pointerEvents="none" style={ overlayStyles }>
-				{ gradientValue && (
-					<Gradient
-						gradientValue={ gradientValue }
-						style={ styles.background }
-					/>
-				) }
+			<View pointerEvents="none" style={ styles.overlayContainer }>
+				<View style={ overlayStyles }>
+					{ gradientValue && (
+						<Gradient
+							gradientValue={ gradientValue }
+							style={ styles.background }
+						/>
+					) }
+				</View>
 			</View>
 
 			<MediaUpload
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				isReplacingMedia={ true }
 				onSelect={ onSelectMedia }
-				render={ renderBackground }
+				render={ ( { open, getMediaOptions } ) => {
+					openMediaOptionsRef.current = open;
+					return renderBackground( getMediaOptions );
+				} }
 			/>
 
 			{ shouldShowFailure && (

packages/block-library/src/cover/style.native.scss

@@ -22,10 +22,26 @@
 }
 
 .overlay {
+	z-index: 2;
+	color: $black;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.overlaySelected {
+	width: auto;
+	height: auto;
+	top: 2;
+	left: 2;
+	right: 2;
+	bottom: 2;
+}
+
+.overlayContainer {
 	width: 100%;
 	height: 100%;
 	z-index: 2;
-	color: $black;
 	position: absolute;
 }
 
@@ -76,6 +92,21 @@
 	color: $alert-red;
 }
 
+.imageContainer {
+	height: 100%;
+	position: absolute;
+	width: 100%;
+}
+
+.imageEditButton {
+	height: 60px;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 60px;
+	z-index: 4;
+}
+
 .colorPaletteWrapper {
 	min-height: 50px;
 }

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,
@@ -44,8 +49,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 {
@@ -184,7 +187,7 @@ class MediaContainer extends Component {
 		} = this.props;
 		const { isUploadFailed, retryMessage } = params;
 		const focalPointValues = ! focalPoint
-			? DEFAULT_FOCAL_POINT
+			? IMAGE_DEFAULT_FOCAL_POINT
 			: focalPoint;
 
 		return (
@@ -214,7 +217,7 @@ class MediaContainer extends Component {
 							align="center"
 							alt={ mediaAlt }
 							focalPoint={ imageFill && focalPointValues }
-							isSelected={ isMediaSelected && isMediaSelected }
+							isSelected={ isMediaSelected }
 							isUploadFailed={ isUploadFailed }
 							isUploadInProgress={ isUploadInProgress }
 							onSelectMediaUploadOption={

packages/components/src/index.native.js

@@ -66,11 +66,11 @@ 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';
-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';

packages/components/src/mobile/image/image-editing-button.native.js

@@ -0,0 +1,48 @@
+/**
+ * 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 = ( {
+	onSelectMediaUploadOption,
+	openMediaOptions,
+	pickerOptions,
+	url,
+} ) => {
+	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>
+			) }
+			pickerOptions={ pickerOptions }
+		/>
+	);
+};
+
+export default ImageEditingButton;