From 1f4ce37317dc862e50fe53b9b9245e9f5f6fb28f Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Wed, 21 Aug 2024 14:51:28 +0800
Subject: [PATCH 1/2] fix: editing/adding global colors when blocks are present
 is slow

---
 src/plugins/global-settings/colors/color-picker.js | 4 ++--
 src/plugins/global-settings/colors/index.js        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/global-settings/colors/color-picker.js b/src/plugins/global-settings/colors/color-picker.js
index 65f160a86..ddd9c9615 100644
--- a/src/plugins/global-settings/colors/color-picker.js
+++ b/src/plugins/global-settings/colors/color-picker.js
@@ -4,7 +4,6 @@
 import {
 	getRgb,
 	createColor,
-	updateFallbackBlockAttributes,
 	convertGlobalColorBlockAttributesToStatic,
 } from './util'
 
@@ -75,8 +74,9 @@ const ColorPickers = props => {
 	 * @param {Array} newColors colors passed.
 	 */
 	const updateColors = newColors => {
+		// NOTE: Removed this because it is slow to update all blocks.
 		// Update the blocks in our page.
-		updateFallbackBlockAttributes( newColors )
+		// updateFallbackBlockAttributes( newColors )
 
 		// Save settings.
 		clearTimeout( saveTimeout )
diff --git a/src/plugins/global-settings/colors/index.js b/src/plugins/global-settings/colors/index.js
index 938cd22e1..2b51a5378 100644
--- a/src/plugins/global-settings/colors/index.js
+++ b/src/plugins/global-settings/colors/index.js
@@ -144,7 +144,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 // Convert hex colors to global colors in Stackable blocks.
 addFilter( 'stackable.color-palette-control.change', 'stackable/global-colors', ( value, colorObject ) => {
 	if ( colorObject && colorObject.slug.includes( 'stk-global-color' ) ) {
-		return `var(--${ colorObject.slug }, ${ colorObject.color })`
+		return `var(--${ colorObject.slug })`
 	}
 
 	return value

From 564a38ec2d2bcc714a1a4d80e66042c22de4ccb9 Mon Sep 17 00:00:00 2001
From: "bfintal@gmail.com" <>
Date: Mon, 23 Sep 2024 15:02:27 +0800
Subject: [PATCH 2/2] corrected color label value for global colors

---
 src/components/color-palette-control/index.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/color-palette-control/index.js b/src/components/color-palette-control/index.js
index 9f6881ef6..5ab9d208e 100644
--- a/src/components/color-palette-control/index.js
+++ b/src/components/color-palette-control/index.js
@@ -143,13 +143,25 @@ const ColorPaletteControl = memo( props => {
 	value = applyFilters( 'stackable.color-palette-control.color-value', value )
 
 	let colorLabel,
-		colorName = value
+		colorName = value,
+		popupPickerValue = value // We assign a value to this so that the popup picker will show a "check" on the selected color.
+
 	allColors.some( color => {
 		if ( color.color === value || color.gradient === value ) {
 			colorName = color.name
 			colorLabel = color.name
 			return true
 		}
+
+		// For Stackable global colors to have a correct name label.
+		if ( color.slug ) {
+			if ( `var(--${ color.slug })` === value ) {
+				colorName = color.name
+				colorLabel = color.name
+				popupPickerValue = color.color
+				return true
+			}
+		}
 		return false
 	} )
 
@@ -162,7 +174,7 @@ const ColorPaletteControl = memo( props => {
 
 	const colorPalette = (
 		<ColorPalettePopup
-			value={ value }
+			value={ popupPickerValue }
 			onChange={ onChange }
 			preOnChange={ props.preOnChange }
 			colors={ props.isGradient ? gradients : colors }