From cc758d578b6a51b6398f6ed3257773575289d726 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <nosolosw@users.noreply.github.com>
Date: Mon, 12 Jul 2021 11:02:48 +0200
Subject: [PATCH] Update conditions to hide duotone panel (#33295)

---
 docs/how-to-guides/themes/theme-json.md            |  1 +
 lib/class-wp-theme-json-gutenberg.php              |  1 +
 lib/experimental-default-theme.json                |  5 +++--
 .../duotone-control/duotone-picker-popover.js      |  2 ++
 .../src/components/duotone-control/index.js        |  6 ++----
 packages/block-editor/src/hooks/duotone.js         | 14 ++++++++++++--
 .../src/duotone-picker/duotone-picker.js           |  6 ++++--
 7 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
index 4a217a3c4d3cad..343f712cf372a0 100644
--- a/docs/how-to-guides/themes/theme-json.md
+++ b/docs/how-to-guides/themes/theme-json.md
@@ -170,6 +170,7 @@ The settings section has the following structure:
 		},
 		"color": {
 			"custom": true,
+			"customDuotone": true,
 			"customGradient": true,
 			"duotone": [],
 			"gradients": [],
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index feb39b5c1cb799..292f50f5145965 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -94,6 +94,7 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		'color'      => array(
 			'custom'         => null,
+			'customDuotone'  => null,
 			'customGradient' => null,
 			'duotone'        => null,
 			'gradients'      => null,
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index d92547a1468952..72ca42dbaa968d 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -169,8 +169,9 @@
 				}
 			],
 			"custom": true,
-			"link": false,
-			"customGradient": true
+			"customDuotone": true,
+			"customGradient": true,
+			"link": false
 		},
 		"typography": {
 			"dropCap": true,
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 c277b07ad1487a..64f4c1cf225c2b 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
@@ -11,6 +11,7 @@ function DuotonePickerPopover( {
 	duotonePalette,
 	colorPalette,
 	disableCustomColors,
+	disableCustomDuotone,
 } ) {
 	return (
 		<Popover
@@ -23,6 +24,7 @@ function DuotonePickerPopover( {
 					colorPalette={ colorPalette }
 					duotonePalette={ duotonePalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 					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 eb675639a5f143..757e83803e86b7 100644
--- a/packages/block-editor/src/components/duotone-control/index.js
+++ b/packages/block-editor/src/components/duotone-control/index.js
@@ -15,15 +15,12 @@ function DuotoneControl( {
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
+	disableCustomDuotone,
 	value,
 	onChange,
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	if ( ! duotonePalette ) {
-		return null;
-	}
-
 	const onToggle = () => {
 		setIsOpen( ( prev ) => ! prev );
 	};
@@ -55,6 +52,7 @@ function DuotoneControl( {
 					duotonePalette={ duotonePalette }
 					colorPalette={ colorPalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 				/>
 			) }
 		</>
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index c4845b34b49f83..3cb05246306b50 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -21,6 +21,8 @@ import {
 	useSetting,
 } from '../components';
 
+const EMPTY_ARRAY = [];
+
 /**
  * Convert a list of colors to an object of R, G, and B values.
  *
@@ -123,15 +125,23 @@ function DuotonePanel( { attributes, setAttributes } ) {
 	const style = attributes?.style;
 	const duotone = style?.color?.duotone;
 
-	const duotonePalette = useSetting( 'color.duotone' );
-	const colorPalette = useSetting( 'color.palette' );
+	const duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY;
+	const colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const disableCustomColors = ! useSetting( 'color.custom' );
+	const disableCustomDuotone =
+		! useSetting( 'color.customDuotone' ) ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
+	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
+		return null;
+	}
 
 	return (
 		<BlockControls group="block">
 			<DuotoneControl
 				duotonePalette={ duotonePalette }
 				colorPalette={ colorPalette }
+				disableCustomDuotone={ disableCustomDuotone }
 				disableCustomColors={ disableCustomColors }
 				value={ duotone }
 				onChange={ ( newDuotone ) => {
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
index bbc546acec1c46..fa01fd82707671 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.js
@@ -22,6 +22,7 @@ function DuotonePicker( {
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
+	disableCustomDuotone,
 	value,
 	onChange,
 } ) {
@@ -29,6 +30,7 @@ function DuotonePicker( {
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
 	);
+
 	return (
 		<CircularOptionPicker
 			options={ duotonePalette.map( ( { colors, slug, name } ) => {
@@ -74,10 +76,10 @@ function DuotonePicker( {
 				</CircularOptionPicker.ButtonAction>
 			}
 		>
-			{ ! disableCustomColors && (
+			{ ! disableCustomColors && ! disableCustomDuotone && (
 				<CustomDuotoneBar value={ value } onChange={ onChange } />
 			) }
-			{ colorPalette && (
+			{ ! disableCustomDuotone && (
 				<ColorListPicker
 					labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
 					colors={ colorPalette }