[Mobile] Create cover block with only colour (from a default palette)…

… without an image (#23833) * Create cover block with only color (from a theme palette)
WordPress · Jul 17, 2020 · 44295ce · 44295ce
1 parent 0a22d69
commit 44295ce
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -43,6 +43,8 @@ function MediaPlaceholder( props ) {
 		getStylesFromColorScheme,
 		multiple,
 		value = [],
+		children,
+		height,
 	} = props;
 
 	// use ref to keep media array current for callbacks during rerenders
@@ -107,6 +109,7 @@ function MediaPlaceholder( props ) {
 					<Text style={ emptyStateTitleStyle }>
 						{ placeholderTitle }
 					</Text>
+					{ children }
 					<Text style={ styles.emptyStateDescription }>
 						{ instructions }
 					</Text>
@@ -164,7 +167,10 @@ function MediaPlaceholder( props ) {
 						>
 							<View
 								style={ [
-									emptyStateContainerStyle,
+									[
+										emptyStateContainerStyle,
+										height && { height },
+									],
 									isAppender && appenderStyle,
 								] }
 							>

diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -21,8 +21,8 @@
 
 .emptyStateTitle {
 	text-align: center;
-	margin-top: 8;
-	margin-bottom: 10;
+	margin-top: 4;
+	margin-bottom: 16;
 	font-size: 14;
 	color: #2e4453;
 }

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -3,6 +3,7 @@
  */
 import { View, TouchableWithoutFeedback } from 'react-native';
 import Video from 'react-native-video';
+import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -22,6 +23,7 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 	Gradient,
+	ColorPalette,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -76,6 +78,7 @@ const Cover = ( {
 	onFocus,
 	overlayColor,
 	setAttributes,
+	settings,
 	closeSettingsBottomSheet,
 } ) => {
 	const {
@@ -90,6 +93,11 @@ const Cover = ( {
 	} = attributes;
 	const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;
 
+	const THEME_COLORS_COUNT = 4;
+	const coverDefaultPalette = {
+		colors: settings.colors.slice( 0, THEME_COLORS_COUNT ),
+	};
+
 	const { gradientValue } = __experimentalUseGradient();
 
 	const hasBackground = !! (
@@ -160,6 +168,16 @@ const Cover = ( {
 		setIsVideoLoading( false );
 	};
 
+	function setColor( color ) {
+		setAttributes( {
+			// clear all related attributes (only one should be set)
+			overlayColor: undefined,
+			customOverlayColor: color,
+			gradient: undefined,
+			customGradient: undefined,
+		} );
+	}
+
 	const backgroundColor = getStylesFromColorScheme(
 		styles.backgroundSolid,
 		styles.backgroundSolidDark
@@ -314,14 +332,28 @@ const Cover = ( {
 		return (
 			<View>
 				<MediaPlaceholder
+					height={ styles.mediaPlaceholderEmptyStateContainer.height }
 					icon={ placeholderIcon }
 					labels={ {
 						title: __( 'Cover' ),
 					} }
 					onSelect={ onSelectMedia }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onFocus={ onFocus }
-				/>
+				>
+					<View style={ styles.colorPaletteWrapper }>
+						<ColorPalette
+							customColorIndicatorStyles={
+								styles.paletteColorIndicator
+							}
+							setColor={ setColor }
+							onCustomPress={ noop }
+							defaultSettings={ coverDefaultPalette }
+							shouldShowCustomIndicatorOption={ false }
+							shouldShowCustomLabel={ false }
+						/>
+					</View>
+				</MediaPlaceholder>
 			</View>
 		);
 	}
@@ -377,7 +409,10 @@ export default compose( [
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
+		const { getSettings } = select( 'core/block-editor' );
+
 		return {
+			settings: getSettings(),
 			isParentSelected: selectedBlockClientId === clientId,
 		};
 	} ),

diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
@@ -75,3 +75,18 @@
 .clearMediaButton {
 	color: $alert-red;
 }
+
+.colorPaletteWrapper {
+	min-height: 50px;
+}
+
+.paletteColorIndicator {
+	margin-top: 0;
+	margin-bottom: 0;
+	width: 32px;
+	height: 32px;
+}
+
+.mediaPlaceholderEmptyStateContainer {
+	height: 300;
+}
diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
@@ -40,6 +40,9 @@ function ColorPalette( {
 	currentSegment,
 	onCustomPress,
 	shouldEnableBottomSheetScroll,
+	shouldShowCustomIndicatorOption = true,
+	shouldShowCustomLabel = true,
+	customColorIndicatorStyles,
 } ) {
 	const customSwatchGradients = [
 		'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
@@ -66,7 +69,8 @@ function ColorPalette( {
 		: customSwatchGradients;
 	const isCustomGradientColor = isGradientColor && isSelectedCustom();
 	const shouldShowCustomIndicator =
-		! isGradientSegment || isCustomGradientColor;
+		shouldShowCustomIndicatorOption &&
+		( ! isGradientSegment || isCustomGradientColor );
 
 	const accessibilityHint = isGradientSegment
 		? __( 'Navigates to customize the gradient' )
@@ -222,7 +226,10 @@ function ColorPalette( {
 								color={ color }
 								isSelected={ isSelected( color ) }
 								opacity={ opacity }
-								style={ styles.colorIndicator }
+								style={ [
+									styles.colorIndicator,
+									customColorIndicatorStyles,
+								] }
 							/>
 						</Animated.View>
 					</TouchableWithoutFeedback>
@@ -245,13 +252,18 @@ function ColorPalette( {
 								withCustomPicker={ ! isGradientSegment }
 								color={ customIndicatorColor }
 								isSelected={ isSelectedCustom() }
-								style={ styles.colorIndicator }
+								style={ [
+									styles.colorIndicator,
+									customColorIndicatorStyles,
+								] }
 							/>
-							<Text style={ customTextStyle }>
-								{ isIOS
-									? customText
-									: customText.toUpperCase() }
-							</Text>
+							{ shouldShowCustomLabel && (
+								<Text style={ customTextStyle }>
+									{ isIOS
+										? customText
+										: customText.toUpperCase() }
+								</Text>
+							) }
 						</View>
 					</TouchableWithoutFeedback>
 				</View>