disable color schemes in select control, fade out undefined schemes

Author: kaeizen

src/components/color-scheme-preview/editor.scss

@@ -52,3 +52,20 @@
 		outline: 1px solid #e0e0e0;
 	}
 }
+
+.stk-global-color-scheme__preview {
+	position: relative;
+	&::before {
+		content: "\f543";
+		font-family: dashicons;
+		font-size: 16px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
+
+.stk-scheme--is-disabled {
+	opacity: 0.1;
+}

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

@@ -1,5 +1,5 @@
 import { Button, BaseControl } from '@wordpress/components'
-
+import classnames from 'classnames'
 export const DEFAULT_COLOR_SCHEME_COLORS = {
 	backgroundColor: { desktop: '' },
 	headingColor: { desktop: '' },
@@ -14,43 +14,50 @@ export const DEFAULT_COLOR_SCHEME_COLORS = {
 const NOOP = () => {}
 
 const ColorSchemePreview = ( {
-	colors, withWrapper = false, onClick = NOOP,
+	colors, withWrapper = false, onClick = NOOP, isDisabled = false,
 } ) => {
 	const TagName = onClick === NOOP ? 'div' : Button
 	const additionalProps = onClick === NOOP ? {} : { onClick }
+
+	const classNames = classnames( 'stk-global-color-scheme__preview__background', {
+		'stk-scheme--is-disabled': isDisabled,
+	} )
+
 	return (
-		<TagName
-			className="stk-global-color-scheme__preview__background"
-			style={ withWrapper ? {} : { background: colors?.backgroundColor } }
-			{ ...additionalProps }
-		>
-			<div className="stk-global-color-scheme__preview__typography">
-				<span style={ { color: colors?.headingColor } }>A</span>
-				<span style={ { color: colors?.textColor } }>a</span>
-			</div>
-			<div>
-				<div
-					className="stk-global-color-scheme__preview__button"
-					style={ { background: `${ colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }` } }
-				/>
-				<div
-					className="stk-global-color-scheme__preview__button"
-					style={ {
-						borderStyle: 'solid',
-						borderWidth: '1px',
-						borderColor: `${ colors?.buttonOutlineColor || colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }`,
-					} }
-				/>
-				<div
-					className="stk-global-color-scheme__preview__circle"
-					style={ { backgroundColor: `${ colors?.linkColor || colors?.textColor || 'var(--stk-container-color)' }` } }
-				/>
-				<div
-					className="stk-global-color-scheme__preview__circle"
-					style={ { backgroundColor: `${ colors?.accentColor || 'var(--stk-icon-color)' }` } }
-				/>
-			</div>
-		</TagName>
+		<div className="stk-global-color-scheme__preview">
+			<TagName
+				className={ classNames }
+				style={ withWrapper ? {} : { background: colors?.backgroundColor } }
+				{ ...additionalProps }
+			>
+				<div className="stk-global-color-scheme__preview__typography">
+					<span style={ { color: colors?.headingColor } }>A</span>
+					<span style={ { color: colors?.textColor } }>a</span>
+				</div>
+				<div>
+					<div
+						className="stk-global-color-scheme__preview__button"
+						style={ { background: `${ colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }` } }
+					/>
+					<div
+						className="stk-global-color-scheme__preview__button"
+						style={ {
+							borderStyle: 'solid',
+							borderWidth: '1px',
+							borderColor: `${ colors?.buttonOutlineColor || colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }`,
+						} }
+					/>
+					<div
+						className="stk-global-color-scheme__preview__circle"
+						style={ { backgroundColor: `${ colors?.linkColor || colors?.textColor || 'var(--stk-container-color)' }` } }
+					/>
+					<div
+						className="stk-global-color-scheme__preview__circle"
+						style={ { backgroundColor: `${ colors?.accentColor || 'var(--stk-icon-color)' }` } }
+					/>
+				</div>
+			</TagName>
+		</div>
 	)
 }
 

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

@@ -5,6 +5,15 @@ import { useSelect } from '@wordpress/data'
 import { applyFilters } from '@wordpress/hooks'
 import { __ } from '@wordpress/i18n'
 
+// Check if the color scheme contains a value for any of the states
+const schemeHasValue = scheme => {
+	const hasValue = Object.values( scheme ).some( states => {
+		return Object.values( states ).some( value => value !== '' )
+	} )
+
+	return hasValue
+}
+
 export const useBlockColorSchemes = () => {
 	const {
 		getScheme,
@@ -32,6 +41,7 @@ export const useBlockColorSchemes = () => {
 		}, ...allColorSchemes?.map( scheme => ( {
 			label: scheme.name,
 			value: scheme.key,
+			disabled: ! schemeHasValue( scheme.colorScheme ),
 		} ) ) ]
 
 		// Returns the color scheme slug if it exists, otherwise return a fallback value

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

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { hoverState } from '../utils'
+import { schemeHasValue } from './utils'
 import PRESET_COLOR_SCHEMES from './preset-color-schemes.json'
 /**
  * External dependencies
@@ -314,7 +315,8 @@ const ColorSchemePicker = props => {
 			buttonOutlineColor: getInheritedValue( item.colorScheme.buttonOutlineColor ) || defaults.buttonOutlineColor.desktop,
 		}
 
-		const Preview = <ColorSchemePreview colors={ colors } withWrapper={ withWrapper } />
+		const isDisabled = ! schemeHasValue( item.colorScheme ) || withWrapper
+		const Preview = <ColorSchemePreview colors={ colors } withWrapper={ withWrapper } isDisabled={ isDisabled } />
 
 		return withWrapper ? <div
 			className="stk-global-color-scheme__preview-wrapper"