Move SVGs into styles prop for EditorStyles

lib/block-supports/duotone.php

@@ -449,3 +449,4 @@ function gutenberg_render_duotone_support( $block_content, $block ) {
 add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 );
 add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 );
 add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 );
+add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 );

lib/class-wp-duotone-gutenberg.php

@@ -187,27 +187,35 @@ private static function get_css_custom_property_declaration( $filter_data ) {
 	 * Outputs all necessary SVG for duotone filters, CSS for classic themes.
 	 */
 	public static function output_footer_assets() {
-		echo self::get_footer_assets();
-	}
-
-	/**
-	 * Outputs all necessary SVG for duotone filters, CSS for classic themes, and safari rerendering hack
-	 */
-	public static function get_footer_assets() {
-		$assets = '';
 		foreach ( self::$output as $filter_data ) {
 
 			// SVG will be output on the page later.
-			$assets .= gutenberg_get_duotone_filter_svg( $filter_data );
+			$filter_svg = gutenberg_get_duotone_filter_svg( $filter_data );
+
+			echo $filter_svg;
 
 			// This is for classic themes - in block themes, the CSS is added in the head via wp_add_inline_style in the wp_enqueue_scripts action.
 			if ( ! wp_is_block_theme() ) {
 				wp_add_inline_style( 'core-block-supports', 'body{' . self::get_css_custom_property_declaration( $filter_data ) . '}' );
 			}
 		}
-		return $assets;
 	}
 
+	public static function add_editor_settings( $settings ) {
+		$assets = '';
+		foreach ( self::$output as $filter_data ) {
+			$assets .= gutenberg_get_duotone_filter_svg( $filter_data );
+		}
+
+		$settings['styles'][] = array(
+			'assets'         => $assets,
+			'__unstableType' => 'svgs',
+			// TODO: Figure out what isGlobalStyles should be set to.
+			'isGlobalStyles' => true,
+		);
+
+		return $settings;
+	}
 
 	/**
 	 * Appends the used global style duotone filter CSS Vars to the inline global styles CSS

lib/experimental/block-editor-settings.php

@@ -83,7 +83,6 @@ function gutenberg_get_block_editor_settings_experimental( $settings ) {
 		}
 	}
 
-	$settings['filters'] = WP_Duotone_Gutenberg::get_footer_assets();
 	return $settings;
 }
 

packages/block-editor/src/components/editor-styles/index.js

@@ -68,7 +68,21 @@ function useDarkThemeBodyClassName( styles ) {
 
 export default function EditorStyles( { styles } ) {
 	const transformedStyles = useMemo(
-		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
+		() =>
+			transformStyles(
+				// Assume that non-SVG styles are CSS that can be transformed.
+				styles.filter( ( style ) => style.__unstableType !== 'svgs' ),
+				EDITOR_STYLES_SELECTOR
+			),
+		[ styles ]
+	);
+
+	const transformedSvgs = useMemo(
+		() =>
+			styles
+				.filter( ( style ) => style.__unstableType == 'svgs' )
+				.map( ( style ) => style.assets )
+				.join( '' ),
 		[ styles ]
 	);
 
@@ -80,6 +94,15 @@ export default function EditorStyles( { styles } ) {
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 0 0"
+				width="0"
+				height="0"
+				focusable="false"
+				role="none"
+				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
+			/>
 		</>
 	);
 }

packages/edit-post/src/components/layout/index.js

@@ -63,7 +63,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-function Layout( { styles, filters } ) {
+function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -248,10 +248,7 @@ function Layout( { styles, filters } ) {
 							<TextEditor />
 						) }
 						{ isRichEditingEnabled && mode === 'visual' && (
-							<VisualEditor
-								styles={ styles }
-								filters={ filters }
-							/>
+							<VisualEditor styles={ styles } />
 						) }
 						{ ! isDistractionFree && ! isTemplateMode && (
 							<div className="edit-post-layout__metaboxes">

packages/edit-post/src/components/visual-editor/index.js

@@ -46,14 +46,7 @@ import { store as editPostStore } from '../../store';
 
 const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
 
-function MaybeIframe( {
-	children,
-	contentRef,
-	shouldIframe,
-	styles,
-	style,
-	filters,
-} ) {
+function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 	const ref = useMouseMoveTypingReset();
 	if ( ! shouldIframe ) {
 		return (
@@ -73,14 +66,13 @@ function MaybeIframe( {
 
 	return (
 		<Iframe
-			head={ <EditorStyles styles={ styles } /> }
 			ref={ ref }
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
 			name="editor-canvas"
 		>
+			<EditorStyles styles={ styles } />
 			{ children }
-			<SVG dangerouslySetInnerHTML={ { __html: filters } } />
 		</Iframe>
 	);
 }
@@ -111,7 +103,7 @@ function getPostContentAttributes( blocks ) {
 	}
 }
 
-export default function VisualEditor( { styles, filters } ) {
+export default function VisualEditor( { styles } ) {
 	const {
 		deviceType,
 		isWelcomeGuideVisible,
@@ -371,7 +363,6 @@ export default function VisualEditor( { styles, filters } ) {
 						}
 						contentRef={ contentRef }
 						styles={ styles }
-						filters={ filters }
 					>
 						{ themeSupportsLayout &&
 							! themeHasDisabledLayoutStyles &&

packages/edit-post/src/editor.js

@@ -186,10 +186,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				>
 					<ErrorBoundary>
 						<EditorInitialization postId={ postId } />
-						<Layout
-							styles={ styles }
-							filters={ settings.filters }
-						/>
+						<Layout styles={ styles } />
 					</ErrorBoundary>
 					<PostLockedModal />
 				</ExperimentalEditorProvider>