Add a mechanism to store what style variation is used and leverage that to add a style variation specific class to the rendered body

Author: pbking

lib/global-styles-and-settings.php

@@ -277,3 +277,13 @@ function gutenberg_get_global_styles( $path = array(), $context = array() ) {
 function gutenberg_get_remote_theme_patterns() {
 	return WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) )->get_patterns();
 }
+
+function add_variation_class_to_body( $classes ) {
+	$custom = wp_get_global_settings( array( 'custom' ) );
+	if ( isset($custom['variation']) && 'Default' !== $custom['variation'] ) {
+		$classes[] = 'uses-style-variation';
+		$classes[] = _wp_to_kebab_case('is style variation ' . $custom['variation']);
+	}
+	return $classes;
+}
+add_filter( 'body_class','add_variation_class_to_body' );

packages/edit-site/src/components/global-styles/style-variations-container.js

@@ -43,7 +43,14 @@ function Variation( { variation } ) {
 	const selectVariation = () => {
 		setUserConfig( () => {
 			return {
-				settings: variation.settings,
+				settings: {
+					...( 'Default' !== variation.title && {
+						custom: {
+							variation: variation.title,
+						},
+					} ),
+					...variation.settings,
+				},
 				styles: variation.styles,
 			};
 		} );