From 083b6c0a4d81c33c98625ac9f5ec5a95768a21dd Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Mon, 4 May 2020 14:38:04 -0500
Subject: [PATCH 1/9] Add SVG-based duotone filter

---
 blocks/duotone/editor.scss  |   0
 blocks/duotone/filter.svg   |  18 +++++
 blocks/duotone/index.php    |  67 ++++++++++++++++
 blocks/duotone/src/index.js | 156 ++++++++++++++++++++++++++++++++++++
 blocks/duotone/style.scss   |   0
 editor.scss                 |   1 +
 src/index.js                |   2 +
 style.scss                  |   1 +
 8 files changed, 245 insertions(+)
 create mode 100644 blocks/duotone/editor.scss
 create mode 100644 blocks/duotone/filter.svg
 create mode 100644 blocks/duotone/index.php
 create mode 100644 blocks/duotone/src/index.js
 create mode 100644 blocks/duotone/style.scss

diff --git a/blocks/duotone/editor.scss b/blocks/duotone/editor.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/blocks/duotone/filter.svg b/blocks/duotone/filter.svg
new file mode 100644
index 00000000..85fa10f8
--- /dev/null
+++ b/blocks/duotone/filter.svg
@@ -0,0 +1,18 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<filter id="duotone2">
+			<feColorMatrix
+				type="matrix"
+				values=".2989 .5870 .1140 0 0
+				        .2989 .5870 .1140 0 0
+				        .2989 .5870 .1140 0 0
+						0 0 0 1 0"
+			/>
+			<feComponentTransfer color-interpolation-filters="sRGB">
+				<feFuncR type="table" tableValues=".996078431  .984313725" />
+				<feFuncG type="table" tableValues=".125490196  .941176471" />
+				<feFuncB type="table" tableValues=".552941176  .478431373" />
+			</feComponentTransfer>
+		</filter>
+	</defs>
+</svg>
diff --git a/blocks/duotone/index.php b/blocks/duotone/index.php
new file mode 100644
index 00000000..f02ce716
--- /dev/null
+++ b/blocks/duotone/index.php
@@ -0,0 +1,67 @@
+<?php
+
+add_action( 'init', function() {
+	register_block_type( 'a8c/duotone', [
+		'editor_script' => 'block-experiments',
+		'style' => 'block-experiments',
+		'editor_style' => 'block-experiments-editor',
+	] );
+
+	function is_supported_block( $block ) {
+		$supported_blocks = [ 'core/image', 'core/cover' ];
+		return in_array( $block[ 'blockName' ], $supported_blocks );
+	}
+
+	function hex2rgb( $color ) {
+		$color = trim( $color, '#' );
+		if ( strlen( $color ) == 3 ) {
+			$r = hexdec( substr( $color, 0, 1 ) . substr( $color, 0, 1 ) );
+			$g = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
+			$b = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
+		} elseif ( strlen( $color ) == 6 ) {
+			$r = hexdec( substr( $color, 0, 2 ) );
+			$g = hexdec( substr( $color, 2, 2 ) );
+			$b = hexdec( substr( $color, 4, 2 ) );
+		} else {
+			return array();
+		}
+		return array(
+			'r' => $r / 255,
+			'g' => $g / 255,
+			'b' => $b / 255,
+		);
+	}
+
+	add_filter( 'render_block', function( $block_content, $block ) {
+		if ( ! is_supported_block( $block ) ) {
+			return $block_content;
+		}
+		$duotoneId = $block[ 'attrs' ][ 'duotoneId' ];
+		$duotoneDark = hex2rgb( $block[ 'attrs' ][ 'duotoneDark' ] );
+		$duotoneLight = hex2rgb( $block[ 'attrs' ][ 'duotoneLight' ] );
+		$duotone = <<<EOT
+<svg
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	style="display: none;"
+>
+	<defs>
+		<filter id="$duotoneId">
+			<feColorMatrix
+				type="matrix"
+				values="0.2989 0.5870 0.1140 0 0
+				        0.2989 0.5870 0.1140 0 0
+				        0.2989 0.5870 0.1140 0 0
+						0      0      0      0 1"
+			/>
+			<feComponentTransfer color-interpolation-filters="sRGB">
+				<feFuncR type="table" tableValues="{$duotoneDark[ 'r' ]} {$duotoneLight[ 'r' ]}" />
+				<feFuncG type="table" tableValues="{$duotoneDark[ 'g' ]} {$duotoneLight[ 'g' ]}" />
+				<feFuncB type="table" tableValues="{$duotoneDark[ 'b' ]} {$duotoneLight[ 'b' ]}" />
+			</feComponentTransfer>
+		</filter>
+	</defs>
+</svg>
+EOT; 
+		return $block_content . $duotone;
+	}, 10, 2 );
+} );
diff --git a/blocks/duotone/src/index.js b/blocks/duotone/src/index.js
new file mode 100644
index 00000000..8d4ae184
--- /dev/null
+++ b/blocks/duotone/src/index.js
@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useEffect } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+const SUPPORTED_BLOCKS = [ 'core/image', 'core/cover' ];
+
+export const isSupportedBlock = ( blockName ) =>
+	SUPPORTED_BLOCKS.includes( blockName );
+
+const parseColor = ( color ) => {
+	if ( ! color ) return {};
+
+	let r = '0';
+	let g = '0';
+	let b = '0';
+
+	if ( color.length === 7 ) {
+		r = '0x' + color[ 1 ] + color[ 2 ];
+		g = '0x' + color[ 3 ] + color[ 4 ];
+		b = '0x' + color[ 5 ] + color[ 6 ];
+	} else if ( color.length === 4 ) {
+		r = '0x' + color[ 1 ] + color[ 1 ];
+		g = '0x' + color[ 2 ] + color[ 2 ];
+		b = '0x' + color[ 3 ] + color[ 3 ];
+	}
+
+	return {
+		r: r / 0xff,
+		g: g / 0xff,
+		b: b / 0xff,
+	};
+};
+
+const withDuotoneAttributes = ( settings, blockName ) => {
+	if ( isSupportedBlock( blockName ) ) {
+		Object.assign( settings.attributes, {
+			duotoneId: {
+				type: 'string',
+			},
+			duotoneDark: {
+				type: 'string',
+			},
+			duotoneLight: {
+				type: 'string',
+			},
+		} );
+	}
+	return settings;
+};
+
+const withDuotoneEditorControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name: blockName, attributes, setAttributes } = props;
+
+		if ( ! isSupportedBlock( blockName ) ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		const instanceId = useInstanceId( BlockEdit );
+		const duotoneDark = parseColor( attributes.duotoneDark );
+		const duotoneLight = parseColor( attributes.duotoneLight );
+
+		useEffect( () => {
+			setAttributes( { duotoneId: `a8c-duotone-${ instanceId }` } );
+		}, [ instanceId ] );
+
+		return (
+			<>
+				<InspectorControls>
+					<PanelColorSettings
+						title={ __( 'Duotone', 'duotone' ) }
+						initialOpen
+						colorSettings={ [
+							{
+								label: __( 'Dark Color', 'duotone' ),
+								value: attributes.duotoneDark,
+								onChange: ( duotoneDark ) =>
+									setAttributes( { duotoneDark } ),
+							},
+							{
+								label: __( 'Light Color', 'duotone' ),
+								value: attributes.duotoneLight,
+								onChange: ( duotoneLight ) =>
+									setAttributes( { duotoneLight } ),
+							},
+						] }
+					/>
+				</InspectorControls>
+				<svg
+					xmlnsXlink="http://www.w3.org/1999/xlink"
+					style={ { display: 'none' } }
+				>
+					<defs>
+						<filter id={ attributes.duotoneId }>
+							<feColorMatrix
+								type="matrix"
+								// prettier-ignore
+								values="0.2989 0.5870 0.1140 0 0
+									        0.2989 0.5870 0.1140 0 0
+									        0.2989 0.5870 0.1140 0 0
+									        0      0      0      0 1"
+							/>
+							<feComponentTransfer colorInterpolationFilters="sRGB">
+								<feFuncR
+									type="table"
+									tableValues={ `${ duotoneDark.r } ${ duotoneLight.r }` }
+								/>
+								<feFuncG
+									type="table"
+									tableValues={ `${ duotoneDark.g } ${ duotoneLight.g }` }
+								/>
+								<feFuncB
+									type="table"
+									tableValues={ `${ duotoneDark.b } ${ duotoneLight.b }` }
+								/>
+							</feComponentTransfer>
+						</filter>
+					</defs>
+				</svg>
+				<div style={ { filter: `url( #${ attributes.duotoneId } )` } }>
+					<BlockEdit { ...props } />
+				</div>
+			</>
+		);
+	},
+	'withDuotoneEditorControls'
+);
+
+function addDuotoneFilterStyle( props, block, attributes ) {
+	if ( ! isSupportedBlock( block.name ) ) return props;
+	const { style = {} } = props;
+	return { style: { ...style, filter: `url( #${ attributes.duotoneId } )` } };
+}
+
+export function registerBlock() {
+	addFilter(
+		'editor.BlockEdit',
+		'a8c/duotone/with-editor-controls',
+		withDuotoneEditorControls
+	);
+	addFilter(
+		'blocks.registerBlockType',
+		'a8c/duotone/add-attributes',
+		withDuotoneAttributes
+	);
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'a8c/duotone/add-filter-style',
+		addDuotoneFilterStyle
+	);
+}
diff --git a/blocks/duotone/style.scss b/blocks/duotone/style.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/editor.scss b/editor.scss
index 8d1e8b76..d46d89a7 100644
--- a/editor.scss
+++ b/editor.scss
@@ -1,5 +1,6 @@
 // Import editor styles for blocks
 @import './blocks/bauhaus-centenary/editor.scss';
+@import './blocks/duotone/editor.scss';
 @import './blocks/event/editor.scss';
 @import './blocks/layout-grid/editor.scss';
 @import './blocks/motion-background/editor.scss';
diff --git a/src/index.js b/src/index.js
index 05f7fcd7..ec1aa745 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,6 +23,7 @@ setCategories( [
  * Load all our blocks
  */
 import * as bauhausCentenaryBlock from '../blocks/bauhaus-centenary/src';
+import * as duotoneBlock from '../blocks/duotone/src';
 import * as eventBlock from '../blocks/event/src';
 import * as layoutGridBlock from '../blocks/layout-grid/src';
 import * as motionBackgroundBlock from '../blocks/motion-background/src';
@@ -31,6 +32,7 @@ import * as wavesBlock from '../blocks/waves/src';
 
 // Instantiate the blocks, adding them to our block category
 bauhausCentenaryBlock.registerBlock();
+duotoneBlock.registerBlock();
 eventBlock.registerBlock();
 layoutGridBlock.registerBlock();
 motionBackgroundBlock.registerBlock();
diff --git a/style.scss b/style.scss
index 1a7ea171..dacffd07 100644
--- a/style.scss
+++ b/style.scss
@@ -1,5 +1,6 @@
 /* Import front end styles for blocks */
 @import './blocks/bauhaus-centenary/style.scss';
+@import './blocks/duotone/style.scss';
 @import './blocks/event/style.scss';
 @import './blocks/layout-grid/style.scss';
 @import './blocks/motion-background/style.scss';

From 7d9396e3acc7fc50a7af90cda1060d4843322a8f Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 5 May 2020 10:13:13 +0200
Subject: [PATCH 2/9] Fix the padding, somehow.

---
 blocks/duotone/src/index.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/blocks/duotone/src/index.js b/blocks/duotone/src/index.js
index 8d4ae184..7c5d6f8d 100644
--- a/blocks/duotone/src/index.js
+++ b/blocks/duotone/src/index.js
@@ -92,6 +92,9 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 					/>
 				</InspectorControls>
 				<svg
+					viewBox="0 0 10 10"
+					width="0"
+					height="0"
 					xmlnsXlink="http://www.w3.org/1999/xlink"
 					style={ { display: 'none' } }
 				>
@@ -100,10 +103,10 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 							<feColorMatrix
 								type="matrix"
 								// prettier-ignore
-								values="0.2989 0.5870 0.1140 0 0
-									        0.2989 0.5870 0.1140 0 0
-									        0.2989 0.5870 0.1140 0 0
-									        0      0      0      0 1"
+								values=".33 .33 .33 0 0
+									.33 .33 .33 0 0
+									.33 .33 .33 0 0
+									0 0 0 1 0"
 							/>
 							<feComponentTransfer colorInterpolationFilters="sRGB">
 								<feFuncR

From ff482f96eb79c744d5f136d9756ec6dd2dba32db Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 5 May 2020 10:21:26 +0200
Subject: [PATCH 3/9] Update serverside render also.

---
 blocks/duotone/index.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/blocks/duotone/index.php b/blocks/duotone/index.php
index f02ce716..4d5dc641 100644
--- a/blocks/duotone/index.php
+++ b/blocks/duotone/index.php
@@ -48,10 +48,10 @@ function hex2rgb( $color ) {
 		<filter id="$duotoneId">
 			<feColorMatrix
 				type="matrix"
-				values="0.2989 0.5870 0.1140 0 0
-				        0.2989 0.5870 0.1140 0 0
-				        0.2989 0.5870 0.1140 0 0
-						0      0      0      0 1"
+				values=".33 .33 .33 0 0
+					.33 .33 .33 0 0
+					.33 .33 .33 0 0
+					0 0 0 1 0"
 			/>
 			<feComponentTransfer color-interpolation-filters="sRGB">
 				<feFuncR type="table" tableValues="{$duotoneDark[ 'r' ]} {$duotoneLight[ 'r' ]}" />

From f6a7473e193cfe0115ace2797581b1bd869a0517 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 5 May 2020 10:39:53 +0200
Subject: [PATCH 4/9] Fix for Firefox.

---
 blocks/duotone/index.php    |  7 +++++--
 blocks/duotone/src/index.js | 12 ++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/blocks/duotone/index.php b/blocks/duotone/index.php
index 4d5dc641..2c2c9331 100644
--- a/blocks/duotone/index.php
+++ b/blocks/duotone/index.php
@@ -42,8 +42,11 @@ function hex2rgb( $color ) {
 		$duotone = <<<EOT
 <svg
 	xmlns:xlink="http://www.w3.org/1999/xlink"
-	style="display: none;"
->
+	style="visibility: hidden !important; position: absolute !important; left: -9999px !important; overflow: hidden !important;"
+	aria-hidden="true"
+	focusable="false"
+	role="none"
+	>
 	<defs>
 		<filter id="$duotoneId">
 			<feColorMatrix
diff --git a/blocks/duotone/src/index.js b/blocks/duotone/src/index.js
index 7c5d6f8d..2beb538e 100644
--- a/blocks/duotone/src/index.js
+++ b/blocks/duotone/src/index.js
@@ -92,11 +92,19 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 					/>
 				</InspectorControls>
 				<svg
-					viewBox="0 0 10 10"
+					viewBox="0 0 0 0"
 					width="0"
 					height="0"
 					xmlnsXlink="http://www.w3.org/1999/xlink"
-					style={ { display: 'none' } }
+					style={ {
+						visibility: 'hidden',
+						position: 'absolute',
+						left: '-9999px',
+						overflow: 'hidden',
+					} }
+					ariaHidden="true"
+					focusable="false"
+					role="none"
 				>
 					<defs>
 						<filter id={ attributes.duotoneId }>

From e1d8e6ce452aafffc62362b80814522fba7dbbf2 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Tue, 5 May 2020 13:00:18 -0500
Subject: [PATCH 5/9] Switch grayscale calculations

---
 blocks/duotone/index.php    | 8 ++++----
 blocks/duotone/src/index.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/blocks/duotone/index.php b/blocks/duotone/index.php
index 2c2c9331..37fc5c56 100644
--- a/blocks/duotone/index.php
+++ b/blocks/duotone/index.php
@@ -51,10 +51,10 @@ function hex2rgb( $color ) {
 		<filter id="$duotoneId">
 			<feColorMatrix
 				type="matrix"
-				values=".33 .33 .33 0 0
-					.33 .33 .33 0 0
-					.33 .33 .33 0 0
-					0 0 0 1 0"
+				values=".2989 .5870 .1140 0 0
+				        .2989 .5870 .1140 0 0
+				        .2989 .5870 .1140 0 0
+				        0 0 0 1 0"
 			/>
 			<feComponentTransfer color-interpolation-filters="sRGB">
 				<feFuncR type="table" tableValues="{$duotoneDark[ 'r' ]} {$duotoneLight[ 'r' ]}" />
diff --git a/blocks/duotone/src/index.js b/blocks/duotone/src/index.js
index 2beb538e..22ce9055 100644
--- a/blocks/duotone/src/index.js
+++ b/blocks/duotone/src/index.js
@@ -111,10 +111,10 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 							<feColorMatrix
 								type="matrix"
 								// prettier-ignore
-								values=".33 .33 .33 0 0
-									.33 .33 .33 0 0
-									.33 .33 .33 0 0
-									0 0 0 1 0"
+								values=".2989 .5870 .1140 0 0
+								        .2989 .5870 .1140 0 0
+								        .2989 .5870 .1140 0 0
+								        0 0 0 1 0"
 							/>
 							<feComponentTransfer colorInterpolationFilters="sRGB">
 								<feFuncR

From 930da5ca89ecea2fe3418638733dd922dd393b0a Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Sun, 24 May 2020 16:56:57 -0600
Subject: [PATCH 6/9] code style

---
 blocks/duotone/index.php | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/blocks/duotone/index.php b/blocks/duotone/index.php
index 37fc5c56..f9e98c77 100644
--- a/blocks/duotone/index.php
+++ b/blocks/duotone/index.php
@@ -9,16 +9,16 @@
 
 	function is_supported_block( $block ) {
 		$supported_blocks = [ 'core/image', 'core/cover' ];
-		return in_array( $block[ 'blockName' ], $supported_blocks );
+		return in_array( $block['blockName'], $supported_blocks );
 	}
 
 	function hex2rgb( $color ) {
 		$color = trim( $color, '#' );
-		if ( strlen( $color ) == 3 ) {
+		if ( strlen( $color ) === 3 ) {
 			$r = hexdec( substr( $color, 0, 1 ) . substr( $color, 0, 1 ) );
 			$g = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
 			$b = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
-		} elseif ( strlen( $color ) == 6 ) {
+		} elseif ( strlen( $color ) === 6 ) {
 			$r = hexdec( substr( $color, 0, 2 ) );
 			$g = hexdec( substr( $color, 2, 2 ) );
 			$b = hexdec( substr( $color, 4, 2 ) );
@@ -32,13 +32,14 @@ function hex2rgb( $color ) {
 		);
 	}
 
-	add_filter( 'render_block', function( $block_content, $block ) {
+	add_filter( 'render_block', function ( $block_content, $block ) {
 		if ( ! is_supported_block( $block ) ) {
 			return $block_content;
 		}
-		$duotoneId = $block[ 'attrs' ][ 'duotoneId' ];
-		$duotoneDark = hex2rgb( $block[ 'attrs' ][ 'duotoneDark' ] );
-		$duotoneLight = hex2rgb( $block[ 'attrs' ][ 'duotoneLight' ] );
+
+		$duotone_id = $block['attrs']['duotoneId'];
+		$duotone_dark = hex2rgb( $block['attrs']['duotoneDark'] );
+		$duotone_light = hex2rgb( $block['attrs']['duotoneLight'] );
 		$duotone = <<<EOT
 <svg
 	xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -48,7 +49,7 @@ function hex2rgb( $color ) {
 	role="none"
 	>
 	<defs>
-		<filter id="$duotoneId">
+		<filter id="$duotone_id">
 			<feColorMatrix
 				type="matrix"
 				values=".2989 .5870 .1140 0 0
@@ -57,9 +58,9 @@ function hex2rgb( $color ) {
 				        0 0 0 1 0"
 			/>
 			<feComponentTransfer color-interpolation-filters="sRGB">
-				<feFuncR type="table" tableValues="{$duotoneDark[ 'r' ]} {$duotoneLight[ 'r' ]}" />
-				<feFuncG type="table" tableValues="{$duotoneDark[ 'g' ]} {$duotoneLight[ 'g' ]}" />
-				<feFuncB type="table" tableValues="{$duotoneDark[ 'b' ]} {$duotoneLight[ 'b' ]}" />
+				<feFuncR type="table" tableValues="{$duotone_dark['r']} {$duotone_light['r']}" />
+				<feFuncG type="table" tableValues="{$duotone_dark['g']} {$duotone_light['g']}" />
+				<feFuncB type="table" tableValues="{$duotone_dark['b']} {$duotone_light['b']}" />
 			</feComponentTransfer>
 		</filter>
 	</defs>

From 117b7a0644d32571d6acb12239ef0acfd4eedc64 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Mon, 31 Aug 2020 21:04:54 -0500
Subject: [PATCH 7/9] Move duotone to duotone-filter

---
 blocks/{duotone => duotone-filter}/editor.scss  |  0
 blocks/{duotone => duotone-filter}/filter.svg   |  0
 blocks/{duotone => duotone-filter}/index.php    |  2 +-
 blocks/{duotone => duotone-filter}/src/index.js | 16 +++++++++-------
 blocks/{duotone => duotone-filter}/style.scss   |  0
 editor.scss                                     |  2 +-
 src/index.js                                    |  4 ++--
 style.scss                                      |  2 +-
 8 files changed, 14 insertions(+), 12 deletions(-)
 rename blocks/{duotone => duotone-filter}/editor.scss (100%)
 rename blocks/{duotone => duotone-filter}/filter.svg (100%)
 rename blocks/{duotone => duotone-filter}/index.php (97%)
 rename blocks/{duotone => duotone-filter}/src/index.js (91%)
 rename blocks/{duotone => duotone-filter}/style.scss (100%)

diff --git a/blocks/duotone/editor.scss b/blocks/duotone-filter/editor.scss
similarity index 100%
rename from blocks/duotone/editor.scss
rename to blocks/duotone-filter/editor.scss
diff --git a/blocks/duotone/filter.svg b/blocks/duotone-filter/filter.svg
similarity index 100%
rename from blocks/duotone/filter.svg
rename to blocks/duotone-filter/filter.svg
diff --git a/blocks/duotone/index.php b/blocks/duotone-filter/index.php
similarity index 97%
rename from blocks/duotone/index.php
rename to blocks/duotone-filter/index.php
index f9e98c77..47a3e9d4 100644
--- a/blocks/duotone/index.php
+++ b/blocks/duotone-filter/index.php
@@ -1,7 +1,7 @@
 <?php
 
 add_action( 'init', function() {
-	register_block_type( 'a8c/duotone', [
+	register_block_type( 'a8c/duotone-filter', [
 		'editor_script' => 'block-experiments',
 		'style' => 'block-experiments',
 		'editor_style' => 'block-experiments-editor',
diff --git a/blocks/duotone/src/index.js b/blocks/duotone-filter/src/index.js
similarity index 91%
rename from blocks/duotone/src/index.js
rename to blocks/duotone-filter/src/index.js
index 22ce9055..22d09b0e 100644
--- a/blocks/duotone/src/index.js
+++ b/blocks/duotone-filter/src/index.js
@@ -66,24 +66,26 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 		const duotoneLight = parseColor( attributes.duotoneLight );
 
 		useEffect( () => {
-			setAttributes( { duotoneId: `a8c-duotone-${ instanceId }` } );
+			setAttributes( {
+				duotoneId: `a8c-duotone-filter-${ instanceId }`,
+			} );
 		}, [ instanceId ] );
 
 		return (
 			<>
 				<InspectorControls>
 					<PanelColorSettings
-						title={ __( 'Duotone', 'duotone' ) }
+						title={ __( 'Duotone', 'block-experiments' ) }
 						initialOpen
 						colorSettings={ [
 							{
-								label: __( 'Dark Color', 'duotone' ),
+								label: __( 'Dark Color', 'block-experiments' ),
 								value: attributes.duotoneDark,
 								onChange: ( duotoneDark ) =>
 									setAttributes( { duotoneDark } ),
 							},
 							{
-								label: __( 'Light Color', 'duotone' ),
+								label: __( 'Light Color', 'block-experiments' ),
 								value: attributes.duotoneLight,
 								onChange: ( duotoneLight ) =>
 									setAttributes( { duotoneLight } ),
@@ -151,17 +153,17 @@ function addDuotoneFilterStyle( props, block, attributes ) {
 export function registerBlock() {
 	addFilter(
 		'editor.BlockEdit',
-		'a8c/duotone/with-editor-controls',
+		'a8c/duotone-filter/with-editor-controls',
 		withDuotoneEditorControls
 	);
 	addFilter(
 		'blocks.registerBlockType',
-		'a8c/duotone/add-attributes',
+		'a8c/duotone-filter/add-attributes',
 		withDuotoneAttributes
 	);
 	addFilter(
 		'blocks.getSaveContent.extraProps',
-		'a8c/duotone/add-filter-style',
+		'a8c/duotone-filter/add-filter-style',
 		addDuotoneFilterStyle
 	);
 }
diff --git a/blocks/duotone/style.scss b/blocks/duotone-filter/style.scss
similarity index 100%
rename from blocks/duotone/style.scss
rename to blocks/duotone-filter/style.scss
diff --git a/editor.scss b/editor.scss
index d46d89a7..70cd4b8e 100644
--- a/editor.scss
+++ b/editor.scss
@@ -1,6 +1,6 @@
 // Import editor styles for blocks
 @import './blocks/bauhaus-centenary/editor.scss';
-@import './blocks/duotone/editor.scss';
+@import './blocks/duotone-filter/editor.scss';
 @import './blocks/event/editor.scss';
 @import './blocks/layout-grid/editor.scss';
 @import './blocks/motion-background/editor.scss';
diff --git a/src/index.js b/src/index.js
index ec1aa745..eaa06420 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,7 +23,7 @@ setCategories( [
  * Load all our blocks
  */
 import * as bauhausCentenaryBlock from '../blocks/bauhaus-centenary/src';
-import * as duotoneBlock from '../blocks/duotone/src';
+import * as duotoneFilter from '../blocks/duotone-filter/src';
 import * as eventBlock from '../blocks/event/src';
 import * as layoutGridBlock from '../blocks/layout-grid/src';
 import * as motionBackgroundBlock from '../blocks/motion-background/src';
@@ -32,7 +32,7 @@ import * as wavesBlock from '../blocks/waves/src';
 
 // Instantiate the blocks, adding them to our block category
 bauhausCentenaryBlock.registerBlock();
-duotoneBlock.registerBlock();
+duotoneFilter.registerBlock();
 eventBlock.registerBlock();
 layoutGridBlock.registerBlock();
 motionBackgroundBlock.registerBlock();
diff --git a/style.scss b/style.scss
index dacffd07..796f2373 100644
--- a/style.scss
+++ b/style.scss
@@ -1,6 +1,6 @@
 /* Import front end styles for blocks */
 @import './blocks/bauhaus-centenary/style.scss';
-@import './blocks/duotone/style.scss';
+@import './blocks/duotone-filter/style.scss';
 @import './blocks/event/style.scss';
 @import './blocks/layout-grid/style.scss';
 @import './blocks/motion-background/style.scss';

From a2e50b26f690678f8c09fb76a821c404dc668451 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Tue, 1 Sep 2020 13:25:05 -0500
Subject: [PATCH 8/9] Code cleanup

---
 blocks/duotone-filter/duotone.php    |  58 +++++++++++++++
 blocks/duotone-filter/editor.scss    |   0
 blocks/duotone-filter/filter.svg     |  18 -----
 blocks/duotone-filter/index.php      |  64 +++-------------
 blocks/duotone-filter/src/duotone.js |  79 ++++++++++++++++++++
 blocks/duotone-filter/src/index.js   | 105 +++++++++------------------
 blocks/duotone-filter/style.scss     |   0
 editor.scss                          |   1 -
 style.scss                           |   1 -
 9 files changed, 183 insertions(+), 143 deletions(-)
 create mode 100644 blocks/duotone-filter/duotone.php
 delete mode 100644 blocks/duotone-filter/editor.scss
 delete mode 100644 blocks/duotone-filter/filter.svg
 create mode 100644 blocks/duotone-filter/src/duotone.js
 delete mode 100644 blocks/duotone-filter/style.scss

diff --git a/blocks/duotone-filter/duotone.php b/blocks/duotone-filter/duotone.php
new file mode 100644
index 00000000..a2a9b85e
--- /dev/null
+++ b/blocks/duotone-filter/duotone.php
@@ -0,0 +1,58 @@
+<?php
+
+function hex2rgb( $color ) {
+	if ( strlen( $color ) === 4 ) {
+		$r = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
+		$g = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
+		$b = hexdec( substr( $color, 3, 1 ) . substr( $color, 3, 1 ) );
+	} elseif ( strlen( $color ) === 7 ) {
+		$r = hexdec( substr( $color, 1, 2 ) );
+		$g = hexdec( substr( $color, 3, 2 ) );
+		$b = hexdec( substr( $color, 5, 2 ) );
+	} else {
+		return array();
+	}
+
+	return array(
+		'r' => $r / 0xff,
+		'g' => $g / 0xff,
+		'b' => $b / 0xff,
+	);
+}
+
+// phpcs:disable
+$duotone_id = $block['attrs']['duotoneId'];
+$duotone_dark = hex2rgb( $block['attrs']['duotoneDark'] );
+$duotone_light = hex2rgb( $block['attrs']['duotoneLight'] );
+// phpcs:enable
+
+?>
+
+<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 !important; position: absolute !important; left: -9999px !important; overflow: hidden !important;"
+>
+	<defs>
+		<filter id="<?php echo $duotone_id; ?>">
+			<feColorMatrix
+				type="matrix"
+				<?php // phpcs:disable ?>
+				values=".2989 .5870 .1140 0 0
+				        .2989 .5870 .1140 0 0
+				        .2989 .5870 .1140 0 0
+				        0 0 0 1 0"
+				<?php // phpcs:enable ?>
+			/>
+			<feComponentTransfer color-interpolation-filters="sRGB">
+				<feFuncR type="table" tableValues="<?php echo $duotone_dark['r']; ?> <?php echo $duotone_light['r']; ?>" />
+				<feFuncG type="table" tableValues="<?php echo $duotone_dark['g']; ?> <?php echo $duotone_light['g']; ?>" />
+				<feFuncB type="table" tableValues="<?php echo $duotone_dark['b']; ?> <?php echo $duotone_light['b']; ?>" />
+			</feComponentTransfer>
+		</filter>
+	</defs>
+</svg>
diff --git a/blocks/duotone-filter/editor.scss b/blocks/duotone-filter/editor.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/blocks/duotone-filter/filter.svg b/blocks/duotone-filter/filter.svg
deleted file mode 100644
index 85fa10f8..00000000
--- a/blocks/duotone-filter/filter.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink">
-	<defs>
-		<filter id="duotone2">
-			<feColorMatrix
-				type="matrix"
-				values=".2989 .5870 .1140 0 0
-				        .2989 .5870 .1140 0 0
-				        .2989 .5870 .1140 0 0
-						0 0 0 1 0"
-			/>
-			<feComponentTransfer color-interpolation-filters="sRGB">
-				<feFuncR type="table" tableValues=".996078431  .984313725" />
-				<feFuncG type="table" tableValues=".125490196  .941176471" />
-				<feFuncB type="table" tableValues=".552941176  .478431373" />
-			</feComponentTransfer>
-		</filter>
-	</defs>
-</svg>
diff --git a/blocks/duotone-filter/index.php b/blocks/duotone-filter/index.php
index 47a3e9d4..fe5dcd7c 100644
--- a/blocks/duotone-filter/index.php
+++ b/blocks/duotone-filter/index.php
@@ -9,63 +9,23 @@
 
 	function is_supported_block( $block ) {
 		$supported_blocks = [ 'core/image', 'core/cover' ];
-		return in_array( $block['blockName'], $supported_blocks );
-	}
-
-	function hex2rgb( $color ) {
-		$color = trim( $color, '#' );
-		if ( strlen( $color ) === 3 ) {
-			$r = hexdec( substr( $color, 0, 1 ) . substr( $color, 0, 1 ) );
-			$g = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
-			$b = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
-		} elseif ( strlen( $color ) === 6 ) {
-			$r = hexdec( substr( $color, 0, 2 ) );
-			$g = hexdec( substr( $color, 2, 2 ) );
-			$b = hexdec( substr( $color, 4, 2 ) );
-		} else {
-			return array();
-		}
-		return array(
-			'r' => $r / 255,
-			'g' => $g / 255,
-			'b' => $b / 255,
-		);
+		return in_array( $block['blockName'], $supported_blocks, true );
 	}
 
 	add_filter( 'render_block', function ( $block_content, $block ) {
-		if ( ! is_supported_block( $block ) ) {
+		if (
+			! is_supported_block( $block ) ||
+			! array_key_exists( 'duotoneId', $block['attrs'] ) ||
+			! array_key_exists( 'duotoneDark', $block['attrs'] ) ||
+			! array_key_exists( 'duotoneLight', $block['attrs'] )
+		) {
 			return $block_content;
 		}
 
-		$duotone_id = $block['attrs']['duotoneId'];
-		$duotone_dark = hex2rgb( $block['attrs']['duotoneDark'] );
-		$duotone_light = hex2rgb( $block['attrs']['duotoneLight'] );
-		$duotone = <<<EOT
-<svg
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	style="visibility: hidden !important; position: absolute !important; left: -9999px !important; overflow: hidden !important;"
-	aria-hidden="true"
-	focusable="false"
-	role="none"
-	>
-	<defs>
-		<filter id="$duotone_id">
-			<feColorMatrix
-				type="matrix"
-				values=".2989 .5870 .1140 0 0
-				        .2989 .5870 .1140 0 0
-				        .2989 .5870 .1140 0 0
-				        0 0 0 1 0"
-			/>
-			<feComponentTransfer color-interpolation-filters="sRGB">
-				<feFuncR type="table" tableValues="{$duotone_dark['r']} {$duotone_light['r']}" />
-				<feFuncG type="table" tableValues="{$duotone_dark['g']} {$duotone_light['g']}" />
-				<feFuncB type="table" tableValues="{$duotone_dark['b']} {$duotone_light['b']}" />
-			</feComponentTransfer>
-		</filter>
-	</defs>
-</svg>
-EOT; 
-		return $block_content . $duotone;
+		ob_start();
+		include 'duotone.php';
+		$duotone = ob_get_clean();
+
+		return $duotone . $block_content;
 	}, 10, 2 );
 } );
diff --git a/blocks/duotone-filter/src/duotone.js b/blocks/duotone-filter/src/duotone.js
new file mode 100644
index 00000000..7688acfb
--- /dev/null
+++ b/blocks/duotone-filter/src/duotone.js
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+const hex2rgb = ( color = '' ) => {
+	let r = '0';
+	let g = '0';
+	let b = '0';
+
+	if ( color.length === 4 ) {
+		r = '0x' + color[ 1 ] + color[ 1 ];
+		g = '0x' + color[ 2 ] + color[ 2 ];
+		b = '0x' + color[ 3 ] + color[ 3 ];
+	} else if ( color.length === 7 ) {
+		r = '0x' + color[ 1 ] + color[ 2 ];
+		g = '0x' + color[ 3 ] + color[ 4 ];
+		b = '0x' + color[ 5 ] + color[ 6 ];
+	} else {
+		return {};
+	}
+
+	return {
+		r: r / 0xff,
+		g: g / 0xff,
+		b: b / 0xff,
+	};
+};
+
+function Duotone( { id: duotoneId, darkColor, lightColor } ) {
+	const duotoneDark = hex2rgb( darkColor );
+	const duotoneLight = hex2rgb( lightColor );
+
+	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={ duotoneId }>
+					<feColorMatrix
+						type="matrix"
+						// prettier-ignore
+						values=".2989 .5870 .1140 0 0
+						        .2989 .5870 .1140 0 0
+						        .2989 .5870 .1140 0 0
+						        0 0 0 1 0"
+					/>
+					<feComponentTransfer colorInterpolationFilters="sRGB">
+						<feFuncR
+							type="table"
+							tableValues={ `${ duotoneDark.r } ${ duotoneLight.r }` }
+						/>
+						<feFuncG
+							type="table"
+							tableValues={ `${ duotoneDark.g } ${ duotoneLight.g }` }
+						/>
+						<feFuncB
+							type="table"
+							tableValues={ `${ duotoneDark.b } ${ duotoneLight.b }` }
+						/>
+					</feComponentTransfer>
+				</filter>
+			</defs>
+		</SVG>
+	);
+}
+
+export default Duotone;
diff --git a/blocks/duotone-filter/src/index.js b/blocks/duotone-filter/src/index.js
index 22d09b0e..b0b432e5 100644
--- a/blocks/duotone-filter/src/index.js
+++ b/blocks/duotone-filter/src/index.js
@@ -7,35 +7,16 @@ import { useEffect } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import Duotone from './duotone';
+
 const SUPPORTED_BLOCKS = [ 'core/image', 'core/cover' ];
 
 export const isSupportedBlock = ( blockName ) =>
 	SUPPORTED_BLOCKS.includes( blockName );
 
-const parseColor = ( color ) => {
-	if ( ! color ) return {};
-
-	let r = '0';
-	let g = '0';
-	let b = '0';
-
-	if ( color.length === 7 ) {
-		r = '0x' + color[ 1 ] + color[ 2 ];
-		g = '0x' + color[ 3 ] + color[ 4 ];
-		b = '0x' + color[ 5 ] + color[ 6 ];
-	} else if ( color.length === 4 ) {
-		r = '0x' + color[ 1 ] + color[ 1 ];
-		g = '0x' + color[ 2 ] + color[ 2 ];
-		b = '0x' + color[ 3 ] + color[ 3 ];
-	}
-
-	return {
-		r: r / 0xff,
-		g: g / 0xff,
-		b: b / 0xff,
-	};
-};
-
 const withDuotoneAttributes = ( settings, blockName ) => {
 	if ( isSupportedBlock( blockName ) ) {
 		Object.assign( settings.attributes, {
@@ -62,8 +43,6 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 		}
 
 		const instanceId = useInstanceId( BlockEdit );
-		const duotoneDark = parseColor( attributes.duotoneDark );
-		const duotoneLight = parseColor( attributes.duotoneLight );
 
 		useEffect( () => {
 			setAttributes( {
@@ -93,51 +72,26 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 						] }
 					/>
 				</InspectorControls>
-				<svg
-					viewBox="0 0 0 0"
-					width="0"
-					height="0"
-					xmlnsXlink="http://www.w3.org/1999/xlink"
-					style={ {
-						visibility: 'hidden',
-						position: 'absolute',
-						left: '-9999px',
-						overflow: 'hidden',
-					} }
-					ariaHidden="true"
-					focusable="false"
-					role="none"
-				>
-					<defs>
-						<filter id={ attributes.duotoneId }>
-							<feColorMatrix
-								type="matrix"
-								// prettier-ignore
-								values=".2989 .5870 .1140 0 0
-								        .2989 .5870 .1140 0 0
-								        .2989 .5870 .1140 0 0
-								        0 0 0 1 0"
-							/>
-							<feComponentTransfer colorInterpolationFilters="sRGB">
-								<feFuncR
-									type="table"
-									tableValues={ `${ duotoneDark.r } ${ duotoneLight.r }` }
-								/>
-								<feFuncG
-									type="table"
-									tableValues={ `${ duotoneDark.g } ${ duotoneLight.g }` }
-								/>
-								<feFuncB
-									type="table"
-									tableValues={ `${ duotoneDark.b } ${ duotoneLight.b }` }
-								/>
-							</feComponentTransfer>
-						</filter>
-					</defs>
-				</svg>
-				<div style={ { filter: `url( #${ attributes.duotoneId } )` } }>
+				{ attributes.duotoneDark &&
+				attributes.duotoneLight &&
+				attributes.duotoneId ? (
+					<>
+						<Duotone
+							id={ attributes.duotoneId }
+							darkColor={ attributes.duotoneDark }
+							lightColor={ attributes.duotoneLight }
+						/>
+						<div
+							style={ {
+								filter: `url( #${ attributes.duotoneId } )`,
+							} }
+						>
+							<BlockEdit { ...props } />
+						</div>
+					</>
+				) : (
 					<BlockEdit { ...props } />
-				</div>
+				) }
 			</>
 		);
 	},
@@ -145,8 +99,17 @@ const withDuotoneEditorControls = createHigherOrderComponent(
 );
 
 function addDuotoneFilterStyle( props, block, attributes ) {
-	if ( ! isSupportedBlock( block.name ) ) return props;
+	if (
+		! isSupportedBlock( block.name ) ||
+		! attributes.duotoneDark ||
+		! attributes.duotoneLight ||
+		! attributes.duotoneId
+	) {
+		return props;
+	}
+
 	const { style = {} } = props;
+
 	return { style: { ...style, filter: `url( #${ attributes.duotoneId } )` } };
 }
 
diff --git a/blocks/duotone-filter/style.scss b/blocks/duotone-filter/style.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/editor.scss b/editor.scss
index 70cd4b8e..8d1e8b76 100644
--- a/editor.scss
+++ b/editor.scss
@@ -1,6 +1,5 @@
 // Import editor styles for blocks
 @import './blocks/bauhaus-centenary/editor.scss';
-@import './blocks/duotone-filter/editor.scss';
 @import './blocks/event/editor.scss';
 @import './blocks/layout-grid/editor.scss';
 @import './blocks/motion-background/editor.scss';
diff --git a/style.scss b/style.scss
index 796f2373..1a7ea171 100644
--- a/style.scss
+++ b/style.scss
@@ -1,6 +1,5 @@
 /* Import front end styles for blocks */
 @import './blocks/bauhaus-centenary/style.scss';
-@import './blocks/duotone-filter/style.scss';
 @import './blocks/event/style.scss';
 @import './blocks/layout-grid/style.scss';
 @import './blocks/motion-background/style.scss';

From eac78e139e82b344edddb3507ca1deba5aeab318 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Tue, 1 Sep 2020 15:46:04 -0500
Subject: [PATCH 9/9] Fix redeclare hex2rgb function

---
 blocks/duotone-filter/duotone.php | 36 ++++++++++++++++---------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/blocks/duotone-filter/duotone.php b/blocks/duotone-filter/duotone.php
index a2a9b85e..68390c77 100644
--- a/blocks/duotone-filter/duotone.php
+++ b/blocks/duotone-filter/duotone.php
@@ -1,23 +1,25 @@
 <?php
 
-function hex2rgb( $color ) {
-	if ( strlen( $color ) === 4 ) {
-		$r = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
-		$g = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
-		$b = hexdec( substr( $color, 3, 1 ) . substr( $color, 3, 1 ) );
-	} elseif ( strlen( $color ) === 7 ) {
-		$r = hexdec( substr( $color, 1, 2 ) );
-		$g = hexdec( substr( $color, 3, 2 ) );
-		$b = hexdec( substr( $color, 5, 2 ) );
-	} else {
-		return array();
-	}
+if ( ! function_exists( 'hex2rgb' ) ) {
+	function hex2rgb( $color ) {
+		if ( strlen( $color ) === 4 ) {
+			$r = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
+			$g = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
+			$b = hexdec( substr( $color, 3, 1 ) . substr( $color, 3, 1 ) );
+		} elseif ( strlen( $color ) === 7 ) {
+			$r = hexdec( substr( $color, 1, 2 ) );
+			$g = hexdec( substr( $color, 3, 2 ) );
+			$b = hexdec( substr( $color, 5, 2 ) );
+		} else {
+			return array();
+		}
 
-	return array(
-		'r' => $r / 0xff,
-		'g' => $g / 0xff,
-		'b' => $b / 0xff,
-	);
+		return array(
+			'r' => $r / 0xff,
+			'g' => $g / 0xff,
+			'b' => $b / 0xff,
+		);
+	}
 }
 
 // phpcs:disable