From 8bbfe0592ce753b3a2390afcb82e484a12e74437 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Fri, 26 Nov 2021 20:34:35 +0000
Subject: [PATCH] Add: Uneditable duotone palette on the palette gradient panel

---
 .../src/duotone-picker/duotone-picker.js      | 13 +++++++-----
 .../global-styles/gradients-palette-panel.js  | 20 +++++++++++++++++++
 .../src/components/global-styles/style.scss   |  8 ++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
index a6920844b2631..6e801f98b820f 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.js
@@ -19,6 +19,7 @@ import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 
 function DuotonePicker( {
+	clearable = true,
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
@@ -69,11 +70,13 @@ function DuotonePicker( {
 				);
 			} ) }
 			actions={
-				<CircularOptionPicker.ButtonAction
-					onClick={ () => onChange( undefined ) }
-				>
-					{ __( 'Clear' ) }
-				</CircularOptionPicker.ButtonAction>
+				!! clearable && (
+					<CircularOptionPicker.ButtonAction
+						onClick={ () => onChange( undefined ) }
+					>
+						{ __( 'Clear' ) }
+					</CircularOptionPicker.ButtonAction>
+				)
 			}
 		>
 			{ ! disableCustomColors && ! disableCustomDuotone && (
diff --git a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
index a06f3bfcdaff1..f9165af561b18 100644
--- a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
@@ -1,9 +1,16 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalVStack as VStack,
 	__experimentalPaletteEdit as PaletteEdit,
+	DuotonePicker,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -40,11 +47,24 @@ export default function GradientPalettePanel( { name } ) {
 		'color.defaultGradients',
 		name
 	);
+	const [ duotonePalette ] = useSetting( 'color.duotone' ) || [];
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
 			spacing={ 10 }
 		>
+			<div>
+				<Heading className="edit-site-global-styles-gradient-palette-panel__duotone-heading">
+					{ __( 'Duotone' ) }
+				</Heading>
+				<DuotonePicker
+					duotonePalette={ duotonePalette }
+					disableCustomDuotone={ true }
+					disableCustomColors={ true }
+					clearable={ false }
+					onChange={ noop }
+				/>
+			</div>
 			{ !! themeGradients && !! themeGradients.length && (
 				<PaletteEdit
 					canReset={ themeGradients !== baseThemeGradients }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index c6db98ddfd7c3..4c43b8670a52d 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -77,3 +77,11 @@
 		min-height: $grid-unit-40;
 	}
 }
+
+h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
+	text-transform: uppercase;
+	line-height: $grid-unit-30;
+	font-weight: 500;
+	font-size: 11px;
+	margin-bottom: $grid-unit-10;
+}