From 53d458920a3c0bb4d478d7179a55d86015318da2 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Wed, 15 Nov 2023 00:08:32 +0800
Subject: [PATCH] converted addition of colors using hooks

---
 .../color-palette-popup.js                    |  3 +-
 src/components/color-palette-control/index.js | 53 ++++++++++++-------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/components/color-palette-control/color-palette-popup.js b/src/components/color-palette-control/color-palette-popup.js
index 4b4ab4710..d6d3eadbd 100644
--- a/src/components/color-palette-control/color-palette-popup.js
+++ b/src/components/color-palette-control/color-palette-popup.js
@@ -84,11 +84,12 @@ export const ColorPalettePopup = props => {
 }
 
 const NOOP = () => {}
+const PASSTHRU = v => v
 
 ColorPalettePopup.defaultProps = {
 	value: '',
 	onChange: NOOP,
-	preOnChange: NOOP,
+	preOnChange: PASSTHRU,
 
 	colors: [],
 
diff --git a/src/components/color-palette-control/index.js b/src/components/color-palette-control/index.js
index bc812abb3..9f6881ef6 100644
--- a/src/components/color-palette-control/index.js
+++ b/src/components/color-palette-control/index.js
@@ -22,7 +22,8 @@ import {
 	FlexItem,
 	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components'
-import { useSelect } from '@wordpress/data'
+import { useSelect, select } from '@wordpress/data'
+import { applyFilters, addFilter } from '@wordpress/hooks'
 
 /**
  * External dependencies
@@ -39,26 +40,14 @@ const popoverProps = {
 
 const PASSTHRUOP = v => v
 
-const ColorPaletteControl = memo( props => {
-	const {
-		label,
-		className = '',
-	} = props
-	const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback )
-	const [ _propsToPass, controlProps ] = extractControlProps( props )
-
+addFilter( 'stackable.color-palette-control.colors', 'stackable/color-palette-control', ( { colors: _colors, gradients: _gradients } ) => {
 	const {
 		stackableColors,
 		stackableGradients,
-		hideThemeColors,
-		hideDefaultColors,
-		hideSiteEditorColors,
-	} = useSelect( 'stackable/global-colors' ).getSettings()
+	} = select( 'stackable/global-colors' ).getSettings()
 
-	const { colors: groupedColors, gradients: groupedGradients } = useMultipleOriginColorsAndGradients()
-
-	let colors = cloneDeep( groupedColors )
-	let gradients = cloneDeep( groupedGradients )
+	let colors = cloneDeep( _colors )
+	let gradients = cloneDeep( _gradients )
 
 	if ( stackableGradients && stackableGradients.length ) {
 		gradients = [
@@ -81,6 +70,32 @@ const ColorPaletteControl = memo( props => {
 		]
 	}
 
+	return { colors, gradients }
+} )
+
+addFilter( 'stackable.color-palette-control.color-value', 'stackable/color-palette-control', value => {
+	if ( typeof value === 'string' && value.includes( '--stk-global-color' ) && value.match( /#[\d\w]{6,}/ ) ) {
+		return value.match( /#[\d\w]{6,}/ )[ 0 ]
+	}
+	return value
+} )
+
+const ColorPaletteControl = memo( props => {
+	const {
+		label,
+		className = '',
+	} = props
+	const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback )
+	const [ _propsToPass, controlProps ] = extractControlProps( props )
+
+	const {
+		hideThemeColors,
+		hideDefaultColors,
+		hideSiteEditorColors,
+	} = useSelect( 'stackable/global-colors' ).getSettings()
+
+	let { colors, gradients } = applyFilters( 'stackable.color-palette-control.colors', useMultipleOriginColorsAndGradients() )
+
 	// Filter the colors.
 	colors = colors.filter( group => {
 		// Since there are no identifying properties for the groups, we'll just use the same names used in Gutenberg.
@@ -125,9 +140,7 @@ const ColorPaletteControl = memo( props => {
 	let value = typeof props.value === 'undefined' ? _value : props.value
 	const onChange = typeof props.onChange === 'undefined' ? _onChange : props.onChange
 
-	if ( typeof value === 'string' && value.includes( '--stk-global-color' ) && value.match( /#[\d\w]{6,}/ ) ) {
-		value = value.match( /#[\d\w]{6,}/ )[ 0 ]
-	}
+	value = applyFilters( 'stackable.color-palette-control.color-value', value )
 
 	let colorLabel,
 		colorName = value