fix block color scheme selector

Author: kaeizen

src/block-components/block-div/edit.js

@@ -19,6 +19,7 @@ import {
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
+	useBlockColorSchemes,
 	useBlockLayoutDefaults,
 	useBlockSetAttributesContext,
 } from '~stackable/hooks'
@@ -28,7 +29,6 @@ import {
  */
 import { __ } from '@wordpress/i18n'
 import { memo } from '@wordpress/element'
-import { useSelect } from '@wordpress/data'
 
 export const Edit = memo( props => {
 	const {
@@ -37,17 +37,9 @@ export const Edit = memo( props => {
 		backgroundMediaAllowVideo,
 	} = props
 
-	const { COLOR_SCHEME_OPTIONS, backgroundModeColorScheme } = useSelect( select => {
-		const { colorSchemes, backgroundModeColorScheme } = select( 'stackable/global-color-schemes' ).getSettings()
-		const COLOR_SCHEME_OPTIONS = colorSchemes?.map( scheme => ( {
-			label: scheme.name,
-			value: scheme.key,
-		} ) )
-		return {
-			COLOR_SCHEME_OPTIONS,
-			backgroundModeColorScheme,
-		}
-	} )
+	const {
+		COLOR_SCHEME_OPTIONS, getScheme, backgroundModeColorScheme,
+	} = useBlockColorSchemes()
 
 	const backgroundColorScheme = useBlockAttributesContext( attributes => attributes.backgroundColorScheme )
 	const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
@@ -93,9 +85,9 @@ export const Edit = memo( props => {
 				>
 					<AdvancedSelectControl
 						label={ __( 'Color Scheme', i18n ) }
-						value={ backgroundColorScheme || backgroundModeColorScheme }
+						value={ getScheme( backgroundColorScheme, 'background' ) || backgroundModeColorScheme }
 						options={ COLOR_SCHEME_OPTIONS }
-						onChange={ backgroundColorScheme => ( { backgroundColorScheme } ) }
+						onChange={ backgroundColorScheme => setAttributes( { backgroundColorScheme: backgroundColorScheme === backgroundModeColorScheme ? '' : backgroundColorScheme } ) }
 						default={ backgroundModeColorScheme }
 					/>
 					<BackgroundControls

src/block-components/container-div/edit.js

@@ -20,6 +20,7 @@ import {
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
+	useBlockColorSchemes,
 	useBlockLayoutDefaults,
 	useBlockSetAttributesContext,
 } from '~stackable/hooks'
@@ -28,25 +29,15 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
-import { useSelect } from '@wordpress/data'
 
 export const Edit = props => {
 	const {
 		hasContentVerticalAlign = false,
 	} = props
 
-	const { COLOR_SCHEME_OPTIONS, containerModeColorScheme } = useSelect( select => {
-		const { colorSchemes, containerModeColorScheme } = select( 'stackable/global-color-schemes' ).getSettings()
-		const COLOR_SCHEME_OPTIONS = colorSchemes?.map( scheme => ( {
-			label: scheme.name,
-			value: scheme.key,
-		} ) )
-
-		return {
-			COLOR_SCHEME_OPTIONS,
-			containerModeColorScheme,
-		}
-	} )
+	const {
+		COLOR_SCHEME_OPTIONS, getScheme, containerModeColorScheme,
+	} = useBlockColorSchemes()
 
 	const hasContainer = useBlockAttributesContext( attributes => attributes.hasContainer )
 	const containerColorScheme = useBlockAttributesContext( attributes => attributes.containerColorScheme )
@@ -65,10 +56,9 @@ export const Edit = props => {
 				>
 					<AdvancedSelectControl
 						label={ __( 'Color Scheme', i18n ) }
-						value={ containerColorScheme || containerModeColorScheme }
-						// TODO: get options from color schemes
+						value={ getScheme( containerColorScheme ) || containerModeColorScheme }
 						options={ COLOR_SCHEME_OPTIONS }
-						onChange={ containerColorScheme => ( { containerColorScheme } ) }
+						onChange={ containerColorScheme => setAttributes( { containerColorScheme: containerColorScheme === containerModeColorScheme ? '' : containerColorScheme } ) }
 						default={ containerModeColorScheme }
 					/>
 					<SizeControls.Layout

src/hooks/index.js

@@ -19,3 +19,4 @@ export * from './use-raf-state'
 export * from './use-raf-memo'
 export * from './use-raf-effect'
 export * from './use-global-block-layout-defaults'
+export * from './use-block-color-schemes'

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

@@ -0,0 +1,43 @@
+import { useSelect } from '@wordpress/data'
+import { applyFilters } from '@wordpress/hooks'
+
+export const useBlockColorSchemes = () => {
+	const {
+		colorSchemes,
+		_baseColorScheme,
+		_backgroundModeColorScheme,
+		_containerModeColorScheme,
+	} = useSelect( select => {
+		const {
+			colorSchemes, baseColorScheme: _baseColorScheme, backgroundModeColorScheme: _backgroundModeColorScheme, containerModeColorScheme: _containerModeColorScheme,
+		} = select( 'stackable/global-color-schemes' ).getSettings()
+
+		return {
+			colorSchemes,
+			_baseColorScheme,
+			_backgroundModeColorScheme,
+			_containerModeColorScheme,
+		}
+	} )
+
+	const allColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', colorSchemes, true )
+
+	const COLOR_SCHEME_OPTIONS = allColorSchemes?.map( scheme => ( {
+		label: scheme.name,
+		value: scheme.key,
+	} ) )
+
+	const getScheme = ( key, mode = 'base' ) => {
+		const fallback = mode === 'background' ? 'scheme-default-2' : 'scheme-default-1'
+
+		return COLOR_SCHEME_OPTIONS.find( scheme => scheme.value === key )?.value || fallback
+	}
+
+	return {
+		COLOR_SCHEME_OPTIONS,
+		getScheme,
+		baseColorScheme: getScheme( _baseColorScheme ),
+		backgroundModeColorScheme: getScheme( _backgroundModeColorScheme, 'background' ),
+		containerModeColorScheme: getScheme( _containerModeColorScheme ),
+	}
+}

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

@@ -33,9 +33,9 @@ const STORE_ACTIONS = {
 const STORE_SELECTORS = {
 	getSettings: state => ( {
 		...state,
-		baseColorScheme: state.colorSchemes.find( schemes => schemes.key === state.baseColorScheme )?.key || 'scheme-default-1',
-		backgroundModeColorScheme: state.colorSchemes.find( schemes => schemes.key === state.backgroundModeColorScheme )?.key || 'scheme-default-2',
-		containerModeColorScheme: state.colorSchemes.find( schemes => schemes.key === state.containerModeColorScheme )?.key || 'scheme-default-1',
+		baseColorScheme: state.baseColorScheme || 'scheme-default-1',
+		backgroundModeColorScheme: state.backgroundModeColorScheme || 'scheme-default-2',
+		containerModeColorScheme: state.containerModeColorScheme || 'scheme-default-1',
 	} ),
 }