only add colors that have value in the picker

Author: kaeizen

src/components/color-palette-control/index.js

@@ -44,7 +44,6 @@ const PASSTHRUOP = v => v
 addFilter( 'stackable.color-palette-control.colors', 'stackable/global-color-schemes-color-palette-control', ( { colors: _colors, gradients } ) => {
 	// Get colors from the color schemes.
 	const { getColorGroups } = useBlockColorSchemes()
-
 	const colorSchemeColors = getColorGroups()
 
 	const colors = [

src/hooks/use-block-color-schemes.js

@@ -60,6 +60,10 @@ export const useBlockColorSchemes = () => {
 
 				// Add name and slug to each color in the color scheme
 				const colors = Object.entries( scheme.colorScheme ).reduce( ( colors, [ property, value ] ) => {
+					// Only add colors that have values.
+					if ( ! value?.desktop ) {
+						return colors
+					}
 					return [
 						...colors,
 						{
@@ -70,6 +74,11 @@ export const useBlockColorSchemes = () => {
 					]
 				}, [] )
 
+				// Only add groups that have colors.
+				if ( colors.length === 0 ) {
+					return groups
+				}
+
 				// return color schemes as groups
 				return [
 					...groups,