Block editor: remove __unstableElementContext and filter EditorStyles…

… instead

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

@@ -33,17 +33,16 @@ export function ExperimentalBlockCanvas( {
 
 	if ( ! shouldIframe ) {
 		return (
-			<>
-				<EditorStyles styles={ styles } />
-				<WritingFlow
-					ref={ contentRef }
-					className="editor-styles-wrapper"
-					tabIndex={ -1 }
-					style={ { height } }
-				>
+			<WritingFlow
+				ref={ contentRef }
+				className="editor-styles-wrapper"
+				tabIndex={ -1 }
+				style={ { height } }
+			>
+				<EditorStyles styles={ styles }>
 					{ children }
-				</WritingFlow>
-			</>
+				</EditorStyles>
+			</WritingFlow>
 		);
 	}
 
@@ -59,8 +58,9 @@ export function ExperimentalBlockCanvas( {
 			} }
 			name="editor-canvas"
 		>
-			<EditorStyles styles={ styles } />
-			{ children }
+			<EditorStyles styles={ styles }>
+				{ children }
+			</EditorStyles>
 		</Iframe>
 	);
 }

packages/block-editor/src/components/block-preview/auto.js

@@ -108,9 +108,10 @@ function ScaledBlockPreview( {
 							: minHeight,
 				} }
 			>
-				<EditorStyles styles={ editorStyles } />
-				{ contentResizeListener }
-				<MemoizedBlockList renderAppender={ false } />
+				<EditorStyles styles={ editorStyles }>
+					{ contentResizeListener }
+					<MemoizedBlockList renderAppender={ false } />
+				</EditorStyles>
 			</Iframe>
 		</Disabled>
 	);

packages/block-editor/src/components/duotone/utils.js

@@ -23,3 +23,68 @@ export function getValuesFromColors( colors = [] ) {
 
 	return values;
 }
+
+/**
+ * Stylesheet for disabling a global styles duotone filter.
+ *
+ * @param {string} selector Selector to disable the filter for.
+ *
+ * @return {string} Filter none style.
+ */
+export function getDuotoneUnsetStylesheet( selector ) {
+	return `${ selector }{filter:none}`;
+}
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param {string} selector Selector to apply the filter to.
+ * @param {string} id       Unique id for this duotone filter.
+ *
+ * @return {string} Duotone filter style.
+ */
+export function getDuotoneStylesheet( selector, id ) {
+	return `${ selector }{filter:url(#${ id })}`;
+}
+
+/**
+ * The SVG part of the duotone filter.
+ *
+ * @param {string}   id     Unique id for this duotone filter.
+ * @param {string[]} colors Color strings from dark to light.
+ *
+ * @return {string} Duotone SVG.
+ */
+export function getDuotoneFilter( id, colors ) {
+	const values = getValuesFromColors( colors );
+	return `
+<svg
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 0 0"
+	width="0"
+	height="0"
+	focusable="false"
+	role="none"
+	aria-hidden="true"
+	style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
+>
+	<defs>
+		<filter id="${ id }">
+			<!--
+				Use sRGB instead of linearRGB so transparency looks correct.
+				Use perceptual brightness to convert to grayscale.
+			-->
+			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
+			<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
+			<feComponentTransfer color-interpolation-filters="sRGB">
+				<feFuncR type="table" tableValues="${ values.r.join( ' ' ) }"></feFuncR>
+				<feFuncG type="table" tableValues="${ values.g.join( ' ' ) }"></feFuncG>
+				<feFuncB type="table" tableValues="${ values.b.join( ' ' ) }"></feFuncB>
+				<feFuncA type="table" tableValues="${ values.a.join( ' ' ) }"></feFuncA>
+			</feComponentTransfer>
+			<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
+			<feComposite in2="SourceGraphic" operator="in"></feComposite>
+		</filter>
+	</defs>
+</svg>`;
+}

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

@@ -9,7 +9,12 @@ import a11yPlugin from 'colord/plugins/a11y';
  * WordPress dependencies
  */
 import { SVG } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	createContext,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +24,8 @@ import transformStyles from '../../utils/transform-styles';
 const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 extend( [ namesPlugin, a11yPlugin ] );
 
+export const updateStyleContext = createContext();
+
 function useDarkThemeBodyClassName( styles ) {
 	return useCallback(
 		( node ) => {
@@ -67,11 +74,42 @@ function useDarkThemeBodyClassName( styles ) {
 	);
 }
 
-export default function EditorStyles( { styles } ) {
-	const stylesArray = useMemo(
-		() => Object.values( styles ?? [] ),
-		[ styles ]
-	);
+export default function EditorStyles( { styles, children } ) {
+	const [ overrides, setOverrides ] = useState( [] );
+	const updateStyle = useCallback( ( style ) => {
+		setOverrides( ( _overrides ) => {
+			const index = _overrides.findIndex(
+				( override ) => override.id === style.id
+			);
+			if ( index === -1 ) {
+				return [ ..._overrides, style ];
+			}
+			return [
+				..._overrides.slice( 0, index ),
+				style,
+				..._overrides.slice( index + 1 ),
+			];
+		} );
+		return () => {
+			setOverrides( ( _overrides ) =>
+				_overrides.filter( ( override ) => override.id !== style.id )
+			);
+		};
+	}, [] );
+	const stylesArray = useMemo( () => {
+		const _styles = Object.values( styles ?? [] );
+
+		for ( const override of overrides ) {
+			const index = _styles.findIndex( ( { id } ) => id === override.id );
+			if ( index === -1 ) {
+				_styles.push( override );
+			} else {
+				_styles[ index ] = override;
+			}
+		}
+
+		return _styles;
+	}, [ styles, overrides ] );
 	const transformedStyles = useMemo(
 		() =>
 			transformStyles(
@@ -91,7 +129,7 @@ export default function EditorStyles( { styles } ) {
 	);
 
 	return (
-		<>
+		<updateStyleContext.Provider value={ updateStyle }>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
 			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
@@ -112,6 +150,7 @@ export default function EditorStyles( { styles } ) {
 				} }
 				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
 			/>
-		</>
+			{ children }
+		</updateStyleContext.Provider>
 	);
 }

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -9,7 +9,7 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { renderToString, useContext, useMemo } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
@@ -23,7 +23,7 @@ import {
 } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
-import { PresetDuotoneFilter } from '../duotone/components';
+import { getDuotoneFilter } from '../duotone/utils';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
@@ -163,11 +163,9 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 			.filter( ( origin ) => presetByOrigin[ origin ] )
 			.flatMap( ( origin ) =>
 				presetByOrigin[ origin ].map( ( preset ) =>
-					renderToString(
-						<PresetDuotoneFilter
-							preset={ preset }
-							key={ preset.slug }
-						/>
+					getDuotoneFilter(
+						`wp-duotone-${ preset.slug }`,
+						preset.colors
 					)
 				)
 			)

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

@@ -5,7 +5,6 @@
 export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
-export * from './duotone';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
 export { default as Autocomplete } from './autocomplete';
 export {