Add: Uneditable duotone palette on the palette gradient panel (#36920)

WordPress · Nov 30, 2021 · 223023d · 223023d
1 parent e2a3658
commit 223023d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;
+}