diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 3372826869b3b..55c4f3c79c99e 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -11,11 +11,13 @@ import {
 	Card,
 	CardDivider,
 	CardMedia,
+	createSlotFill,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { Fragment } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -27,6 +29,23 @@ import ContextMenu from './context-menu';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 
+const { Slot: GlobalStylesScreenRootSlot } = createSlotFill(
+	'GlobalStylesScreenRoot'
+);
+
+const ScreenRootSlot = () => (
+	<GlobalStylesScreenRootSlot>
+		{ ( fills ) =>
+			fills.map( ( fill, index ) => (
+				<Fragment key={ index }>
+					<CardBody>{ fill }</CardBody>
+					<CardDivider />
+				</Fragment>
+			) )
+		}
+	</GlobalStylesScreenRootSlot>
+);
+
 function ScreenRoot() {
 	const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 	const [ customCSS ] = useGlobalStyle( 'css' );
@@ -52,6 +71,8 @@ function ScreenRoot() {
 
 	return (
 		<Card size="small" className="edit-site-global-styles-screen-root">
+			<ScreenRootSlot />
+
 			<CardBody>
 				<VStack spacing={ 4 }>
 					<Card>