[Mobile] Create cover block with custom colour (without an image)

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -45,6 +45,8 @@ function MediaPlaceholder( props ) {
 		value = [],
 		children,
 		height,
+		backgroundColor,
+		hideContent,
 	} = props;
 
 	// use ref to keep media array current for callbacks during rerenders
@@ -170,12 +172,13 @@ function MediaPlaceholder( props ) {
 									[
 										emptyStateContainerStyle,
 										height && { height },
+										backgroundColor && { backgroundColor },
 									],
 									isAppender && appenderStyle,
 								] }
 							>
 								{ getMediaOptions() }
-								{ renderContent() }
+								{ ! hideContent && renderContent() }
 							</View>
 						</TouchableWithoutFeedback>
 					);

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

@@ -3,7 +3,6 @@
  */
 import { View, TouchableWithoutFeedback } from 'react-native';
 import Video from 'react-native-video';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -27,6 +26,8 @@ import {
 	ToolbarGroup,
 	Gradient,
 	ColorPalette,
+	ColorPicker,
+	BottomSheetConsumer,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -81,6 +82,7 @@ const Cover = ( {
 	onFocus,
 	overlayColor,
 	setAttributes,
+	openGeneralSidebar,
 	settings,
 	closeSettingsBottomSheet,
 } ) => {
@@ -111,6 +113,13 @@ const Cover = ( {
 		gradientValue
 	);
 
+	const [
+		isCustomColorPickerShowing,
+		setCustomColorPickerShowing,
+	] = useState( false );
+
+	const [ customColor, setCustomColor ] = useState( '' );
+
 	const openMediaOptionsRef = useRef();
 
 	// Used to set a default color for its InnerBlocks
@@ -190,6 +199,13 @@ const Cover = ( {
 		} );
 	}
 
+	function openColorPicker() {
+		if ( isParentSelected ) {
+			openGeneralSidebar();
+			setCustomColorPickerShowing( true );
+		}
+	}
+
 	const backgroundColor = getStylesFromColorScheme(
 		styles.backgroundSolid,
 		styles.backgroundSolidDark
@@ -275,6 +291,43 @@ const Cover = ( {
 		</InspectorControls>
 	);
 
+	const colorPickerControls = (
+		<InspectorControls>
+			<BottomSheetConsumer>
+				{ ( {
+					shouldEnableBottomSheetScroll,
+					shouldDisableBottomSheetMaxHeight,
+					onCloseBottomSheet,
+					onHardwareButtonPress,
+					isBottomSheetContentScrolling,
+				} ) => (
+					<ColorPicker
+						shouldEnableBottomSheetScroll={
+							shouldEnableBottomSheetScroll
+						}
+						shouldDisableBottomSheetMaxHeight={
+							shouldDisableBottomSheetMaxHeight
+						}
+						setColor={ ( color ) => {
+							setCustomColor( color );
+							setColor( color );
+						} }
+						onNavigationBack={ closeSettingsBottomSheet }
+						onCloseBottomSheet={ onCloseBottomSheet }
+						onHardwareButtonPress={ onHardwareButtonPress }
+						onBottomSheetClosed={ () => {
+							setCustomColorPickerShowing( false );
+						} }
+						isBottomSheetContentScrolling={
+							isBottomSheetContentScrolling
+						}
+						bottomLabelText={ __( 'Select a color' ) }
+					/>
+				) }
+			</BottomSheetConsumer>
+		</InspectorControls>
+	);
+
 	const renderBackground = ( getMediaOptions ) => (
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
@@ -352,11 +405,16 @@ const Cover = ( {
 		</TouchableWithoutFeedback>
 	);
 
-	if ( ! hasBackground ) {
+	if ( ! hasBackground || isCustomColorPickerShowing ) {
 		return (
 			<View>
+				{ isCustomColorPickerShowing && colorPickerControls }
 				<MediaPlaceholder
 					height={ styles.mediaPlaceholderEmptyStateContainer.height }
+					backgroundColor={ customColor }
+					hideContent={
+						customColor !== '' && customColor !== undefined
+					}
 					icon={ placeholderIcon }
 					labels={ {
 						title: __( 'Cover' ),
@@ -370,11 +428,17 @@ const Cover = ( {
 							customColorIndicatorStyles={
 								styles.paletteColorIndicator
 							}
+							customIndicatorWrapperStyles={
+								styles.paletteCustomIndicatorWrapper
+							}
+							customVerticalSeparatorStyles={
+								styles.paletteVerticalSeparator
+							}
 							setColor={ setColor }
-							onCustomPress={ noop }
+							onCustomPress={ openColorPicker }
 							defaultSettings={ coverDefaultPalette }
-							shouldShowCustomIndicatorOption={ false }
 							shouldShowCustomLabel={ false }
+							shouldShowCustomVerticalSeparator={ false }
 						/>
 					</View>
 				</MediaPlaceholder>
@@ -470,12 +534,14 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
+		const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+
 		return {
+			openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
 			closeSettingsBottomSheet() {
 				dispatch( 'core/edit-post' ).closeGeneralSidebar();
 			},
 		};
 	} ),
-
 	withPreferredColorScheme,
 ] )( Cover );

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

@@ -114,8 +114,15 @@
 .paletteColorIndicator {
 	margin-top: 0;
 	margin-bottom: 0;
-	width: 32px;
-	height: 32px;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+}
+
+.paletteCustomIndicatorWrapper {
+	flex-direction: row;
+	align-items: baseline;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
 }
 
 .mediaPlaceholderEmptyStateContainer {

packages/components/src/color-indicator/index.native.js

@@ -55,7 +55,11 @@ function ColorIndicator( {
 					return (
 						<Gradient
 							gradientValue={ gradientValue }
-							style={ [ styles.circleOption, styles.absolute ] }
+							style={ [
+								styles.circleOption,
+								styles.absolute,
+								style,
+							] }
 							key={ gradientValue }
 						/>
 					);

packages/components/src/color-palette/index.native.js

@@ -42,7 +42,9 @@ function ColorPalette( {
 	shouldEnableBottomSheetScroll,
 	shouldShowCustomIndicatorOption = true,
 	shouldShowCustomLabel = true,
+	shouldShowCustomVerticalSeparator = true,
 	customColorIndicatorStyles,
+	customIndicatorWrapperStyles,
 } ) {
 	const customSwatchGradients = [
 		'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
@@ -188,6 +190,11 @@ function ColorPalette( {
 		styles.customTextDark
 	);
 
+	const customIndicatorWrapperStyle = [
+		styles.customIndicatorWrapper,
+		customIndicatorWrapperStyles,
+	];
+
 	return (
 		<ScrollView
 			contentContainerStyle={ styles.contentContainer }
@@ -237,17 +244,19 @@ function ColorPalette( {
 			} ) }
 			{ shouldShowCustomIndicator && (
 				<View
-					style={ styles.customIndicatorWrapper }
+					style={ customIndicatorWrapperStyle }
 					onLayout={ onCustomIndicatorLayout }
 				>
-					<View style={ verticalSeparatorStyle } />
+					{ shouldShowCustomVerticalSeparator && (
+						<View style={ verticalSeparatorStyle } />
+					) }
 					<TouchableWithoutFeedback
 						onPress={ onCustomPress }
 						accessibilityRole={ 'button' }
 						accessibilityState={ { selected: isSelectedCustom() } }
 						accessibilityHint={ accessibilityHint }
 					>
-						<View style={ styles.customIndicatorWrapper }>
+						<View style={ customIndicatorWrapperStyle }>
 							<ColorIndicator
 								withCustomPicker={ ! isGradientSegment }
 								color={ customIndicatorColor }

packages/components/src/color-picker/index.native.js

@@ -26,6 +26,9 @@ function ColorPicker( {
 	isGradientColor,
 	onNavigationBack,
 	onCloseBottomSheet,
+	onBottomSheetClosed,
+	onHardwareButtonPress,
+	bottomLabelText,
 } ) {
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
@@ -55,6 +58,10 @@ function ColorPicker( {
 		styles.colorText,
 		styles.colorTextDark
 	);
+	const selectColorTextStyle = usePreferredColorSchemeStyle(
+		styles.selectColorText,
+		styles.selectColorTextDark
+	);
 	const footerStyle = usePreferredColorSchemeStyle(
 		styles.footer,
 		styles.footerDark
@@ -82,7 +89,15 @@ function ColorPicker( {
 		}
 		setColor( activeColor );
 		shouldDisableBottomSheetMaxHeight( false );
-		onCloseBottomSheet( () => setColor( savedColor ) );
+		onCloseBottomSheet( () => {
+			setColor( savedColor );
+			if ( onBottomSheetClosed ) {
+				onBottomSheetClosed();
+			}
+		} );
+		if ( onHardwareButtonPress ) {
+			onHardwareButtonPress( onButtonPress );
+		}
 	}, [] );
 
 	function onHuePickerChange( { hue: h } ) {
@@ -99,6 +114,9 @@ function ColorPicker( {
 		onCloseBottomSheet( null );
 		shouldDisableBottomSheetMaxHeight( true );
 		setColor( action === 'apply' ? currentColor : savedColor );
+		if ( onBottomSheetClosed ) {
+			onBottomSheetClosed();
+		}
 	}
 
 	return (
@@ -157,9 +175,15 @@ function ColorPicker( {
 						) }
 					</View>
 				</TouchableWithoutFeedback>
-				<Text style={ colorTextStyle } selectable>
-					{ currentColor.toUpperCase() }
-				</Text>
+				{ bottomLabelText ? (
+					<Text style={ selectColorTextStyle }>
+						{ bottomLabelText }
+					</Text>
+				) : (
+					<Text style={ colorTextStyle } selectable>
+						{ currentColor.toUpperCase() }
+					</Text>
+				) }
 				<TouchableWithoutFeedback
 					onPress={ () => onButtonPress( 'apply' ) }
 					hitSlop={ hitSlop }

packages/components/src/color-picker/style.native.scss

@@ -42,6 +42,17 @@
 	color: $dark-primary;
 }
 
+.selectColorText {
+	text-align: center;
+	color: $gray;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.selectColorTextDark {
+	color: $dark-primary;
+}
+
 .picker {
 	padding: $grid-unit-20;
 	border-radius: $grid-unit-20 / 2;

packages/components/src/index.native.js

@@ -10,6 +10,7 @@ export {
 } from '@wordpress/primitives';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
+export { default as ColorPicker } from './color-picker';
 export { default as Dashicon } from './dashicon';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';