Allow switching global styles variations

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(

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.
  *

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,

packages/core-data/src/resolvers.js

@@ -450,8 +450,22 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles = () => async ( {
 	const themeGlobalStyles = await apiFetch( {
 		path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }`,
 	} );
-	await dispatch.__experimentalReceiveThemeBaseGlobalStyles(
+	dispatch.__experimentalReceiveThemeBaseGlobalStyles(
 		currentTheme.stylesheet,
 		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`,
+	} );
+	dispatch.__experimentalReceiveThemeGlobalStyleVariations(
+		currentTheme.stylesheet,
+		variations
+	);
+};

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 ];
+}

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 ?? {},

packages/edit-site/src/components/global-styles/preview.js

@@ -2,41 +2,69 @@
  * WordPress dependencies
  */
 import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Card,
-	ColorIndicator,
-} from '@wordpress/components';
+	__unstableIframe as Iframe,
+	__unstableEditorStyles as EditorStyles,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { useStyle } from './hooks';
+import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = () => {
+const StylesPreview = ( { height = 150 } ) => {
 	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
-			className="edit-site-global-styles-preview"
-			style={ { background: gradientValue ?? backgroundColor } }
+		<Iframe
+			className="edit-site-global-styles-preview__iframe"
+			head={ <EditorStyles styles={ styles } /> }
+			style={ { height } }
 		>
-			<HStack spacing={ 5 }>
+			<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={ { fontFamily, fontSize: '80px', color: textColor } }
+					style={ {
+						display: 'flex',
+						gap: 20,
+						flexDirection: 'column',
+					} }
 				>
-					Aa
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: textColor,
+							borderRadius: 20,
+						} }
+					/>{ ' ' }
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: linkColor,
+							borderRadius: 20,
+						} }
+					/>
 				</div>
-				<VStack spacing={ 2 }>
-					<ColorIndicator colorValue={ textColor } />
-					<ColorIndicator colorValue={ linkColor } />
-				</VStack>
-			</HStack>
-		</Card>
+			</div>
+		</Iframe>
 	);
 };
 

packages/edit-site/src/components/global-styles/screen-root.js

@@ -5,26 +5,55 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
 	Card,
 	CardDivider,
 } 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 StylesPreview from './preview';
 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>
-				<StylesPreview />
+				<VStack spacing={ 2 }>
+					<Card>
+						<StylesPreview />
+					</Card>
+					{ !! 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>