diff --git a/packages/block-editor/src/components/duotone/components.js b/packages/block-editor/src/components/duotone/components.js
deleted file mode 100644
index 471c03502c588..0000000000000
--- a/packages/block-editor/src/components/duotone/components.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { __unstableGetValuesFromColors as getValuesFromColors } from './index';
-
-/**
- * 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.
- *
- * @return {WPElement} Duotone element.
- */
-export function DuotoneStylesheet( { selector, id } ) {
-	const css = `
-${ selector } {
-	filter: url( #${ id } );
-}
-`;
-	return <style>{ css }</style>;
-}
-
-/**
- * Stylesheet for disabling a global styles duotone filter.
- *
- * @param {Object} props          Duotone props.
- * @param {string} props.selector Selector to disable the filter for.
- *
- * @return {WPElement} Filter none style element.
- */
-export function DuotoneUnsetStylesheet( { selector } ) {
-	const css = `
-${ selector } {
-	filter: none;
-}
-`;
-	return <style>{ css }</style>;
-}
-
-/**
- * The SVG part of the duotone filter.
- *
- * @param {Object}   props        Duotone props.
- * @param {string}   props.id     Unique id for this duotone filter.
- * @param {string[]} props.colors Color strings from dark to light.
- *
- * @return {WPElement} Duotone SVG.
- */
-export function DuotoneFilter( { id, colors } ) {
-	const values = getValuesFromColors( colors );
-	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( ' ' ) }
-						/>
-						<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"
-					/>
-				</filter>
-			</defs>
-		</SVG>
-	);
-}
-
-/**
- * SVG from a duotone preset
- *
- * @param {Object} props        Duotone props.
- * @param {Object} props.preset Duotone preset settings.
- *
- * @return {WPElement} Duotone element.
- */
-export function PresetDuotoneFilter( { preset } ) {
-	return (
-		<DuotoneFilter
-			id={ `wp-duotone-${ preset.slug }` }
-			colors={ preset.colors }
-		/>
-	);
-}
diff --git a/packages/block-editor/src/components/duotone/index.js b/packages/block-editor/src/components/duotone/index.js
deleted file mode 100644
index 919d67780d7c7..0000000000000
--- a/packages/block-editor/src/components/duotone/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { getValuesFromColors as __unstableGetValuesFromColors } from './utils';
-export {
-	DuotoneFilter as __unstableDuotoneFilter,
-	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
-	DuotoneStylesheet as __unstableDuotoneStylesheet,
-	DuotoneUnsetStylesheet as __unstableDuotoneUnsetStylesheet,
-} from './components';
diff --git a/packages/block-editor/src/components/duotone/utils.js b/packages/block-editor/src/components/duotone/utils.js
index d7cbd0ccba26e..ac58eca18bb9f 100644
--- a/packages/block-editor/src/components/duotone/utils.js
+++ b/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>`;
+}
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 66f2a08f115a4..a7cf73db4d53e 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/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(
 		() =>
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index ec1a6270917f0..b394c8a9f921e 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/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
 					)
 				)
 			)
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 5876eb4ec01e9..bfd696154cb21 100644
--- a/packages/block-editor/src/components/index.js
+++ b/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 {
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 2ecd35c99ee8c..db9edaee48e54 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -15,7 +15,8 @@ import {
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import { useMemo, useContext, createPortal } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -26,45 +27,22 @@ import {
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
-import BlockList from '../components/block-list';
 import {
-	__unstableDuotoneFilter as DuotoneFilter,
-	__unstableDuotoneStylesheet as DuotoneStylesheet,
-	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
-} from '../components/duotone';
+	getDuotoneFilter,
+	getDuotoneStylesheet,
+	getDuotoneUnsetStylesheet,
+} from '../components/duotone/utils';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockSettings } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { store as blockEditorStore } from '../store';
 
 const EMPTY_ARRAY = [];
 
 extend( [ namesPlugin ] );
 
-/**
- * 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 {string[]|"unset"} props.colors   Array of RGB color strings ordered from dark to light.
- *
- * @return {WPElement} Duotone element.
- */
-function InlineDuotone( { selector, id, colors } ) {
-	if ( colors === 'unset' ) {
-		return <DuotoneUnsetStylesheet selector={ selector } />;
-	}
-
-	return (
-		<>
-			<DuotoneFilter id={ id } colors={ colors } />
-			<DuotoneStylesheet id={ id } selector={ selector } />
-		</>
-	);
-}
-
 function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 	const disableDefault = ! useSetting( defaultSetting );
 	const userPresets =
@@ -243,12 +221,26 @@ const withDuotoneControls = createHigherOrderComponent(
 	'withDuotoneControls'
 );
 
+function addStyle( styles, style ) {
+	let i = styles.length;
+	while ( i-- ) {
+		if ( styles[ i ].id === style.id ) {
+			styles[ i ] = style;
+			return styles;
+		}
+	}
+
+	styles.push( style );
+	return styles;
+}
+
 function DuotoneStyles( {
 	id: filterId,
 	selector: duotoneSelector,
 	attribute: duotoneAttr,
 } ) {
-	const element = useContext( BlockList.__unstableElementContext );
+	const { getSettings } = useSelect( blockEditorStore );
+	const { updateSettings } = useDispatch( blockEditorStore );
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -290,25 +282,46 @@ function DuotoneStyles( {
 		// Assuming the selector part is a subclass selector (not a tag name)
 		// so we can prepend the filter id class. If we want to support elements
 		// such as `img` or namespaces, we'll need to add a case for that here.
-		return `.editor-styles-wrapper .${ filterId }${ selectorPart.trim() }`;
+		return `.${ filterId }${ selectorPart.trim() }`;
 	} );
 
 	const selector = selectorsScoped.join( ', ' );
 
 	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	return (
-		element &&
-		isValidFilter &&
-		createPortal(
-			<InlineDuotone
-				selector={ selector }
-				id={ filterId }
-				colors={ colors }
-			/>,
-			element
-		)
-	);
+	useEffect( () => {
+		const settings = getSettings();
+		const styles = [ ...settings.styles ];
+
+		addStyle( styles, {
+			id: filterId,
+			css:
+				colors !== 'unset'
+					? getDuotoneStylesheet( selector, filterId )
+					: getDuotoneUnsetStylesheet( selector ),
+			__unstableType: 'presets',
+		} );
+		addStyle( styles, {
+			id: `duotone-${ filterId }`,
+			assets:
+				colors !== 'unset' ? getDuotoneFilter( filterId, colors ) : '',
+			__unstableType: 'svgs',
+		} );
+
+		updateSettings( {
+			...settings,
+			styles,
+		} );
+	}, [
+		getSettings,
+		updateSettings,
+		isValidFilter,
+		selector,
+		filterId,
+		colors,
+	] );
+
+	return null;
 }
 
 /**
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index fe14ef0556113..387637159cdf2 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -101,7 +101,7 @@ function getPostContentAttributes( blocks ) {
 	}
 }
 
-export default function VisualEditor( { styles } ) {
+export default function VisualEditor() {
 	const {
 		deviceType,
 		isWelcomeGuideVisible,
@@ -313,9 +313,8 @@ export default function VisualEditor( { styles } ) {
 		titleRef?.current?.focus();
 	}, [ isWelcomeGuideVisible, isCleanNewPost ] );
 
-	styles = useMemo(
+	const styles = useMemo(
 		() => [
-			...styles,
 			{
 				// We should move this in to future to the body.
 				css:
@@ -325,7 +324,7 @@ export default function VisualEditor( { styles } ) {
 						: '' ),
 			},
 		],
-		[ styles ]
+		[ paddingBottom ]
 	);
 
 	// Add some styles for alignwide/alignfull Post Content and its children.