From e1b5b581fe90caee14a9c97f272b56138c3bd6f7 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Wed, 10 Feb 2021 16:27:31 -1000
Subject: [PATCH 1/5] Add duotone filter

---
 lib/duotone-filter.php                        | 59 ++++++++++++++
 lib/load.php                                  |  1 +
 .../src/components/duotone-filter/index.js    | 81 +++++++++++++++++++
 packages/block-editor/src/components/index.js |  1 +
 4 files changed, 142 insertions(+)
 create mode 100644 lib/duotone-filter.php
 create mode 100644 packages/block-editor/src/components/duotone-filter/index.js

diff --git a/lib/duotone-filter.php b/lib/duotone-filter.php
new file mode 100644
index 00000000000000..ea3a3bf3bd970f
--- /dev/null
+++ b/lib/duotone-filter.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * Duotone filter markup.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param  string $selector CSS selectors to apply the duotone to.
+ * @param  string $id       Unique slug for this duotone filter.
+ * @param  array  $values   R, G, and B values to filter with.
+ * @return string           Duotone stylesheet and SVG.
+ */
+function gutenberg_render_duotone_filter( $selector, $id, $values ) {
+	ob_start();
+
+	?>
+
+	<style>
+		<?php echo $selector; ?> {
+			filter: url( <?php echo esc_url( '#' . $id ); ?> );
+		}
+	</style>
+
+	<svg
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		viewBox="0 0 0 0"
+		width="0"
+		height="0"
+		focusable="false"
+		role="none"
+		style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
+	>
+		<defs>
+			<filter id="<?php echo esc_attr( $id ); ?>">
+				<feColorMatrix
+					type="matrix"
+					<?php // phpcs:disable Generic.WhiteSpace.DisallowSpaceIndent ?>
+					values=".299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							0 0 0 1 0"
+					<?php // phpcs:enable Generic.WhiteSpace.DisallowSpaceIndent ?>
+				/>
+				<feComponentTransfer color-interpolation-filters="sRGB" >
+					<feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $values['r'] ) ); ?>" />
+					<feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $values['g'] ) ); ?>" />
+					<feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $values['b'] ) ); ?>" />
+				</feComponentTransfer>
+			</filter>
+		</defs>
+	</svg>
+
+	<?php
+
+	return ob_get_clean();
+}
diff --git a/lib/load.php b/lib/load.php
index 8027efa785f1e7..878e2135ab12ff 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -118,6 +118,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experiments-page.php';
 require __DIR__ . '/global-styles.php';
 require __DIR__ . '/query-utils.php';
+require __DIR__ . '/duotone-filter.php';
 
 if ( ! class_exists( 'WP_Block_Supports' ) ) {
 	require_once __DIR__ . '/class-wp-block-supports.php';
diff --git a/packages/block-editor/src/components/duotone-filter/index.js b/packages/block-editor/src/components/duotone-filter/index.js
new file mode 100644
index 00000000000000..e1c844670c4a05
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-filter/index.js
@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+/**
+ * Values for the SVG `feComponentTransfer`.
+ *
+ * @typedef Values {Object}
+ * @property {number[]} r Red values.
+ * @property {number[]} g Green values.
+ * @property {number[]} b Blue values.
+ */
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param  {Object} props          Duotone props.
+ * @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.
+ * @return {WPElement}             Duotone element.
+ */
+export default function DuotoneFilter( { selector, id, values } ) {
+	const stylesheet = `
+${ selector } {
+	filter: url( #${ id } );
+}
+`;
+
+	return (
+		<>
+			<SVG
+				xmlnsXlink="http://www.w3.org/1999/xlink"
+				viewBox="0 0 0 0"
+				width="0"
+				height="0"
+				focusable="false"
+				role="none"
+				style={ {
+					visibility: 'hidden',
+					position: 'absolute',
+					left: '-9999px',
+					overflow: 'hidden',
+				} }
+			>
+				<defs>
+					<filter id={ id }>
+						<feColorMatrix
+							type="matrix"
+							// Use perceptual brightness to convert to grayscale.
+							// prettier-ignore
+							values=".299 .587 .114 0 0
+							        .299 .587 .114 0 0
+							        .299 .587 .114 0 0
+							        0 0 0 1 0"
+						/>
+						<feComponentTransfer
+							// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
+							colorInterpolationFilters="sRGB"
+						>
+							<feFuncR
+								type="table"
+								tableValues={ values.r.join( ' ' ) }
+							/>
+							<feFuncG
+								type="table"
+								tableValues={ values.g.join( ' ' ) }
+							/>
+							<feFuncB
+								type="table"
+								tableValues={ values.b.join( ' ' ) }
+							/>
+						</feComponentTransfer>
+					</filter>
+				</defs>
+			</SVG>
+			<style dangerouslySetInnerHTML={ { __html: stylesheet } } />
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 16977e34af4976..4d965d88d9c976 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -99,6 +99,7 @@ export {
 	useClipboardHandler as __unstableUseClipboardHandler,
 } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as __experimentalDuotoneFilter } from './duotone-filter';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';

From eaf27e64a87b1c37f4e6ac68418363a43691b622 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Wed, 10 Feb 2021 16:28:22 -1000
Subject: [PATCH 2/5] Add swatch icon

---
 packages/icons/src/index.js          |  1 +
 packages/icons/src/library/swatch.js | 12 ++++++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 packages/icons/src/library/swatch.js

diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index c66e1ad7382fe4..49b19187b8f3b4 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -177,6 +177,7 @@ export { default as shipping } from './library/shipping';
 export { default as stretchWide } from './library/stretch-wide';
 export { default as subscript } from './library/subscript';
 export { default as superscript } from './library/superscript';
+export { default as swatch } from './library/swatch';
 export { default as tableColumnAfter } from './library/table-column-after';
 export { default as tableColumnBefore } from './library/table-column-before';
 export { default as tableColumnDelete } from './library/table-column-delete';
diff --git a/packages/icons/src/library/swatch.js b/packages/icons/src/library/swatch.js
new file mode 100644
index 00000000000000..1d9a63e84838ef
--- /dev/null
+++ b/packages/icons/src/library/swatch.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const swatch = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z" />
+	</SVG>
+);
+
+export default swatch;

From aa66ab4e54f5ccbafaa4e154859dd4dd2c87ee30 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Wed, 10 Feb 2021 16:33:59 -1000
Subject: [PATCH 3/5] Add duotone to theme.json

---
 .../developers/themes/theme-json.md           |  1 +
 lib/class-wp-theme-json-resolver.php          | 16 +++++++
 lib/class-wp-theme-json.php                   |  1 +
 lib/experimental-default-theme.json           | 42 +++++++++++++++++++
 4 files changed, 60 insertions(+)

diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md
index e1a50ce95a428f..29d31d5ec3b3e9 100644
--- a/docs/designers-developers/developers/themes/theme-json.md
+++ b/docs/designers-developers/developers/themes/theme-json.md
@@ -163,6 +163,7 @@ The settings section has the following structure and default values:
       "color": {
         "custom": true, /* false to opt-out, as in add_theme_support('disable-custom-colors') */
         "customGradient": true, /* false to opt-out, as in add_theme_support('disable-custom-gradients') */
+        "duotone": [ ... ], /* duotone presets, a list of { "colors": [ "#000", "#FFF" ] } */
         "gradients": [ ... ], /* gradient presets, as in add_theme_support('editor-gradient-presets', ... ) */
         "link": false, /* true to opt-in, as in add_theme_support('experimental-link-color') */
         "palette": [ ... ], /* color presets, as in add_theme_support('editor-color-palette', ... ) */
diff --git a/lib/class-wp-theme-json-resolver.php b/lib/class-wp-theme-json-resolver.php
index 0352e9e9a44798..263a2f3847de59 100644
--- a/lib/class-wp-theme-json-resolver.php
+++ b/lib/class-wp-theme-json-resolver.php
@@ -255,6 +255,22 @@ public static function get_core_data() {
 			}
 		}
 
+		$default_duotone_i18n = array(
+			'dark-grayscale'     => __( 'Dark grayscale', 'gutenberg' ),
+			'grayscale'          => __( 'Grayscale', 'gutenberg' ),
+			'purple-yellow'      => __( 'Purple and yellow', 'gutenberg' ),
+			'blue-red'           => __( 'Blue and red', 'gutenberg' ),
+			'midnight'           => __( 'Midnight', 'gutenberg' ),
+			'magenta-yellow'     => __( 'Magenta and yellow', 'gutenberg' ),
+			'purple-green'       => __( 'Purple and green', 'gutenberg' ),
+			'blue-orange'        => __( 'Blue and orange', 'gutenberg' ),
+		);
+		if ( ! empty( $config['global']['settings']['color']['duotone'] ) ) {
+			foreach ( $config['global']['settings']['color']['duotone'] as &$gradient ) {
+				$gradient['name'] = $default_duotone_i18n[ $gradient['slug'] ];
+			}
+		}
+
 		$default_font_sizes_i18n = array(
 			'small'  => __( 'Small', 'gutenberg' ),
 			'normal' => __( 'Normal', 'gutenberg' ),
diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php
index 107ef3d3f6a757..becdacc066d05c 100644
--- a/lib/class-wp-theme-json.php
+++ b/lib/class-wp-theme-json.php
@@ -149,6 +149,7 @@ class WP_Theme_JSON {
 				'gradients'      => null,
 				'link'           => null,
 				'palette'        => null,
+				'duotone'        => null,
 			),
 			'spacing'    => array(
 				'customPadding' => null,
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index da910ca84747a7..d8c2582e8b8add 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -126,6 +126,48 @@
 						"slug": "midnight"
 					}
 				],
+				"duotone": [
+					{
+						"name":  "Dark grayscale" ,
+						"colors": [ "#000000", "#7f7f7f" ],
+						"slug": "dark-grayscale"
+					},
+					{
+						"name":  "Grayscale" ,
+						"colors": [ "#000000", "#ffffff" ],
+						"slug": "grayscale"
+					},
+					{
+						"name":  "Purple and yellow" ,
+						"colors": [ "#8c00b7", "#fcff41" ],
+						"slug": "purple-yellow"
+					},
+					{
+						"name":  "Blue and red" ,
+						"colors": [ "#000097", "#ff4747" ],
+						"slug": "blue-red"
+					},
+					{
+						"name":  "Midnight" ,
+						"colors": [ "#000000", "#00a5ff" ],
+						"slug": "midnight"
+					},
+					{
+						"name":  "Magenta and yellow" ,
+						"colors": [ "#c7005a", "#fff278" ],
+						"slug": "magenta-yellow"
+					},
+					{
+						"name":  "Purple and green" ,
+						"colors": [ "#a60072", "#67ff66" ],
+						"slug": "purple-green"
+					},
+					{
+						"name":  "Blue and orange" ,
+						"colors": [ "#1900d8", "#ffa96b" ],
+						"slug": "blue-orange"
+					}
+				],
 				"custom": true,
 				"link": false,
 				"customGradient": true

From 802581e0ed0dd4ceba7bd1da05920bc286647749 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Wed, 10 Feb 2021 16:39:38 -1000
Subject: [PATCH 4/5] Add duotone toolbar

---
 .../duotone-toolbar/custom-duotone-bar.js     |  45 +++++
 .../duotone-toolbar/custom-duotone-picker.js  | 109 ++++++++++
 .../duotone-toolbar/duotone-picker-popover.js | 100 +++++++++
 .../duotone-toolbar/duotone-swatch.js         |  10 +
 .../src/components/duotone-toolbar/index.js   |  64 ++++++
 .../src/components/duotone-toolbar/style.scss |  59 ++++++
 .../src/components/duotone-toolbar/utils.js   | 190 ++++++++++++++++++
 packages/block-editor/src/components/index.js |   1 +
 packages/block-editor/src/style.scss          |   1 +
 .../src/custom-gradient-bar/control-points.js |  37 ++--
 .../src/custom-gradient-bar/index.js          |  40 ++--
 .../src/custom-gradient-picker/style.scss     |   4 +-
 packages/components/src/index.js              |   2 +
 13 files changed, 628 insertions(+), 34 deletions(-)
 create mode 100644 packages/block-editor/src/components/duotone-toolbar/custom-duotone-bar.js
 create mode 100644 packages/block-editor/src/components/duotone-toolbar/custom-duotone-picker.js
 create mode 100644 packages/block-editor/src/components/duotone-toolbar/duotone-picker-popover.js
 create mode 100644 packages/block-editor/src/components/duotone-toolbar/duotone-swatch.js
 create mode 100644 packages/block-editor/src/components/duotone-toolbar/index.js
 create mode 100644 packages/block-editor/src/components/duotone-toolbar/style.scss
 create mode 100644 packages/block-editor/src/components/duotone-toolbar/utils.js

diff --git a/packages/block-editor/src/components/duotone-toolbar/custom-duotone-bar.js b/packages/block-editor/src/components/duotone-toolbar/custom-duotone-bar.js
new file mode 100644
index 00000000000000..75410ca876b2e0
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-toolbar/custom-duotone-bar.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalCustomGradientBar as CustomGradientBar } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getColorStopsFromValues,
+	getCustomDuotoneIdFromColorStops,
+	getGradientFromValues,
+	getValuesFromColorStops,
+} from './utils';
+
+const PLACEHOLDER_VALUES = {
+	r: [ 0.2, 0.8 ],
+	g: [ 0.2, 0.8 ],
+	b: [ 0.2, 0.8 ],
+};
+
+export default function CustomDuotoneBar( { value, onChange } ) {
+	const hasGradient = !! value?.values;
+	const values = hasGradient ? value.values : PLACEHOLDER_VALUES;
+	const background = getGradientFromValues( values );
+	const controlPoints = getColorStopsFromValues( values );
+	return (
+		<div className="components-custom-duotone-picker">
+			<CustomGradientBar
+				disableInserter
+				disableAlpha
+				background={ background }
+				hasGradient={ hasGradient }
+				value={ controlPoints }
+				onChange={ ( newColorStops ) => {
+					const newDuotone = {
+						id: getCustomDuotoneIdFromColorStops( newColorStops ),
+						values: getValuesFromColorStops( newColorStops ),
+					};
+					onChange( newDuotone );
+				} }
+			/>
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/duotone-toolbar/custom-duotone-picker.js b/packages/block-editor/src/components/duotone-toolbar/custom-duotone-picker.js
new file mode 100644
index 00000000000000..57343e5500eb10
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-toolbar/custom-duotone-picker.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, ColorPalette, Icon } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { swatch } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Swatch from './duotone-swatch';
+import {
+	getCustomDuotoneIdFromHexColors,
+	getDefaultColors,
+	getHexColorsFromValues,
+	getValuesFromColors,
+} from './utils';
+
+function CustomColorOption( { label, value, colors, onChange } ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const icon = value ? <Swatch fill={ value } /> : <Icon icon={ swatch } />;
+	return (
+		<>
+			<Button
+				className="block-editor-duotone-toolbar__color-button"
+				icon={ icon }
+				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+			>
+				{ label }
+			</Button>
+			{ isOpen && (
+				<ColorPalette
+					colors={ colors }
+					value={ value }
+					clearable={ false }
+					onChange={ onChange }
+				/>
+			) }
+		</>
+	);
+}
+
+function CustomColorPicker( { colors, palette, onChange } ) {
+	const [ defaultDark, defaultLight ] = useMemo(
+		() => getDefaultColors( palette ),
+		[ palette ]
+	);
+
+	return (
+		<div className="block-editor-duotone-toolbar__custom-colors">
+			<CustomColorOption
+				label={ __( 'Shadows' ) }
+				value={ colors[ 0 ] }
+				colors={ palette }
+				onChange={ ( newColor ) => {
+					const newColors = colors.slice();
+					newColors[ 0 ] = newColor;
+					if ( ! newColors[ 0 ] ) {
+						newColors[ 0 ] = defaultDark;
+					}
+					if ( ! newColors[ 1 ] ) {
+						newColors[ 1 ] = defaultLight;
+					}
+					onChange( newColors );
+				} }
+			/>
+			<CustomColorOption
+				label={ __( 'Highlights' ) }
+				value={ colors[ 1 ] }
+				colors={ palette }
+				onChange={ ( newColor ) => {
+					const newColors = colors.slice();
+					newColors[ 1 ] = newColor;
+					if ( ! newColors[ 0 ] ) {
+						newColors[ 0 ] = defaultDark;
+					}
+					if ( ! newColors[ 1 ] ) {
+						newColors[ 1 ] = defaultLight;
+					}
+					onChange( newColors );
+				} }
+			/>
+		</div>
+	);
+}
+
+function CustomDuotonePicker( { colorPalette, value, onChange } ) {
+	return (
+		<CustomColorPicker
+			colors={ getHexColorsFromValues( value?.values ) }
+			palette={ colorPalette }
+			onChange={ ( newColors ) =>
+				onChange(
+					newColors.length >= 2
+						? {
+								values: getValuesFromColors( newColors ),
+								id: getCustomDuotoneIdFromHexColors(
+									newColors
+								),
+						  }
+						: undefined
+				)
+			}
+		/>
+	);
+}
+
+export default CustomDuotonePicker;
diff --git a/packages/block-editor/src/components/duotone-toolbar/duotone-picker-popover.js b/packages/block-editor/src/components/duotone-toolbar/duotone-picker-popover.js
new file mode 100644
index 00000000000000..1b4d66f56aded0
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-toolbar/duotone-picker-popover.js
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	CircularOptionPicker,
+	Popover,
+	MenuGroup,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import CustomDuotoneBar from './custom-duotone-bar';
+import CustomDuotonePicker from './custom-duotone-picker';
+import { getGradientFromCSSColors, getValuesFromColors } from './utils';
+
+function DuotonePickerPopover( {
+	value,
+	onChange,
+	onToggle,
+	duotonePalette,
+	colorPalette,
+} ) {
+	return (
+		<Popover
+			className="block-editor-duotone-toolbar__popover"
+			headerTitle={ __( 'Duotone' ) }
+			onFocusOutside={ onToggle }
+		>
+			<MenuGroup label={ __( 'Duotone' ) }>
+				<CircularOptionPicker
+					options={ duotonePalette.map( ( option ) => {
+						const isSelected = option.slug === value?.slug;
+						const style = {
+							background: getGradientFromCSSColors(
+								option.colors,
+								'135deg'
+							),
+							color: 'transparent',
+						};
+						const code = sprintf(
+							// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
+							__( 'Duotone code: %s' ),
+							option.slug
+						);
+						const label = sprintf(
+							// translators: %s: The name of the option e.g: "Dark grayscale".
+							__( 'Duotone: %s' ),
+							option.name
+						);
+
+						return (
+							<CircularOptionPicker.Option
+								key={ option.slug }
+								value={ option.slug }
+								isSelected={ isSelected }
+								tooltipText={ option.name ?? code }
+								style={ style }
+								onClick={ () => {
+									const newValue = {
+										values: getValuesFromColors(
+											option.colors
+										),
+										id: `duotone-filter-${ option.slug }`,
+									};
+									onChange(
+										isSelected ? undefined : newValue
+									);
+								} }
+								aria-label={ option.name ? label : code }
+							/>
+						);
+					} ) }
+					actions={
+						<CircularOptionPicker.ButtonAction
+							onClick={ () => onChange( undefined ) }
+						>
+							{ __( 'Clear' ) }
+						</CircularOptionPicker.ButtonAction>
+					}
+				>
+					<CustomDuotoneBar value={ value } onChange={ onChange } />
+					<CustomDuotonePicker
+						colorPalette={ colorPalette }
+						value={ value }
+						onChange={ onChange }
+					/>
+				</CircularOptionPicker>
+			</MenuGroup>
+			<div className="block-editor-duotone-toolbar__description">
+				{ __(
+					'The duotone filter creates a two-color version of your image, where you choose the colors.'
+				) }
+			</div>
+		</Popover>
+	);
+}
+
+export default DuotonePickerPopover;
diff --git a/packages/block-editor/src/components/duotone-toolbar/duotone-swatch.js b/packages/block-editor/src/components/duotone-toolbar/duotone-swatch.js
new file mode 100644
index 00000000000000..64d5fcc26753a8
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-toolbar/duotone-swatch.js
@@ -0,0 +1,10 @@
+function DuotoneSwatch( { fill } ) {
+	return (
+		<span
+			className="block-editor-duotone-toolbar__swatch"
+			style={ { background: fill } }
+		/>
+	);
+}
+
+export default DuotoneSwatch;
diff --git a/packages/block-editor/src/components/duotone-toolbar/index.js b/packages/block-editor/src/components/duotone-toolbar/index.js
new file mode 100644
index 00000000000000..3e0dfc663ecceb
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-toolbar/index.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { swatch } from '@wordpress/icons';
+import { DOWN } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import DuotonePickerPopover from './duotone-picker-popover';
+import Swatch from './duotone-swatch';
+import { getGradientFromValues } from './utils';
+
+function DuotoneToolbar( { value, onChange, duotonePalette, colorPalette } ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const onToggle = () => {
+		setIsOpen( ( prev ) => ! prev );
+	};
+	const openOnArrowDown = ( event ) => {
+		if ( ! isOpen && event.keyCode === DOWN ) {
+			event.preventDefault();
+			event.stopPropagation();
+			onToggle();
+		}
+	};
+	return (
+		<>
+			<ToolbarButton
+				showTooltip
+				onClick={ onToggle }
+				aria-haspopup="true"
+				aria-expanded={ isOpen }
+				onKeyDown={ openOnArrowDown }
+				label={ __( 'Apply duotone filter' ) }
+				icon={
+					value ? (
+						<Swatch
+							fill={ getGradientFromValues(
+								value.values,
+								'135deg'
+							) }
+						/>
+					) : (
+						swatch
+					)
+				}
+			/>
+			{ isOpen && (
+				<DuotonePickerPopover
+					value={ value }
+					onChange={ onChange }
+					onToggle={ onToggle }
+					duotonePalette={ duotonePalette }
+					colorPalette={ colorPalette }
+				/>
+			) }
+		</>
+	);
+}
+
+export default DuotoneToolbar;
diff --git a/packages/block-editor/src/components/duotone-toolbar/style.scss b/packages/block-editor/src/components/duotone-toolbar/style.scss
new file mode 100644
index 00000000000000..1e0c44a4c49d0e
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-toolbar/style.scss
@@ -0,0 +1,59 @@
+.block-editor-duotone-toolbar__swatch {
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	color: transparent;
+	background: transparent;
+
+	// Regular border doesn't seem to work in the toolbar button, but pseudo-selector border does.
+	&::after {
+		content: "";
+		display: block;
+		width: 100%;
+		height: 100%;
+		border: $border-width solid rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+	}
+}
+
+.components-button.has-icon.has-text .block-editor-duotone-toolbar__swatch {
+	margin-right: $grid-unit;
+}
+
+.block-editor-duotone-toolbar__popover {
+	.components-popover__content {
+		border: $border-width solid $gray-900;
+		min-width: 214px;
+	}
+
+	.components-circular-option-picker,
+	.block-editor-duotone-toolbar__description {
+		padding: $grid-unit-15;
+	}
+
+	.components-menu-group__label {
+		padding: $grid-unit-15 $grid-unit-15 0 $grid-unit-15;
+	}
+
+	.components-menu-group__label,
+	.block-editor-duotone-toolbar__custom-colors,
+	.block-editor-duotone-toolbar__color-button {
+		width: 100%;
+	}
+
+	.block-editor-duotone-toolbar__description {
+		border-top: $border-width solid $gray-900;
+		color: $gray-700;
+	}
+}
+
+.block-editor-duotone-toolbar__popover > .components-popover__content {
+	// Matches 8 swatches in width.
+	width: 334px;
+}
+
+// Better align the popover under the swatch.
+// @todo: when the positioning for popovers gets refactored, this can presumably be removed.
+.block-editor-duotone-toolbar__popover:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
+	margin-left: -14px;
+}
diff --git a/packages/block-editor/src/components/duotone-toolbar/utils.js b/packages/block-editor/src/components/duotone-toolbar/utils.js
new file mode 100644
index 00000000000000..2b5ed968f5686b
--- /dev/null
+++ b/packages/block-editor/src/components/duotone-toolbar/utils.js
@@ -0,0 +1,190 @@
+/**
+ * External dependencies
+ */
+import tinycolor from 'tinycolor2';
+
+/**
+ * Object representation for a color.
+ *
+ * @typedef {Object} RGBColor
+ * @property {number} r Red component of the color in the range [0,1].
+ * @property {number} g Green component of the color in the range [0,1].
+ * @property {number} b Blue component of the color in the range [0,1].
+ */
+
+/**
+ * Arrays of values in convenient format for SVG feComponentTransfer.
+ *
+ * @typedef {Object} RGBValues
+ * @property {number[]} r Array of red components of the colors in the range [0,1].
+ * @property {number[]} g Array of green components of the colors in the range [0,1].
+ * @property {number[]} b Array of blue components of the colors in the range [0,1].
+ */
+
+/**
+ * Calculate the brightest and darkest values from a color palette.
+ *
+ * @param {Object[]} palette Color palette for the theme.
+ *
+ * @return {string[]} Tuple of the darkest color and brightest color.
+ */
+export function getDefaultColors( palette ) {
+	// A default dark and light color are required.
+	if ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];
+
+	return palette
+		.map( ( { color } ) => ( {
+			color,
+			brightness: tinycolor( color ).getBrightness() / 255,
+		} ) )
+		.reduce(
+			( [ min, max ], current ) => {
+				return [
+					current.brightness <= min.brightness ? current : min,
+					current.brightness >= max.brightness ? current : max,
+				];
+			},
+			[ { brightness: 1 }, { brightness: 0 } ]
+		)
+		.map( ( { color } ) => color );
+}
+
+/**
+ * Generate a duotone gradient from a list of colors.
+ *
+ * @param {string[]} colors CSS color strings.
+ * @param {string}   angle  CSS gradient angle.
+ *
+ * @return {string} CSS gradient string for the duotone swatch.
+ */
+export function getGradientFromCSSColors( colors = [], angle = '90deg' ) {
+	const l = 100 / colors.length;
+
+	const stops = colors
+		.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )
+		.join( ', ' );
+
+	return `linear-gradient( ${ angle }, ${ stops } )`;
+}
+
+/**
+ * Create a CSS gradient for duotone swatches.
+ *
+ * @param {RGBValues} values R, G, and B values.
+ * @param {string}   angle  CSS gradient angle.
+ *
+ * @return {string} CSS gradient string for the duotone swatch.
+ */
+export function getGradientFromValues(
+	values = { r: [], g: [], b: [] },
+	angle
+) {
+	return getGradientFromCSSColors(
+		getColorsFromValues( values ).map( ( tcolor ) => tcolor.toRgbString() ),
+		angle
+	);
+}
+
+/**
+ * Convert a list of colors to an object of R, G, and B values.
+ *
+ * @param {string[]} colors Array of RBG color strings.
+ *
+ * @return {RGBValues} R, G, and B values.
+ */
+export function getValuesFromColors( colors = [] ) {
+	const values = { r: [], g: [], b: [] };
+
+	colors.forEach( ( color ) => {
+		// Access values directly to skip rounding that tinycolor.toRgb() does.
+		const tcolor = tinycolor( color );
+		values.r.push( tcolor._r / 255 );
+		values.g.push( tcolor._g / 255 );
+		values.b.push( tcolor._b / 255 );
+	} );
+
+	return values;
+}
+
+/**
+ * Convert a color values object to an array of colors.
+ *
+ * @param {RGBValues} values R, G, and B values.
+ *
+ * @return {Object[]} Tinycolor object array.
+ */
+function getColorsFromValues( values = { r: [], g: [], b: [] } ) {
+	// R, G, and B should all be the same length, so we only need to map over one.
+	return values.r.map( ( x, i ) => {
+		return tinycolor( {
+			r: values.r[ i ] * 255,
+			g: values.g[ i ] * 255,
+			b: values.b[ i ] * 255,
+		} );
+	} );
+}
+
+/**
+ * Convert a color values object to an array of color stops.
+ *
+ * @param {RGBValues} values R, G, and B values.
+ *
+ * @return {Object[]} Color stop information.
+ */
+export function getColorStopsFromValues( values = { r: [], g: [], b: [] } ) {
+	const colors = getColorsFromValues( values );
+	return colors.map( ( tcolor, i ) => ( {
+		position: ( i * 100 ) / ( colors.length - 1 ),
+		color: tcolor.toRgbString(),
+	} ) );
+}
+
+/**
+ * Convert a color values object to an array of color stops.
+ *
+ * @param {Object[]} colorStops Color stop information.
+ *
+ * @return {RGBValues} R, G, and B values.
+ */
+export function getValuesFromColorStops( colorStops = [] ) {
+	return getValuesFromColors( colorStops.map( ( { color } ) => color ) );
+}
+
+/**
+ * Convert a color values object to an array of colors.
+ *
+ * @param {RGBValues} values R, G, and B values.
+ *
+ * @return {string[]} Hex color array.
+ */
+export function getHexColorsFromValues( values = { r: [], g: [], b: [] } ) {
+	return getColorsFromValues( values ).map( ( tcolor ) =>
+		tcolor.toHexString()
+	);
+}
+
+/**
+ * Gets a duotone id from custom hex colors.
+ *
+ * @param {string[]} colors Hex color array.
+ *
+ * @return {string} Custom duotone id.
+ */
+export function getCustomDuotoneIdFromHexColors( colors ) {
+	return `duotone-filter-custom-${ colors
+		.map( ( hex ) => hex.slice( 1 ).toLowerCase() )
+		.join( '-' ) }`;
+}
+
+/**
+ * Convert a color stops array to a custom duotone id.
+ *
+ * @param {Object[]} colorStops Color stop information.
+ *
+ * @return {string} Custom duotone id.
+ */
+export function getCustomDuotoneIdFromColorStops( colorStops = [] ) {
+	return getCustomDuotoneIdFromHexColors(
+		colorStops.map( ( { color } ) => tinycolor( color ).toHexString() )
+	);
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 4d965d88d9c976..5d0416309eb4a9 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -31,6 +31,7 @@ export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPaletteControl } from './color-palette/control';
 export { default as ContrastChecker } from './contrast-checker';
+export { default as __experimentalDuotoneToolbar } from './duotone-toolbar';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalGradientPickerControl } from './gradient-picker/control';
 export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel';
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 9469ed8cdf9096..fec56bc7683ea1 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -31,6 +31,7 @@
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
+@import "./components/duotone-toolbar/style.scss";
 @import "./components/font-appearance-control/style.scss";
 @import "./components/justify-toolbar/style.scss";
 @import "./components/link-control/style.scss";
diff --git a/packages/components/src/custom-gradient-bar/control-points.js b/packages/components/src/custom-gradient-bar/control-points.js
index d8d5ec16c2fa71..5bec42a2f2ae6c 100644
--- a/packages/components/src/custom-gradient-bar/control-points.js
+++ b/packages/components/src/custom-gradient-bar/control-points.js
@@ -109,6 +109,8 @@ function ControlPointButton( {
 }
 
 function ControlPoints( {
+	disableRemove,
+	disableAlpha,
 	gradientPickerDomRef,
 	ignoreMarkerPosition,
 	value: controlPoints,
@@ -223,6 +225,7 @@ function ControlPoints( {
 					renderContent={ ( { onClose } ) => (
 						<>
 							<ColorPicker
+								disableAlpha={ disableAlpha }
 								color={ point.color }
 								onChangeComplete={ ( { color } ) => {
 									onChange(
@@ -234,21 +237,23 @@ function ControlPoints( {
 									);
 								} }
 							/>
-							<Button
-								className="components-custom-gradient-picker__remove-control-point"
-								onClick={ () => {
-									onChange(
-										removeControlPoint(
-											controlPoints,
-											index
-										)
-									);
-									onClose();
-								} }
-								isLink
-							>
-								{ __( 'Remove Control Point' ) }
-							</Button>
+							{ ! disableRemove && (
+								<Button
+									className="components-custom-gradient-picker__remove-control-point"
+									onClick={ () => {
+										onChange(
+											removeControlPoint(
+												controlPoints,
+												index
+											)
+										);
+										onClose();
+									} }
+									isLink
+								>
+									{ __( 'Remove Control Point' ) }
+								</Button>
+							) }
 						</>
 					) }
 					popoverProps={ COLOR_POPOVER_PROPS }
@@ -264,6 +269,7 @@ function InsertPoint( {
 	onOpenInserter,
 	onCloseInserter,
 	insertPosition,
+	disableAlpha,
 } ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
@@ -297,6 +303,7 @@ function InsertPoint( {
 			) }
 			renderContent={ () => (
 				<ColorPicker
+					disableAlpha={ disableAlpha }
 					onChangeComplete={ ( { color } ) => {
 						if ( ! alreadyInsertedPoint ) {
 							onChange(
diff --git a/packages/components/src/custom-gradient-bar/index.js b/packages/components/src/custom-gradient-bar/index.js
index bd8b1922cdf6e6..823e3d00992a32 100644
--- a/packages/components/src/custom-gradient-bar/index.js
+++ b/packages/components/src/custom-gradient-bar/index.js
@@ -76,6 +76,8 @@ export default function CustomGradientBar( {
 	hasGradient,
 	value: controlPoints,
 	onChange,
+	disableInserter = false,
+	disableAlpha = false,
 } ) {
 	const gradientPickerDomRef = useRef();
 
@@ -129,24 +131,28 @@ export default function CustomGradientBar( {
 			onMouseLeave={ onMouseLeave }
 		>
 			<div className="components-custom-gradient-picker__markers-container">
-				{ ( isMovingInserter || isInsertingControlPoint ) && (
-					<ControlPoints.InsertPoint
-						insertPosition={ gradientBarState.insertPosition }
-						value={ controlPoints }
-						onChange={ onChange }
-						onOpenInserter={ () => {
-							gradientBarStateDispatch( {
-								type: 'OPEN_INSERTER',
-							} );
-						} }
-						onCloseInserter={ () => {
-							gradientBarStateDispatch( {
-								type: 'CLOSE_INSERTER',
-							} );
-						} }
-					/>
-				) }
+				{ ! disableInserter &&
+					( isMovingInserter || isInsertingControlPoint ) && (
+						<ControlPoints.InsertPoint
+							disableAlpha={ disableAlpha }
+							insertPosition={ gradientBarState.insertPosition }
+							value={ controlPoints }
+							onChange={ onChange }
+							onOpenInserter={ () => {
+								gradientBarStateDispatch( {
+									type: 'OPEN_INSERTER',
+								} );
+							} }
+							onCloseInserter={ () => {
+								gradientBarStateDispatch( {
+									type: 'CLOSE_INSERTER',
+								} );
+							} }
+						/>
+					) }
 				<ControlPoints
+					disableAlpha={ disableAlpha }
+					disableRemove={ disableInserter }
 					gradientPickerDomRef={ gradientPickerDomRef }
 					ignoreMarkerPosition={
 						isInsertingControlPoint
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index de136f99d16d1b..04102e36417b3a 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -35,8 +35,8 @@ $components-custom-gradient-picker__padding: 6px; // 36px container, 24px handle
 	}
 
 	.components-custom-gradient-picker__control-point-button {
-		border: 2px solid transparent;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
+		border: 1px solid $white;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
 		border-radius: 50%;
 		height: $button-size-small;
 		width: $button-size-small;
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 0c67e9330f035e..1ae27fa6081f04 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -29,6 +29,7 @@ export { default as CardFooter } from './card/footer';
 export { default as CardHeader } from './card/header';
 export { default as CardMedia } from './card/media';
 export { default as CheckboxControl } from './checkbox-control';
+export { default as CircularOptionPicker } from './circular-option-picker';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as __experimentalColorEdit } from './color-edit';
 export { default as ColorIndicator } from './color-indicator';
@@ -71,6 +72,7 @@ export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalCustomGradientPicker } from './custom-gradient-picker';
+export { default as __experimentalCustomGradientBar } from './custom-gradient-bar';
 export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
 export { default as Icon } from './icon';

From 912b7d03348a0f2d747102177492be5c74eca72a Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Wed, 10 Feb 2021 16:40:45 -1000
Subject: [PATCH 5/5] Add image block duotone

---
 lib/blocks.php                              |  2 +-
 packages/block-library/src/image/block.json |  3 ++
 packages/block-library/src/image/edit.js    |  2 +
 packages/block-library/src/image/image.js   | 27 +++++++++++++
 packages/block-library/src/image/index.php  | 45 +++++++++++++++++++++
 packages/block-library/src/image/save.js    |  2 +
 6 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 packages/block-library/src/image/index.php

diff --git a/lib/blocks.php b/lib/blocks.php
index 8fbc900d7ecb19..c7ec3e3c04d52b 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -26,7 +26,6 @@ function gutenberg_reregister_core_block_types() {
 				'group',
 				'heading',
 				'html',
-				'image',
 				'list',
 				'media-text',
 				'missing',
@@ -55,6 +54,7 @@ function gutenberg_reregister_core_block_types() {
 					'calendar.php'                  => 'core/calendar',
 					'categories.php'                => 'core/categories',
 					'cover.php'                     => 'core/cover',
+					'image.php'                     => 'core/image',
 					'latest-comments.php'           => 'core/latest-comments',
 					'latest-posts.php'              => 'core/latest-posts',
 					'navigation.php'                => 'core/navigation',
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 3952230ded6a31..dd6d93f0f43c0d 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -68,6 +68,9 @@
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "target"
+		},
+		"duotone": {
+			"type": "object"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 15477e3e1eaca9..70e6be6279e656 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -91,6 +91,7 @@ export function ImageEdit( {
 		width,
 		height,
 		sizeSlug,
+		duotone,
 	} = attributes;
 
 	const altRef = useRef();
@@ -275,6 +276,7 @@ export function ImageEdit( {
 	);
 
 	const classes = classnames( className, {
+		[ duotone?.id ]: duotone,
 		'is-transient': isBlobURL( url ),
 		'is-resized': !! width || !! height,
 		'is-focused': isSelected,
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 543a5580216523..d7b0b7bb8a36fd 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -29,6 +29,9 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	BlockAlignmentControl,
+	__experimentalUseEditorFeature as useEditorFeature,
+	__experimentalDuotoneToolbar as DuotoneToolbar,
+	__experimentalDuotoneFilter as DuotoneFilter,
 } from '@wordpress/block-editor';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -78,6 +81,7 @@ export default function Image( {
 		height,
 		linkTarget,
 		sizeSlug,
+		duotone,
 	},
 	setAttributes,
 	isSelected,
@@ -270,6 +274,10 @@ export default function Image( {
 		} );
 	}
 
+	function onDuotoneChange( newDuotone ) {
+		setAttributes( { duotone: newDuotone } );
+	}
+
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -279,6 +287,10 @@ export default function Image( {
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
 	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
 
+	const duotonePalette = useEditorFeature( 'color.duotone' );
+
+	const colorPalette = useEditorFeature( 'color.palette' );
+
 	const controls = (
 		<>
 			<BlockControls>
@@ -306,6 +318,14 @@ export default function Image( {
 							label={ __( 'Crop' ) }
 						/>
 					) }
+					{ ! isEditingImage && (
+						<DuotoneToolbar
+							value={ duotone }
+							duotonePalette={ duotonePalette }
+							colorPalette={ colorPalette }
+							onChange={ onDuotoneChange }
+						/>
+					) }
 					{ externalBlob && (
 						<ToolbarButton
 							onClick={ uploadExternal }
@@ -552,6 +572,13 @@ export default function Image( {
 		>
 			{ controls }
 			{ img }
+			{ duotone && (
+				<DuotoneFilter
+					selector={ `.wp-block-image.${ duotone.id } img` }
+					id={ duotone.id }
+					values={ duotone.values }
+				/>
+			) }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
 					ref={ captionRef }
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
new file mode 100644
index 00000000000000..5a25f645bb7f18
--- /dev/null
+++ b/packages/block-library/src/image/index.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/image` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Supports `duotone` attribute server side for `core/image`.
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content HTML content of the block.
+ *
+ * @return string Rendered HTML of the referenced block.
+ */
+function render_block_core_image( $attributes, $content ) {
+	if ( ! isset( $attributes['duotone'] ) ) {
+		return $content;
+	}
+
+	$id        = $attributes['duotone']['id'];
+	$values    = $attributes['duotone']['values'];
+	$selectors = array(
+		'div.wp-block-image .' . $id . ' img',
+		'figure.wp-block-image.' . $id . ' img',
+	);
+	$selector  = implode( ', ', $selectors );
+
+	$duotone = gutenberg_render_duotone_filter( $selector, $id, $values );
+
+	return $content . $duotone;
+}
+
+/**
+ * Registers the `core/image` block.
+ */
+function register_block_core_image() {
+	register_block_type_from_metadata(
+		__DIR__ . '/image',
+		array(
+			'render_callback' => 'render_block_core_image',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_image' );
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index ccf816c121e909..9e20327117a89f 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -24,11 +24,13 @@ export default function save( { attributes } ) {
 		linkTarget,
 		sizeSlug,
 		title,
+		duotone,
 	} = attributes;
 
 	const newRel = isEmpty( rel ) ? undefined : rel;
 
 	const classes = classnames( {
+		[ duotone?.id ]: duotone,
 		[ `align${ align }` ]: align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,