From a9311d57655f3b71718523caacff8f47721b7c86 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Wed, 19 May 2021 12:51:23 -0600
Subject: [PATCH] Add option to disable duotone (#32002)

---
 .../duotone-control/duotone-picker-popover.js |  2 +
 .../src/components/duotone-control/index.js   | 16 ++++++-
 packages/block-editor/src/hooks/duotone.js    |  2 +
 .../components/src/color-list-picker/index.js | 18 ++++++-
 .../src/duotone-picker/duotone-picker.js      | 47 ++++++++++++-------
 5 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js b/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js
index 7926cd5f977a6..c277b07ad1487 100644
--- a/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js
+++ b/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js
@@ -10,6 +10,7 @@ function DuotonePickerPopover( {
 	onToggle,
 	duotonePalette,
 	colorPalette,
+	disableCustomColors,
 } ) {
 	return (
 		<Popover
@@ -21,6 +22,7 @@ function DuotonePickerPopover( {
 				<DuotonePicker
 					colorPalette={ colorPalette }
 					duotonePalette={ duotonePalette }
+					disableCustomColors={ disableCustomColors }
 					value={ value }
 					onChange={ onChange }
 				/>
diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js
index c7f597c561237..eb675639a5f14 100644
--- a/packages/block-editor/src/components/duotone-control/index.js
+++ b/packages/block-editor/src/components/duotone-control/index.js
@@ -11,11 +11,23 @@ import { DOWN } from '@wordpress/keycodes';
  */
 import DuotonePickerPopover from './duotone-picker-popover';
 
-function DuotoneControl( { colorPalette, duotonePalette, value, onChange } ) {
+function DuotoneControl( {
+	colorPalette,
+	duotonePalette,
+	disableCustomColors,
+	value,
+	onChange,
+} ) {
 	const [ isOpen, setIsOpen ] = useState( false );
+
+	if ( ! duotonePalette ) {
+		return null;
+	}
+
 	const onToggle = () => {
 		setIsOpen( ( prev ) => ! prev );
 	};
+
 	const openOnArrowDown = ( event ) => {
 		if ( ! isOpen && event.keyCode === DOWN ) {
 			event.preventDefault();
@@ -23,6 +35,7 @@ function DuotoneControl( { colorPalette, duotonePalette, value, onChange } ) {
 			onToggle();
 		}
 	};
+
 	return (
 		<>
 			<ToolbarButton
@@ -41,6 +54,7 @@ function DuotoneControl( { colorPalette, duotonePalette, value, onChange } ) {
 					onToggle={ onToggle }
 					duotonePalette={ duotonePalette }
 					colorPalette={ colorPalette }
+					disableCustomColors={ disableCustomColors }
 				/>
 			) }
 		</>
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 885bb45a5d5e6..6ec04dee15386 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -125,12 +125,14 @@ function DuotonePanel( { attributes, setAttributes } ) {
 
 	const duotonePalette = useSetting( 'color.duotone' );
 	const colorPalette = useSetting( 'color.palette' );
+	const disableCustomColors = ! useSetting( 'color.custom' );
 
 	return (
 		<BlockControls group="block">
 			<DuotoneControl
 				duotonePalette={ duotonePalette }
 				colorPalette={ colorPalette }
+				disableCustomColors={ disableCustomColors }
 				value={ duotone }
 				onChange={ ( newDuotone ) => {
 					const newStyle = {
diff --git a/packages/components/src/color-list-picker/index.js b/packages/components/src/color-list-picker/index.js
index 7550cb8b12b1c..c15910b0c8e72 100644
--- a/packages/components/src/color-list-picker/index.js
+++ b/packages/components/src/color-list-picker/index.js
@@ -10,7 +10,13 @@ import Button from '../button';
 import ColorPalette from '../color-palette';
 import Swatch from '../swatch';
 
-function ColorOption( { label, value, colors, onChange } ) {
+function ColorOption( {
+	label,
+	value,
+	colors,
+	disableCustomColors,
+	onChange,
+} ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 	return (
 		<>
@@ -27,13 +33,20 @@ function ColorOption( { label, value, colors, onChange } ) {
 					value={ value }
 					clearable={ false }
 					onChange={ onChange }
+					disableCustomColors={ disableCustomColors }
 				/>
 			) }
 		</>
 	);
 }
 
-function ColorListPicker( { colors, labels, value = [], onChange } ) {
+function ColorListPicker( {
+	colors,
+	labels,
+	value = [],
+	disableCustomColors,
+	onChange,
+} ) {
 	return (
 		<div className="components-color-list-picker">
 			{ labels.map( ( label, index ) => (
@@ -42,6 +55,7 @@ function ColorListPicker( { colors, labels, value = [], onChange } ) {
 					label={ label }
 					value={ value[ index ] }
 					colors={ colors }
+					disableCustomColors={ disableCustomColors }
 					onChange={ ( newColor ) => {
 						const newColors = value.slice();
 						newColors[ index ] = newColor;
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
index fb15f12162559..bbc546acec1c4 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.js
@@ -18,7 +18,13 @@ import CircularOptionPicker from '../circular-option-picker';
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 
-function DuotonePicker( { colorPalette, duotonePalette, value, onChange } ) {
+function DuotonePicker( {
+	colorPalette,
+	duotonePalette,
+	disableCustomColors,
+	value,
+	onChange,
+} ) {
 	const [ defaultDark, defaultLight ] = useMemo(
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
@@ -68,23 +74,28 @@ function DuotonePicker( { colorPalette, duotonePalette, value, onChange } ) {
 				</CircularOptionPicker.ButtonAction>
 			}
 		>
-			<CustomDuotoneBar value={ value } onChange={ onChange } />
-			<ColorListPicker
-				labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
-				colors={ colorPalette }
-				value={ value }
-				onChange={ ( newColors ) => {
-					if ( ! newColors[ 0 ] ) {
-						newColors[ 0 ] = defaultDark;
-					}
-					if ( ! newColors[ 1 ] ) {
-						newColors[ 1 ] = defaultLight;
-					}
-					const newValue =
-						newColors.length >= 2 ? newColors : undefined;
-					onChange( newValue );
-				} }
-			/>
+			{ ! disableCustomColors && (
+				<CustomDuotoneBar value={ value } onChange={ onChange } />
+			) }
+			{ colorPalette && (
+				<ColorListPicker
+					labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
+					colors={ colorPalette }
+					value={ value }
+					disableCustomColors={ disableCustomColors }
+					onChange={ ( newColors ) => {
+						if ( ! newColors[ 0 ] ) {
+							newColors[ 0 ] = defaultDark;
+						}
+						if ( ! newColors[ 1 ] ) {
+							newColors[ 1 ] = defaultLight;
+						}
+						const newValue =
+							newColors.length >= 2 ? newColors : undefined;
+						onChange( newValue );
+					} }
+				/>
+			) }
 		</CircularOptionPicker>
 	);
 }