From de9fc5fceff2678432927ad277a957a777493090 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Oct 2021 08:50:43 +0100
Subject: [PATCH 1/9] Allow switching global styles variations

---
 .../src/components/global-styles/preview.js   | 65 ++++++++++++++-----
 .../src/components/global-styles/style.scss   |  9 +++
 .../components/global-styles/variations.js    | 59 +++++++++++++++++
 3 files changed, 117 insertions(+), 16 deletions(-)
 create mode 100644 packages/edit-site/src/components/global-styles/variations.js

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index 0993d2d859298b..39bb69c2cb400b 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -6,12 +6,15 @@ import {
 	__experimentalVStack as VStack,
 	Card,
 	ColorIndicator,
+	Dropdown,
 } from '@wordpress/components';
+import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { useStyle } from './hooks';
+import Variations from './variations';
 
 const StylesPreview = () => {
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
@@ -21,22 +24,52 @@ const StylesPreview = () => {
 	const [ gradientValue ] = useStyle( 'color.gradient' );
 
 	return (
-		<Card
-			className="edit-site-global-styles-preview"
-			style={ { background: gradientValue ?? backgroundColor } }
-		>
-			<HStack spacing={ 5 }>
-				<div
-					style={ { fontFamily, fontSize: '80px', color: textColor } }
-				>
-					Aa
-				</div>
-				<VStack spacing={ 2 }>
-					<ColorIndicator colorValue={ textColor } />
-					<ColorIndicator colorValue={ linkColor } />
-				</VStack>
-			</HStack>
-		</Card>
+		<Dropdown
+			className="edit-site-global-styles-preview__dropdown"
+			contentClassName="edit-site-global-styles-preview__popover"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const openOnEnter = ( event ) => {
+					if ( ! isOpen && event.keyCode === ENTER ) {
+						event.preventDefault();
+						onToggle();
+					}
+				};
+
+				return (
+					<Card
+						className="edit-site-global-styles-preview"
+						style={ {
+							background: gradientValue ?? backgroundColor,
+						} }
+						role="button"
+						onClick={ onToggle }
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						onKeyDown={ openOnEnter }
+						position="bottom middle"
+					>
+						<HStack spacing={ 5 }>
+							<div
+								style={ {
+									fontFamily,
+									fontSize: '80px',
+									color: textColor,
+								} }
+							>
+								Aa
+							</div>
+							<VStack spacing={ 2 }>
+								<ColorIndicator colorValue={ textColor } />
+								<ColorIndicator colorValue={ linkColor } />
+							</VStack>
+						</HStack>
+					</Card>
+				);
+			} }
+			renderContent={ () => {
+				return <Variations />;
+			} }
+		/>
 	);
 };
 
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ab06b2d4a65e67..973f1e8079a4c8 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -1,9 +1,18 @@
+.edit-site-global-styles-preview__dropdown {
+	display: block;
+}
+
+.edit-site-global-styles-preview__popover > .components-popover__content {
+	width: 200px;
+}
+
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	min-height: 152px;
 	line-height: 1;
+	cursor: pointer;
 }
 
 .edit-site-typography-panel__preview {
diff --git a/packages/edit-site/src/components/global-styles/variations.js b/packages/edit-site/src/components/global-styles/variations.js
new file mode 100644
index 00000000000000..811d1e4e2c3748
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variations.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useContext } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { parseUserGlobalStyles } from './global-styles-provider';
+import { GlobalStylesContext } from './context';
+
+function Variation( { variation } ) {
+	const config = useMemo( () => {
+		return parseUserGlobalStyles( variation.content.raw );
+	}, [ variation.content.raw ] );
+	const { setUserConfig } = useContext( GlobalStylesContext );
+
+	const selectVariation = () => {
+		setUserConfig( () => {
+			return config;
+		} );
+	};
+
+	return (
+		<Button onClick={ selectVariation }>
+			{ variation.title.rendered }
+		</Button>
+	);
+}
+
+function Variations() {
+	const { variations, globalStylesId } = useSelect( ( select ) => {
+		const _globalStylesId = select( editSiteStore ).getSettings()
+			.__experimentalGlobalStylesUserEntityId;
+		return {
+			variations: select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_global_styles'
+			),
+			globalStylesId: _globalStylesId,
+		};
+	}, [] );
+
+	if ( ! variations?.length ) {
+		return 'loading...';
+	}
+
+	return variations
+		.filter( ( variation ) => variation.id !== globalStylesId )
+		.map( ( variation ) => (
+			<Variation key={ variation.id } variation={ variation } />
+		) );
+}
+
+export default Variations;

From 402a8c807ca89ba9f486cf3019cf094f2253d6fd Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Oct 2021 11:30:30 +0100
Subject: [PATCH 2/9] Add Global Styles Previews to the selector

---
 .../global-styles/global-styles-provider.js   |  3 +-
 .../src/components/global-styles/preview.js   | 64 +++++--------------
 .../components/global-styles/screen-root.js   |  4 +-
 .../src/components/global-styles/style.scss   |  7 +-
 .../global-styles/variation-selector.js       | 44 +++++++++++++
 .../components/global-styles/variations.js    | 50 +++++++++++----
 6 files changed, 105 insertions(+), 67 deletions(-)
 create mode 100644 packages/edit-site/src/components/global-styles/variation-selector.js

diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js
index 25dd5d04796780..e4f481b05b6f85 100644
--- a/packages/edit-site/src/components/global-styles/global-styles-provider.js
+++ b/packages/edit-site/src/components/global-styles/global-styles-provider.js
@@ -31,7 +31,7 @@ function mergeTreesCustomizer( _, srcValue ) {
 	}
 }
 
-function mergeBaseAndUserConfigs( base, user ) {
+export function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
@@ -67,7 +67,6 @@ function useGlobalStylesUserConfig() {
 
 	const { getEditedEntityRecord } = useSelect( coreStore );
 	const { editEntityRecord } = useDispatch( coreStore );
-
 	const config = useMemo( () => {
 		return {
 			settings: settings ?? {},
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index 39bb69c2cb400b..85a0f158c1d111 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -6,17 +6,14 @@ import {
 	__experimentalVStack as VStack,
 	Card,
 	ColorIndicator,
-	Dropdown,
 } from '@wordpress/components';
-import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { useStyle } from './hooks';
-import Variations from './variations';
 
-const StylesPreview = () => {
+const StylesPreview = ( props ) => {
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
@@ -24,52 +21,21 @@ const StylesPreview = () => {
 	const [ gradientValue ] = useStyle( 'color.gradient' );
 
 	return (
-		<Dropdown
-			className="edit-site-global-styles-preview__dropdown"
-			contentClassName="edit-site-global-styles-preview__popover"
-			renderToggle={ ( { onToggle, isOpen } ) => {
-				const openOnEnter = ( event ) => {
-					if ( ! isOpen && event.keyCode === ENTER ) {
-						event.preventDefault();
-						onToggle();
-					}
-				};
-
-				return (
-					<Card
-						className="edit-site-global-styles-preview"
-						style={ {
-							background: gradientValue ?? backgroundColor,
-						} }
-						role="button"
-						onClick={ onToggle }
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						onKeyDown={ openOnEnter }
-						position="bottom middle"
-					>
-						<HStack spacing={ 5 }>
-							<div
-								style={ {
-									fontFamily,
-									fontSize: '80px',
-									color: textColor,
-								} }
-							>
-								Aa
-							</div>
-							<VStack spacing={ 2 }>
-								<ColorIndicator colorValue={ textColor } />
-								<ColorIndicator colorValue={ linkColor } />
-							</VStack>
-						</HStack>
-					</Card>
-				);
-			} }
-			renderContent={ () => {
-				return <Variations />;
+		<Card
+			className="edit-site-global-styles-preview"
+			style={ {
+				background: gradientValue ?? backgroundColor,
 			} }
-		/>
+			{ ...props }
+		>
+			<HStack spacing={ 5 }>
+				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
+				<VStack spacing={ 2 }>
+					<ColorIndicator colorValue={ textColor } />
+					<ColorIndicator colorValue={ linkColor } />
+				</VStack>
+			</HStack>
+		</Card>
 	);
 };
 
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 7761407f0363d4..a26d1499ebe074 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -16,7 +16,7 @@ import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import StylesPreview from './preview';
+import GlobalStylesVariationSelector from './variation-selector';
 import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
 
@@ -24,7 +24,7 @@ function ScreenRoot() {
 	return (
 		<Card size="small">
 			<CardBody>
-				<StylesPreview />
+				<GlobalStylesVariationSelector />
 			</CardBody>
 
 			<CardBody>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 973f1e8079a4c8..ccbb231828cd89 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -1,8 +1,8 @@
-.edit-site-global-styles-preview__dropdown {
+.edit-site-global-styles-variation-selector {
 	display: block;
 }
 
-.edit-site-global-styles-preview__popover > .components-popover__content {
+.edit-site-global-styles-variation-selector__popover > .components-popover__content {
 	width: 200px;
 }
 
@@ -10,7 +10,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	min-height: 152px;
+	// The VStack component is reset the min-height, so we need important here.
+	min-height: 152px !important;
 	line-height: 1;
 	cursor: pointer;
 }
diff --git a/packages/edit-site/src/components/global-styles/variation-selector.js b/packages/edit-site/src/components/global-styles/variation-selector.js
new file mode 100644
index 00000000000000..f69d9561b0bb5d
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variation-selector.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { Dropdown } from '@wordpress/components';
+import { ENTER } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import StylesPreview from './preview';
+import Variations from './variations';
+
+function GlobalStylesVariationSelector() {
+	return (
+		<Dropdown
+			className="edit-site-global-styles-variation-selector"
+			contentClassName="edit-site-global-styles-variation-selector__popover"
+			position="bottom middle"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const openOnEnter = ( event ) => {
+					if ( ! isOpen && event.keyCode === ENTER ) {
+						event.preventDefault();
+						onToggle();
+					}
+				};
+
+				return (
+					<StylesPreview
+						role="button"
+						onClick={ onToggle }
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						onKeyDown={ openOnEnter }
+					/>
+				);
+			} }
+			renderContent={ () => {
+				return <Variations />;
+			} }
+		/>
+	);
+}
+
+export default GlobalStylesVariationSelector;
diff --git a/packages/edit-site/src/components/global-styles/variations.js b/packages/edit-site/src/components/global-styles/variations.js
index 811d1e4e2c3748..f6072328b7b778 100644
--- a/packages/edit-site/src/components/global-styles/variations.js
+++ b/packages/edit-site/src/components/global-styles/variations.js
@@ -4,20 +4,33 @@
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo, useContext } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { ENTER } from '@wordpress/keycodes';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { parseUserGlobalStyles } from './global-styles-provider';
+import {
+	mergeBaseAndUserConfigs,
+	parseUserGlobalStyles,
+} from './global-styles-provider';
 import { GlobalStylesContext } from './context';
+import StylesPreview from './preview';
 
 function Variation( { variation } ) {
+	const { base, setUserConfig } = useContext( GlobalStylesContext );
 	const config = useMemo( () => {
 		return parseUserGlobalStyles( variation.content.raw );
 	}, [ variation.content.raw ] );
-	const { setUserConfig } = useContext( GlobalStylesContext );
+	const context = useMemo( () => {
+		return {
+			user: config,
+			base,
+			merged: mergeBaseAndUserConfigs( base, config ),
+			setUserConfig: () => {},
+		};
+	}, [ config, base ] );
 
 	const selectVariation = () => {
 		setUserConfig( () => {
@@ -25,10 +38,21 @@ function Variation( { variation } ) {
 		} );
 	};
 
+	const selectOnEnter = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			selectVariation();
+		}
+	};
+
 	return (
-		<Button onClick={ selectVariation }>
-			{ variation.title.rendered }
-		</Button>
+		<GlobalStylesContext.Provider value={ context }>
+			<StylesPreview
+				role="button"
+				onClick={ selectVariation }
+				onKeyDown={ selectOnEnter }
+			/>
+		</GlobalStylesContext.Provider>
 	);
 }
 
@@ -49,11 +73,15 @@ function Variations() {
 		return 'loading...';
 	}
 
-	return variations
-		.filter( ( variation ) => variation.id !== globalStylesId )
-		.map( ( variation ) => (
-			<Variation key={ variation.id } variation={ variation } />
-		) );
+	return (
+		<VStack spacing={ 3 }>
+			{ variations
+				.filter( ( variation ) => variation.id !== globalStylesId )
+				.map( ( variation ) => (
+					<Variation key={ variation.id } variation={ variation } />
+				) ) }
+		</VStack>
+	);
 }
 
 export default Variations;

From 46e4502d31386440c082dca9c0b20e8a362c7338 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 10 Jan 2022 10:24:57 +0100
Subject: [PATCH 3/9] Retrieve the theme style variations from theme styles
 folder

---
 packages/core-data/src/actions.js             | 19 +++++++
 packages/core-data/src/reducer.js             | 21 +++++++
 packages/core-data/src/resolvers.js           | 14 +++++
 packages/core-data/src/selectors.js           | 15 +++++
 .../components/global-styles/variations.js    | 56 +++++++++----------
 5 files changed, 95 insertions(+), 30 deletions(-)

diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 42f087a0b6223c..28e6513e4cd642 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -153,6 +153,25 @@ export function __experimentalReceiveThemeBaseGlobalStyles(
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the theme global styles variations have been received.
+ *
+ * @param {string} stylesheet The theme's identifier
+ * @param {Array}  variations The global styles variations.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalReceiveThemeGlobalStyleVariations(
+	stylesheet,
+	variations
+) {
+	return {
+		type: 'RECEIVE_THEME_GLOBAL_STYLE_VARIATIONS',
+		stylesheet,
+		variations,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the index has been received.
  *
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
index 693c4e58ef46e1..3f88f189b03bed 100644
--- a/packages/core-data/src/reducer.js
+++ b/packages/core-data/src/reducer.js
@@ -156,6 +156,26 @@ export function themeBaseGlobalStyles( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer managing the theme global styles variations.
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function themeGlobalStyleVariations( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_THEME_GLOBAL_STYLE_VARIATIONS':
+			return {
+				...state,
+				[ action.stylesheet ]: action.variations,
+			};
+	}
+
+	return state;
+}
+
 /**
  * Higher Order Reducer for a given entity config. It supports:
  *
@@ -578,6 +598,7 @@ export default combineReducers( {
 	currentTheme,
 	currentGlobalStylesId,
 	currentUser,
+	themeGlobalStyleVariations,
 	themeBaseGlobalStyles,
 	taxonomies,
 	entities,
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 5c6f4faaac156d..5fbefaf9d01b7f 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -455,3 +455,17 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles = () => async ( {
 		themeGlobalStyles
 	);
 };
+
+export const __experimentalGetCurrentThemeGlobalStylesVariations = () => async ( {
+	resolveSelect,
+	dispatch,
+} ) => {
+	const currentTheme = await resolveSelect.getCurrentTheme();
+	const variations = await apiFetch( {
+		path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations`,
+	} );
+	await dispatch.__experimentalReceiveThemeGlobalStyleVariations(
+		currentTheme.stylesheet,
+		variations
+	);
+};
diff --git a/packages/core-data/src/selectors.js b/packages/core-data/src/selectors.js
index 0d5a86c0200038..2370b15b6e72ce 100644
--- a/packages/core-data/src/selectors.js
+++ b/packages/core-data/src/selectors.js
@@ -908,3 +908,18 @@ export function __experimentalGetCurrentThemeBaseGlobalStyles( state ) {
 	}
 	return state.themeBaseGlobalStyles[ currentTheme.stylesheet ];
 }
+
+/**
+ * Return the ID of the current global styles object.
+ *
+ * @param {Object} state Data state.
+ *
+ * @return {string} The current global styles ID.
+ */
+export function __experimentalGetCurrentThemeGlobalStylesVariations( state ) {
+	const currentTheme = getCurrentTheme( state );
+	if ( ! currentTheme ) {
+		return null;
+	}
+	return state.themeGlobalStyleVariations[ currentTheme.stylesheet ];
+}
diff --git a/packages/edit-site/src/components/global-styles/variations.js b/packages/edit-site/src/components/global-styles/variations.js
index f6072328b7b778..c27117261c77f7 100644
--- a/packages/edit-site/src/components/global-styles/variations.js
+++ b/packages/edit-site/src/components/global-styles/variations.js
@@ -10,31 +10,30 @@ import { __experimentalVStack as VStack } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import {
-	mergeBaseAndUserConfigs,
-	parseUserGlobalStyles,
-} from './global-styles-provider';
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { GlobalStylesContext } from './context';
 import StylesPreview from './preview';
 
 function Variation( { variation } ) {
 	const { base, setUserConfig } = useContext( GlobalStylesContext );
-	const config = useMemo( () => {
-		return parseUserGlobalStyles( variation.content.raw );
-	}, [ variation.content.raw ] );
 	const context = useMemo( () => {
 		return {
-			user: config,
+			user: {
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			},
 			base,
-			merged: mergeBaseAndUserConfigs( base, config ),
+			merged: mergeBaseAndUserConfigs( base, variation ),
 			setUserConfig: () => {},
 		};
-	}, [ config, base ] );
+	}, [ variation, base ] );
 
 	const selectVariation = () => {
 		setUserConfig( () => {
-			return config;
+			return {
+				settings: variation.settings,
+				styles: variation.styles,
+			};
 		} );
 	};
 
@@ -47,25 +46,24 @@ function Variation( { variation } ) {
 
 	return (
 		<GlobalStylesContext.Provider value={ context }>
-			<StylesPreview
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-			/>
+			<VStack spacing={ 2 }>
+				<StylesPreview
+					role="button"
+					onClick={ selectVariation }
+					onKeyDown={ selectOnEnter }
+				/>
+				<h3>{ variation.name }</h3>
+			</VStack>
 		</GlobalStylesContext.Provider>
 	);
 }
 
 function Variations() {
-	const { variations, globalStylesId } = useSelect( ( select ) => {
-		const _globalStylesId = select( editSiteStore ).getSettings()
-			.__experimentalGlobalStylesUserEntityId;
+	const { variations } = useSelect( ( select ) => {
 		return {
-			variations: select( coreStore ).getEntityRecords(
-				'postType',
-				'wp_global_styles'
-			),
-			globalStylesId: _globalStylesId,
+			variations: select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations(),
 		};
 	}, [] );
 
@@ -75,11 +73,9 @@ function Variations() {
 
 	return (
 		<VStack spacing={ 3 }>
-			{ variations
-				.filter( ( variation ) => variation.id !== globalStylesId )
-				.map( ( variation ) => (
-					<Variation key={ variation.id } variation={ variation } />
-				) ) }
+			{ variations.map( ( variation ) => (
+				<Variation key={ variation.id } variation={ variation } />
+			) ) }
 		</VStack>
 	);
 }

From 7028c9bd7e863a7c6277e533597209c2d48d9d04 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 10 Jan 2022 11:31:27 +0100
Subject: [PATCH 4/9] Design tweaks

---
 .../src/components/global-styles/preview.js   | 18 +++++--
 .../components/global-styles/screen-root.js   | 31 ++++++++++-
 ...riations.js => screen-style-variations.js} | 54 ++++++++++++-------
 .../src/components/global-styles/style.scss   | 10 +++-
 .../src/components/global-styles/ui.js        |  5 ++
 .../global-styles/variation-selector.js       | 44 ---------------
 6 files changed, 91 insertions(+), 71 deletions(-)
 rename packages/edit-site/src/components/global-styles/{variations.js => screen-style-variations.js} (62%)
 delete mode 100644 packages/edit-site/src/components/global-styles/variation-selector.js

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index 85a0f158c1d111..209147ed5eb3a7 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -22,13 +27,20 @@ const StylesPreview = ( props ) => {
 
 	return (
 		<Card
-			className="edit-site-global-styles-preview"
+			{ ...props }
 			style={ {
 				background: gradientValue ?? backgroundColor,
+				...props.style,
 			} }
-			{ ...props }
+			className={ classnames(
+				'edit-site-global-styles-preview',
+				props.className
+			) }
 		>
-			<HStack spacing={ 5 }>
+			<HStack
+				spacing={ 5 }
+				className="edit-site-global-styles-preview__content"
+			>
 				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
 				<VStack spacing={ 2 }>
 					<ColorIndicator colorValue={ textColor } />
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index a26d1499ebe074..5068d0918237ce 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -5,6 +5,7 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
 	Card,
@@ -12,19 +13,45 @@ import {
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import GlobalStylesVariationSelector from './variation-selector';
 import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
+import StylesPreview from './preview';
 
 function ScreenRoot() {
+	const { variations } = useSelect( ( select ) => {
+		return {
+			variations: select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+		};
+	}, [] );
+
 	return (
 		<Card size="small">
 			<CardBody>
-				<GlobalStylesVariationSelector />
+				<VStack spacing={ 2 }>
+					<StylesPreview />
+					{ !! variations?.length && (
+						<NavigationButton path="/variations">
+							<HStack justify="space-between">
+								<FlexItem>{ __( 'Other styles' ) }</FlexItem>
+								<FlexItem>
+									<Icon
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</FlexItem>
+							</HStack>
+						</NavigationButton>
+					) }
+				</VStack>
 			</CardBody>
 
 			<CardBody>
diff --git a/packages/edit-site/src/components/global-styles/variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
similarity index 62%
rename from packages/edit-site/src/components/global-styles/variations.js
rename to packages/edit-site/src/components/global-styles/screen-style-variations.js
index c27117261c77f7..9c93051af64db5 100644
--- a/packages/edit-site/src/components/global-styles/variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -5,7 +5,12 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo, useContext } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	__experimentalGrid as Grid,
+	Card,
+	CardBody,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,6 +18,7 @@ import { __experimentalVStack as VStack } from '@wordpress/components';
 import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { GlobalStylesContext } from './context';
 import StylesPreview from './preview';
+import ScreenHeader from './header';
 
 function Variation( { variation } ) {
 	const { base, setUserConfig } = useContext( GlobalStylesContext );
@@ -46,19 +52,17 @@ function Variation( { variation } ) {
 
 	return (
 		<GlobalStylesContext.Provider value={ context }>
-			<VStack spacing={ 2 }>
-				<StylesPreview
-					role="button"
-					onClick={ selectVariation }
-					onKeyDown={ selectOnEnter }
-				/>
-				<h3>{ variation.name }</h3>
-			</VStack>
+			<StylesPreview
+				className="edit-site-global-styles-variations_item"
+				role="button"
+				onClick={ selectVariation }
+				onKeyDown={ selectOnEnter }
+			/>
 		</GlobalStylesContext.Provider>
 	);
 }
 
-function Variations() {
+function ScreenStyleVariations() {
 	const { variations } = useSelect( ( select ) => {
 		return {
 			variations: select(
@@ -67,17 +71,27 @@ function Variations() {
 		};
 	}, [] );
 
-	if ( ! variations?.length ) {
-		return 'loading...';
-	}
-
 	return (
-		<VStack spacing={ 3 }>
-			{ variations.map( ( variation ) => (
-				<Variation key={ variation.id } variation={ variation } />
-			) ) }
-		</VStack>
+		<>
+			<ScreenHeader
+				back="/"
+				title={ __( 'Other styles' ) }
+				description={ __(
+					'Choose a different style combination for the theme styles'
+				) }
+			/>
+
+			<Card size="small" isBorderless>
+				<CardBody>
+					<Grid columns={ 2 }>
+						{ variations?.map( ( variation, index ) => (
+							<Variation key={ index } variation={ variation } />
+						) ) }
+					</Grid>
+				</CardBody>
+			</Card>
+		</>
 	);
 }
 
-export default Variations;
+export default ScreenStyleVariations;
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ccbb231828cd89..50cf10d4e6f99e 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -10,12 +10,14 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	// The VStack component is reset the min-height, so we need important here.
-	min-height: 152px !important;
 	line-height: 1;
 	cursor: pointer;
 }
 
+.edit-site-global-styles-preview__content {
+	min-height: 152px;
+}
+
 .edit-site-typography-panel__preview {
 	display: flex;
 	align-items: center;
@@ -75,3 +77,7 @@
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }
+
+.edit-site-global-styles-variations_item.edit-site-global-styles-preview {
+	zoom: 0.6;
+}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 9d0b545d199002..793b0939d9014c 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -21,6 +21,7 @@ import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
+import ScreenStyleVariations from './screen-style-variations';
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -100,6 +101,10 @@ function GlobalStylesUI() {
 				<ScreenRoot />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/variations">
+				<ScreenStyleVariations />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/blocks">
 				<ScreenBlockList />
 			</GlobalStylesNavigationScreen>
diff --git a/packages/edit-site/src/components/global-styles/variation-selector.js b/packages/edit-site/src/components/global-styles/variation-selector.js
deleted file mode 100644
index f69d9561b0bb5d..00000000000000
--- a/packages/edit-site/src/components/global-styles/variation-selector.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Dropdown } from '@wordpress/components';
-import { ENTER } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import StylesPreview from './preview';
-import Variations from './variations';
-
-function GlobalStylesVariationSelector() {
-	return (
-		<Dropdown
-			className="edit-site-global-styles-variation-selector"
-			contentClassName="edit-site-global-styles-variation-selector__popover"
-			position="bottom middle"
-			renderToggle={ ( { onToggle, isOpen } ) => {
-				const openOnEnter = ( event ) => {
-					if ( ! isOpen && event.keyCode === ENTER ) {
-						event.preventDefault();
-						onToggle();
-					}
-				};
-
-				return (
-					<StylesPreview
-						role="button"
-						onClick={ onToggle }
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						onKeyDown={ openOnEnter }
-					/>
-				);
-			} }
-			renderContent={ () => {
-				return <Variations />;
-			} }
-		/>
-	);
-}
-
-export default GlobalStylesVariationSelector;

From 20d4d274bb627ccb20ece0b965983ae96d573a2d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 12 Jan 2022 17:54:31 +0100
Subject: [PATCH 5/9] Fix global styles variations settings

---
 .../provider/block-refs-provider.js           |  5 +-
 .../src/components/global-styles/preview.js   | 66 ++++++++++++++-----
 .../global-styles/screen-style-variations.js  |  1 +
 .../src/components/global-styles/style.scss   |  8 +--
 4 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/provider/block-refs-provider.js b/packages/block-editor/src/components/provider/block-refs-provider.js
index e98e0f4d25c9d4..3f2d19b658a630 100644
--- a/packages/block-editor/src/components/provider/block-refs-provider.js
+++ b/packages/block-editor/src/components/provider/block-refs-provider.js
@@ -3,7 +3,10 @@
  */
 import { createContext, useMemo } from '@wordpress/element';
 
-export const BlockRefs = createContext();
+export const BlockRefs = createContext( {
+	refs: new Map(),
+	callbacks: new Map(),
+} );
 
 export function BlockRefsProvider( { children } ) {
 	const value = useMemo(
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index 209147ed5eb3a7..77ac8556d7b2a8 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -7,29 +7,30 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Card,
-	ColorIndicator,
-} from '@wordpress/components';
+	__unstableIframe as Iframe,
+	__unstableEditorStyles as EditorStyles,
+} from '@wordpress/block-editor';
+import { Card } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useStyle } from './hooks';
+import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = ( props ) => {
+const StylesPreview = ( { height = 150, ...props } ) => {
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
+	const [ styles ] = useGlobalStylesOutput();
 
 	return (
 		<Card
 			{ ...props }
 			style={ {
-				background: gradientValue ?? backgroundColor,
+				height,
 				...props.style,
 			} }
 			className={ classnames(
@@ -37,16 +38,49 @@ const StylesPreview = ( props ) => {
 				props.className
 			) }
 		>
-			<HStack
-				spacing={ 5 }
-				className="edit-site-global-styles-preview__content"
+			<Iframe
+				className="edit-site-global-styles-preview__iframe editor-styles-wrapper"
+				head={ <EditorStyles styles={ styles } /> }
+				style={ { height } }
 			>
-				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
-				<VStack spacing={ 2 }>
-					<ColorIndicator colorValue={ textColor } />
-					<ColorIndicator colorValue={ linkColor } />
-				</VStack>
-			</HStack>
+				<div
+					style={ {
+						display: 'flex',
+						gap: 20,
+						alignItems: 'center',
+						justifyContent: 'center',
+						height: '100%',
+						zoom: height / 150,
+						background: gradientValue ?? backgroundColor,
+					} }
+				>
+					<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
+					<div
+						style={ {
+							display: 'flex',
+							gap: 20,
+							flexDirection: 'column',
+						} }
+					>
+						<div
+							style={ {
+								height: 40,
+								width: 40,
+								background: textColor,
+								borderRadius: 20,
+							} }
+						/>{ ' ' }
+						<div
+							style={ {
+								height: 40,
+								width: 40,
+								background: linkColor,
+								borderRadius: 20,
+							} }
+						/>
+					</div>
+				</div>
+			</Iframe>
 		</Card>
 	);
 };
diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index 9c93051af64db5..e6611cd3d6a401 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -57,6 +57,7 @@ function Variation( { variation } ) {
 				role="button"
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
+				height={ 100 }
 			/>
 		</GlobalStylesContext.Provider>
 	);
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 50cf10d4e6f99e..58ebddc3217e6d 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -14,8 +14,8 @@
 	cursor: pointer;
 }
 
-.edit-site-global-styles-preview__content {
-	min-height: 152px;
+.edit-site-global-styles-preview__iframe {
+	max-width: 100%;
 }
 
 .edit-site-typography-panel__preview {
@@ -77,7 +77,3 @@
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }
-
-.edit-site-global-styles-variations_item.edit-site-global-styles-preview {
-	zoom: 0.6;
-}

From cf1b694b322625905ea20bee8e772f6e17b6da60 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 13 Jan 2022 09:28:34 +0100
Subject: [PATCH 6/9] Fix some styles

---
 .../edit-site/src/components/global-styles/preview.js     | 5 +++--
 .../edit-site/src/components/global-styles/style.scss     | 8 --------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index 77ac8556d7b2a8..4830b7ee0e6dc9 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -39,7 +39,7 @@ const StylesPreview = ( { height = 150, ...props } ) => {
 			) }
 		>
 			<Iframe
-				className="edit-site-global-styles-preview__iframe editor-styles-wrapper"
+				className="edit-site-global-styles-preview__iframe"
 				head={ <EditorStyles styles={ styles } /> }
 				style={ { height } }
 			>
@@ -50,8 +50,9 @@ const StylesPreview = ( { height = 150, ...props } ) => {
 						alignItems: 'center',
 						justifyContent: 'center',
 						height: '100%',
-						zoom: height / 150,
+						transform: `scale(${ height / 150 })`,
 						background: gradientValue ?? backgroundColor,
+						cursor: 'pointer',
 					} }
 				>
 					<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 58ebddc3217e6d..c73ef6f544d533 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -1,11 +1,3 @@
-.edit-site-global-styles-variation-selector {
-	display: block;
-}
-
-.edit-site-global-styles-variation-selector__popover > .components-popover__content {
-	width: 200px;
-}
-
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;

From f5aee3f02b5716889fc9fe2319b0be5a25fa85fd Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 19 Jan 2022 09:49:07 +0100
Subject: [PATCH 7/9] Tweaked variations picker design and add the default
 variation

---
 .../src/components/global-styles/preview.js   | 84 ++++++++-----------
 .../components/global-styles/screen-root.js   |  4 +-
 .../global-styles/screen-style-variations.js  | 44 ++++++++--
 .../src/components/global-styles/style.scss   | 20 +++++
 4 files changed, 94 insertions(+), 58 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index 4830b7ee0e6dc9..735fdeb78d3a9a 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -10,7 +5,6 @@ import {
 	__unstableIframe as Iframe,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
-import { Card } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -18,7 +12,7 @@ import { Card } from '@wordpress/components';
 import { useStyle } from './hooks';
 import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = ( { height = 150, ...props } ) => {
+const StylesPreview = ( { height = 150 } ) => {
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
@@ -27,62 +21,50 @@ const StylesPreview = ( { height = 150, ...props } ) => {
 	const [ styles ] = useGlobalStylesOutput();
 
 	return (
-		<Card
-			{ ...props }
-			style={ {
-				height,
-				...props.style,
-			} }
-			className={ classnames(
-				'edit-site-global-styles-preview',
-				props.className
-			) }
+		<Iframe
+			className="edit-site-global-styles-preview__iframe"
+			head={ <EditorStyles styles={ styles } /> }
+			style={ { height } }
 		>
-			<Iframe
-				className="edit-site-global-styles-preview__iframe"
-				head={ <EditorStyles styles={ styles } /> }
-				style={ { height } }
+			<div
+				style={ {
+					display: 'flex',
+					gap: 20,
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+					transform: `scale(${ height / 150 })`,
+					background: gradientValue ?? backgroundColor,
+					cursor: 'pointer',
+				} }
 			>
+				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
 				<div
 					style={ {
 						display: 'flex',
 						gap: 20,
-						alignItems: 'center',
-						justifyContent: 'center',
-						height: '100%',
-						transform: `scale(${ height / 150 })`,
-						background: gradientValue ?? backgroundColor,
-						cursor: 'pointer',
+						flexDirection: 'column',
 					} }
 				>
-					<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
 					<div
 						style={ {
-							display: 'flex',
-							gap: 20,
-							flexDirection: 'column',
+							height: 40,
+							width: 40,
+							background: textColor,
+							borderRadius: 20,
+						} }
+					/>{ ' ' }
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: linkColor,
+							borderRadius: 20,
 						} }
-					>
-						<div
-							style={ {
-								height: 40,
-								width: 40,
-								background: textColor,
-								borderRadius: 20,
-							} }
-						/>{ ' ' }
-						<div
-							style={ {
-								height: 40,
-								width: 40,
-								background: linkColor,
-								borderRadius: 20,
-							} }
-						/>
-					</div>
+					/>
 				</div>
-			</Iframe>
-		</Card>
+			</div>
+		</Iframe>
 	);
 };
 
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 5068d0918237ce..815c84f0d5cbd3 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -36,7 +36,9 @@ function ScreenRoot() {
 		<Card size="small">
 			<CardBody>
 				<VStack spacing={ 2 }>
-					<StylesPreview />
+					<Card>
+						<StylesPreview />
+					</Card>
 					{ !! variations?.length && (
 						<NavigationButton path="/variations">
 							<HStack justify="space-between">
diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index e6611cd3d6a401..f6b93d25982c29 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import { isEqual } from 'lodash';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -20,8 +26,12 @@ import { GlobalStylesContext } from './context';
 import StylesPreview from './preview';
 import ScreenHeader from './header';
 
+function compareVariations( a, b ) {
+	return isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );
+}
+
 function Variation( { variation } ) {
-	const { base, setUserConfig } = useContext( GlobalStylesContext );
+	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo( () => {
 		return {
 			user: {
@@ -50,15 +60,26 @@ function Variation( { variation } ) {
 		}
 	};
 
+	const isActive = useMemo( () => {
+		return compareVariations( user, variation );
+	}, [ user, variation ] );
+
 	return (
 		<GlobalStylesContext.Provider value={ context }>
-			<StylesPreview
-				className="edit-site-global-styles-variations_item"
+			<div
+				className={ classnames(
+					'edit-site-global-styles-variations_item',
+					{
+						'is-active': isActive,
+					}
+				) }
 				role="button"
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
-				height={ 100 }
-			/>
+				tabIndex="0"
+			>
+				<StylesPreview height={ 100 } />
+			</div>
 		</GlobalStylesContext.Provider>
 	);
 }
@@ -72,6 +93,17 @@ function ScreenStyleVariations() {
 		};
 	}, [] );
 
+	const withEmptyVariation = useMemo( () => {
+		return [
+			{
+				name: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variations,
+		];
+	}, [ variations ] );
+
 	return (
 		<>
 			<ScreenHeader
@@ -85,7 +117,7 @@ function ScreenStyleVariations() {
 			<Card size="small" isBorderless>
 				<CardBody>
 					<Grid columns={ 2 }>
-						{ variations?.map( ( variation, index ) => (
+						{ withEmptyVariation?.map( ( variation, index ) => (
 							<Variation key={ index } variation={ variation } />
 						) ) }
 					</Grid>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index c73ef6f544d533..b7b965f8468172 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -8,6 +8,7 @@
 
 .edit-site-global-styles-preview__iframe {
 	max-width: 100%;
+	display: block;
 }
 
 .edit-site-typography-panel__preview {
@@ -69,3 +70,22 @@
 .edit-site-screen-background-color__control {
 	padding: $grid-unit-20;
 }
+
+.edit-site-global-styles-variations_item {
+	box-sizing: border-box;
+	padding: 3px;
+	border-radius: $radius-block-ui;
+	border: $gray-200 1px solid;
+
+	&.is-active {
+		border: $gray-900 1px solid;
+	}
+
+	&:hover {
+		border: var(--wp-admin-theme-color) 1px solid;
+	}
+
+	&:focus {
+		border: var(--wp-admin-theme-color) 1px solid;
+	}
+}

From 1111efd751c75497ad5bfbf72ea435b1567c8e84 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 24 Jan 2022 13:19:00 +0100
Subject: [PATCH 8/9] Remove useless await

---
 packages/core-data/src/resolvers.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 5fbefaf9d01b7f..cc606e45735aa6 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -450,7 +450,7 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles = () => async ( {
 	const themeGlobalStyles = await apiFetch( {
 		path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }`,
 	} );
-	await dispatch.__experimentalReceiveThemeBaseGlobalStyles(
+	dispatch.__experimentalReceiveThemeBaseGlobalStyles(
 		currentTheme.stylesheet,
 		themeGlobalStyles
 	);
@@ -464,7 +464,7 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations = () => async (
 	const variations = await apiFetch( {
 		path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations`,
 	} );
-	await dispatch.__experimentalReceiveThemeGlobalStyleVariations(
+	dispatch.__experimentalReceiveThemeGlobalStyleVariations(
 		currentTheme.stylesheet,
 		variations
 	);

From ff934baa5275f4bd5ceee153d44659bdfacbebb6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 25 Jan 2022 09:53:21 +0100
Subject: [PATCH 9/9] Use CSS variables

---
 .../edit-site/src/components/global-styles/style.scss  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index b7b965f8468172..6dd79615f673af 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -73,19 +73,19 @@
 
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
-	padding: 3px;
+	padding: $border-width * 2;
 	border-radius: $radius-block-ui;
-	border: $gray-200 1px solid;
+	border: $gray-200 $border-width solid;
 
 	&.is-active {
-		border: $gray-900 1px solid;
+		border: $gray-900 $border-width solid;
 	}
 
 	&:hover {
-		border: var(--wp-admin-theme-color) 1px solid;
+		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 
 	&:focus {
-		border: var(--wp-admin-theme-color) 1px solid;
+		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }