[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,17 @@
 /**
  * WordPress dependencies
  */
-import { BottomSheet } from '@wordpress/components';
+import {
+	BottomSheet,
+	BottomSheetConsumer,
+	ColorSettings,
+} 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 +31,23 @@ function BottomSheetSettings( {
 			contentStyle={ styles.content }
 			{ ...props }
 		>
-			<InspectorControls.Slot />
+			<BottomSheetConsumer>
+				{ ( { currentScreen, extraProps, ...bottomSheetProps } ) => {
+					switch ( currentScreen ) {
+						case 'Color':
+							return (
+								<ColorSettings
+									defaultSettings={ defaultSettings }
+									{ ...bottomSheetProps }
+									{ ...extraProps }
+								/>
+							);
+						case '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/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,11 +243,17 @@ 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={ [
 				{
-					label: __( 'Text Color' ),
+					label:
+						Platform.OS === 'web'
+							? __( 'Text Color' )
+							: __( 'Text' ),
 					onColorChange: onChangeColor( 'text' ),
 					colorValue: getColorObjectByAttributeValues(
 						colors,
@@ -256,7 +262,10 @@ export function ColorEdit( props ) {
 					).color,
 				},
 				{
-					label: __( 'Background Color' ),
+					label:
+						Platform.OS === 'web'
+							? __( 'Background Color' )
+							: __( 'Background' ),
 					onColorChange: onChangeColor( 'background' ),
 					colorValue: getColorObjectByAttributeValues(
 						colors,

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

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

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

@@ -18,13 +18,13 @@ import {
 	withColors,
 	InspectorControls,
 	BlockControls,
+	SETTINGS_DEFAULTS,
 } from '@wordpress/block-editor';
 import {
 	TextControl,
 	ToggleControl,
 	PanelBody,
 	RangeControl,
-	UnsupportedFooterControl,
 	ToolbarGroup,
 	ToolbarButton,
 	BottomSheet,
@@ -39,7 +39,7 @@ import { link, external } from '@wordpress/icons';
  */
 import richTextStyle from './rich-text.scss';
 import styles from './editor.scss';
-import ColorBackground from './color-background.native';
+import ColorBackground from './color-background';
 import LinkRelIcon from './link-rel';
 
 const NEW_TAB_REL = 'noreferrer noopener';
@@ -173,23 +173,31 @@ class ButtonEdit extends Component {
 
 	getBackgroundColor() {
 		const { backgroundColor, attributes } = this.props;
-		const { style } = attributes;
-
+		const { style, gradient, customGradient } = attributes;
+		const defaultGradients = SETTINGS_DEFAULTS.gradients;
+
+		if ( customGradient || gradient ) {
+			return (
+				customGradient ||
+				defaultGradients.find(
+					( defaultGradient ) => defaultGradient.slug === gradient
+				).gradient
+			);
+		}
 		return (
 			( style && style.color && style.color.background ) ||
 			backgroundColor.color ||
-			styles.fallbackButton.backgroundColor
+			styles.defaultButton.backgroundColor
 		);
 	}
 
 	getTextColor() {
 		const { textColor, attributes } = this.props;
 		const { style } = attributes;
-
 		return (
 			( style && style.color && style.color.text ) ||
 			textColor.color ||
-			styles.fallbackButton.color
+			styles.defaultButton.color
 		);
 	}
 
@@ -267,7 +275,7 @@ class ButtonEdit extends Component {
 	onSetMaxWidth( width ) {
 		const { maxWidth } = this.state;
 		const { parentWidth } = this.props;
-		const { marginRight: spacing } = styles.button;
+		const { marginRight: spacing } = styles.defaultButton;
 
 		const isParentWidthChanged = maxWidth !== parentWidth;
 		const isWidthChanged = maxWidth !== width;
@@ -398,20 +406,18 @@ class ButtonEdit extends Component {
 			isButtonFocused,
 			placeholderTextWidth,
 		} = this.state;
+		const { paddingTop: spacing, borderWidth } = styles.defaultButton;
 
 		if ( parentWidth === 0 ) {
 			return null;
 		}
 
-		const borderRadiusValue =
-			borderRadius !== undefined
-				? borderRadius
-				: styles.button.borderRadius;
+		const borderRadiusValue = Number.isInteger( borderRadius )
+			? borderRadius
+			: styles.defaultButton.borderRadius;
 		const outlineBorderRadius =
 			borderRadiusValue > 0
-				? borderRadiusValue +
-				  styles.button.paddingTop +
-				  styles.button.borderWidth
+				? borderRadiusValue + spacing + borderWidth
 				: 0;
 
 		// To achieve proper expanding and shrinking `RichText` on iOS, there is a need to set a `minWidth`
@@ -430,6 +436,7 @@ class ButtonEdit extends Component {
 				: placeholder || __( 'Add text…' );
 
 		const backgroundColor = this.getBackgroundColor();
+		const textColor = this.getTextColor();
 
 		return (
 			<View onLayout={ this.onLayout }>
@@ -458,7 +465,7 @@ class ButtonEdit extends Component {
 						onChange={ this.onChangeText }
 						style={ {
 							...richTextStyle.richText,
-							color: this.getTextColor(),
+							color: textColor,
 						} }
 						textAlign="center"
 						placeholderTextColor={
@@ -475,11 +482,11 @@ class ButtonEdit extends Component {
 							this.onToggleButtonFocus( true )
 						}
 						__unstableMobileNoFocusOnMount={ ! isSelected }
+						selectionColor={ textColor }
 						onBlur={ () => {
 							this.onToggleButtonFocus( false );
 							this.onSetMaxWidth();
 						} }
-						selectionColor={ this.getTextColor() }
 						onReplace={ onReplace }
 						onRemove={ this.onRemove }
 						onMerge={ mergeBlocks }
@@ -527,14 +534,6 @@ class ButtonEdit extends Component {
 					<PanelBody title={ __( 'Link Settings' ) }>
 						{ this.getLinkSettings( url, rel, linkTarget, true ) }
 					</PanelBody>
-					<PanelBody>
-						<UnsupportedFooterControl
-							label={ __(
-								'Button color settings are coming soon.'
-							) }
-							separatorType="none"
-						/>
-					</PanelBody>
 				</InspectorControls>
 			</View>
 		);

packages/block-library/src/button/editor.native.scss

@@ -25,16 +25,11 @@
 	bottom: 0;
 }
 
-.button {
-	border-width: $border-width;
+.defaultButton {
 	border-radius: $border-width * 4;
 	padding: $block-spacing;
-	max-width: 580px;
-	min-width: 108px;
+	border-width: $border-width;
 	margin: 2 * $panel-padding;
-}
-
-.fallbackButton {
 	background-color: $button-fallback-bg;
 	color: $white;
 }

packages/block-library/src/columns/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { columns as icon } from '@wordpress/icons';
-
+import { Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -27,7 +27,7 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 		lightBlockWrapper: true,
-		__experimentalColor: { gradients: true },
+		__experimentalColor: Platform.OS === 'web' && { gradients: true },
 	},
 	variations,
 	example: {