diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
index 1c1418a54931f8..9814a38fb535f9 100644
--- a/packages/edit-site/src/components/global-styles/variations/variation.js
+++ b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -18,7 +18,8 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+const { mergeBaseAndUserConfigs, useResolvedBlockStyleVariationsConfig } =
+	unlock( editorPrivateApis );
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
@@ -49,9 +50,15 @@ export default function Variation( { variation, children, isPill, property } ) {
 		}
 	};
 
+	const varitationWithBlockStyleVariation =
+		useResolvedBlockStyleVariationsConfig( variation );
 	const isActive = useMemo(
-		() => areGlobalStyleConfigsEqual( user, variation ),
-		[ user, variation ]
+		() =>
+			areGlobalStyleConfigsEqual(
+				user,
+				varitationWithBlockStyleVariation
+			),
+		[ user, varitationWithBlockStyleVariation ]
 	);
 
 	let label = variation?.title;
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
index 4250910cc6320a..edb4923b188bdc 100644
--- a/packages/editor/src/components/global-styles-provider/index.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -39,7 +39,7 @@ export function mergeBaseAndUserConfigs( base, user ) {
  * @param {Object} userConfig Current user origin global styles data.
  * @return {Object} Updated global styles data.
  */
-function useResolvedBlockStyleVariationsConfig( userConfig ) {
+export function useResolvedBlockStyleVariationsConfig( userConfig ) {
 	const { getBlockStyles } = useSelect( blocksStore );
 	const sharedVariations = userConfig?.styles?.blocks?.variations;
 
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index 48e43e7737fec8..c02eafd055608c 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -22,6 +22,7 @@ import ResizableEditor from './components/resizable-editor';
 import {
 	mergeBaseAndUserConfigs,
 	GlobalStylesProvider,
+	useResolvedBlockStyleVariationsConfig,
 } from './components/global-styles-provider';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
@@ -41,7 +42,7 @@ lock( privateApis, {
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
 	ResizableEditor,
-
+	useResolvedBlockStyleVariationsConfig,
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,
 	interfaceStore,