diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index c3eeb008964b36..1bcf78e212b270 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -1316,6 +1316,13 @@ export function processCSSNesting( css, blockSelector ) {
 	} );
 	return processedCSS;
 }
+/**
+ * An object containing options for useGlobalStylesOutput.
+ *
+ * @typedef {Object} useGlobalStylesOutputOptions
+ * @property {boolean} disableRootPadding Disable root padding styles. Default `false`.
+ * @property {boolean} variationStyles    Include variation styles. Default `false`.
+ */
 
 /**
  * Returns the global styles output using a global styles configuration.
@@ -1324,14 +1331,14 @@ export function processCSSNesting( css, blockSelector ) {
  * The use case for a custom config is to generate bespoke styles
  * and settings for previews, or other out-of-editor experiences.
  *
- * @param {Object}  mergedConfig       Global styles configuration.
- * @param {boolean} disableRootPadding Disable root padding styles.
+ * @param {Object}                       mergedConfig Global styles configuration.
+ * @param {useGlobalStylesOutputOptions} options      Options for generating global styles output.
  *
  * @return {Array} Array of stylesheets and settings.
  */
 export function useGlobalStylesOutputWithConfig(
 	mergedConfig = {},
-	disableRootPadding
+	options = {}
 ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
 	mergedConfig = setThemeFileUris(
@@ -1369,7 +1376,10 @@ export function useGlobalStylesOutputWithConfig(
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
-			disableRootPadding
+			options?.disableRootPadding,
+			{
+				variationStyles: options?.variationStyles,
+			}
 		);
 		const svgs = toSvgFilters( updatedConfig, blockSelectors );
 
@@ -1416,7 +1426,8 @@ export function useGlobalStylesOutputWithConfig(
 		hasFallbackGapSupport,
 		mergedConfig,
 		disableLayoutStyles,
-		disableRootPadding,
+		options?.disableRootPadding,
+		options?.variationStyles,
 		getBlockStyles,
 	] );
 }
@@ -1424,11 +1435,11 @@ export function useGlobalStylesOutputWithConfig(
 /**
  * Returns the global styles output based on the current state of global styles config loaded in the editor context.
  *
- * @param {boolean} disableRootPadding Disable root padding styles.
+ * @param {useGlobalStylesOutputOptions} options Disable root padding styles.
  *
  * @return {Array} Array of stylesheets and settings.
  */
-export function useGlobalStylesOutput( disableRootPadding = false ) {
+export function useGlobalStylesOutput( options ) {
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
-	return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding );
+	return useGlobalStylesOutputWithConfig( mergedConfig, options );
 }
diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js
index 2e840a7acdc375..f8113d89a0e514 100644
--- a/packages/edit-site/src/components/global-styles-renderer/index.js
+++ b/packages/edit-site/src/components/global-styles-renderer/index.js
@@ -18,9 +18,9 @@ function useGlobalStylesRenderer() {
 	const postType = useSelect( ( select ) => {
 		return select( editSiteStore ).getEditedPostType();
 	} );
-	const [ styles, settings ] = useGlobalStylesOutput(
-		postType !== TEMPLATE_POST_TYPE
-	);
+	const [ styles, settings ] = useGlobalStylesOutput( {
+		disableRootPadding: postType !== TEMPLATE_POST_TYPE,
+	} );
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index b726e79b15f2f7..ab71a9b864a219 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -56,7 +56,9 @@ function Revisions( { userConfig, blocks } ) {
 		[ originalSettings ]
 	);
 
-	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig, {
+		variationStyles: true,
+	} );
 
 	const editorStyles =
 		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )