move toggle to color palette, rearrange settings

Author: kaeizen

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

@@ -13,6 +13,7 @@ export const useBlockColorSchemes = () => {
 	} = useSelect( select => {
 		const {
 			colorSchemes,
+			hideColorSchemeColors,
 			baseColorScheme: _baseColorScheme,
 			backgroundModeColorScheme: _backgroundModeColorScheme,
 			containerModeColorScheme: _containerModeColorScheme,
@@ -52,12 +53,12 @@ export const useBlockColorSchemes = () => {
 
 		// 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
-				}
+			// only add colors if the option to add color scheme in the picker is enabled.
+			if ( hideColorSchemeColors ) {
+				return []
+			}
 
+			const colorGroups = allColorSchemes.reduce( ( groups, scheme ) => {
 				// 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.

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

@@ -12,7 +12,6 @@ import {
 	InspectorSubHeader,
 	ColorPaletteControl,
 	AdvancedTextControl,
-	AdvancedToggleControl,
 	ColorSchemePreview,
 	ColorSchemePresetPicker,
 	DEFAULT_COLOR_SCHEME_COLORS,
@@ -153,17 +152,6 @@ 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 ) {
@@ -306,12 +294,6 @@ const ColorSchemePicker = props => {
 			/>
 		</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.js

@@ -19,6 +19,9 @@ import { PanelAdvancedSettings, ProControlButton } from '~stackable/components'
 import { addFilter, applyFilters } from '@wordpress/hooks'
 import { Fragment, useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
+import { ToggleControl } from '@wordpress/components'
+import { useSelect, dispatch } from '@wordpress/data'
+import { models } from '@wordpress/api'
 
 export { GlobalColorSchemeStyles } from './editor-loader'
 
@@ -28,7 +31,10 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-scheme
 	return (
 		<Fragment>
 			{ output }
-			<PanelAdvancedSettings title={ __( 'Global Color Schemes', i18n ) }>
+			<PanelAdvancedSettings
+				title={ __( 'Global Color Schemes', i18n ) }
+				initialOpen={ true }
+			>
 				{ ! itemInEdit && <p className="components-base-control__help">
 					{ __( 'Color schemes are applied to all blocks and sections of your entire website.', i18n ) }
 					&nbsp;
@@ -49,3 +55,25 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-scheme
 	)
 } )
 
+addFilter( 'stackable.global-settings.inspector.global-colors.toggle-controls', 'stackable/global-color-schemes', output => {
+	const { hideColorSchemeColors } = useSelect( select => select( 'stackable/global-color-schemes' ).getSettings() )
+
+	const onChange = value => {
+		dispatch( 'stackable/global-color-schemes' ).updateSettings( {
+			hideColorSchemeColors: value,
+		} )
+
+		const settings = new models.Settings( { stackable_global_hide_color_scheme_colors: value } ) // eslint-disable-line camelcase
+		settings.save()
+	}
+
+	return <>
+		{ output }
+		<ToggleControl
+			label={ __( 'Show Color Scheme Colors', i18n ) }
+			checked={ ! hideColorSchemeColors }
+			onChange={ value => onChange( ! value ) }
+		/>
+
+	</>
+} )

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

@@ -69,7 +69,6 @@ public function register_color_schemes() {
 										'type' => 'object',
 										'properties' => Stackable_Global_Color_Schemes::get_color_scheme_properties( $string_properties )
 									),
-									'showInPicker' => array( 'type' => 'boolean' ),
 								)
 							)
 						)
@@ -78,6 +77,18 @@ public function register_color_schemes() {
 				)
 			);
 
+			register_setting(
+				'stackable_global_settings',
+				'stackable_global_hide_color_scheme_colors',
+				array(
+					'type' => 'boolean',
+					'description' => __( 'Hide color scheme colors in the Stackable color picker', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => '',
+				)
+			);
+
 			register_setting(
 				'stackable_global_settings',
 				'stackable_global_base_color_scheme',

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

@@ -14,6 +14,7 @@ import domReady from '@wordpress/dom-ready'
 // Include all the stored state.
 const DEFAULT_STATE = {
 	colorSchemes: [],
+	hideColorSchemeColors: '',
 	baseColorScheme: '',
 	backgroundModeColorScheme: '',
 	containerModeColorScheme: '',
@@ -24,9 +25,9 @@ const STORE_ACTIONS = {
 		type: 'UPDATE_COLOR_SCHEMES',
 		colorSchemes,
 	} ),
-	updateDefaultColorScheme: colorSchemeObj => ( {
-		type: 'UPDATE_DEFAULT_COLOR_SCHEME',
-		colorSchemeObj,
+	updateSettings: settings => ( {
+		type: 'UPDATE_SETTINGS',
+		settings,
 	} ),
 }
 
@@ -47,10 +48,10 @@ const STORE_REDUCER = ( state = DEFAULT_STATE, action ) => {
 				colorSchemes: action.colorSchemes,
 			}
 		}
-		case 'UPDATE_DEFAULT_COLOR_SCHEME': {
+		case 'UPDATE_SETTINGS': {
 			return {
 				...state,
-				...action.colorSchemeObj,
+				...action.settings,
 			}
 		}
 		default: {
@@ -70,6 +71,7 @@ domReady( () => {
 	fetchSettings().then( response => {
 		const {
 			stackable_global_color_schemes: _colorSchemes,
+			stackable_global_hide_color_scheme_colors: hideColorSchemeColors,
 			stackable_global_base_color_scheme: baseColorScheme,
 			stackable_global_background_mode_color_scheme: backgroundModeColorScheme,
 			stackable_global_container_mode_color_scheme: containerModeColorScheme,
@@ -88,7 +90,6 @@ domReady( () => {
 				buttonTextColor: { desktop: '' },
 				buttonOutlineColor: { desktop: '' },
 			},
-			showInPicker: true,
 		}, {
 			name: 'Color Scheme 2',
 			key: 'scheme-default-2',
@@ -102,16 +103,16 @@ domReady( () => {
 				buttonTextColor: { desktop: '' },
 				buttonOutlineColor: { desktop: '' },
 			},
-			showInPicker: true,
 		} ]
 
-		const defaultColorScheme = {
+		const settings = {
+			colorSchemes,
+			hideColorSchemeColors,
 			baseColorScheme,
 			backgroundModeColorScheme,
 			containerModeColorScheme,
 		}
 
-		dispatch( 'stackable/global-color-schemes' ).updateColorSchemes( colorSchemes )
-		dispatch( 'stackable/global-color-schemes' ).updateDefaultColorScheme( defaultColorScheme )
+		dispatch( 'stackable/global-color-schemes' ).updateSettings( settings )
 	} )
 } )

src/plugins/global-settings/colors/index.js

@@ -16,7 +16,7 @@ import rgba from 'color-rgba'
 /**
  * WordPress dependencies
  */
-import { addFilter } from '@wordpress/hooks'
+import { addFilter, applyFilters } from '@wordpress/hooks'
 import { Fragment } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { dispatch, useSelect } from '@wordpress/data'
@@ -102,13 +102,12 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 		settings.save()
 	}
 
+	const ColorToggleControls = applyFilters( 'stackable.global-settings.inspector.global-colors.toggle-controls', Fragment )
+
 	return (
 		<Fragment>
 			{ output }
-			<PanelAdvancedSettings
-				title={ __( 'Global Color Palette', i18n ) }
-				initialOpen={ true }
-			>
+			<PanelAdvancedSettings title={ __( 'Global Color Palette', i18n ) }>
 				<p className="components-base-control__help">
 					{ __( 'Change your color palette for all your blocks across your site.', i18n ) }
 					&nbsp;
@@ -136,6 +135,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-colors', out
 					checked={ ! hideSiteEditorColors }
 					onChange={ value => onChangeHideSiteEditorColors( ! value ) }
 				/>
+				{ ColorToggleControls }
 			</PanelAdvancedSettings>
 		</Fragment>
 	)

src/plugins/global-settings/editor-loader.js

@@ -5,8 +5,8 @@
 /**
  * Internal dependencies
  */
-import { GlobalColorStyles } from './colors'
 import { GlobalColorSchemeStyles } from './color-schemes'
+import { GlobalColorStyles } from './colors'
 import { GlobalTypographyStyles } from './typography'
 import { GlobalSpacingAndBordersStyles } from './spacing-and-borders'
 import { GlobalButtonsAndIconsStyles } from './buttons-and-icons'