[RNMobile] Color settings

packages/block-editor/src/components/block-mobile-toolbar/index.native.js

@@ -33,7 +33,10 @@ const BlockMobileToolbar = ( {
 
 		<View style={ styles.spacer } />
 
-		<BlockSettingsButton.Slot />
+		<BlockSettingsButton.Slot>
+			{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls */ }
+			{ ( fills = [ null ] ) => fills[ 0 ] }
+		</BlockSettingsButton.Slot>
 
 		<ToolbarButton
 			title={ sprintf(

packages/block-editor/src/components/block-settings/container.native.js

@@ -1,10 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { BottomSheet } from '@wordpress/components';
+import {
+	BottomSheet,
+	BottomSheetConsumer,
+	ColorSettings,
+	colorsUtils,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	SETTINGS_DEFAULTS as defaultSettings,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -24,7 +32,23 @@ function BottomSheetSettings( {
 			contentStyle={ styles.content }
 			{ ...props }
 		>
-			<InspectorControls.Slot />
+			<BottomSheetConsumer>
+				{ ( { currentScreen, extraProps, ...bottomSheetProps } ) => {
+					switch ( currentScreen ) {
+						case colorsUtils.subsheets.color:
+							return (
+								<ColorSettings
+									defaultSettings={ defaultSettings }
+									{ ...bottomSheetProps }
+									{ ...extraProps }
+								/>
+							);
+						case colorsUtils.subsheets.settings:
+						default:
+							return <InspectorControls.Slot />;
+					}
+				} }
+			</BottomSheetConsumer>
 		</BottomSheet>
 	);
 }

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -1,17 +1,51 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, UnsupportedFooterControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import {
+	ColorControl,
+	BottomSheetConsumer,
+	PanelBody,
+} from '@wordpress/components';
 
-const PanelColorGradientSettings = () => {
+export default function PanelColorGradientSettings( { settings, title } ) {
 	return (
-		<PanelBody>
-			<UnsupportedFooterControl
-				label={ __( 'Color settings are coming soon.' ) }
-				separatorType="none"
-			/>
+		<PanelBody title={ title }>
+			<BottomSheetConsumer>
+				{ ( { onReplaceSubsheet } ) =>
+					settings.map(
+						(
+							{
+								onColorChange,
+								colorValue,
+								onGradientChange,
+								gradientValue,
+								label,
+							},
+							index
+						) => (
+							<ColorControl
+								onPress={ () => {
+									onReplaceSubsheet( 'Color', {
+										onColorChange,
+										colorValue: gradientValue || colorValue,
+										gradientValue,
+										onGradientChange,
+										label,
+									} );
+								} }
+								key={ `color-setting-${ label }` }
+								label={ label }
+								color={ gradientValue || colorValue }
+								separatorType={
+									index !== settings.length - 1
+										? 'fullWidth'
+										: 'none'
+								}
+							/>
+						)
+					)
+				}
+			</BottomSheetConsumer>
 		</PanelBody>
 	);
-};
-export default PanelColorGradientSettings;
+}

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

@@ -33,6 +33,7 @@ export { default as BlockInvalidWarning } from './block-list/block-invalid-warni
 export { default as BlockCaption } from './block-caption';
 export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
+export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 
 export { BottomSheetSettings, BlockSettingsButton } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';

packages/block-editor/src/components/inspector-controls/index.native.js

@@ -2,12 +2,11 @@
  * External dependencies
  */
 import React from 'react';
-
+import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { createSlotFill } from '@wordpress/components';
-
+import { createSlotFill, BottomSheetConsumer } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -19,7 +18,13 @@ const { Fill, Slot } = createSlotFill( 'InspectorControls' );
 const FillWithSettingsButton = ( { children, ...props } ) => {
 	return (
 		<>
-			<Fill { ...props }>{ children }</Fill>
+			<Fill { ...props }>
+				{
+					<BottomSheetConsumer>
+						{ () => <View>{ children }</View> }
+					</BottomSheetConsumer>
+				}
+			</Fill>
 			{ React.Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>
 	);

packages/block-editor/src/hooks/color.js

@@ -11,7 +11,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -243,7 +243,10 @@ export function ColorEdit( props ) {
 
 	return (
 		<ColorPanel
-			enableContrastChecking={ ! gradient && ! style?.color?.gradient }
+			enableContrastChecking={
+				// Turn on contrast checker for web only since it's not supported on mobile yet.
+				Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
+			}
 			clientId={ props.clientId }
 			settings={ [
 				{

packages/block-library/src/button/color-background.native.js

@@ -5,14 +5,14 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { LinearGradient } from '@wordpress/components';
-import { __experimentalUseGradient } from '@wordpress/block-editor';
+import { LinearGradient, colorsUtils } from '@wordpress/components';
 /**
  * Internal dependencies
  */
 import styles from './editor.scss';
 
 function ColorBackground( { children, borderRadiusValue, backgroundColor } ) {
+	const { isGradient } = colorsUtils;
 	const wrapperStyles = [
 		styles.richTextWrapper,
 		{
@@ -21,13 +21,11 @@ function ColorBackground( { children, borderRadiusValue, backgroundColor } ) {
 		},
 	];
 
-	const { gradientValue } = __experimentalUseGradient();
-
 	return (
 		<View style={ wrapperStyles }>
-			{ gradientValue && (
+			{ isGradient( backgroundColor ) && (
 				<LinearGradient
-					gradientValue={ gradientValue }
+					gradientValue={ backgroundColor }
 					angleCenter={ { x: 0.5, y: 0.5 } }
 					style={ [
 						styles.linearGradient,

packages/block-library/src/button/color-edit.js

@@ -7,7 +7,7 @@ import { pickBy, isEqual, isObject, identity, mapValues } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef, Platform } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -23,6 +23,8 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 
+const isWebPlatform = Platform.OS === 'web';
+
 // The code in this file is copied entirely from the "color" and "style" support flags
 // The flag can't be used at the moment because of the extra wrapper around
 // the button block markup.
@@ -50,7 +52,7 @@ const cleanEmptyObject = ( object ) => {
 		: cleanedNestedObjects;
 };
 
-function ColorPanel( { settings, clientId, enableContrastChecking = true } ) {
+function ColorPanel( { settings, clientId, enableContrastChecking = isWebPlatform } ) {
 	const { getComputedStyle, Node } = window;
 
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
@@ -191,7 +193,7 @@ function ColorEdit( props ) {
 
 	return (
 		<ColorPanel
-			enableContrastChecking={ ! gradient && ! style?.color?.gradient }
+			enableContrastChecking={ isWebPlatform && ! gradient && ! style?.color?.gradient }
 			clientId={ props.clientId }
 			settings={ [
 				{