Code cleanup

Automattic · Sep 1, 2020 · 366df38 · 366df38
1 parent 117b7a0
commit 366df38
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 112 deletions.
diff --git a/blocks/duotone-filter/duotone.php b/blocks/duotone-filter/duotone.php
@@ -0,0 +1,24 @@
+<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="<?php echo $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="<?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/filter.svg b/blocks/duotone-filter/filter.svg
diff --git a/blocks/duotone-filter/index.php b/blocks/duotone-filter/index.php
@@ -40,32 +40,11 @@ function hex2rgb( $color ) {
 		$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; 
+
+		ob_start();
+		include 'duotone.php';
+		$duotone = ob_get_clean();
+
 		return $block_content . $duotone;
 	}, 10, 2 );
 } );
diff --git a/blocks/duotone-filter/src/duotone.js b/blocks/duotone-filter/src/duotone.js
@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/components';
+
+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,
+	};
+};
+
+function Duotone( { id: duotoneId, darkColor, lightColor } ) {
+	const duotoneDark = parseColor( darkColor );
+	const duotoneLight = parseColor( lightColor );
+
+	return (
+		<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={ 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
@@ -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,48 +72,11 @@ 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>
+				<Duotone
+					id={ attributes.duotoneId }
+					darkColor={ attributes.duotoneDark }
+					lightColor={ attributes.duotoneLight }
+				/>
 				<div style={ { filter: `url( #${ attributes.duotoneId } )` } }>
 					<BlockEdit { ...props } />
 				</div>