show color scheme colors in picker

Author: kaeizen

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

@@ -31,6 +31,7 @@ import { applyFilters, addFilter } from '@wordpress/hooks'
 import { cloneDeep } from 'lodash'
 import { i18n } from 'stackable'
 import classnames from 'classnames'
+import { useBlockColorSchemes } from '~stackable/hooks'
 
 const popoverProps = {
 	placement: 'left-start',
@@ -40,6 +41,20 @@ const popoverProps = {
 
 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 = [
+		...colorSchemeColors,
+		..._colors,
+	]
+
+	return { colors, gradients }
+} )
+
 addFilter( 'stackable.color-palette-control.colors', 'stackable/color-palette-control', ( { colors: _colors, gradients: _gradients } ) => {
 	const {
 		stackableColors,

src/components/color-scheme-preview/index.js

@@ -60,7 +60,7 @@ const popoverProps = {
 	shift: true,
 }
 
-export const PresetColorSchemesPicker = ( {
+export const ColorSchemePresetPicker = ( {
 	label, presets, onPresetClick,
 } ) => {
 	return (

src/components/index.js

@@ -121,6 +121,6 @@ export { default as FontPairPicker } from './font-pair-picker'
 export { SectionSettings } from './section-settings'
 export {
 	default as ColorSchemePreview,
-	PresetColorSchemesPicker,
+	ColorSchemePresetPicker,
 	DEFAULT_COLOR_SCHEME_COLORS,
 } from './color-scheme-preview'

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

@@ -4,6 +4,7 @@ import { applyFilters } from '@wordpress/hooks'
 export const useBlockColorSchemes = () => {
 	const {
 		getScheme,
+		getColorGroups,
 		allColorSchemes,
 		COLOR_SCHEME_OPTIONS,
 		baseColorScheme,
@@ -35,8 +36,57 @@ export const useBlockColorSchemes = () => {
 			return COLOR_SCHEME_OPTIONS.find( scheme => scheme.value === key )?.value || ( returnFallback ? fallback : 'scheme-unavailable' )
 		}
 
+		// Converts property name to space separated string (e.g., backgroundColor --> Background Color)
+		const getLabel = property => {
+			const result = property.replace( /([a-z])([A-Z])/g, '$1 $2' )
+				.replace( /^([a-z])/, match => match.toUpperCase() )
+			return result
+		}
+
+		// Converts property name to kebab-cased string with scheme key as prefix
+		// (e.g., backgroundColor --> --stk-scheme-default-1-background-color)
+		const toKebab = ( property, slug ) => {
+			const result = property.replace( /([a-z0-9])([A-Z])/g, '$1-$2' )
+			return '--stk-' + slug + '-' + result.toLowerCase()
+		}
+
+		// get color groups for color palette picker.
+		const getColorGroups = () => {
+			const colorGroups = allColorSchemes.reduce( ( groups, scheme ) => {
+				// only add colors if the option to add color scheme in the picker is enabled.
+				if ( ! scheme.showInPicker ) {
+					return groups
+				}
+
+				// Add name and slug to each color in the color scheme
+				const colors = Object.entries( scheme.colorScheme ).reduce( ( colors, [ property, value ] ) => {
+					return [
+						...colors,
+						{
+							color: value?.desktop,
+							name: getLabel( property ),
+							slug: toKebab( property, scheme.key ),
+						},
+					]
+				}, [] )
+
+				// return color schemes as groups
+				return [
+					...groups,
+					{
+						name: scheme.name,
+						id: scheme.key,
+						colors,
+					},
+				]
+			}, [] )
+
+			return colorGroups
+		}
+
 		return {
 			getScheme,
+			getColorGroups,
 			allColorSchemes,
 			COLOR_SCHEME_OPTIONS,
 			baseColorScheme: getScheme( _baseColorScheme ),
@@ -47,6 +97,7 @@ export const useBlockColorSchemes = () => {
 
 	return {
 		getScheme,
+		getColorGroups,
 		allColorSchemes,
 		COLOR_SCHEME_OPTIONS,
 		baseColorScheme,

src/plugins/global-settings/color-schemes/color-scheme-picker.js

@@ -12,8 +12,9 @@ import {
 	InspectorSubHeader,
 	ColorPaletteControl,
 	AdvancedTextControl,
+	AdvancedToggleControl,
 	ColorSchemePreview,
-	PresetColorSchemesPicker,
+	ColorSchemePresetPicker,
 	DEFAULT_COLOR_SCHEME_COLORS,
 } from '~stackable/components'
 import { useBlockHoverState } from '~stackable/hooks'
@@ -152,6 +153,17 @@ const ColorSchemePicker = props => {
 		updateColorSchemes( currentItem )
 	}
 
+	const onChangeShowInPicker = value => {
+		if ( ! itemInEdit ) {
+			return
+		}
+		const currentItem = cloneDeep( itemInEdit )
+		currentItem.showInPicker = value === '' ? false : value
+		setItemInEdit( currentItem )
+
+		updateColorSchemes( currentItem )
+	}
+
 	// Update the current color scheme when a preset is selected.
 	const onPresetClick = colors => {
 		if ( ! itemInEdit ) {
@@ -192,6 +204,7 @@ const ColorSchemePicker = props => {
 		}
 	}
 
+	// Duplicate the color scheme being edited
 	const onDuplicate = item => {
 		// eslint-disable-next-line no-alert
 		const confirmDuplicate = window.confirm( __( 'Do you want to duplicate this color scheme?', i18n ) )
@@ -286,13 +299,19 @@ const ColorSchemePicker = props => {
 				} }
 			/>
 
-			<PresetColorSchemesPicker
-				label={ __( 'Preset Color Schemes', i18n ) }
+			<ColorSchemePresetPicker
+				label={ __( 'Color Scheme Presets', i18n ) }
 				presets={ PRESETS }
 				onPresetClick={ onPresetClick }
 			/>
 		</div>
 
+		<AdvancedToggleControl
+			label={ __( 'Show color scheme colors in color picker', i18n ) }
+			checked={ itemInEdit?.showInPicker }
+			onChange={ value => onChangeShowInPicker( value ) }
+			defaultValue={ itemInEdit?.key?.startsWith( 'scheme-default' ) }
+		/>
 		{ COLOR_SETTINGS.map( ( settings, index ) => (
 			<ColorPaletteControl
 				key={ index }

src/plugins/global-settings/color-schemes/index.php

@@ -68,7 +68,8 @@ public function register_color_schemes() {
 									'colorScheme' => array(
 										'type' => 'object',
 										'properties' => Stackable_Global_Color_Schemes::get_color_scheme_properties( $string_properties )
-									)
+									),
+									'showInPicker' => array( 'type' => 'boolean' ),
 								)
 							)
 						)

src/plugins/global-settings/color-schemes/store.js

@@ -74,6 +74,7 @@ domReady( () => {
 			stackable_global_background_mode_color_scheme: backgroundModeColorScheme,
 			stackable_global_container_mode_color_scheme: containerModeColorScheme,
 		} = response
+
 		const colorSchemes = Array.isArray( _colorSchemes ) && _colorSchemes.length > 0 ? _colorSchemes : [ {
 			name: 'Default Scheme',
 			key: 'scheme-default-1',
@@ -87,6 +88,7 @@ domReady( () => {
 				buttonTextColor: { desktop: '' },
 				buttonOutlineColor: { desktop: '' },
 			},
+			showInPicker: true,
 		}, {
 			name: 'Color Scheme 2',
 			key: 'scheme-default-2',
@@ -100,6 +102,7 @@ domReady( () => {
 				buttonTextColor: { desktop: '' },
 				buttonOutlineColor: { desktop: '' },
 			},
+			showInPicker: true,
 		} ]
 
 		const defaultColorScheme = {