Add global styles to editor settings

packages/edit-post/src/editor.js

@@ -7,6 +7,7 @@ import {
 	PostLockedModal,
 	store as editorStore,
 	privateApis as editorPrivateApis,
+	useStyles,
 } from '@wordpress/editor';
 import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
@@ -73,14 +74,23 @@ function Editor( {
 		[ currentPost.postType, currentPost.postId ]
 	);
 
+	// get the styles from the global styles
+	const { styles } = useStyles();
+
 	const editorSettings = useMemo(
 		() => ( {
 			...settings,
+			__globalStyles: styles,
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
 			defaultRenderingMode: 'post-only',
 		} ),
-		[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
+		[
+			settings,
+			styles,
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
+		]
 	);
 
 	const initialPost = useMemo( () => {

packages/editor/src/components/index.js

@@ -100,6 +100,7 @@ export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
 export { default as TimeToRead } from './time-to-read';
 export { default as CharacterCount } from './character-count';
+export { useStyles } from './use-styles';
 
 // State Related Components.
 export { default as EditorProvider } from './provider';

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+export function useStyles() {
+	const { styles, isReady } = useSelect( ( select ) => {
+		const { getEditedEntityRecord, hasFinishedResolution } =
+			select( coreStore );
+		const _globalStylesId =
+			select( coreStore ).__experimentalGetCurrentGlobalStylesId();
+		const record = _globalStylesId
+			? getEditedEntityRecord( 'root', 'globalStyles', _globalStylesId )
+			: undefined;
+
+		let hasResolved = false;
+		if (
+			hasFinishedResolution( '__experimentalGetCurrentGlobalStylesId' )
+		) {
+			hasResolved = _globalStylesId
+				? hasFinishedResolution( 'getEditedEntityRecord', [
+						'root',
+						'globalStyles',
+						_globalStylesId,
+				  ] )
+				: true;
+		}
+
+		return {
+			isReady: hasResolved,
+			styles: record?.styles,
+		};
+	}, [] );
+
+	// Make sure to recompute the styles when hasResolved changes.
+	const config = useMemo( () => {
+		return {
+			styles: styles ?? 'no styless',
+			isReady,
+		};
+	}, [ isReady, styles ] );
+
+	return config;
+}