From d1d9fc298deb455a9ea4904a4d06ffd5e87e3f5a Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Sat, 24 Jul 2021 20:20:50 +0100
Subject: [PATCH] Duotone: Add a posterize option

---
 .../duotone-control/duotone-picker-popover.js | 14 ++++++++++++-
 .../src/components/duotone-control/index.js   |  4 ++++
 .../src/components/duotone-control/style.scss |  3 ++-
 packages/block-editor/src/hooks/duotone.js    | 21 +++++++++++++++----
 4 files changed, 36 insertions(+), 6 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 64f4c1cf225c2b..9e3b63c8bae511 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
@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { Popover, MenuGroup, DuotonePicker } from '@wordpress/components';
+import {
+	Popover,
+	MenuGroup,
+	DuotonePicker,
+	ToggleControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 function DuotonePickerPopover( {
@@ -12,6 +17,8 @@ function DuotonePickerPopover( {
 	colorPalette,
 	disableCustomColors,
 	disableCustomDuotone,
+	posterize,
+	onPosterizeToggle,
 } ) {
 	return (
 		<Popover
@@ -28,6 +35,11 @@ function DuotonePickerPopover( {
 					value={ value }
 					onChange={ onChange }
 				/>
+				<ToggleControl
+					checked={ posterize }
+					onChange={ onPosterizeToggle }
+					label={ __( 'Posterize' ) }
+				/>
 			</MenuGroup>
 		</Popover>
 	);
diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js
index d481f9919e1ae2..2f79995bdb8688 100644
--- a/packages/block-editor/src/components/duotone-control/index.js
+++ b/packages/block-editor/src/components/duotone-control/index.js
@@ -18,6 +18,8 @@ function DuotoneControl( {
 	disableCustomDuotone,
 	value,
 	onChange,
+	onPosterizeToggle,
+	posterize,
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
@@ -52,6 +54,8 @@ function DuotoneControl( {
 					colorPalette={ colorPalette }
 					disableCustomColors={ disableCustomColors }
 					disableCustomDuotone={ disableCustomDuotone }
+					onPosterizeToggle={ onPosterizeToggle }
+					posterize={ posterize }
 				/>
 			) }
 		</>
diff --git a/packages/block-editor/src/components/duotone-control/style.scss b/packages/block-editor/src/components/duotone-control/style.scss
index 61d0b30c0a2f29..81147b773682e5 100644
--- a/packages/block-editor/src/components/duotone-control/style.scss
+++ b/packages/block-editor/src/components/duotone-control/style.scss
@@ -4,7 +4,8 @@
 		min-width: 214px;
 	}
 
-	.components-circular-option-picker {
+	.components-circular-option-picker,
+	.components-toggle-control {
 		padding: $grid-unit-15;
 	}
 
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 46748fb04f3e6c..cc4b5bfe55b8c2 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -62,15 +62,17 @@ export function getValuesFromColors( colors = [] ) {
  * @param {string} props.selector Selector to apply the filter to.
  * @param {string} props.id       Unique id for this duotone filter.
  * @param {Values} props.values   R, G, and B values to filter with.
+ * @param {boolean} props.posterize Decides whether to use discrete values or table values for the filter.
  *
  * @return {WPElement} Duotone element.
  */
-function DuotoneFilter( { selector, id, values } ) {
+function DuotoneFilter( { selector, id, values, posterize } ) {
 	const stylesheet = `
 ${ selector } {
 	filter: url( #${ id } );
 }
 `;
+	const type = posterize ? 'discrete' : 'table';
 
 	return (
 		<>
@@ -104,15 +106,15 @@ ${ selector } {
 							colorInterpolationFilters="sRGB"
 						>
 							<feFuncR
-								type="table"
+								type={ type }
 								tableValues={ values.r.join( ' ' ) }
 							/>
 							<feFuncG
-								type="table"
+								type={ type }
 								tableValues={ values.g.join( ' ' ) }
 							/>
 							<feFuncB
-								type="table"
+								type={ type }
 								tableValues={ values.b.join( ' ' ) }
 							/>
 						</feComponentTransfer>
@@ -127,6 +129,7 @@ ${ selector } {
 function DuotonePanel( { attributes, setAttributes } ) {
 	const style = attributes?.style;
 	const duotone = style?.color?.duotone;
+	const posterize = style?.posterize;
 
 	const duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY;
 	const colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY;
@@ -157,6 +160,14 @@ function DuotonePanel( { attributes, setAttributes } ) {
 					};
 					setAttributes( { style: newStyle } );
 				} }
+				posterize={ posterize }
+				onPosterizeToggle={ ( newPosterize ) => {
+					const newStyle = {
+						...style,
+						posterize: newPosterize,
+					};
+					setAttributes( { style: newStyle } );
+				} }
 			/>
 		</BlockControls>
 	);
@@ -227,6 +238,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 			'color.__experimentalDuotone'
 		);
 		const values = props?.attributes?.style?.color?.duotone;
+		const posterize = props?.attributes?.style?.posterize;
 
 		if ( ! duotoneSupport || ! values ) {
 			return <BlockListBlock { ...props } />;
@@ -252,6 +264,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 							selector={ selectorsGroup }
 							id={ id }
 							values={ getValuesFromColors( values ) }
+							posterize={ posterize }
 						/>,
 						element
 					) }