Try adding merged global styles

WordPress · May 9, 2024 · b7ecbba · b7ecbba
1 parent b8768b8
commit b7ecbba
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -63,6 +63,8 @@
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
+		"deepmerge": "^4.3.0",
+		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.2",

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -152,8 +152,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		[ postType, postId, isLargeViewport ]
 	);
 
-	// Get style data from global styles.
-	const { styles } = useGlobalStylesData();
+	const globalStylesData = useGlobalStylesData();
 
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -243,7 +242,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
-			[ globalStylesDataKey ]: styles,
+			[ globalStylesDataKey ]: globalStylesData,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
@@ -307,7 +306,9 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			pageForPosts,
 			postType,
 			setIsInserterOpened,
-			styles,
+			globalStylesData,
+			globalStylesDataKey,
+			selectBlockPatternsKey,
 		]
 	);
 }

diff --git a/packages/editor/src/components/use-global-styles-data/index.js b/packages/editor/src/components/use-global-styles-data/index.js
@@ -1,13 +1,30 @@
+/**
+ * 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 = {};
 
-export function useGlobalStylesData() {
-	const { styles, isReady } = useSelect( ( select ) => {
+function useGlobalStylesBaseData() {
+	const baseConfig = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeBaseGlobalStyles();
+	}, [] );
+
+	return [ !! baseConfig, baseConfig?.styles ?? DEFAULT_STYLES ];
+}
+
+function useGlobalStylesUserData() {
+	return useSelect( ( select ) => {
 		const {
 			getEditedEntityRecord,
 			hasFinishedResolution,
@@ -32,14 +49,31 @@ export function useGlobalStylesData() {
 				: true;
 		}
 
-		return {
-			isReady: hasResolved,
-			styles: record?.styles,
-		};
+		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 {
-		styles: styles ?? DEFAULT_STYLES,
-		isReady,
+		isReady: isBaseStylesReady && isUserStylesReady,
+		base: baseStyles ?? DEFAULT_STYLES,
+		user: userStyles ?? DEFAULT_STYLES,
+		merged: mergedStyles,
 	};
 }