diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index cc38d09b4c716a..3cec93c6115efb 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -95,18 +95,16 @@ function applyAllFallbackStyles( border ) {
 	return applyFallbackStyle( border );
 }
 
-export default function BorderPanel( { name, variationPath = '' } ) {
+export default function BorderPanel( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	// To better reflect if the user has customized a value we need to
 	// ensure the style value being checked is from the `user` origin.
 	const [ userBorderStyles ] = useGlobalStyle(
-		`${ variationPath }border`,
+		`${ prefix }border`,
 		name,
 		'user'
 	);
-	const [ border, setBorder ] = useGlobalStyle(
-		`${ variationPath }border`,
-		name
-	);
+	const [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );
 	const colors = useColorsPerOrigin( name );
 
 	const showBorderColor = useHasBorderColorControl( name );
@@ -116,7 +114,7 @@ export default function BorderPanel( { name, variationPath = '' } ) {
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(
-		`${ variationPath }border.radius`,
+		`${ prefix }border.radius`,
 		name
 	);
 	const hasBorderRadius = () => {
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index ed03c4c288a81f..57cc10e64e861b 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -203,9 +203,10 @@ function useWideSizeProps( name ) {
 }
 
 // Props for managing `spacing.padding`.
-function usePaddingProps( name, variationPath = '' ) {
+function usePaddingProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ rawPadding, setRawPadding ] = useGlobalStyle(
-		variationPath + 'spacing.padding',
+		prefix + 'spacing.padding',
 		name
 	);
 	const paddingValues = splitStyleValue( rawPadding );
@@ -220,7 +221,7 @@ function usePaddingProps( name, variationPath = '' ) {
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
 	const [ userSetPaddingValue ] = useGlobalStyle(
-		variationPath + 'spacing.padding',
+		prefix + 'spacing.padding',
 		name,
 		'user'
 	);
@@ -238,9 +239,10 @@ function usePaddingProps( name, variationPath = '' ) {
 }
 
 // Props for managing `spacing.margin`.
-function useMarginProps( name, variationPath = '' ) {
+function useMarginProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ rawMargin, setRawMargin ] = useGlobalStyle(
-		variationPath + 'spacing.margin',
+		prefix + 'spacing.margin',
 		name
 	);
 	const marginValues = splitStyleValue( rawMargin );
@@ -268,9 +270,10 @@ function useMarginProps( name, variationPath = '' ) {
 }
 
 // Props for managing `spacing.blockGap`.
-function useBlockGapProps( name, variationPath = '' ) {
+function useBlockGapProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ gapValue, setGapValue ] = useGlobalStyle(
-		variationPath + 'spacing.blockGap',
+		prefix + 'spacing.blockGap',
 		name
 	);
 	const gapValues = splitGapValue( gapValue );
@@ -279,7 +282,7 @@ function useBlockGapProps( name, variationPath = '' ) {
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
 	const [ userSetGapValue ] = useGlobalStyle(
-		variationPath + 'spacing.blockGap',
+		prefix + 'spacing.blockGap',
 		name,
 		'user'
 	);
@@ -311,9 +314,10 @@ function useBlockGapProps( name, variationPath = '' ) {
 }
 
 // Props for managing `dimensions.minHeight`.
-function useMinHeightProps( name, variationPath = '' ) {
+function useMinHeightProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ minHeightValue, setMinHeightValue ] = useGlobalStyle(
-		variationPath + 'dimensions.minHeight',
+		prefix + 'dimensions.minHeight',
 		name
 	);
 	const resetMinHeightValue = () => setMinHeightValue( undefined );
@@ -326,7 +330,7 @@ function useMinHeightProps( name, variationPath = '' ) {
 	};
 }
 
-export default function DimensionsPanel( { name, variationPath = '' } ) {
+export default function DimensionsPanel( { name, variation = '' } ) {
 	const showContentSizeControl = useHasContentSize( name );
 	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
@@ -368,7 +372,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setPaddingValues,
 		resetPaddingValue,
 		hasPaddingValue,
-	} = usePaddingProps( name, variationPath );
+	} = usePaddingProps( name, variation );
 
 	// Props for managing `spacing.margin`.
 	const {
@@ -378,7 +382,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setMarginValues,
 		resetMarginValue,
 		hasMarginValue,
-	} = useMarginProps( name, variationPath );
+	} = useMarginProps( name, variation );
 
 	// Props for managing `spacing.blockGap`.
 	const {
@@ -390,7 +394,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setGapValues,
 		resetGapValue,
 		hasGapValue,
-	} = useBlockGapProps( name, variationPath );
+	} = useBlockGapProps( name, variation );
 
 	// Props for managing `dimensions.minHeight`.
 	const {
@@ -398,7 +402,7 @@ export default function DimensionsPanel( { name, variationPath = '' } ) {
 		setMinHeightValue,
 		resetMinHeightValue,
 		hasMinHeightValue,
-	} = useMinHeightProps( name, variationPath );
+	} = useMinHeightProps( name, variation );
 
 	const resetAll = () => {
 		resetPaddingValue();
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index 3f64b7dc71b62a..ad0a5124f03a37 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -25,7 +25,8 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenBackgroundColor( { name, variationPath = '' } ) {
+function ScreenBackgroundColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ areCustomGradientsEnabled ] = useGlobalSetting(
@@ -48,20 +49,20 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) {
 		supports.includes( 'background' ) &&
 		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
 	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
-		variationPath + 'color.background',
+		prefix + 'color.background',
 		name
 	);
 	const [ userBackgroundColor ] = useGlobalStyle(
-		variationPath + 'color.background',
+		prefix + 'color.background',
 		name,
 		'user'
 	);
 	const [ gradient, setGradient ] = useGlobalStyle(
-		variationPath + 'color.gradient',
+		prefix + 'color.gradient',
 		name
 	);
 	const [ userGradient ] = useGlobalStyle(
-		variationPath + 'color.gradient',
+		prefix + 'color.gradient',
 		name,
 		'user'
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
index 5b339f64f795f3..6a5578e20fcefa 100644
--- a/packages/edit-site/src/components/global-styles/screen-border.js
+++ b/packages/edit-site/src/components/global-styles/screen-border.js
@@ -9,17 +9,17 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
 
-function ScreenBorder( { name, variationPath = '' } ) {
+function ScreenBorder( { name, variation = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasBorderPanel && (
-				<BorderPanel name={ name } variationPath={ variationPath } />
+				<BorderPanel name={ name } variation={ variation } />
 			) }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
index cf2eaa98f3db68..2ee286e574f470 100644
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -16,7 +16,8 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenButtonColor( { name, variationPath = '' } ) {
+function ScreenButtonColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
@@ -31,7 +32,7 @@ function ScreenButtonColor( { name, variationPath = '' } ) {
 		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
 	const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
-		variationPath + 'elements.button.color.text',
+		prefix + 'elements.button.color.text',
 		name
 	);
 	const [ userButtonTextColor ] = useGlobalStyle(
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 2d863f6a2b6d28..d4a5ba84ce646a 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -22,32 +22,23 @@ import { getSupportedGlobalStylesPanels } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
 import { unlock } from '../../experiments';
 
 const { useGlobalStyle } = unlock( blockEditorExperiments );
 
-function variationPathToURL( variationPath ) {
-	if ( ! variationPath ) {
-		return '';
-	}
-	// Replace the dots with slashes, add slash at the beginning and remove the last slash.
-	return '/' + variationPath.replace( /\./g, '/' ).slice( 0, -1 );
-}
-
-function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
+function BackgroundColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport =
 		supports.includes( 'backgroundColor' ) ||
 		supports.includes( 'background' );
 	const [ backgroundColor ] = useGlobalStyle(
-		variationPath + 'color.background',
-		name
-	);
-	const [ gradientValue ] = useGlobalStyle(
-		variationPath + 'color.gradient',
+		prefix + 'color.background',
 		name
 	);
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -55,11 +46,7 @@ function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/background'
-			}
+			path={ parentMenu + urlPrefix + '/colors/background' }
 			aria-label={ __( 'Colors background styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -77,10 +64,12 @@ function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function TextColorItem( { name, parentMenu, variationPath = '' } ) {
+function TextColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useGlobalStyle( variationPath + 'color.text', name );
+	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -88,11 +77,7 @@ function TextColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/text'
-			}
+			path={ parentMenu + urlPrefix + '/colors/text' }
 			aria-label={ __( 'Colors text styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -110,15 +95,17 @@ function TextColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
+function LinkColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
 	const [ color ] = useGlobalStyle(
-		variationPath + 'elements.link.color.text',
+		prefix + 'elements.link.color.text',
 		name
 	);
 	const [ colorHover ] = useGlobalStyle(
-		variationPath + 'elements.link.:hover.color.text',
+		prefix + 'elements.link.:hover.color.text',
 		name
 	);
 
@@ -128,11 +115,7 @@ function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/link'
-			}
+			path={ parentMenu + urlPrefix + '/colors/link' }
 			aria-label={ __( 'Colors link styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -152,15 +135,17 @@ function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
+function HeadingColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
 	const [ color ] = useGlobalStyle(
-		variationPath + 'elements.heading.color.text',
+		prefix + 'elements.heading.color.text',
 		name
 	);
 	const [ bgColor ] = useGlobalStyle(
-		variationPath + 'elements.heading.color.background',
+		prefix + 'elements.heading.color.background',
 		name
 	);
 
@@ -170,11 +155,7 @@ function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/heading'
-			}
+			path={ parentMenu + urlPrefix + '/colors/heading' }
 			aria-label={ __( 'Colors heading styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -192,15 +173,17 @@ function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
+function ButtonColorItem( { name, parentMenu, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const urlPrefix = variation ? `/variations/${ variation }` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'buttonColor' );
 	const [ color ] = useGlobalStyle(
-		variationPath + 'elements.button.color.text',
+		prefix + 'elements.button.color.text',
 		name
 	);
 	const [ bgColor ] = useGlobalStyle(
-		variationPath + 'elements.button.color.background',
+		prefix + 'elements.button.color.background',
 		name
 	);
 
@@ -210,11 +193,7 @@ function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={
-				parentMenu +
-				variationPathToURL( variationPath ) +
-				'/colors/button'
-			}
+			path={ parentMenu + urlPrefix + '/colors/button' }
 		>
 			<HStack justify="flex-start">
 				<ZStack isLayered={ false } offset={ -8 }>
@@ -233,10 +212,10 @@ function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
 	);
 }
 
-function ScreenColors( { name, variationPath = '' } ) {
+function ScreenColors( { name, variation = '' } ) {
 	const parentMenu =
 		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 
 	return (
 		<>
@@ -259,27 +238,27 @@ function ScreenColors( { name, variationPath = '' } ) {
 							<BackgroundColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<TextColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<LinkColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<HeadingColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }
-								variationPath={ variationPath }
+								variation={ variation }
 							/>
 						</ItemGroup>
 					</VStack>
diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js
index 197ffc776a9814..c5b58374b26882 100644
--- a/packages/edit-site/src/components/global-styles/screen-heading-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-heading-color.js
@@ -25,7 +25,8 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenHeadingColor( { name, variationPath = '' } ) {
+function ScreenHeadingColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
@@ -55,30 +56,30 @@ function ScreenHeadingColor( { name, variationPath = '' } ) {
 		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
 
 	const [ color, setColor ] = useGlobalStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.text',
+		prefix + 'elements.' + selectedLevel + '.color.text',
 		name
 	);
 	const [ userColor ] = useGlobalStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.text',
+		prefix + 'elements.' + selectedLevel + '.color.text',
 		name,
 		'user'
 	);
 
 	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.background',
+		prefix + 'elements.' + selectedLevel + '.color.background',
 		name
 	);
 	const [ userBackgroundColor ] = useGlobalStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.background',
+		prefix + 'elements.' + selectedLevel + '.color.background',
 		name,
 		'user'
 	);
 	const [ gradient, setGradient ] = useGlobalStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.gradient',
+		prefix + 'elements.' + selectedLevel + '.color.gradient',
 		name
 	);
 	const [ userGradient ] = useGlobalStyle(
-		variationPath + 'elements.' + selectedLevel + '.color.gradient',
+		prefix + 'elements.' + selectedLevel + '.color.gradient',
 		name,
 		'user'
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index b2503e4f8e1e47..bae67366f1f0f0 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -9,20 +9,17 @@ import { __ } from '@wordpress/i18n';
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
 
-function ScreenLayout( { name, variationPath = '' } ) {
+function ScreenLayout( { name, variation = '' } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasDimensionsPanel && (
-				<DimensionsPanel
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<DimensionsPanel name={ name } variation={ variation } />
 			) }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index f0277aef0eab1a..6403ff97e035a1 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -17,7 +17,8 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenLinkColor( { name, variationPath = '' } ) {
+function ScreenLinkColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
@@ -32,15 +33,15 @@ function ScreenLinkColor( { name, variationPath = '' } ) {
 		default: {
 			label: __( 'Default' ),
 			value: useGlobalStyle(
-				variationPath + 'elements.link.color.text',
+				prefix + 'elements.link.color.text',
 				name
 			)[ 0 ],
 			handler: useGlobalStyle(
-				variationPath + 'elements.link.color.text',
+				prefix + 'elements.link.color.text',
 				name
 			)[ 1 ],
 			userValue: useGlobalStyle(
-				variationPath + 'elements.link.color.text',
+				prefix + 'elements.link.color.text',
 				name,
 				'user'
 			)[ 0 ],
@@ -48,15 +49,15 @@ function ScreenLinkColor( { name, variationPath = '' } ) {
 		hover: {
 			label: __( 'Hover' ),
 			value: useGlobalStyle(
-				variationPath + 'elements.link.:hover.color.text',
+				prefix + 'elements.link.:hover.color.text',
 				name
 			)[ 0 ],
 			handler: useGlobalStyle(
-				variationPath + 'elements.link.:hover.color.text',
+				prefix + 'elements.link.:hover.color.text',
 				name
 			)[ 1 ],
 			userValue: useGlobalStyle(
-				variationPath + 'elements.link.:hover.color.text',
+				prefix + 'elements.link.:hover.color.text',
 				name,
 				'user'
 			)[ 0 ],
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
index 03f692dca12211..03dc46059333b3 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -16,7 +16,8 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenTextColor( { name, variationPath = '' } ) {
+function ScreenTextColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
 	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
@@ -27,15 +28,8 @@ function ScreenTextColor( { name, variationPath = '' } ) {
 		isTextEnabled &&
 		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
-	const [ color, setColor ] = useGlobalStyle(
-		variationPath + 'color.text',
-		name
-	);
-	const [ userColor ] = useGlobalStyle(
-		variationPath + 'color.text',
-		name,
-		'user'
-	);
+	const [ color, setColor ] = useGlobalStyle( prefix + 'color.text', name );
+	const [ userColor ] = useGlobalStyle( prefix + 'color.text', name, 'user' );
 
 	if ( ! hasTextColor ) {
 		return null;
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index bd56273781a3f8..6c813c454a2fcf 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -18,7 +18,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
 import { unlock } from '../../experiments';
 
 const { useGlobalStyle } = unlock( blockEditorExperiments );
@@ -92,9 +92,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name, variationPath = '' } ) {
+function ScreenTypography( { name, variation = '' } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader
@@ -143,7 +143,7 @@ function ScreenTypography( { name, variationPath = '' } ) {
 			{ !! name && (
 				<TypographyPanel
 					name={ name }
-					variationPath={ variationPath }
+					variation={ variation }
 					element="text"
 				/>
 			) }
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 88f00eb3f389dc..de88bf71114422 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -186,7 +186,7 @@ export default function TypographyPanel( {
 	name,
 	element,
 	headingLevel,
-	variationPath = '',
+	variation = '',
 } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	let prefix = '';
@@ -195,6 +195,11 @@ export default function TypographyPanel( {
 	} else if ( element && element !== 'text' ) {
 		prefix = `elements.${ element }.`;
 	}
+	if ( variation ) {
+		prefix = prefix
+			? `variations.${ variation }.${ prefix }`
+			: `variations.${ variation }`;
+	}
 	const [ fontSizesPerOrigin ] = useGlobalSetting(
 		'typography.fontSizes',
 		name
@@ -240,15 +245,9 @@ export default function TypographyPanel( {
 	}
 
 	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset(
-			variationPath + prefix + 'typography.fontFamily',
-			name
-		);
+		useStyleWithReset( prefix + 'typography.fontFamily', name );
 	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset(
-			variationPath + prefix + 'typography.fontSize',
-			name
-		);
+		useFontSizeWithReset( prefix + 'typography.fontSize', name );
 	const {
 		fontStyle,
 		setFontStyle,
@@ -256,39 +255,27 @@ export default function TypographyPanel( {
 		setFontWeight,
 		hasFontAppearance,
 		resetFontAppearance,
-	} = useFontAppearance( variationPath + prefix, name );
+	} = useFontAppearance( prefix, name );
 	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset(
-			variationPath + prefix + 'typography.lineHeight',
-			name
-		);
+		useStyleWithReset( prefix + 'typography.lineHeight', name );
 	const [
 		letterSpacing,
 		setLetterSpacing,
 		hasLetterSpacing,
 		resetLetterSpacing,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.letterSpacing',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
 	const [
 		textTransform,
 		setTextTransform,
 		hasTextTransform,
 		resetTextTransform,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.textTransform',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.textTransform', name );
 	const [
 		textDecoration,
 		setTextDecoration,
 		hasTextDecoration,
 		resetTextDecoration,
-	] = useStyleWithReset(
-		variationPath + prefix + 'typography.textDecoration',
-		name
-	);
+	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
 
 	const resetAll = () => {
 		resetFontFamily();
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 3a5acc6ef7779b..a7e6f9afcdb61d 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -110,6 +110,7 @@ function BlockStyleVariationsScreens( { name } ) {
 				'/variations/' +
 				encodeURIComponent( variation.name )
 			}
+			variation={ variation.name }
 		/>
 	) );
 }
@@ -129,15 +130,7 @@ function BlockStylesNavigationScreens( {
 	) );
 }
 
-function ContextScreens( { name, parentMenu = '' } ) {
-	const hasVariationPath = parentMenu.search( 'variations' );
-	const variationPath =
-		hasVariationPath !== -1
-			? parentMenu
-					.substring( hasVariationPath )
-					.replace( '/', '.' )
-					.concat( '', '.' )
-			: '';
+function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 	const blockStyleVariations = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -149,10 +142,7 @@ function ContextScreens( { name, parentMenu = '' } ) {
 	return (
 		<>
 			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenTypography name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -180,7 +170,7 @@ function ContextScreens( { name, parentMenu = '' } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } variationPath={ variationPath } />
+				<ScreenColors name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -192,50 +182,35 @@ function ContextScreens( { name, parentMenu = '' } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/background' }
 			>
-				<ScreenBackgroundColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenBackgroundColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenLinkColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/heading' }
 			>
-				<ScreenHeadingColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenHeadingColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
-				<ScreenButtonColor
-					name={ name }
-					variationPath={ variationPath }
-				/>
+				<ScreenButtonColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } variationPath={ variationPath } />
+				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } variationPath={ variationPath } />
+				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 8c20de6508fb64..05a004b878e5f9 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -1,12 +1,12 @@
 /**
  *
- * @param {string} path The variation path in the Global Styles tree.
+ * @param {string} variation The variation name.
  *
  * @return {string} The variation class name.
  */
-export function getVariationClassNameFromPath( path ) {
-	if ( ! path ) {
+export function getVariationClassName( variation ) {
+	if ( ! variation ) {
 		return '';
 	}
-	return `is-style-${ path.split( '.' )[ 1 ] }`;
+	return `is-style-${ variation }`;
 }