Update approach to adding global styles data to editor settings

packages/block-editor/src/private-apis.js

@@ -35,6 +35,7 @@ import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	globalStylesDataKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -72,6 +73,7 @@ lock( privateApis, {
 	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
+	globalStylesDataKey,
 	selectBlockPatternsKey,
 	requiresWrapperOnCopy,
 	PrivateRichText,

packages/block-editor/src/store/private-keys.js

@@ -1,2 +1,3 @@
+export const globalStylesDataKey = Symbol( 'globalStylesDataKey' );
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );

packages/editor/README.md

@@ -1256,6 +1256,10 @@ _Returns_
 
 Undocumented declaration.
 
+### useGlobalStylesData
+
+Undocumented declaration.
+
 ### usePostScheduleLabel
 
 Undocumented declaration.

packages/editor/package.json

@@ -66,6 +66,8 @@
 		"@wordpress/wordcount": "file:../wordcount",
 		"clsx": "^2.1.1",
 		"date-fns": "^3.6.0",
+		"deepmerge": "^4.3.0",
+		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"remove-accents": "^0.5.0"

packages/editor/src/components/index.js

@@ -100,7 +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';
+export { useGlobalStylesData } from './use-global-styles-data';
 
 // State Related Components.
 export { default as EditorProvider } from './provider';

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -24,7 +24,7 @@ import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
 import { lock, unlock } from '../../lock-unlock';
-import { useStyles } from '../use-styles';
+import { useGlobalStylesData } from '../use-global-styles-data';
 
 const EMPTY_BLOCKS_LIST = [];
 
@@ -174,8 +174,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		[ postType, postId, isLargeViewport, renderingMode ]
 	);
 
-	// get the styles from the global styles
-	const { styles } = useStyles();
+	const globalStylesData = useGlobalStylesData();
 
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -255,6 +254,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	}, [ settings.allowedBlockTypes, hiddenBlockTypes, blockTypes ] );
 
 	const forceDisableFocusMode = settings.focusMode === false;
+	const { globalStylesDataKey, selectBlockPatternsKey } =
+		unlock( privateApis );
 
 	return useMemo( () => {
 		const blockEditorSettings = {
@@ -263,7 +264,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
-			__experimentalStyles: styles,
+			[ globalStylesDataKey ]: globalStylesData,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
@@ -272,7 +273,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
-			[ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) =>
+			[ selectBlockPatternsKey ]: ( select ) =>
 				unlock( select( coreStore ) ).getBlockPatternsForPostType(
 					postType
 				),
@@ -332,7 +333,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		postType,
 		setIsInserterOpened,
 		sectionRootClientId,
-		styles,
+		globalStylesData,
+		globalStylesDataKey,
+		selectBlockPatternsKey,
 	] );
 }
 

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

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+const DEFAULT_STYLES = {};
+
+function useGlobalStylesBaseData() {
+	const baseConfig = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeBaseGlobalStyles();
+	}, [] );
+
+	return [ !! baseConfig, baseConfig?.styles ?? DEFAULT_STYLES ];
+}
+
+function useGlobalStylesUserData() {
+	return useSelect( ( select ) => {
+		const {
+			getEditedEntityRecord,
+			hasFinishedResolution,
+			__experimentalGetCurrentGlobalStylesId,
+		} = select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const record = globalStylesId
+			? getEditedEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		let hasResolved = false;
+		if (
+			hasFinishedResolution( '__experimentalGetCurrentGlobalStylesId' )
+		) {
+			hasResolved = globalStylesId
+				? hasFinishedResolution( 'getEditedEntityRecord', [
+						'root',
+						'globalStyles',
+						globalStylesId,
+				  ] )
+				: true;
+		}
+
+		return [ hasResolved, record?.styles ?? DEFAULT_STYLES ];
+	}, [] );
+}
+
+function mergeBaseAndUserStyles( base, user ) {
+	return deepmerge( base, user, {
+		// We only pass as arrays the presets,
+		// in which case we want the new array of values
+		// to override the old array (no merging).
+		isMergeableObject: isPlainObject,
+	} );
+}
+
+export function useGlobalStylesData() {
+	const [ isBaseStylesReady, baseStyles ] = useGlobalStylesBaseData();
+	const [ isUserStylesReady, userStyles ] = useGlobalStylesUserData();
+	const mergedStyles = useMemo(
+		() => mergeBaseAndUserStyles( baseStyles, userStyles ),
+		[ baseStyles, userStyles ]
+	);
+
+	return {
+		isReady: isBaseStylesReady && isUserStylesReady,
+		base: baseStyles ?? DEFAULT_STYLES,
+		user: userStyles ?? DEFAULT_STYLES,
+		merged: mergedStyles,
+	};
+}