[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

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

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%;
+}

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={

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';

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;
 
@@ -110,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%';
@@ -126,22 +137,22 @@ const ImageComponent = ( {
 					? imageWidth
 					: customWidth,
 		},
-		focalPoint && styles.focalPointContainer,
+		withFocalPoint && styles.focalPointContainer,
 	];
 
 	const imageStyles = [
 		{
 			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,17 +198,19 @@ 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>
 				) }
 
-				{ isUploadFailed && (
+				{ isUploadFailed && retryMessage && (
 					<View
 						style={ [
 							styles.imageContainer,
@@ -215,7 +228,7 @@ const ImageComponent = ( {
 				{ isSelected &&
 					! isUploadInProgress &&
 					! isUploadFailed &&
-					( imageData || focalPoint ) && (
+					( imageData || withFocalPoint ) && (
 						<MediaEdit
 							onSelect={ onSelectMediaUploadOption }
 							source={ { uri: url } }

packages/components/src/mobile/image/style.native.scss

@@ -61,6 +61,10 @@
 	background-color: $gray-90;
 }
 
+.imageContainerUploadWithFocalpoint {
+	height: 100%;
+}
+
 .imageUploadingIconContainer {
 	width: 40px;
 	height: 40px;