Create new convenience hook `useCurrentMergeThemeStyleVariationsWithU…

…serConfig()`

Replace usage with utils created in #58803

packages/edit-site/src/components/global-styles/color-palette-panel.js

@@ -14,7 +14,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { unlock } from '../../lock-unlock';
 import ColorVariations from './variations-color';
-import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -47,8 +47,8 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
-	const colorVariations = useThemeStyleVariationsByProperty( {
-		styleProperty: 'color',
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
 		filter: ( variation ) =>
 			variation?.settings?.color &&
 			Object.keys( variation?.settings?.color ).length,

packages/edit-site/src/components/global-styles/screen-typography.js

@@ -20,20 +20,22 @@ import TypographyElements from './typogrphy-elements';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
-import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
 		( select ) =>
 			select( editorStore ).getEditorSettings().fontLibraryEnabled,
 		[]
 	);
-	const typographyVariations = useThemeStyleVariationsByProperty( {
-		styleProperty: 'typography',
-		filter: ( variation ) =>
-			variation?.settings?.typography?.fontFamilies &&
-			Object.keys( variation?.settings?.typography?.fontFamilies ).length,
-	} );
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+			filter: ( variation ) =>
+				variation?.settings?.typography?.fontFamilies &&
+				Object.keys( variation?.settings?.typography?.fontFamilies )
+					.length,
+		} );
 
 	return (
 		<>

packages/edit-site/src/components/global-styles/variations-typography.js

@@ -21,7 +21,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { unlock } from '../../lock-unlock';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
-import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import Subtitle from './subtitle';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
@@ -166,12 +166,14 @@ function TypographyVariation( { variation } ) {
 }
 
 export default function TypographyVariations() {
-	const typographyVariations = useThemeStyleVariationsByProperty( {
-		styleProperty: 'typography',
-		filter: ( variation ) =>
-			variation?.settings?.typography?.fontFamilies &&
-			Object.keys( variation?.settings?.typography?.fontFamilies ).length,
-	} );
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+			filter: ( variation ) =>
+				variation?.settings?.typography?.fontFamilies &&
+				Object.keys( variation?.settings?.typography?.fontFamilies )
+					.length,
+		} );
 
 	const { base } = useContext( GlobalStylesContext );
 	const uniqueTypographyVariations = [];

packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -1,13 +1,47 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider';
 import cloneDeep from '../../utils/clone-deep';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+/**
+ * Fetches the current theme style variations, filters them by the provided property,
+ * and merges with current user-defined global style/settings object.
+ *
+ * @param {Object}   props          Object of hook args.
+ * @param {string}   props.property The property to filter by.
+ * @param {Function} props.filter   Optional. The filter function to apply to the variations.
+ * @return {Object[]|*} The merged object.
+ */
+export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
+	property,
+	filter,
+} ) {
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	}, [] );
+	const { user: baseVariation } = useContext( GlobalStylesContext );
+
+	return useThemeStyleVariationsByProperty( {
+		variations,
+		property,
+		filter,
+		baseVariation,
+	} );
+}
 
 /**
  * Returns a new object, with properties specified in `property`,