[Mobile] Cover: Add Media Button when only colour is selected (#23878)

Cover: Add Media Button when only colour is selected
WordPress · Jul 28, 2020 · a483555 · a483555
1 parent 8f3742d
commit a483555
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -44,7 +44,7 @@ import {
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { useEffect, useState, useRef } from '@wordpress/element';
-import { cover as icon, replace } from '@wordpress/icons';
+import { cover as icon, replace, image } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 
 /**
@@ -114,6 +114,8 @@ const Cover = ( {
 		gradientValue
 	);
 
+	const hasOnlyColorBackground = ! url && hasBackground;
+
 	const [
 		isCustomColorPickerShowing,
 		setCustomColorPickerShowing,
@@ -250,6 +252,20 @@ const Cover = ( {
 		</BlockControls>
 	);
 
+	const addMediaButton = () => (
+		<TouchableWithoutFeedback onPress={ openMediaOptionsRef.current }>
+			<View style={ styles.selectImageContainer }>
+				<View style={ styles.selectImage }>
+					<Icon
+						size={ 16 }
+						icon={ image }
+						{ ...styles.selectImageIcon }
+					/>
+				</View>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+
 	const controls = (
 		<InspectorControls>
 			<OverlayColorSettings
@@ -330,6 +346,13 @@ const Cover = ( {
 		</InspectorControls>
 	);
 
+	const renderContent = ( getMediaOptions ) => (
+		<>
+			{ renderBackground( getMediaOptions ) }
+			{ isParentSelected && hasOnlyColorBackground && addMediaButton() }
+		</>
+	);
+
 	const renderBackground = ( getMediaOptions ) => (
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
@@ -494,11 +517,11 @@ const Cover = ( {
 
 			<MediaUpload
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				isReplacingMedia={ true }
+				isReplacingMedia={ ! hasOnlyColorBackground }
 				onSelect={ onSelectMedia }
 				render={ ( { open, getMediaOptions } ) => {
 					openMediaOptionsRef.current = open;
-					return renderBackground( getMediaOptions );
+					return renderContent( getMediaOptions );
 				} }
 			/>
 

diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
@@ -88,6 +88,35 @@
 	height: 100%;
 }
 
+.selectImageContainer {
+	position: absolute;
+	padding: 8px;
+	justify-self: flex-start;
+	align-self: flex-end;
+	justify-content: flex-start;
+	align-items: flex-end;
+	z-index: 3;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+}
+
+.selectImage {
+	width: 30px;
+	height: 30px;
+	background-color: $gray-dark;
+	border-radius: 22px;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+
+.selectImageIcon {
+	fill: $white;
+	position: absolute;
+	top: 7px;
+	left: 7px;
+}
+
 .clearMediaButton {
 	color: $alert-red;
 }