From a6afd08f5222bf1ca9698e702d2a98f7f0a31356 Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 17 May 2024 16:48:54 +1200
Subject: [PATCH] Add some comments

---
 .../style-variations-container.js             | 48 ++++++++-----------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
index f7dd9a388fc05..04f096d4e7862 100644
--- a/packages/edit-site/src/components/global-styles/style-variations-container.js
+++ b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -21,6 +21,7 @@ const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 export default function StyleVariationsContainer( { gap = 2 } ) {
 	const { user } = useContext( GlobalStylesContext );
 	const [ currentUserStyles ] = useState( { ...user } );
+	const userStyles = currentUserStyles?.styles;
 	const variations = useSelect( ( select ) => {
 		return select(
 			coreStore
@@ -46,36 +47,29 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				const blockStyles = { ...variation?.styles?.blocks } || {};
 				// We need to copy any user custom CSS to the variation to prevent it being lost
 				// when switching variations.
-				if ( currentUserStyles?.styles?.blocks ) {
-					Object.keys( currentUserStyles.styles.blocks ).forEach(
-						( blockName ) => {
-							if (
-								currentUserStyles.styles.blocks[ blockName ].css
-							) {
-								blockStyles[ blockName ] = {
-									...( blockStyles[ blockName ]
-										? blockStyles[ blockName ]
-										: {} ),
-									css: `${
-										blockStyles[ blockName ]?.css || ''
-									} ${
-										currentUserStyles.styles.blocks[
-											blockName
-										].css
-									}`,
-								};
-							}
+				if ( userStyles?.blocks ) {
+					Object.keys( userStyles.blocks ).forEach( ( blockName ) => {
+						// First get any block specific custom CSS from the current user styles and merge with any custom CSS for
+						// that block in the variation.
+						if ( userStyles.blocks[ blockName ].css ) {
+							blockStyles[ blockName ] = {
+								...( blockStyles[ blockName ]
+									? blockStyles[ blockName ]
+									: {} ),
+								css: `${
+									blockStyles[ blockName ]?.css || ''
+								} ${ userStyles.blocks[ blockName ].css }`,
+							};
 						}
-					);
+					} );
 				}
-
+				// Now merge any global custom CSS from current user styles with global custom CSS in the variation.
 				const styles = {
 					...variation.styles,
-					...( currentUserStyles?.styles?.css ||
-					variation?.styles?.css
+					...( userStyles?.css || variation.styles?.css
 						? {
 								css: `${ variation.styles?.css || '' } ${
-									currentUserStyles.styles.css
+									userStyles?.css
 								}`,
 						  }
 						: {} ),
@@ -90,11 +84,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				};
 			} ),
 		];
-	}, [
-		multiplePropertyVariations,
-		currentUserStyles.styles.blocks,
-		currentUserStyles.styles.css,
-	] );
+	}, [ multiplePropertyVariations, userStyles.blocks, userStyles?.css ] );
 
 	return (
 		<Grid