Block editor: remove element context and use block editor settings in…

…stead

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

@@ -10,11 +10,13 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { SVG } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import transformStyles from '../../utils/transform-styles';
+import { store as blockEditorStore } from '../../store';
 
 const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 extend( [ namesPlugin, a11yPlugin ] );
@@ -68,9 +70,16 @@ function useDarkThemeBodyClassName( styles ) {
 }
 
 export default function EditorStyles( { styles } ) {
+	const settings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().styles,
+		[]
+	);
 	const stylesArray = useMemo(
-		() => Object.values( styles ?? [] ),
-		[ styles ]
+		() => [
+			...Object.values( settings ?? [] ),
+			...Object.values( styles ?? [] ),
+		],
+		[ styles, settings ]
 	);
 	const transformedStyles = useMemo(
 		() =>

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 {