From a49344372a24af21b9a111a8346f37ae620a3533 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Tue, 25 Jan 2022 16:35:25 -0600
Subject: [PATCH] Try rendering SVGs from server

---
 lib/full-site-editing/edit-site-page.php      |  10 +
 packages/block-editor/src/hooks/duotone.js    | 174 +++++++-----------
 .../block-editor/resizable-editor.js          |   6 +-
 .../editor/global-styles-renderer.js          |   3 +-
 .../global-styles/use-global-styles-output.js |  34 +---
 .../src/components/global-styles/utils.js     |   1 -
 6 files changed, 79 insertions(+), 149 deletions(-)

diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php
index 076beff97f12d6..3418054f12b9aa 100644
--- a/lib/full-site-editing/edit-site-page.php
+++ b/lib/full-site-editing/edit-site-page.php
@@ -165,6 +165,16 @@ static function( $classes ) {
 		)
 	);
 
+	add_action(
+		'admin_head',
+		function() {
+			$filters = wp_get_global_styles_svg_filters();
+			if ( ! empty( $filters ) ) {
+				printf( '<script>window._wpSvgFilters = %s</script>', wp_json_encode( $filters ) );
+			}
+		}
+	);
+
 	wp_add_inline_script(
 		'wp-blocks',
 		sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( $post ) ) ),
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index dafd92020da377..13de8f2a4d79ac 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -60,109 +60,82 @@ export function getValuesFromColors( colors = [] ) {
  */
 
 /**
- * Stylesheet for rendering the duotone filter.
+ * 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, B, and A values to filter with.
  *
  * @return {WPElement} Duotone element.
  */
-function DuotoneStylesheet( { selector, id } ) {
-	const css = `
+function DuotoneFilter( { selector, id, values } ) {
+	const stylesheet = `
 ${ selector } {
 	filter: url( #${ id } );
 }
 `;
-	return <style>{ css }</style>;
-}
 
-/**
- * SVG for rendering the duotone filter.
- *
- * @param {Object} props        Duotone props.
- * @param {string} props.id     Unique id for this duotone filter.
- * @param {Values} props.values R, G, B, and A values to filter with.
- *
- * @return {WPElement} Duotone element.
- */
-function DuotoneFilter( { id, values } ) {
 	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
-						// Use sRGB instead of linearRGB so transparency looks correct.
-						colorInterpolationFilters="sRGB"
-						type="matrix"
-						// Use perceptual brightness to convert to grayscale.
-						values="
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-							.299 .587 .114 0 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( ' ' ) }
+		<>
+			<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
+							// Use sRGB instead of linearRGB so transparency looks correct.
+							colorInterpolationFilters="sRGB"
+							type="matrix"
+							// Use perceptual brightness to convert to grayscale.
+							values="
+								.299 .587 .114 0 0
+								.299 .587 .114 0 0
+								.299 .587 .114 0 0
+								.299 .587 .114 0 0
+							"
 						/>
-						<feFuncA
-							type="table"
-							tableValues={ values.a.join( ' ' ) }
+						<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( ' ' ) }
+							/>
+							<feFuncA
+								type="table"
+								tableValues={ values.a.join( ' ' ) }
+							/>
+						</feComponentTransfer>
+						<feComposite
+							// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
+							in2="SourceGraphic"
+							operator="in"
 						/>
-					</feComponentTransfer>
-					<feComposite
-						// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
-						in2="SourceGraphic"
-						operator="in"
-					/>
-				</filter>
-			</defs>
-		</SVG>
-	);
-}
-
-/**
- * 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, B, and A values to filter with.
- *
- * @return {WPElement} Duotone element.
- */
-function InlineDuotone( { selector, id, values } ) {
-	return (
-		<>
-			<DuotoneFilter id={ id } values={ values } />
-			<DuotoneStylesheet id={ id } selector={ selector } />
+					</filter>
+				</defs>
+			</SVG>
+			<style dangerouslySetInnerHTML={ { __html: stylesheet } } />
 		</>
 	);
 }
@@ -324,7 +297,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 			<>
 				{ element &&
 					createPortal(
-						<InlineDuotone
+						<DuotoneFilter
 							selector={ selectorsGroup }
 							id={ id }
 							values={ getValuesFromColors( values ) }
@@ -338,24 +311,6 @@ const withDuotoneStyles = createHigherOrderComponent(
 	'withDuotoneStyles'
 );
 
-const withDuotoneFilter = createHigherOrderComponent(
-	( PresetSvgFilter ) => ( { metadata, preset } ) => {
-		if ( metadata.svgFilter !== 'duotone' ) {
-			return <PresetSvgFilter />;
-		}
-		return (
-			<>
-				<PresetSvgFilter />
-				<DuotoneFilter
-					id={ `wp-duotone-${ preset.slug }` }
-					values={ getValuesFromColors( preset.colors ) }
-				/>
-			</>
-		);
-	},
-	'withDuotoneFilter'
-);
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',
@@ -371,8 +326,3 @@ addFilter(
 	'core/editor/duotone/with-styles',
 	withDuotoneStyles
 );
-addFilter(
-	'editor.PresetSvgFilter',
-	'core/editor/duotone/with-svg-filter',
-	withDuotoneFilter
-);
diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js
index c2c27f0dade01b..71500b26914e5e 100644
--- a/packages/edit-site/src/components/block-editor/resizable-editor.js
+++ b/packages/edit-site/src/components/block-editor/resizable-editor.js
@@ -183,7 +183,11 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				className="edit-site-visual-editor__editor-canvas"
 				{ ...props }
 			>
-				{ settings.svgFilters }
+				<span
+					dangerouslySetInnerHTML={ {
+						__html: window._wpSvgFilters,
+					} }
+				/>
 				{ children }
 			</Iframe>
 		</ResizableBox>
diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js
index dec35703dfcdf7..f046cf7d464094 100644
--- a/packages/edit-site/src/components/editor/global-styles-renderer.js
+++ b/packages/edit-site/src/components/editor/global-styles-renderer.js
@@ -15,7 +15,7 @@ import { store as editSiteStore } from '../../store';
 import { useGlobalStylesOutput } from '../global-styles/use-global-styles-output';
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
+	const [ styles, settings ] = useGlobalStylesOutput();
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -31,7 +31,6 @@ function useGlobalStylesRenderer() {
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],
-			svgFilters,
 			__experimentalFeatures: settings,
 		} );
 	}, [ styles, settings ] );
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index ba671ae29b2285..96ec67eaa76530 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -22,7 +22,6 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 	getBlockTypes,
 } from '@wordpress/blocks';
-import { withFilters } from '@wordpress/components';
 import { useEffect, useState, useContext } from '@wordpress/element';
 
 /**
@@ -134,27 +133,6 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
 	);
 }
 
-const PresetSvgFilter = withFilters( 'editor.PresetSvgFilter' )( () => null );
-
-function getPresetsSvgFilters( blockPresets = {} ) {
-	return PRESET_METADATA.filter( ( metadata ) => metadata.svgFilter ).flatMap(
-		( metadata ) => {
-			const presetByOrigin = get( blockPresets, metadata.path, {} );
-			return [ 'default', 'theme' ]
-				.filter( ( origin ) => presetByOrigin[ origin ] )
-				.flatMap( ( origin ) =>
-					presetByOrigin[ origin ].map( ( preset ) => (
-						<PresetSvgFilter
-							metadata={ metadata }
-							preset={ preset }
-							key={ preset.slug }
-						/>
-					) )
-				);
-		}
-	);
-}
-
 function flattenTree( input = {}, prefix, token ) {
 	let result = [];
 	Object.keys( input ).forEach( ( key ) => {
@@ -377,13 +355,6 @@ export const toStyles = ( tree, blockSelectors ) => {
 	return ruleset;
 };
 
-export function toSvgFilters( tree, blockSelectors ) {
-	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
-	return nodesWithSettings.flatMap( ( { presets } ) => {
-		return getPresetsSvgFilters( presets );
-	} );
-}
-
 const getBlockSelectors = ( blockTypes ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
@@ -403,7 +374,6 @@ const getBlockSelectors = ( blockTypes ) => {
 export function useGlobalStylesOutput() {
 	const [ stylesheets, setStylesheets ] = useState( [] );
 	const [ settings, setSettings ] = useState( {} );
-	const [ svgFilters, setSvgFilters ] = useState( {} );
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 
 	useEffect( () => {
@@ -417,7 +387,6 @@ export function useGlobalStylesOutput() {
 			blockSelectors
 		);
 		const globalStyles = toStyles( mergedConfig, blockSelectors );
-		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		setStylesheets( [
 			{
 				css: customProperties,
@@ -429,8 +398,7 @@ export function useGlobalStylesOutput() {
 			},
 		] );
 		setSettings( mergedConfig.settings );
-		setSvgFilters( filters );
 	}, [ mergedConfig ] );
 
-	return [ stylesheets, settings, svgFilters ];
+	return [ stylesheets, settings ];
 }
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index e1124cf84c904f..882ab23e83ee2b 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -53,7 +53,6 @@ export const PRESET_METADATA = [
 		path: [ 'color', 'duotone' ],
 		cssVarInfix: 'duotone',
 		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
-		svgFilter: 'duotone',
 	},
 	{
 		path: [ 'typography', 'fontSizes' ],