Editor: Address feedback on addition of global styles to editor setti…

…ngs (#61022)

packages/editor/src/components/index.js

@@ -100,7 +100,6 @@ 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-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,
+	};
+}