From 18c72e7e1b5425205ec9ae6ed13ef405a13eded2 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 16 May 2022 17:50:26 +0100
Subject: [PATCH 1/5] Update: Refactor panel color gradient settings

---
 .../components/colors-gradients/dropdown.js   |  95 ++++++---------
 .../panel-color-gradient-settings.js          | 110 ++++++------------
 .../components/colors-gradients/style.scss    |   9 ++
 .../block-editor/src/hooks/color-panel.js     |   2 +-
 packages/components/src/tools-panel/styles.ts |   3 +-
 5 files changed, 83 insertions(+), 136 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 299995d3eb6cc6..f9c9a204fcb1fc 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -7,13 +7,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	Button,
 	ColorIndicator,
 	Dropdown,
 	FlexItem,
 	__experimentalHStack as HStack,
 	__experimentalItem as Item,
-	__experimentalItemGroup as ItemGroup,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
@@ -22,46 +20,32 @@ import {
  */
 import ColorGradientControl from './control';
 
-// Conditionally wraps the `ColorGradientSettingsDropdown` color controls in an
-// `ItemGroup` allowing for a standalone group of controls to be
-// rendered semantically.
-const WithItemGroup = ( { __experimentalIsItemGroup, children } ) => {
-	if ( ! __experimentalIsItemGroup ) {
-		return children;
-	}
-
-	return (
-		<ItemGroup
-			isBordered
-			isSeparated
-			className="block-editor-panel-color-gradient-settings__item-group"
-		>
-			{ children }
-		</ItemGroup>
-	);
-};
-
 // When the `ColorGradientSettingsDropdown` controls are being rendered to a
 // `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
-const WithToolsPanelItem = ( {
-	__experimentalIsItemGroup,
-	settings,
-	children,
-	...props
-} ) => {
-	if ( __experimentalIsItemGroup ) {
-		return children;
-	}
-
+const WithToolsPanelItem = ( { setting, children, ...props } ) => {
+	const clearValue = () => {
+		if ( setting.colorValue ) {
+			setting.onColorChange();
+		} else if ( setting.gradientValue ) {
+			setting.onGradientChange();
+		}
+	};
 	return (
 		<ToolsPanelItem
-			hasValue={ settings.hasValue }
-			label={ settings.label }
-			onDeselect={ settings.onDeselect }
-			isShownByDefault={ settings.isShownByDefault }
-			resetAllFilter={ settings.resetAllFilter }
+			hasValue={ () => {
+				return !! setting.colorValue || !! setting.gradientValue;
+			} }
+			label={ setting.label }
+			onDeselect={ clearValue }
+			isShownByDefault={
+				setting.isShownByDefault !== undefined
+					? setting.isShownByDefault
+					: true
+			}
+			resetAllFilter={ () => {} }
 			{ ...props }
 			className="block-editor-tools-panel-color-gradient-settings__item"
+			panelId="sdds"
 		>
 			{ children }
 		</ToolsPanelItem>
@@ -82,23 +66,21 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 // or as a `Button` if it isn't e.g. the controls are being rendered in
 // a `ToolsPanel`.
 const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
-	const { __experimentalIsItemGroup, colorValue, label } = settings;
+	const { colorValue, label } = settings;
 
-	// Determine component, `Item` or `Button`, to wrap color indicator with.
-	const ToggleComponent = __experimentalIsItemGroup ? Item : Button;
-	const toggleClassName = __experimentalIsItemGroup
-		? 'block-editor-panel-color-gradient-settings__item'
-		: 'block-editor-panel-color-gradient-settings__dropdown';
 	const toggleProps = {
 		onClick: onToggle,
-		className: classnames( toggleClassName, { 'is-open': isOpen } ),
-		'aria-expanded': __experimentalIsItemGroup ? undefined : isOpen,
+		className: classnames(
+			'block-editor-tools-panel-color-gradient-settings__dropdown',
+			{ 'is-open': isOpen }
+		),
+		'aria-expanded': isOpen,
 	};
 
 	return (
-		<ToggleComponent { ...toggleProps }>
+		<Item { ...toggleProps }>
 			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
-		</ToggleComponent>
+		</Item>
 	);
 };
 
@@ -115,12 +97,15 @@ export default function ColorGradientSettingsDropdown( {
 	disableCustomGradients,
 	enableAlpha,
 	gradients,
-	__experimentalIsItemGroup = true,
 	settings,
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
+	const dropdownClassName = __experimentalIsItemGroup
+		? 'block-editor-panel-color-gradient-settings__dropdown'
+		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
+
 	const dropdownClassName = __experimentalIsItemGroup
 		? 'block-editor-panel-color-gradient-settings__dropdown'
 		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
@@ -133,12 +118,10 @@ export default function ColorGradientSettingsDropdown( {
 	}
 
 	return (
-		// Only wrap with `ItemGroup` if these controls are being rendered
-		// semantically.
-		<WithItemGroup __experimentalIsItemGroup={ __experimentalIsItemGroup }>
+		<>
 			{ settings.map( ( setting, index ) => {
 				const controlProps = {
-					clearable: __experimentalIsItemGroup ? undefined : false,
+					clearable: false,
 					colorValue: setting.colorValue,
 					colors,
 					disableCustomColors,
@@ -156,7 +139,6 @@ export default function ColorGradientSettingsDropdown( {
 				};
 				const toggleSettings = {
 					colorValue: setting.gradientValue ?? setting.colorValue,
-					__experimentalIsItemGroup,
 					label: setting.label,
 				};
 
@@ -166,15 +148,12 @@ export default function ColorGradientSettingsDropdown( {
 						// `ToolsPanelItem`
 						<WithToolsPanelItem
 							key={ index }
-							__experimentalIsItemGroup={
-								__experimentalIsItemGroup
-							}
-							settings={ setting }
+							setting={ setting }
 							{ ...props }
 						>
 							<Dropdown
 								popoverProps={ popoverProps }
-								className={ dropdownClassName }
+								className="block-editor-tools-panel-color-gradient-settings__dropdown"
 								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
 								renderToggle={ renderToggle( toggleSettings ) }
 								renderContent={ () => (
@@ -185,6 +164,6 @@ export default function ColorGradientSettingsDropdown( {
 					)
 				);
 			} ) }
-		</WithItemGroup>
+		</>
 	);
 }
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index ab40dbc010e578..e936fbd92385a2 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -9,27 +9,19 @@ import { every, isEmpty } from 'lodash';
  */
 import {
 	__experimentalSpacer as Spacer,
-	ColorIndicator,
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { useRegistry } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
 import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
 
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(%s: color %s)' );
-
-// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
-const gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -37,55 +29,6 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const Indicators = ( { colors, gradients, settings } ) => {
-	return settings.map(
-		(
-			{
-				colorValue,
-				gradientValue,
-				label,
-				colors: availableColors,
-				gradients: availableGradients,
-			},
-			index
-		) => {
-			if ( ! colorValue && ! gradientValue ) {
-				return null;
-			}
-			let ariaLabel;
-			if ( colorValue ) {
-				const colorObject = getColorObjectByColorValue(
-					availableColors || colors,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					colorIndicatorAriaLabel,
-					label.toLowerCase(),
-					( colorObject && colorObject.name ) || colorValue
-				);
-			} else {
-				const gradientObject = __experimentalGetGradientObjectByGradientValue(
-					availableGradients || gradients,
-					colorValue
-				);
-				ariaLabel = sprintf(
-					gradientIndicatorAriaLabel,
-					label.toLowerCase(),
-					( gradientObject && gradientObject.name ) || gradientValue
-				);
-			}
-
-			return (
-				<ColorIndicator
-					key={ index }
-					colorValue={ colorValue || gradientValue }
-					aria-label={ ariaLabel }
-				/>
-			);
-		}
-	);
-};
-
 export const PanelColorGradientSettingsInner = ( {
 	className,
 	colors,
@@ -99,8 +42,9 @@ export const PanelColorGradientSettingsInner = ( {
 	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
-	...props
 } ) => {
+	const panelId = useInstanceId( PanelColorGradientSettingsInner )
+	const { batch } = useRegistry();
 	if (
 		isEmpty( colors ) &&
 		isEmpty( gradients ) &&
@@ -120,28 +64,42 @@ export const PanelColorGradientSettingsInner = ( {
 		return null;
 	}
 
-	const titleElement = (
-		<span className="block-editor-panel-color-gradient-settings__panel-title">
-			{ title }
-			<Indicators
-				colors={ colors }
-				gradients={ gradients }
-				settings={ settings }
-			/>
-		</span>
-	);
-
 	return (
-		<PanelBody
+		<ToolsPanel
 			className={ classnames(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
-			title={ showTitle ? titleElement : undefined }
-			{ ...props }
+			label={ showTitle ? title : undefined }
+			resetAll={ () => {
+				batch( () => {
+					settings.forEach(
+						( {
+							colorValue,
+							gradientValue,
+							onColorChange,
+							onGradientChange,
+						} ) => {
+							if ( colorValue ) {
+								onColorChange();
+							} else if ( gradientValue ) {
+								onGradientChange();
+							}
+						}
+					);
+				} );
+			} }
+			key={ 'asaa' }
+			panelId="sdds"
+			hasInnerWrapper={ true }
+			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 		>
 			<ColorGradientSettingsDropdown
 				settings={ settings }
+				__experimentalIsItemGroup={ false }
+				panelId="sdds"
 				{ ...{
 					colors,
 					gradients,
@@ -157,7 +115,7 @@ export const PanelColorGradientSettingsInner = ( {
 					<Spacer marginY={ 4 } /> { children }
 				</>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 };
 
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index e936859db68560..8d7e2a30090ac2 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -10,7 +10,15 @@
 	min-width: 0;
 }
 
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings,
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not( :first-of-type ) {
+	display: block;
+}
+
+.block-editor-tools-panel-color-gradient-settings__item
+
 .block-editor-panel-color-gradient-settings {
+
 	.block-editor-panel-color-gradient-settings__panel-title {
 		display: flex;
 		gap: $grid-unit-10;
@@ -97,6 +105,7 @@
 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
 	&.first {
+		margin-top: $grid-unit-30;
 		border-top-left-radius: 2px;
 		border-top-right-radius: 2px;
 		border-top: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index d0775abbc41252..04d56e27d447b4 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -62,7 +62,7 @@ export default function ColorPanel( {
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	return (
-		<InspectorControls __experimentalGroup="color">
+		<InspectorControls>
 			<ColorGradientSettingsDropdown
 				enableAlpha={ enableAlpha }
 				panelId={ clientId }
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 6dec56f1b59685..715707a1005752 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -54,7 +54,8 @@ export const ToolsPanelWithInnerWrapper = ( columns: number ) => {
 };
 
 export const ToolsPanelHiddenInnerWrapper = css`
-	> div:not( :first-of-type ) {
+	/* Required to meet specificity requirements */
+	&&& > div:not( :first-of-type ) {
 		display: none;
 	}
 `;

From efa5f2543bb33ba110b8b2bb4dedb8d0b2bb0ff4 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 16 May 2022 18:18:19 +0100
Subject: [PATCH 2/5] works for paragraphs

---
 .../components/colors-gradients/dropdown.js   |   5 +-
 .../panel-color-gradient-settings.js          |   5 +-
 .../block-editor/src/hooks/color-panel.js     |  27 ++--
 packages/block-editor/src/hooks/color.js      | 136 +-----------------
 4 files changed, 23 insertions(+), 150 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index f9c9a204fcb1fc..73c6eaaa411650 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -22,7 +22,7 @@ import ColorGradientControl from './control';
 
 // When the `ColorGradientSettingsDropdown` controls are being rendered to a
 // `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
-const WithToolsPanelItem = ( { setting, children, ...props } ) => {
+const WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {
 	const clearValue = () => {
 		if ( setting.colorValue ) {
 			setting.onColorChange();
@@ -42,10 +42,9 @@ const WithToolsPanelItem = ( { setting, children, ...props } ) => {
 					? setting.isShownByDefault
 					: true
 			}
-			resetAllFilter={ () => {} }
 			{ ...props }
 			className="block-editor-tools-panel-color-gradient-settings__item"
-			panelId="sdds"
+			panelId={ panelId }
 		>
 			{ children }
 		</ToolsPanelItem>
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index e936fbd92385a2..f586ce22de0208 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -89,8 +89,7 @@ export const PanelColorGradientSettingsInner = ( {
 					);
 				} );
 			} }
-			key={ 'asaa' }
-			panelId="sdds"
+			panelId={ panelId }
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
@@ -99,7 +98,7 @@ export const PanelColorGradientSettingsInner = ( {
 			<ColorGradientSettingsDropdown
 				settings={ settings }
 				__experimentalIsItemGroup={ false }
-				panelId="sdds"
+				panelId={ panelId }
 				{ ...{
 					colors,
 					gradients,
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 04d56e27d447b4..34a8645ea76cd7 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -6,11 +6,12 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
+import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
 import ContrastChecker from '../components/contrast-checker';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import { __ } from '@wordpress/i18n';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -63,23 +64,23 @@ export default function ColorPanel( {
 
 	return (
 		<InspectorControls>
-			<ColorGradientSettingsDropdown
+			<PanelColorGradientSettings
 				enableAlpha={ enableAlpha }
-				panelId={ clientId }
 				settings={ settings }
-				__experimentalIsItemGroup={ false }
 				__experimentalHasMultipleOrigins
 				__experimentalIsRenderedInSidebar
 				{ ...colorGradientSettings }
-			/>
-			{ enableContrastChecking && (
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedColor }
-					enableAlphaChecker={ enableAlpha }
-					linkColor={ detectedLinkColor }
-				/>
-			) }
+				title={ __( 'Color' ) }
+			>
+				{ enableContrastChecking && (
+					<ContrastChecker
+						backgroundColor={ detectedBackgroundColor }
+						textColor={ detectedColor }
+						enableAlphaChecker={ enableAlpha }
+						linkColor={ detectedLinkColor }
+					/>
+				) }
+			</PanelColorGradientSettings>
 		</InspectorControls>
 	);
 }
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index b02b9f2bfbbad6..52ade28f37a271 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -76,125 +76,6 @@ 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
-		);
-	}
-
-	if ( name === 'link' ) {
-		return !! props.attributes.style?.elements?.link?.color?.text;
-	}
-
-	return (
-		!! props.attributes[ `${ name }Color` ] ||
-		!! props.attributes.style?.color?.[ name ]
-	);
-};
-
-/**
- * Clears a single color property from a style object.
- *
- * @param {Array}  path  Path to color property to clear within styles object.
- * @param {Object} style Block attributes style object.
- * @return {Object} Styles with the color property omitted.
- */
-const clearColorFromStyles = ( path, style ) =>
-	cleanEmptyObject( immutableSet( style, path, undefined ) );
-
-/**
- * Resets the block attributes for text color.
- *
- * @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 resetTextColor = ( { attributes, setAttributes } ) => {
-	setAttributes( {
-		textColor: undefined,
-		style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-	} );
-};
-
-/**
- * Clears text color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with text color properties omitted.
- */
-const resetAllTextFilter = ( attributes ) => ( {
-	textColor: undefined,
-	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-} );
-
-/**
- * Resets the block attributes for link color.
- *
- * @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 resetLinkColor = ( { attributes, setAttributes } ) => {
-	const path = [ 'elements', 'link', 'color', 'text' ];
-	setAttributes( { style: clearColorFromStyles( path, attributes.style ) } );
-};
-
-/**
- * Clears link color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with link color properties omitted.
- */
-const resetAllLinkFilter = ( attributes ) => ( {
-	style: clearColorFromStyles(
-		[ 'elements', 'link', 'color', 'text' ],
-		attributes.style
-	),
-} );
-
-/**
- * Clears all background color related properties including gradients from
- * supplied block attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Block attributes with background and gradient omitted.
- */
-const clearBackgroundAndGradient = ( attributes ) => ( {
-	backgroundColor: undefined,
-	gradient: undefined,
-	style: {
-		...attributes.style,
-		color: {
-			...attributes.style?.color,
-			background: undefined,
-			gradient: undefined,
-		},
-	},
-} );
-
-/**
- * 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 } ) => {
-	setAttributes( clearBackgroundAndGradient( attributes ) );
-};
-
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -496,12 +377,16 @@ export function ColorEdit( props ) {
 
 		const newStyle = cleanEmptyObject(
 			immutableSet(
-				style,
+				localAttributes.current?.style,
 				[ 'elements', 'link', 'color', 'text' ],
 				newLinkColorValue
 			)
 		);
 		props.setAttributes( { style: newStyle } );
+		localAttributes.current = {
+			...localAttributes.current,
+			...{ style: newStyle },
+		};
 	};
 
 	const enableContrastChecking =
@@ -529,9 +414,6 @@ export function ColorEdit( props ) {
 									style?.color?.text
 								).color,
 								isShownByDefault: defaultColorControls?.text,
-								hasValue: () => hasColor( 'text' )( props ),
-								onDeselect: () => resetTextColor( props ),
-								resetAllFilter: resetAllTextFilter,
 							},
 					  ]
 					: [] ),
@@ -553,11 +435,6 @@ export function ColorEdit( props ) {
 									: undefined,
 								isShownByDefault:
 									defaultColorControls?.background,
-								hasValue: () =>
-									hasColor( 'background' )( props ),
-								onDeselect: () =>
-									resetBackgroundAndGradient( props ),
-								resetAllFilter: clearBackgroundAndGradient,
 							},
 					  ]
 					: [] ),
@@ -573,9 +450,6 @@ export function ColorEdit( props ) {
 								clearable: !! style?.elements?.link?.color
 									?.text,
 								isShownByDefault: defaultColorControls?.link,
-								hasValue: () => hasColor( 'link' )( props ),
-								onDeselect: () => resetLinkColor( props ),
-								resetAllFilter: resetAllLinkFilter,
 							},
 					  ]
 					: [] ),

From e4abc06e4362abb2751a3b779b690912e5f4fc0d Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 16 May 2022 18:32:40 +0100
Subject: [PATCH 3/5] Clean unused code

---
 .../panel-color-gradient-settings.js          |  1 -
 .../components/colors-gradients/style.scss    | 41 -------------------
 2 files changed, 42 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index f586ce22de0208..1cc4b65ef797b3 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -97,7 +97,6 @@ export const PanelColorGradientSettingsInner = ( {
 		>
 			<ColorGradientSettingsDropdown
 				settings={ settings }
-				__experimentalIsItemGroup={ false }
 				panelId={ panelId }
 				{ ...{
 					colors,
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 8d7e2a30090ac2..dfccccf554e11b 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -15,29 +15,8 @@
 	display: block;
 }
 
-.block-editor-tools-panel-color-gradient-settings__item
-
 .block-editor-panel-color-gradient-settings {
 
-	.block-editor-panel-color-gradient-settings__panel-title {
-		display: flex;
-		gap: $grid-unit-10;
-
-		.component-color-indicator {
-			width: $grid-unit-15;
-			height: $grid-unit-15;
-			align-self: center;
-
-			&:first-child {
-				margin-left: $grid-unit-15;
-			}
-		}
-	}
-
-	&.is-opened &__panel-title .component-color-indicator {
-		display: none;
-	}
-
 	// Must equal $color-palette-circle-size from:
 	// @wordpress/components/src/circular-option-picker/style.scss
 	$swatch-size: 28px;
@@ -57,32 +36,12 @@
 		margin-bottom: inherit;
 	}
 
-	.block-editor-panel-color-gradient-settings__dropdown {
-		display: block;
-	}
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-	width: 100%;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
 	width: $sidebar-width;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-	border-bottom-width: 0;
-}
-
-.block-editor-panel-color-gradient-settings__item {
-	padding-top: $grid-unit-15 !important;
-	padding-bottom: $grid-unit-15 !important;
-
-	&.is-open {
-		background: $gray-100;
-		color: var(--wp-admin-theme-color);
-	}
-}
 
 .block-editor-panel-color-gradient-settings__color-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.

From 1293632a5dbb07859e894fd157e72deec067731c Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Tue, 17 May 2022 11:30:35 +0100
Subject: [PATCH 4/5] Aaron feedback

---
 .../components/colors-gradients/dropdown.js   | 11 ++--
 .../panel-color-gradient-settings.js          |  4 +-
 .../components/colors-gradients/style.scss    |  4 ++
 .../block-editor/src/hooks/color-panel.js     | 29 +++++-----
 packages/block-editor/src/hooks/color.js      | 57 +++++++++++++++++++
 packages/block-editor/src/hooks/color.scss    |  9 +++
 .../block-library/src/social-links/edit.js    | 21 +++----
 packages/components/src/tools-panel/styles.ts |  3 +-
 8 files changed, 104 insertions(+), 34 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 73c6eaaa411650..87da6e409ebf82 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -7,11 +7,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
+	Button,
 	ColorIndicator,
 	Dropdown,
 	FlexItem,
 	__experimentalHStack as HStack,
-	__experimentalItem as Item,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
@@ -45,6 +45,9 @@ const WithToolsPanelItem = ( { setting, children, panelId, ...props } ) => {
 			{ ...props }
 			className="block-editor-tools-panel-color-gradient-settings__item"
 			panelId={ panelId }
+			// Pass resetAllFilter if supplied due to rendering via SlotFill
+			// into parent ToolsPanel.
+			resetAllFilter={ setting.resetAllFilter }
 		>
 			{ children }
 		</ToolsPanelItem>
@@ -70,16 +73,16 @@ const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
 	const toggleProps = {
 		onClick: onToggle,
 		className: classnames(
-			'block-editor-tools-panel-color-gradient-settings__dropdown',
+			'block-editor-panel-color-gradient-settings__dropdown',
 			{ 'is-open': isOpen }
 		),
 		'aria-expanded': isOpen,
 	};
 
 	return (
-		<Item { ...toggleProps }>
+		<Button { ...toggleProps }>
 			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
-		</Item>
+		</Button>
 	);
 };
 
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 1cc4b65ef797b3..797a6c9463697d 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -43,7 +43,7 @@ export const PanelColorGradientSettingsInner = ( {
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
 } ) => {
-	const panelId = useInstanceId( PanelColorGradientSettingsInner )
+	const panelId = useInstanceId( PanelColorGradientSettingsInner );
 	const { batch } = useRegistry();
 	if (
 		isEmpty( colors ) &&
@@ -90,8 +90,6 @@ export const PanelColorGradientSettingsInner = ( {
 				} );
 			} }
 			panelId={ panelId }
-			hasInnerWrapper={ true }
-			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
 		>
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index dfccccf554e11b..aace07deb5a8b0 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -94,3 +94,7 @@
 		}
 	}
 }
+
+.block-editor-panel-color-gradient-settings__dropdown {
+	width: 100%;
+}
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 34a8645ea76cd7..d0775abbc41252 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -6,12 +6,11 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
+import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
 import ContrastChecker from '../components/contrast-checker';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
-import { __ } from '@wordpress/i18n';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -63,24 +62,24 @@ export default function ColorPanel( {
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	return (
-		<InspectorControls>
-			<PanelColorGradientSettings
+		<InspectorControls __experimentalGroup="color">
+			<ColorGradientSettingsDropdown
 				enableAlpha={ enableAlpha }
+				panelId={ clientId }
 				settings={ settings }
+				__experimentalIsItemGroup={ false }
 				__experimentalHasMultipleOrigins
 				__experimentalIsRenderedInSidebar
 				{ ...colorGradientSettings }
-				title={ __( 'Color' ) }
-			>
-				{ enableContrastChecking && (
-					<ContrastChecker
-						backgroundColor={ detectedBackgroundColor }
-						textColor={ detectedColor }
-						enableAlphaChecker={ enableAlpha }
-						linkColor={ detectedLinkColor }
-					/>
-				) }
-			</PanelColorGradientSettings>
+			/>
+			{ enableContrastChecking && (
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedColor }
+					enableAlphaChecker={ enableAlpha }
+					linkColor={ detectedLinkColor }
+				/>
+			) }
 		</InspectorControls>
 	);
 }
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 52ade28f37a271..3219e016923f3e 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -76,6 +76,60 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
+/**
+ * Clears a single color property from a style object.
+ *
+ * @param {Array}  path  Path to color property to clear within styles object.
+ * @param {Object} style Block attributes style object.
+ * @return {Object} Styles with the color property omitted.
+ */
+const clearColorFromStyles = ( path, style ) =>
+	cleanEmptyObject( immutableSet( style, path, undefined ) );
+
+/**
+ * Clears text color related properties from supplied attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Update block attributes with text color properties omitted.
+ */
+const resetAllTextFilter = ( attributes ) => ( {
+	textColor: undefined,
+	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
+} );
+
+/**
+ * Clears link color related properties from supplied attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Update block attributes with link color properties omitted.
+ */
+const resetAllLinkFilter = ( attributes ) => ( {
+	style: clearColorFromStyles(
+		[ 'elements', 'link', 'color', 'text' ],
+		attributes.style
+	),
+} );
+
+/**
+ * Clears all background color related properties including gradients from
+ * supplied block attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Block attributes with background and gradient omitted.
+ */
+const clearBackgroundAndGradient = ( attributes ) => ( {
+	backgroundColor: undefined,
+	gradient: undefined,
+	style: {
+		...attributes.style,
+		color: {
+			...attributes.style?.color,
+			background: undefined,
+			gradient: undefined,
+		},
+	},
+} );
+
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -414,6 +468,7 @@ export function ColorEdit( props ) {
 									style?.color?.text
 								).color,
 								isShownByDefault: defaultColorControls?.text,
+								resetAllFilter: resetAllTextFilter,
 							},
 					  ]
 					: [] ),
@@ -435,6 +490,7 @@ export function ColorEdit( props ) {
 									: undefined,
 								isShownByDefault:
 									defaultColorControls?.background,
+								resetAllFilter: clearBackgroundAndGradient,
 							},
 					  ]
 					: [] ),
@@ -450,6 +506,7 @@ export function ColorEdit( props ) {
 								clearable: !! style?.elements?.link?.color
 									?.text,
 								isShownByDefault: defaultColorControls?.link,
+								resetAllFilter: resetAllLinkFilter,
 							},
 					  ]
 					: [] ),
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index 2b79f03a504e27..f9b7898f941b75 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -20,4 +20,13 @@
 			row-gap: 0;
 		}
 	}
+
+	/**
+	 * After converting PanelColorGradientSettings to render as a ToolsPanel
+	 * we need to remove the top margin when wrapping inner content due to
+	 * rendering via SlotFills.
+	 */
+	.block-editor-tools-panel-color-gradient-settings__item.first {
+		margin-top: 0;
+	}
 }
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index ed148909ad1b30..f06f2ff42b7579 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -215,16 +215,17 @@ export function SocialLinksEdit( props ) {
 					__experimentalIsRenderedInSidebar
 					title={ __( 'Color' ) }
 					colorSettings={ colorSettings }
-				/>
-				{ ! logosOnly && (
-					<ContrastChecker
-						{ ...{
-							textColor: iconColorValue,
-							backgroundColor: iconBackgroundColorValue,
-						} }
-						isLargeText={ false }
-					/>
-				) }
+				>
+					{ ! logosOnly && (
+						<ContrastChecker
+							{ ...{
+								textColor: iconColorValue,
+								backgroundColor: iconBackgroundColorValue,
+							} }
+							isLargeText={ false }
+						/>
+					) }
+				</PanelColorSettings>
 			</InspectorControls>
 			<ul { ...innerBlocksProps } />
 		</Fragment>
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 715707a1005752..6dec56f1b59685 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -54,8 +54,7 @@ export const ToolsPanelWithInnerWrapper = ( columns: number ) => {
 };
 
 export const ToolsPanelHiddenInnerWrapper = css`
-	/* Required to meet specificity requirements */
-	&&& > div:not( :first-of-type ) {
+	> div:not( :first-of-type ) {
 		display: none;
 	}
 `;

From ed7c83c5cbcfba8263d8650724ec5e588f08e4f6 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Tue, 17 May 2022 11:44:04 +0100
Subject: [PATCH 5/5] lint fix

---
 .../src/components/colors-gradients/dropdown.js           | 7 -------
 .../src/components/colors-gradients/style.scss            | 8 +++++---
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 87da6e409ebf82..0f48945a7bd4ed 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -104,13 +104,6 @@ export default function ColorGradientSettingsDropdown( {
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
-	const dropdownClassName = __experimentalIsItemGroup
-		? 'block-editor-panel-color-gradient-settings__dropdown'
-		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
-
-	const dropdownClassName = __experimentalIsItemGroup
-		? 'block-editor-panel-color-gradient-settings__dropdown'
-		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
 	let popoverProps;
 	if ( __experimentalIsRenderedInSidebar ) {
 		popoverProps = {
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index aace07deb5a8b0..e2794bee8bdc63 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -10,9 +10,11 @@
 	min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings,
-.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not( :first-of-type ) {
-	display: block;
+.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
+	&,
+	& > div:not(:first-of-type) {
+		display: block;
+	}
 }
 
 .block-editor-panel-color-gradient-settings {