Initial switch of color block support and global styles to use ToolsP…

…anel

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

@@ -3,13 +3,18 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
 import ContrastChecker from '../components/contrast-checker';
+import ColorGradientControl from '../components/colors-gradients/control';
 import InspectorControls from '../components/inspector-controls';
+import useSetting from '../components/use-setting';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
@@ -19,12 +24,18 @@ function getComputedStyle( node ) {
 export default function ColorPanel( {
 	settings,
 	clientId,
+	resetAll,
 	enableContrastChecking = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const ref = useBlockRef( clientId );
 
+	const colors = useSetting( 'color.palette' );
+	const gradients = useSetting( 'color.gradients' );
+	const disableCustomColors = ! useSetting( 'color.custom' );
+	const disableCustomGradients = ! useSetting( 'color.customGradient' );
+
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
 			return;
@@ -54,18 +65,40 @@ export default function ColorPanel( {
 
 	return (
 		<InspectorControls>
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ settings }
+			<ToolsPanel
+				label={ __( 'Color options' ) }
+				header={ __( 'Color' ) }
+				resetAll={ resetAll }
 			>
+				{ settings.map( ( setting, index ) => (
+					<ToolsPanelItem
+						key={ index }
+						hasValue={ setting.hasValue }
+						label={ setting.label }
+						onDeselect={ setting.onDeselect }
+						isShownByDefault={ setting.isShownByDefault }
+					>
+						<ColorGradientControl
+							{ ...{
+								colors,
+								gradients,
+								disableCustomColors,
+								disableCustomGradients,
+								clearable: false,
+								label: setting.label,
+								onColorChange: setting.onColorChange,
+								colorValue: setting.colorValue,
+							} }
+						/>
+					</ToolsPanelItem>
+				) ) }
 				{ enableContrastChecking && (
 					<ContrastChecker
 						backgroundColor={ detectedBackgroundColor }
 						textColor={ detectedColor }
 					/>
 				) }
-			</PanelColorGradientSettings>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 }

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

@@ -78,6 +78,74 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
+/**
+ * Checks whether a color has been set either with a named preset color in
+ * a top level block attribute or as a custom value within the style attribute
+ * object.
+ *
+ * @param {string} name Name of the color to check.
+ * @return {boolean} Whether or not a color has a value.
+ */
+const hasColor = ( name ) => ( props ) => {
+	if ( name === 'background' ) {
+		return (
+			!! props.attributes.backgroundColor ||
+			!! props.attributes.style?.color?.background ||
+			!! props.attributes.gradient ||
+			!! props.attributes.style?.color?.gradient
+		);
+	}
+
+	return (
+		!! props.attributes[ `${ name }Color` ] ||
+		!! props.attributes.style?.color?.[ name ]
+	);
+};
+
+/**
+ * Resets the block attributes for both background color and gradient.
+ *
+ * @param {Object}   props               Current block props.
+ * @param {Object}   props.attributes    Block attributes.
+ * @param {Function} props.setAttributes Block's setAttributes prop used to apply reset.
+ */
+const resetBackgroundAndGradient = ( { attributes, setAttributes } ) => {
+	const { style } = attributes;
+
+	setAttributes( {
+		backgroundColor: undefined,
+		gradient: undefined,
+		style: cleanEmptyObject( {
+			...style,
+			color: {
+				...style?.color,
+				background: undefined,
+				gradient: undefined,
+			},
+		} ),
+	} );
+};
+
+/**
+ * Resets a color by setting is corresponding attributes to undefined.
+ *
+ * @param {string} name Name of the color to clear.
+ */
+const resetColor = ( name ) => ( { attributes, setAttributes } ) => {
+	const { style } = attributes;
+
+	setAttributes( {
+		[ `${ name }Color` ]: undefined,
+		style: cleanEmptyObject( {
+			...style,
+			color: {
+				...style?.color,
+				[ name ]: undefined,
+			},
+		} ),
+	} );
+};
+
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -137,7 +205,7 @@ export function addSaveProps( props, blockType, attributes ) {
 
 	const hasGradient = hasGradientSupport( blockType );
 
-	// I'd have prefered to avoid the "style" attribute usage here
+	// I'd have preferred to avoid the "style" attribute usage here
 	const { backgroundColor, textColor, gradient, style } = attributes;
 
 	const backgroundClass = getColorClassName(
@@ -169,7 +237,7 @@ export function addSaveProps( props, blockType, attributes ) {
 }
 
 /**
- * Filters registered block settings to extand the block edit wrapper
+ * Filters registered block settings to extend the block edit wrapper
  * to apply the desired styles and classnames properly.
  *
  * @param {Object} settings Original block settings.
@@ -216,7 +284,7 @@ function immutableSet( object, path, value ) {
  * @return {WPElement} Color edit element.
  */
 export function ColorEdit( props ) {
-	const { name: blockName, attributes } = props;
+	const { name: blockName, attributes, setAttributes } = props;
 	const solids = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
 	const areCustomSolidsEnabled = useSetting( 'color.custom' );
@@ -339,13 +407,37 @@ export function ColorEdit( props ) {
 		props.setAttributes( { style: newStyle } );
 	};
 
+	const defaultColorControls = getBlockSupport( props.name, [
+		COLOR_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
+	const resetAll = () => {
+		const newStyle = immutableSet(
+			{
+				...localAttributes.current.style,
+				color: undefined,
+			},
+			[ 'elements', 'link', 'color', 'text' ],
+			undefined
+		);
+
+		setAttributes( {
+			backgroundColor: undefined,
+			gradient: undefined,
+			textColor: undefined,
+			style: newStyle,
+		} );
+	};
+
 	return (
 		<ColorPanel
 			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 }
+			resetAll={ resetAll }
 			settings={ [
 				...( hasTextColor
 					? [
@@ -357,6 +449,9 @@ export function ColorEdit( props ) {
 									textColor,
 									style?.color?.text
 								).color,
+								isShownByDefault: defaultColorControls?.text,
+								hasValue: () => hasColor( 'text' )( props ),
+								onDeselect: () => resetColor( 'text' )( props ),
 							},
 					  ]
 					: [] ),
@@ -376,6 +471,12 @@ export function ColorEdit( props ) {
 								onGradientChange: hasGradientColor
 									? onChangeGradient
 									: undefined,
+								isShownByDefault:
+									defaultColorControls?.background,
+								hasValue: () =>
+									hasColor( 'background' )( props ),
+								onDeselect: () =>
+									resetBackgroundAndGradient( props ),
 							},
 					  ]
 					: [] ),
@@ -390,6 +491,9 @@ export function ColorEdit( props ) {
 								),
 								clearable: !! style?.elements?.link?.color
 									?.text,
+								isShownByDefault: defaultColorControls?.link,
+								hasValue: () => hasColor( 'link' )( props ),
+								onDeselect: () => resetColor( 'link' )( props ),
 							},
 					  ]
 					: [] ),

packages/components/src/tools-panel/styles.js

@@ -17,6 +17,10 @@ export const ToolsPanel = css`
 	margin-top: -1px;
 	padding: ${ space( 4 ) };
 	row-gap: ${ space( 6 ) };
+
+	> div {
+		grid-column: span 2;
+	}
 `;
 
 export const ToolsPanelHeader = css`
@@ -28,6 +32,10 @@ export const ToolsPanelHeader = css`
 	justify-content: space-between;
 	line-height: normal;
 
+	> span {
+		display: inline-flex;
+	}
+
 	.components-tools-panel & {
 		margin: 0;
 	}
@@ -61,4 +69,17 @@ export const ToolsPanelItem = css`
 		margin-bottom: 0;
 		max-width: 100%;
 	}
+
+	.block-editor-color-gradient-control {
+		margin-bottom: 0;
+
+		.components-base-control__field {
+			margin-bottom: 0;
+		}
+	}
+
+	.block-editor-color-gradient-control__color-indicator span {
+		display: inline-flex;
+		align-items: center;
+	}
 `;