From 69b219e300aeae3ad4035ad527cc7654ace90a82 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 24 Jun 2024 12:03:50 +1000
Subject: [PATCH 01/10] Render styles after the variation style overrides have
 been saved to stage. Getting closer. But the overrides in state need to be
 merged with incoming revision styles.

---
 packages/edit-site/src/components/revisions/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index b726e79b15f2f7..94d395886172a5 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -74,7 +74,6 @@ function Revisions( { userConfig, blocks } ) {
 				name="revisions"
 				tabIndex={ 0 }
 			>
-				<EditorStyles styles={ editorStyles } />
 				<style>
 					{
 						// Forming a "block formatting context" to prevent margin collapsing.
@@ -88,6 +87,7 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />
+						<EditorStyles styles={ editorStyles } />
 					</ExperimentalBlockEditorProvider>
 				</Disabled>
 			</Iframe>

From 1b4e3c5188aa375a1035e22a05d1401781475258 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 24 Jun 2024 14:32:54 +1000
Subject: [PATCH 02/10] For every current override, update the variation CSS
 with the incoming config from the revision.

---
 .../src/components/editor-styles/index.js     | 15 +++--
 .../src/hooks/block-style-variation.js        | 67 +++++++++++++++++++
 packages/block-editor/src/hooks/index.js      |  1 +
 packages/block-editor/src/hooks/utils.js      |  2 +
 packages/block-editor/src/private-apis.js     |  7 +-
 .../src/components/revisions/index.js         | 21 +++++-
 6 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 34c4a90020e3be..70011766631a68 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -67,15 +67,18 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
-function EditorStyles( { styles, scope } ) {
-	const overrides = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
-		[]
+function EditorStyles( { styles, scope, overrides } ) {
+	const styleOverrides = useSelect(
+		( select ) =>
+			! overrides
+				? unlock( select( blockEditorStore ) ).getStyleOverrides()
+				: overrides,
+		[ overrides ]
 	);
 	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
 		const _styles = Object.values( styles ?? [] );
 
-		for ( const [ id, override ] of overrides ) {
+		for ( const [ id, override ] of styleOverrides ) {
 			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
 			const overrideWithId = { ...override, id };
 			if ( index === -1 ) {
@@ -95,7 +98,7 @@ function EditorStyles( { styles, scope } ) {
 				.map( ( style ) => style.assets )
 				.join( '' ),
 		];
-	}, [ styles, overrides, scope ] );
+	}, [ styles, styleOverrides, scope ] );
 
 	return (
 		<>
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index 336db687558f52..3a32c02cc9cd5a 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -59,6 +59,72 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
+export function useGetBlockVariationStylesWithConfig(
+	config,
+	variationOverrides = []
+) {
+	const { getBlockStyles } = useSelect( blocksStore );
+	const { getBlockName } = useSelect( blockEditorStore );
+
+	return useMemo( () => {
+		for ( const [ , override ] of variationOverrides ) {
+			if ( override?.variation && override?.clientId ) {
+				const blockName = getBlockName( override.clientId );
+				const configStyles =
+					config?.styles?.blocks?.[ blockName ]?.variations?.[
+						override.variation
+					];
+				if ( configStyles ) {
+					const variationConfig = {
+						settings: config?.settings,
+						// The variation style data is all that is needed to generate
+						// the styles for the current application to a block. The variation
+						// name is updated to match the instance specific class name.
+						styles: {
+							blocks: {
+								[ blockName ]: {
+									variations: {
+										[ `${ override.variation }-${ override.clientId }` ]:
+											configStyles,
+									},
+								},
+							},
+						},
+					};
+					const blockSelectors = getBlockSelectors(
+						getBlockTypes(),
+						getBlockStyles,
+						override.clientId
+					);
+					const hasBlockGapSupport = false;
+					const hasFallbackGapSupport = true;
+					const disableLayoutStyles = true;
+					const disableRootPadding = true;
+					const variationStyles = toStyles(
+						variationConfig,
+						blockSelectors,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						disableLayoutStyles,
+						disableRootPadding,
+						{
+							blockGap: false,
+							blockStyles: true,
+							layoutStyles: false,
+							marginReset: false,
+							presets: false,
+							rootPadding: false,
+							variationStyles: true,
+						}
+					);
+					override.css = variationStyles;
+				}
+			}
+		}
+		return variationOverrides;
+	}, [ config, variationOverrides ] );
+}
+
 function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
@@ -157,6 +223,7 @@ function useBlockProps( { name, className, clientId } ) {
 		id: `variation-${ clientId }`,
 		css: variationStyles,
 		__unstableType: 'variation',
+		variation,
 		// The clientId will be stored with the override and used to ensure
 		// the order of overrides matches the order of blocks so that the
 		// correct CSS cascade is maintained.
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 89e6819c1d0314..2661f12a06623d 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -88,3 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useZoomOut } from './use-zoom-out';
+export { useGetBlockVariationStylesWithConfig } from './block-style-variation';
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index d4eb7df553d3c0..26700ecf7b3fab 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -140,6 +140,7 @@ export function useStyleOverride( {
 	css,
 	assets,
 	__unstableType,
+	variation,
 	clientId,
 } = {} ) {
 	const { setStyleOverride, deleteStyleOverride } = unlock(
@@ -159,6 +160,7 @@ export function useStyleOverride( {
 			css,
 			assets,
 			__unstableType,
+			variation,
 			clientId,
 		};
 		// Batch updates to style overrides to avoid triggering cascading renders
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index e6f3fc4cc39d6a..1028957277dd9c 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -20,7 +20,11 @@ import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
-import { useLayoutClasses, useLayoutStyles } from './hooks';
+import {
+	useLayoutClasses,
+	useLayoutStyles,
+	useGetBlockVariationStylesWithConfig,
+} from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
 import TextAlignmentControl from './components/text-alignment-control';
@@ -88,4 +92,5 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
+	useGetBlockVariationStylesWithConfig,
 } );
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index 94d395886172a5..c74534953942f3 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -25,6 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
+	useGetBlockVariationStylesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -32,6 +33,21 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
+const cloneObject = ( obj ) => JSON.parse( JSON.stringify( obj ) );
+function RevisionStyles( { styles, config } ) {
+	const variationOverrides = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		[ config ]
+	);
+
+	const mergedOverrides = useGetBlockVariationStylesWithConfig(
+		config,
+		cloneObject( variationOverrides )
+	);
+
+	return <EditorStyles styles={ styles } overrides={ mergedOverrides } />;
+}
+
 function Revisions( { userConfig, blocks } ) {
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 
@@ -87,7 +103,10 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />
-						<EditorStyles styles={ editorStyles } />
+						<RevisionStyles
+							styles={ editorStyles }
+							config={ mergedConfig }
+						/>
 					</ExperimentalBlockEditorProvider>
 				</Disabled>
 			</Iframe>

From 51894867e227d6592ec943695146a3edb3cf0ee3 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 24 Jun 2024 16:47:18 +1000
Subject: [PATCH 03/10] Rename hook Destructure in hook so the consumer doesn't
 have to clone Only send the override overrides to EditorStyles that need to
 be overridden.

---
 .../src/components/editor-styles/index.js     | 27 ++++++++++++++-----
 .../src/hooks/block-style-variation.js        | 21 ++++++++++++---
 packages/block-editor/src/hooks/index.js      |  2 +-
 packages/block-editor/src/private-apis.js     |  4 +--
 .../src/components/revisions/index.js         |  9 +++----
 5 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 70011766631a68..05fac78588e4f0 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -67,20 +67,35 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
+function getStyleOverrideById( overrides, id ) {
+	if ( ! overrides?.length || ! id ) {
+		return [];
+	}
+
+	return overrides.find( ( [ _id ] ) => _id === id ) || [];
+}
+
 function EditorStyles( { styles, scope, overrides } ) {
 	const styleOverrides = useSelect(
-		( select ) =>
-			! overrides
-				? unlock( select( blockEditorStore ) ).getStyleOverrides()
-				: overrides,
-		[ overrides ]
+		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		[]
 	);
 	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
 		const _styles = Object.values( styles ?? [] );
 
 		for ( const [ id, override ] of styleOverrides ) {
 			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
-			const overrideWithId = { ...override, id };
+			/*
+			 * The `overrides` prop	in EditorStyles,
+			 * allows consumers to override any existing overrides.
+			 */
+			const [ incomingId, incomingOverride ] = getStyleOverrideById(
+				overrides,
+				id
+			);
+			const overrideWithId = incomingId
+				? { ...incomingOverride, id: incomingId }
+				: { ...override, id };
 			if ( index === -1 ) {
 				_styles.push( overrideWithId );
 			} else {
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index 3a32c02cc9cd5a..fd180d5516ea56 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -59,7 +59,16 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
-export function useGetBlockVariationStylesWithConfig(
+/**
+ * This hook is used to generate new block style variation overrides
+ * based on an incoming theme config. If a matching style is found in the config,
+ * a new override is created and returned.
+ *
+ * @param {Object}               config             A global styles object, containing settings and styles.
+ * @param {Array<Array, Object>} variationOverrides An array of existing block variation overrides.
+ * @return {Array} An array of new block variation overrides.
+ */
+export function useUpdateBlockVariationOverridesWithConfig(
 	config,
 	variationOverrides = []
 ) {
@@ -67,7 +76,8 @@ export function useGetBlockVariationStylesWithConfig(
 	const { getBlockName } = useSelect( blockEditorStore );
 
 	return useMemo( () => {
-		for ( const [ , override ] of variationOverrides ) {
+		const newOverrides = [];
+		for ( const [ id, override ] of variationOverrides ) {
 			if ( override?.variation && override?.clientId ) {
 				const blockName = getBlockName( override.clientId );
 				const configStyles =
@@ -117,11 +127,14 @@ export function useGetBlockVariationStylesWithConfig(
 							variationStyles: true,
 						}
 					);
-					override.css = variationStyles;
+					newOverrides.push( [
+						id,
+						{ ...override, css: variationStyles },
+					] );
 				}
 			}
 		}
-		return variationOverrides;
+		return newOverrides;
 	}, [ config, variationOverrides ] );
 }
 
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 2661f12a06623d..8f18918a1cd2bd 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -88,4 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useZoomOut } from './use-zoom-out';
-export { useGetBlockVariationStylesWithConfig } from './block-style-variation';
+export { useUpdateBlockVariationOverridesWithConfig } from './block-style-variation';
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 1028957277dd9c..fbb8c8d66d55d3 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -23,7 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import {
 	useLayoutClasses,
 	useLayoutStyles,
-	useGetBlockVariationStylesWithConfig,
+	useUpdateBlockVariationOverridesWithConfig,
 } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
@@ -92,5 +92,5 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
-	useGetBlockVariationStylesWithConfig,
+	useUpdateBlockVariationOverridesWithConfig,
 } );
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index c74534953942f3..fabaab3f92f2c5 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -25,7 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
-	useGetBlockVariationStylesWithConfig,
+	useUpdateBlockVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -33,16 +33,15 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-const cloneObject = ( obj ) => JSON.parse( JSON.stringify( obj ) );
 function RevisionStyles( { styles, config } ) {
 	const variationOverrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
-		[ config ]
+		[]
 	);
 
-	const mergedOverrides = useGetBlockVariationStylesWithConfig(
+	const mergedOverrides = useUpdateBlockVariationOverridesWithConfig(
 		config,
-		cloneObject( variationOverrides )
+		variationOverrides
 	);
 
 	return <EditorStyles styles={ styles } overrides={ mergedOverrides } />;

From 3d583c8a44b70cda053a4281f0051322011b64b7 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 24 Jun 2024 19:49:15 +1000
Subject: [PATCH 04/10] Fetching overrides in the hook

---
 .../src/hooks/block-style-variation.js          | 17 +++++++++--------
 .../edit-site/src/components/revisions/index.js | 16 +++++++---------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index fd180d5516ea56..3ffa903a8a3d8f 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -16,6 +16,7 @@ import {
 import { useStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
+import { unlock } from '../lock-unlock';
 
 const VARIATION_PREFIX = 'is-style-';
 
@@ -64,20 +65,20 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
  * based on an incoming theme config. If a matching style is found in the config,
  * a new override is created and returned.
  *
- * @param {Object}               config             A global styles object, containing settings and styles.
- * @param {Array<Array, Object>} variationOverrides An array of existing block variation overrides.
+ * @param {Object} config A global styles object, containing settings and styles.
  * @return {Array} An array of new block variation overrides.
  */
-export function useUpdateBlockVariationOverridesWithConfig(
-	config,
-	variationOverrides = []
-) {
+export function useUpdateBlockVariationOverridesWithConfig( config ) {
+	const overrides = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		[]
+	);
 	const { getBlockStyles } = useSelect( blocksStore );
 	const { getBlockName } = useSelect( blockEditorStore );
 
 	return useMemo( () => {
 		const newOverrides = [];
-		for ( const [ id, override ] of variationOverrides ) {
+		for ( const [ id, override ] of overrides ) {
 			if ( override?.variation && override?.clientId ) {
 				const blockName = getBlockName( override.clientId );
 				const configStyles =
@@ -135,7 +136,7 @@ export function useUpdateBlockVariationOverridesWithConfig(
 			}
 		}
 		return newOverrides;
-	}, [ config, variationOverrides ] );
+	}, [ config, overrides ] );
 }
 
 function useBlockStyleVariation( name, variation, clientId ) {
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index fabaab3f92f2c5..cb210c09e4af43 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -34,15 +34,8 @@ function isObjectEmpty( object ) {
 }
 
 function RevisionStyles( { styles, config } ) {
-	const variationOverrides = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
-		[]
-	);
-
-	const mergedOverrides = useUpdateBlockVariationOverridesWithConfig(
-		config,
-		variationOverrides
-	);
+	const mergedOverrides =
+		useUpdateBlockVariationOverridesWithConfig( config );
 
 	return <EditorStyles styles={ styles } overrides={ mergedOverrides } />;
 }
@@ -102,6 +95,11 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />
+						{ /*
+						 * Styles are printed at the end of the document,
+						 * so they can access any registered style overrides,
+						 * which are only stored after the block list is rendered.
+						 */ }
 						<RevisionStyles
 							styles={ editorStyles }
 							config={ mergedConfig }

From 2853fb3271ed74df1f9a555e291aa86f9176fd01 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 25 Jun 2024 13:15:56 +1000
Subject: [PATCH 05/10] Feedback suggestions from review: add overrides to dep
 array in Editor Styles rename hook

---
 packages/block-editor/src/components/editor-styles/index.js | 2 +-
 packages/block-editor/src/hooks/block-style-variation.js    | 2 +-
 packages/block-editor/src/hooks/index.js                    | 2 +-
 packages/block-editor/src/private-apis.js                   | 4 ++--
 packages/edit-site/src/components/revisions/index.js        | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 05fac78588e4f0..00a15d2bcfa48d 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -113,7 +113,7 @@ function EditorStyles( { styles, scope, overrides } ) {
 				.map( ( style ) => style.assets )
 				.join( '' ),
 		];
-	}, [ styles, styleOverrides, scope ] );
+	}, [ styles, styleOverrides, overrides, scope ] );
 
 	return (
 		<>
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index 3ffa903a8a3d8f..9050409ec85bd7 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -68,7 +68,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
  * @param {Object} config A global styles object, containing settings and styles.
  * @return {Array} An array of new block variation overrides.
  */
-export function useUpdateBlockVariationOverridesWithConfig( config ) {
+export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
 	const overrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		[]
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 8f18918a1cd2bd..f831249881200d 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -88,4 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useZoomOut } from './use-zoom-out';
-export { useUpdateBlockVariationOverridesWithConfig } from './block-style-variation';
+export { useUpdateBlockStyleVariationOverridesWithConfig } from './block-style-variation';
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index fbb8c8d66d55d3..0e5f18a5005b2f 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -23,7 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import {
 	useLayoutClasses,
 	useLayoutStyles,
-	useUpdateBlockVariationOverridesWithConfig,
+	useUpdateBlockStyleVariationOverridesWithConfig,
 } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
@@ -92,5 +92,5 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
-	useUpdateBlockVariationOverridesWithConfig,
+	useUpdateBlockStyleVariationOverridesWithConfig,
 } );
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index cb210c09e4af43..aee6136df58888 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -25,7 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
-	useUpdateBlockVariationOverridesWithConfig,
+	useUpdateBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -35,7 +35,7 @@ function isObjectEmpty( object ) {
 
 function RevisionStyles( { styles, config } ) {
 	const mergedOverrides =
-		useUpdateBlockVariationOverridesWithConfig( config );
+		useUpdateBlockStyleVariationOverridesWithConfig( config );
 
 	return <EditorStyles styles={ styles } overrides={ mergedOverrides } />;
 }

From 375470e8be8a4de720cc5323abaa827e41c8d186 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 25 Jun 2024 18:27:42 +1000
Subject: [PATCH 06/10] Return getBlockStyles from the useSelect callback

---
 packages/block-editor/src/hooks/block-style-variation.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index 9050409ec85bd7..a07fa7ce9557e0 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -69,11 +69,13 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
  * @return {Array} An array of new block variation overrides.
  */
 export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
-	const overrides = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+	const { getBlockStyles, overrides } = useSelect(
+		( select ) => ( {
+			getBlockStyles: select( blocksStore ).getBlockStyles,
+			overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		} ),
 		[]
 	);
-	const { getBlockStyles } = useSelect( blocksStore );
 	const { getBlockName } = useSelect( blockEditorStore );
 
 	return useMemo( () => {

From b9eb7585383e598105d3717e5b509780a8871653 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 26 Jun 2024 12:21:52 +1000
Subject: [PATCH 07/10] Refactor so we don't have to change the EditorStyles
 props Register revision overrides with useStyleOverride

---
 .../src/components/editor-styles/index.js     | 28 ++-------
 .../src/hooks/block-style-variation.js        | 58 ++++++++++++++-----
 packages/block-editor/src/hooks/index.js      |  2 +-
 packages/block-editor/src/private-apis.js     |  4 +-
 .../src/components/revisions/index.js         | 18 ++----
 5 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 00a15d2bcfa48d..34c4a90020e3be 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -67,35 +67,17 @@ function useDarkThemeBodyClassName( styles, scope ) {
 	);
 }
 
-function getStyleOverrideById( overrides, id ) {
-	if ( ! overrides?.length || ! id ) {
-		return [];
-	}
-
-	return overrides.find( ( [ _id ] ) => _id === id ) || [];
-}
-
-function EditorStyles( { styles, scope, overrides } ) {
-	const styleOverrides = useSelect(
+function EditorStyles( { styles, scope } ) {
+	const overrides = useSelect(
 		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		[]
 	);
 	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
 		const _styles = Object.values( styles ?? [] );
 
-		for ( const [ id, override ] of styleOverrides ) {
+		for ( const [ id, override ] of overrides ) {
 			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
-			/*
-			 * The `overrides` prop	in EditorStyles,
-			 * allows consumers to override any existing overrides.
-			 */
-			const [ incomingId, incomingOverride ] = getStyleOverrideById(
-				overrides,
-				id
-			);
-			const overrideWithId = incomingId
-				? { ...incomingOverride, id: incomingId }
-				: { ...override, id };
+			const overrideWithId = { ...override, id };
 			if ( index === -1 ) {
 				_styles.push( overrideWithId );
 			} else {
@@ -113,7 +95,7 @@ function EditorStyles( { styles, scope, overrides } ) {
 				.map( ( style ) => style.assets )
 				.join( '' ),
 		];
-	}, [ styles, styleOverrides, overrides, scope ] );
+	}, [ styles, overrides, scope ] );
 
 	return (
 		<>
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index a07fa7ce9557e0..1b4cc3ad5afe48 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -60,15 +60,23 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
+function OverrideStyles( { override } ) {
+	useStyleOverride( override );
+}
+
 /**
- * This hook is used to generate new block style variation overrides
+ * This component is used to generate new block style variation overrides
  * based on an incoming theme config. If a matching style is found in the config,
- * a new override is created and returned.
+ * a new override is created and returned. The overrides can be used in conjunction with
+ * useStyleOverride to apply the new styles to the editor.
  *
- * @param {Object} config A global styles object, containing settings and styles.
- * @return {Array} An array of new block variation overrides.
+ * @param {Object} props        Props.
+ * @param {Object} props.config A global styles object, containing settings and styles.
+ * @return {JSX.Element} An array of new block variation overrides.
  */
-export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
+export function ExperimentalBlockStyleVariationOverridesWithConfig( {
+	config,
+} ) {
 	const { getBlockStyles, overrides } = useSelect(
 		( select ) => ( {
 			getBlockStyles: select( blocksStore ).getBlockStyles,
@@ -78,10 +86,19 @@ export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
 	);
 	const { getBlockName } = useSelect( blockEditorStore );
 
-	return useMemo( () => {
+	const overridesWithConfig = useMemo( () => {
 		const newOverrides = [];
-		for ( const [ id, override ] of overrides ) {
-			if ( override?.variation && override?.clientId ) {
+		const clientIds = [];
+		for ( const [ , override ] of overrides ) {
+			if (
+				override?.variation &&
+				override?.clientId &&
+				/*
+				 * Because this component overwrites existing style overrides,
+				 * filter out any overrides that are already present in the store.
+				 */
+				! clientIds.includes( override.clientId )
+			) {
 				const blockName = getBlockName( override.clientId );
 				const configStyles =
 					config?.styles?.blocks?.[ blockName ]?.variations?.[
@@ -130,15 +147,30 @@ export function useUpdateBlockStyleVariationOverridesWithConfig( config ) {
 							variationStyles: true,
 						}
 					);
-					newOverrides.push( [
-						id,
-						{ ...override, css: variationStyles },
-					] );
+					newOverrides.push( {
+						id: `${ override.variation }-${ override.clientId }`,
+						css: variationStyles,
+						__unstableType: 'variation',
+						variation: override.variation,
+						// The clientId will be stored with the override and used to ensure
+						// the order of overrides matches the order of blocks so that the
+						// correct CSS cascade is maintained.
+						clientId: override.clientId,
+					} );
+					clientIds.push( override.clientId );
 				}
 			}
 		}
 		return newOverrides;
-	}, [ config, overrides ] );
+	}, [ config, overrides, getBlockStyles ] );
+
+	return (
+		<>
+			{ overridesWithConfig.map( ( override ) => (
+				<OverrideStyles key={ override.id } override={ override } />
+			) ) }
+		</>
+	);
 }
 
 function useBlockStyleVariation( name, variation, clientId ) {
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index f831249881200d..6e79d2b3dbab86 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -88,4 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useZoomOut } from './use-zoom-out';
-export { useUpdateBlockStyleVariationOverridesWithConfig } from './block-style-variation';
+export { ExperimentalBlockStyleVariationOverridesWithConfig } from './block-style-variation';
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 0e5f18a5005b2f..b408693e375345 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -23,7 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import {
 	useLayoutClasses,
 	useLayoutStyles,
-	useUpdateBlockStyleVariationOverridesWithConfig,
+	ExperimentalBlockStyleVariationOverridesWithConfig,
 } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
@@ -92,5 +92,5 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
-	useUpdateBlockStyleVariationOverridesWithConfig,
+	ExperimentalBlockStyleVariationOverridesWithConfig,
 } );
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index aee6136df58888..932905a8effd08 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -25,7 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
-	useUpdateBlockStyleVariationOverridesWithConfig,
+	ExperimentalBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -33,13 +33,6 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-function RevisionStyles( { styles, config } ) {
-	const mergedOverrides =
-		useUpdateBlockStyleVariationOverridesWithConfig( config );
-
-	return <EditorStyles styles={ styles } overrides={ mergedOverrides } />;
-}
-
 function Revisions( { userConfig, blocks } ) {
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 
@@ -96,12 +89,11 @@ function Revisions( { userConfig, blocks } ) {
 					>
 						<BlockList renderAppender={ false } />
 						{ /*
-						 * Styles are printed at the end of the document,
-						 * so they can access any registered style overrides,
-						 * which are only stored after the block list is rendered.
+						 * Styles are printed inside the block editor provider,
+						 * so they can access any registered style overrides.
 						 */ }
-						<RevisionStyles
-							styles={ editorStyles }
+						<EditorStyles styles={ editorStyles } />
+						<ExperimentalBlockStyleVariationOverridesWithConfig
 							config={ mergedConfig }
 						/>
 					</ExperimentalBlockEditorProvider>

From fcebc079b7b0bad516203d2610b8366d969ed282 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 26 Jun 2024 16:56:22 +1000
Subject: [PATCH 08/10] Adding some explanatory comments Add rudimentary E2E
 test covering block style partials, applying them, updating them and viewing
 styles revisions.

---
 .../src/hooks/block-style-variation.js        |   4 +
 .../block-style-variations.spec.js            | 303 ++++++++++++++++++
 .../block-templates/singular.html             |   2 +
 .../styles/block-style-variation-a.json       |  20 ++
 .../styles/block-style-variation-b.json       |  20 ++
 .../styles/block-style-variation-c.json       |  20 ++
 6 files changed, 369 insertions(+)
 create mode 100644 test/e2e/specs/site-editor/block-style-variations.spec.js
 create mode 100644 test/gutenberg-test-themes/style-variations/block-templates/singular.html
 create mode 100644 test/gutenberg-test-themes/style-variations/styles/block-style-variation-a.json
 create mode 100644 test/gutenberg-test-themes/style-variations/styles/block-style-variation-b.json
 create mode 100644 test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json

diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index 1b4cc3ad5afe48..f00c96d640a575 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -60,6 +60,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
+// A helper component to apply a style override using the useStyleOverride hook.
 function OverrideStyles( { override } ) {
 	useStyleOverride( override );
 }
@@ -69,6 +70,9 @@ function OverrideStyles( { override } ) {
  * based on an incoming theme config. If a matching style is found in the config,
  * a new override is created and returned. The overrides can be used in conjunction with
  * useStyleOverride to apply the new styles to the editor.
+ * NOTE: This component is required to load global styles revisions config. Style variation overrides are
+ * generated using the canvas's current global styles (see useBlockStyleVariation()). This component is,
+ * however, due to be refactored and therefore it's use elsewhere is not recommended.
  *
  * @param {Object} props        Props.
  * @param {Object} props.config A global styles object, containing settings and styles.
diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
new file mode 100644
index 00000000000000..88539c844a6a89
--- /dev/null
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -0,0 +1,303 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+const TEST_PAGE_TITLE = 'Test Page for Block Style Variations';
+test.use( {
+	siteEditorBlockStyleVariations: async ( { page, editor }, use ) => {
+		await use( new SiteEditorBlockStyleVariations( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Block Style Variations', () => {
+	let stylesPostId;
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme(
+				'gutenberg-test-themes/style-variations'
+			),
+			requestUtils.deleteAllPages(),
+		] );
+		stylesPostId = await requestUtils.getCurrentThemeGlobalStylesPostId();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.beforeEach( async ( { requestUtils, admin } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPages(),
+			admin.visitSiteEditor(),
+		] );
+	} );
+
+	test( 'apply block styles variations to nested blocks', async ( {
+		editor,
+		page,
+	} ) => {
+		await draftNewPage( page );
+		await addPageContent( editor, page );
+		const firstGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.first();
+		const secondGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 1 );
+		const thirdGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 2 );
+
+		// Apply a block style to the parent Group block.
+		await editor.selectBlocks( firstGroup );
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation A' } )
+			.click( { force: true } );
+
+		// Check parent styles.
+		await expect( firstGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( firstGroup ).toHaveCSS( 'border-width', '1px' );
+
+		// Check nested child and grandchild group block inherited styles.
+		await expect( secondGroup ).toHaveCSS( 'border-style', 'solid' );
+		await expect( secondGroup ).toHaveCSS( 'border-width', '11px' );
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'solid' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '11px' );
+
+		// Apply a block style to the first, nested Group block.
+		await editor.selectBlocks( secondGroup );
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation B' } )
+			.click( { force: true } );
+
+		// Check nested child styles.
+		await expect( secondGroup ).toHaveCSS( 'border-style', 'dashed' );
+		await expect( secondGroup ).toHaveCSS( 'border-width', '2px' );
+
+		// Check nested grandchild group block inherited styles.
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '22px' );
+	} );
+
+	test( 'update block style variations in global styles and check revisions match styles', async ( {
+		editor,
+		page,
+		siteEditorBlockStyleVariations,
+	} ) => {
+		await draftNewPage( page );
+		await addPageContent( editor, page );
+		const firstGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.first();
+		const secondGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 1 );
+		const thirdGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 2 );
+
+		// Apply a block style to the parent Group block.
+		await editor.selectBlocks( firstGroup );
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation A' } )
+			.click( { force: true } );
+
+		// Apply a block style to the first, nested Group block.
+		await editor.selectBlocks( secondGroup );
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation B' } )
+			.click( { force: true } );
+
+		// Update user global styles with new block style variation values.
+		await siteEditorBlockStyleVariations.saveRevision( stylesPostId, {
+			blocks: {
+				'core/group': {
+					variations: {
+						'block-style-variation-a': {
+							border: {
+								width: '3px',
+								style: 'outset',
+							},
+						},
+						'block-style-variation-b': {
+							border: {
+								width: '4px',
+								style: 'double',
+							},
+						},
+					},
+				},
+			},
+		} );
+
+		// Check parent styles.
+		await expect( firstGroup ).toHaveCSS( 'border-style', 'outset' );
+		await expect( firstGroup ).toHaveCSS( 'border-width', '3px' );
+
+		// Check nested child styles.
+		await expect( secondGroup ).toHaveCSS( 'border-style', 'double' );
+		await expect( secondGroup ).toHaveCSS( 'border-width', '4px' );
+
+		// Check nested grandchild group block inherited styles.
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '22px' );
+
+		// The initial revision styles should match the editor canvas.
+		await siteEditorBlockStyleVariations.openStylesPanel();
+		const revisionsButton = page.getByRole( 'button', {
+			name: 'Revisions',
+			exact: true,
+		} );
+		await revisionsButton.click();
+		await expect(
+			page.locator( 'iframe[name="revisions"]' )
+		).toBeVisible();
+		const revisionIframe = page.frameLocator( '[name="revisions"]' );
+
+		const revisionFirstGroup = revisionIframe
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.locator( '[data-type="core/group"]' )
+			.first();
+		const revisionSecondGroup = revisionIframe
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.locator( '[data-type="core/group"]' )
+			.nth( 1 );
+		const revisionThirdGroup = revisionIframe
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.locator( '[data-type="core/group"]' )
+			.nth( 2 );
+
+		// Check parent styles.
+		await expect( revisionFirstGroup ).toHaveCSS(
+			'border-style',
+			'outset'
+		);
+		await expect( revisionFirstGroup ).toHaveCSS( 'border-width', '3px' );
+
+		// Check nested child styles.
+		await expect( revisionSecondGroup ).toHaveCSS(
+			'border-style',
+			'double'
+		);
+		await expect( revisionSecondGroup ).toHaveCSS( 'border-width', '4px' );
+
+		// Check nested grandchild group block inherited styles.
+		await expect( revisionThirdGroup ).toHaveCSS(
+			'border-style',
+			'groove'
+		);
+		await expect( revisionThirdGroup ).toHaveCSS( 'border-width', '22px' );
+	} );
+} );
+
+class SiteEditorBlockStyleVariations {
+	constructor( { page, editor } ) {
+		this.page = page;
+		this.editor = editor;
+	}
+
+	async openStylesPanel() {
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+	}
+
+	async saveRevision( stylesPostId, styles = {}, settings = {} ) {
+		await this.page.evaluate(
+			async ( [ _stylesPostId, _styles, _settings ] ) => {
+				window.wp.data
+					.dispatch( 'core' )
+					.editEntityRecord( 'root', 'globalStyles', _stylesPostId, {
+						id: _stylesPostId,
+						settings: _settings,
+						styles: _styles,
+					} );
+			},
+			[ stylesPostId, styles, settings ]
+		);
+		await this.editor.saveSiteEditorEntities();
+	}
+}
+
+async function draftNewPage( page ) {
+	await page.getByRole( 'button', { name: 'Pages' } ).click();
+	await page.getByRole( 'button', { name: 'Add new page' } ).click();
+	await page
+		.locator( 'role=dialog[name="Draft a new page"i]' )
+		.locator( 'role=textbox[name="Page title"i]' )
+		.fill( TEST_PAGE_TITLE );
+	await page.keyboard.press( 'Enter' );
+	await expect(
+		page.locator(
+			`role=button[name="Dismiss this notice"i] >> text='"${ TEST_PAGE_TITLE }" successfully created.'`
+		)
+	).toBeVisible();
+}
+
+// Create a Group block with 2 nested Group blocks.
+async function addPageContent( editor, page ) {
+	const inserterButton = page.locator(
+		'role=button[name="Toggle block inserter"i]'
+	);
+	await inserterButton.click();
+	await page.type(
+		'role=searchbox[name="Search for blocks and patterns"i]',
+		'Group'
+	);
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
+	);
+	await editor.canvas
+		.locator( 'role=button[name="Group: Gather blocks in a container."i]' )
+		.click();
+	await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+	);
+	await page.keyboard.type( 'Parent Group Block with a Paragraph' );
+	await page.keyboard.press( 'Enter' );
+	await page.keyboard.type( '/group' );
+	await expect(
+		page.locator( 'role=option[name="Group"i][selected]' )
+	).toBeVisible();
+	await page.keyboard.press( 'Enter' );
+	await editor.canvas
+		.locator( 'role=button[name="Group: Gather blocks in a container."i]' )
+		.click();
+	await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+	);
+	await page.keyboard.type( 'Child Group Block with a Paragraph' );
+	await page.keyboard.press( 'Enter' );
+	await page.keyboard.type( '/group' );
+	await expect(
+		page.locator( 'role=option[name="Group"i][selected]' )
+	).toBeVisible();
+	await page.keyboard.press( 'Enter' );
+	await editor.canvas
+		.locator( 'role=button[name="Group: Gather blocks in a container."i]' )
+		.click();
+	await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+	);
+	await page.keyboard.type( 'Grandchild Group Block with a Paragraph' );
+	await page.getByRole( 'button', { name: 'Publish', exact: true } ).click();
+}
diff --git a/test/gutenberg-test-themes/style-variations/block-templates/singular.html b/test/gutenberg-test-themes/style-variations/block-templates/singular.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/style-variations/block-templates/singular.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/style-variations/styles/block-style-variation-a.json b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-a.json
new file mode 100644
index 00000000000000..92a11d953cdb5c
--- /dev/null
+++ b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-a.json
@@ -0,0 +1,20 @@
+{
+	"version": 3,
+	"title": "Block Style Variation A",
+	"slug": "block-style-variation-a",
+	"blockTypes": [ "core/group" ],
+	"styles": {
+		"border": {
+			"width": "1px",
+			"style": "dotted"
+		},
+		"blocks": {
+			"core/group": {
+				"border": {
+					"width": "11px",
+					"style": "solid"
+				}
+			}
+		}
+	}
+}
diff --git a/test/gutenberg-test-themes/style-variations/styles/block-style-variation-b.json b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-b.json
new file mode 100644
index 00000000000000..79644689d18402
--- /dev/null
+++ b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-b.json
@@ -0,0 +1,20 @@
+{
+	"version": 3,
+	"title": "Block Style Variation B",
+	"slug": "block-style-variation-b",
+	"blockTypes": [ "core/group" ],
+	"styles": {
+		"border": {
+			"width": "2px",
+			"style": "dashed"
+		},
+		"blocks": {
+			"core/group": {
+				"border": {
+					"width": "22px",
+					"style": "groove"
+				}
+			}
+		}
+	}
+}
diff --git a/test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json
new file mode 100644
index 00000000000000..835bb595ece632
--- /dev/null
+++ b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json
@@ -0,0 +1,20 @@
+{
+	"version": 3,
+	"title": "Block Style Variation C",
+	"slug": "block-style-variation-c",
+	"blockTypes": [ "core/group" ],
+	"styles": {
+		"color": {
+			"background": "darkslateblue",
+			"text": "aliceblue"
+		},
+		"blocks": {
+			"core/group": {
+				"color": {
+					"background": "slateblue",
+					"text": "linen"
+				}
+			}
+		}
+	}
+}

From 2e3c9d8fe4f0d168ee0c7fc3df6f44303a36ad32 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 26 Jun 2024 16:57:24 +1000
Subject: [PATCH 09/10] Removed unused style fixture

---
 .../styles/block-style-variation-c.json       | 20 -------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json

diff --git a/test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json
deleted file mode 100644
index 835bb595ece632..00000000000000
--- a/test/gutenberg-test-themes/style-variations/styles/block-style-variation-c.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"version": 3,
-	"title": "Block Style Variation C",
-	"slug": "block-style-variation-c",
-	"blockTypes": [ "core/group" ],
-	"styles": {
-		"color": {
-			"background": "darkslateblue",
-			"text": "aliceblue"
-		},
-		"blocks": {
-			"core/group": {
-				"color": {
-					"background": "slateblue",
-					"text": "linen"
-				}
-			}
-		}
-	}
-}

From 55cc60cf9d740b7aca77a83263608647b7340bda Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 27 Jun 2024 15:46:19 +1000
Subject: [PATCH 10/10] Removed unused style fixture

---
 .../src/hooks/block-style-variation.js        | 27 ++---
 packages/block-editor/src/hooks/index.js      |  2 +-
 packages/block-editor/src/private-apis.js     |  4 +-
 .../src/components/revisions/index.js         |  4 +-
 .../block-style-variations.spec.js            | 99 +++++++++++++++----
 5 files changed, 101 insertions(+), 35 deletions(-)

diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
index f00c96d640a575..21259966d8a63b 100644
--- a/packages/block-editor/src/hooks/block-style-variation.js
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -69,18 +69,14 @@ function OverrideStyles( { override } ) {
  * This component is used to generate new block style variation overrides
  * based on an incoming theme config. If a matching style is found in the config,
  * a new override is created and returned. The overrides can be used in conjunction with
- * useStyleOverride to apply the new styles to the editor.
- * NOTE: This component is required to load global styles revisions config. Style variation overrides are
- * generated using the canvas's current global styles (see useBlockStyleVariation()). This component is,
- * however, due to be refactored and therefore it's use elsewhere is not recommended.
+ * useStyleOverride to apply the new styles to the editor. Its use is
+ * subject to change.
  *
  * @param {Object} props        Props.
  * @param {Object} props.config A global styles object, containing settings and styles.
- * @return {JSX.Element} An array of new block variation overrides.
+ * @return {JSX.Element|undefined} An array of new block variation overrides.
  */
-export function ExperimentalBlockStyleVariationOverridesWithConfig( {
-	config,
-} ) {
+export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
 	const { getBlockStyles, overrides } = useSelect(
 		( select ) => ( {
 			getBlockStyles: select( blocksStore ).getBlockStyles,
@@ -91,8 +87,11 @@ export function ExperimentalBlockStyleVariationOverridesWithConfig( {
 	const { getBlockName } = useSelect( blockEditorStore );
 
 	const overridesWithConfig = useMemo( () => {
+		if ( ! overrides?.length ) {
+			return;
+		}
 		const newOverrides = [];
-		const clientIds = [];
+		const overriddenClientIds = [];
 		for ( const [ , override ] of overrides ) {
 			if (
 				override?.variation &&
@@ -101,7 +100,7 @@ export function ExperimentalBlockStyleVariationOverridesWithConfig( {
 				 * Because this component overwrites existing style overrides,
 				 * filter out any overrides that are already present in the store.
 				 */
-				! clientIds.includes( override.clientId )
+				! overriddenClientIds.includes( override.clientId )
 			) {
 				const blockName = getBlockName( override.clientId );
 				const configStyles =
@@ -161,12 +160,16 @@ export function ExperimentalBlockStyleVariationOverridesWithConfig( {
 						// correct CSS cascade is maintained.
 						clientId: override.clientId,
 					} );
-					clientIds.push( override.clientId );
+					overriddenClientIds.push( override.clientId );
 				}
 			}
 		}
 		return newOverrides;
-	}, [ config, overrides, getBlockStyles ] );
+	}, [ config, overrides, getBlockStyles, getBlockName ] );
+
+	if ( ! overridesWithConfig || ! overridesWithConfig.length ) {
+		return;
+	}
 
 	return (
 		<>
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 6e79d2b3dbab86..bd1835571fdd4a 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -88,4 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useZoomOut } from './use-zoom-out';
-export { ExperimentalBlockStyleVariationOverridesWithConfig } from './block-style-variation';
+export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index b408693e375345..bfa6ac0c90c846 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -23,7 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import {
 	useLayoutClasses,
 	useLayoutStyles,
-	ExperimentalBlockStyleVariationOverridesWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
@@ -92,5 +92,5 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
-	ExperimentalBlockStyleVariationOverridesWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } );
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index 932905a8effd08..d43b5e8d2ac025 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -25,7 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
-	ExperimentalBlockStyleVariationOverridesWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -93,7 +93,7 @@ function Revisions( { userConfig, blocks } ) {
 						 * so they can access any registered style overrides.
 						 */ }
 						<EditorStyles styles={ editorStyles } />
-						<ExperimentalBlockStyleVariationOverridesWithConfig
+						<__unstableBlockStyleVariationOverridesWithConfig
 							config={ mergedConfig }
 						/>
 					</ExperimentalBlockEditorProvider>
diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
index 88539c844a6a89..fedcd0946eac86 100644
--- a/test/e2e/specs/site-editor/block-style-variations.spec.js
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -16,7 +16,6 @@ test.describe( 'Block Style Variations', () => {
 			requestUtils.activateTheme(
 				'gutenberg-test-themes/style-variations'
 			),
-			requestUtils.deleteAllPages(),
 		] );
 		stylesPostId = await requestUtils.getCurrentThemeGlobalStylesPostId();
 	} );
@@ -57,32 +56,43 @@ test.describe( 'Block Style Variations', () => {
 		await page.getByRole( 'tab', { name: 'Styles' } ).click();
 		await page
 			.getByRole( 'button', { name: 'Block Style Variation A' } )
-			.click( { force: true } );
+			.click();
 
-		// Check parent styles.
+		// Check parent styles have variation A styles.
 		await expect( firstGroup ).toHaveCSS( 'border-style', 'dotted' );
 		await expect( firstGroup ).toHaveCSS( 'border-width', '1px' );
 
-		// Check nested child and grandchild group block inherited styles.
+		// Check nested child and grandchild group block variation A inherited styles.
 		await expect( secondGroup ).toHaveCSS( 'border-style', 'solid' );
 		await expect( secondGroup ).toHaveCSS( 'border-width', '11px' );
 		await expect( thirdGroup ).toHaveCSS( 'border-style', 'solid' );
 		await expect( thirdGroup ).toHaveCSS( 'border-width', '11px' );
 
-		// Apply a block style to the first, nested Group block.
+		// Apply a block style to the nested child Group block.
 		await editor.selectBlocks( secondGroup );
 		await page.getByRole( 'tab', { name: 'Styles' } ).click();
 		await page
 			.getByRole( 'button', { name: 'Block Style Variation B' } )
-			.click( { force: true } );
+			.click();
 
-		// Check nested child styles.
+		// Check nested child styles have variation B styles.
 		await expect( secondGroup ).toHaveCSS( 'border-style', 'dashed' );
 		await expect( secondGroup ).toHaveCSS( 'border-width', '2px' );
 
-		// Check nested grandchild group block inherited styles.
+		// Check nested grandchild Group block variation B inherited styles.
 		await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
 		await expect( thirdGroup ).toHaveCSS( 'border-width', '22px' );
+
+		// Apply a block style to the nested grandchild Group block.
+		await editor.selectBlocks( thirdGroup );
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation A' } )
+			.click();
+
+		// Check that the child's inner block styles from variation B are overridden by the grandchild's block style variation A.
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '1px' );
 	} );
 
 	test( 'update block style variations in global styles and check revisions match styles', async ( {
@@ -108,16 +118,17 @@ test.describe( 'Block Style Variations', () => {
 		await page.getByRole( 'tab', { name: 'Styles' } ).click();
 		await page
 			.getByRole( 'button', { name: 'Block Style Variation A' } )
-			.click( { force: true } );
+			.click();
 
 		// Apply a block style to the first, nested Group block.
 		await editor.selectBlocks( secondGroup );
 		await page.getByRole( 'tab', { name: 'Styles' } ).click();
 		await page
 			.getByRole( 'button', { name: 'Block Style Variation B' } )
-			.click( { force: true } );
+			.click();
 
 		// Update user global styles with new block style variation values.
+		// First revision.
 		await siteEditorBlockStyleVariations.saveRevision( stylesPostId, {
 			blocks: {
 				'core/group': {
@@ -138,14 +149,41 @@ test.describe( 'Block Style Variations', () => {
 				},
 			},
 		} );
+		// The save button has been re-enabled.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save' } )
+		).toBeEnabled();
+		// Second revision (current).
+		await siteEditorBlockStyleVariations.saveRevision( stylesPostId, {
+			blocks: {
+				'core/group': {
+					variations: {
+						'block-style-variation-a': {
+							border: {
+								width: '7px',
+								style: 'dotted',
+							},
+						},
+						'block-style-variation-b': {
+							border: {
+								width: '8px',
+								style: 'dotted',
+							},
+						},
+					},
+				},
+			},
+		} );
 
 		// Check parent styles.
-		await expect( firstGroup ).toHaveCSS( 'border-style', 'outset' );
-		await expect( firstGroup ).toHaveCSS( 'border-width', '3px' );
+		await expect( firstGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( firstGroup ).toHaveCSS( 'border-width', '7px' );
 
 		// Check nested child styles.
-		await expect( secondGroup ).toHaveCSS( 'border-style', 'double' );
-		await expect( secondGroup ).toHaveCSS( 'border-width', '4px' );
+		await expect( secondGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( secondGroup ).toHaveCSS( 'border-width', '8px' );
 
 		// Check nested grandchild group block inherited styles.
 		await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
@@ -182,21 +220,46 @@ test.describe( 'Block Style Variations', () => {
 			.locator( '[data-type="core/group"]' )
 			.nth( 2 );
 
-		// Check parent styles.
+		// Check parent styles have current revision.
 		await expect( revisionFirstGroup ).toHaveCSS(
 			'border-style',
-			'outset'
+			'dotted'
+		);
+		await expect( revisionFirstGroup ).toHaveCSS( 'border-width', '7px' );
+
+		// Check nested child styles have current revision.
+		await expect( revisionSecondGroup ).toHaveCSS(
+			'border-style',
+			'dotted'
 		);
+		await expect( revisionSecondGroup ).toHaveCSS( 'border-width', '8px' );
+
+		// Check nested grandchild group block inherited styles from current revision.
+		await expect( revisionThirdGroup ).toHaveCSS(
+			'border-style',
+			'groove'
+		);
+		await expect( revisionThirdGroup ).toHaveCSS( 'border-width', '22px' );
+
+		// Click on previous revision.
+		await page
+			.getByRole( 'button', {
+				name: /^Changes saved by /,
+			} )
+			.nth( 1 )
+			.click();
+
+		// Check parent styles have previous revision.
 		await expect( revisionFirstGroup ).toHaveCSS( 'border-width', '3px' );
 
-		// Check nested child styles.
+		// Check nested child style have previous revision.
 		await expect( revisionSecondGroup ).toHaveCSS(
 			'border-style',
 			'double'
 		);
 		await expect( revisionSecondGroup ).toHaveCSS( 'border-width', '4px' );
 
-		// Check nested grandchild group block inherited styles.
+		// Check nested grandchild group block inherited styles from previous revision.
 		await expect( revisionThirdGroup ).toHaveCSS(
 			'border-style',
 			'groove'