Course: Add body class for theme variations (#7432)

* Add custom property with variation name

* Add function to add body class and enqueue proper stylesheets

* Add stylesheets for all variations

* Add version number

course/assets/css/blue.css

@@ -0,0 +1,3 @@
+/*
+* Styles specific to blue variation
+*/

course/assets/css/dark.css

@@ -0,0 +1,3 @@
+/*
+* Styles specific to dark variation
+*/

course/assets/css/default.css

@@ -0,0 +1,3 @@
+/*
+* Styles specific to default variation
+*/

course/assets/css/gold.css

@@ -0,0 +1,3 @@
+/*
+* Styles specific to gold variation
+*/

course/functions.php

@@ -41,7 +41,7 @@ function course_support() {
 	 */
 	function course_scripts() {
 		wp_register_style( 'course-style', get_stylesheet_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
-		wp_enqueue_script( 'course-header', get_template_directory_uri() . '/assets/js/header.js', [], wp_get_theme()->get( 'Version' ), true );
+		wp_enqueue_script( 'course-header', get_template_directory_uri() . '/assets/js/header.js', array(), wp_get_theme()->get( 'Version' ), true );
 		wp_enqueue_style( 'course-style' );
 	}
 
@@ -67,7 +67,7 @@ function course_theme_init() {
 function course_register_block_patterns_category() {
 	register_block_pattern_category(
 		'sensei-lms',
-		[ 'label' => 'Sensei LMS' ]
+		array( 'label' => 'Sensei LMS' )
 	);
 }
 
@@ -80,6 +80,10 @@ function course_register_block_patterns_category() {
 	3
 );
 
+add_filter( 'body_class', 'add_body_class_for_variation' );
+
+add_action( 'course_theme_variation_loaded', 'enqueue_style_for_variation' );
+
 /**
  * Filter the list of templates for the single lesson page.
  *
@@ -107,3 +111,63 @@ function course_theme_filter_single_lesson_template_for_sensei_learning_mode( $p
 	return $page_templates;
 }
 
+/**
+ * Add a body class with the variation.
+ *
+ * @param array $classes Body classes.
+ *
+ * @internal
+ *
+ * @return array Body classes.
+ */
+function add_body_class_for_variation( $classes ) {
+	$css_string    = wp_get_global_stylesheet( array( 'variables' ) );
+	$property_name = '--wp--custom--course-theme-variation';
+
+	// 1. "/": Delimiters that mark the start and end of the regex pattern.
+	// 2. "$property_name": This part of the pattern matches the specific property name, in our case, '--wp--custom--course-theme-variation', defined in Course theme's JSON files.
+	// 3. "\s*": Matches zero or more whitespace characters.
+	// 4. ":": Matches the colon you write to separate the CSS property name and property value.
+	// 5. "\s*": Matches zero or more whitespace characters after the colon.
+	// 6. "([^;]+)": This is a capturing group that matches one or more characters that are not a semicolon. It captures the value of the property.
+	// 7. "/": The closing delimiter of the regex pattern.
+	// Overall, this regex is designed to extract the value associated with a specific CSS property (defined in $property_name).
+	$pattern = "/$property_name\s*:\s*([^;]+)/";
+
+	$variation_name = 'default';
+
+	if ( preg_match( $pattern, $css_string, $matches ) ) {
+		// $matches[0] contains the full match.
+		// $matches[1] contains the CSS value for the specified property.
+		$css_value      = trim( $matches[1] );
+		$classes[]      = 'is-' . $css_value;
+		$variation_name = $css_value;
+	}
+
+	/**
+	 * Action to perform variation specific tasks.
+	 *
+	 * @hook course_theme_variation_loaded Fires after determining which theme variation is loaded.
+	 * @since 1.3.5
+	 *
+	 * @param string $variation_name Name of the variation.
+	 */
+	do_action( 'course_theme_variation_loaded', $variation_name );
+
+	return $classes;
+}
+
+/**
+ * Enqueue the specific stylesheet for the variation.
+ *
+ * @param string $variation_name The current theme variation.
+ *
+ * @since Course 1.3.5
+ */
+function enqueue_style_for_variation( $variation_name ) {
+	if ( empty( $variation_name ) ) {
+		return;
+	}
+
+	wp_enqueue_style( 'course-theme-variation-style', get_template_directory_uri() . '/assets/css/' . $variation_name . '.css', array(), wp_get_theme()->get( 'Version' ) );
+}

course/styles/blue.json

@@ -47,7 +47,8 @@
 					"normal": "clamp(1rem, 0.911rem + 0.238vw, 1.125rem)",
 					"button": "clamp(1rem, 0.911rem + 0.238vw, 1.125rem)"
 				}
-			}
+			},
+			"courseThemeVariation": "blue"
 		},
 		"typography": {
 			"fluid": true,

course/styles/dark.json

@@ -48,7 +48,8 @@
 					"button": "clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.481), 1.125rem)",
 					"fixed": "1.125rem"
 				}
-			}
+			},
+			"courseThemeVariation": "dark"
 		},
 		"typography": {
 			"fluid": true,

course/styles/gold.json

@@ -57,7 +57,8 @@
 					"normal": "1.125rem",
 					"button": "1rem"
 				}
-			}
+			},
+			"courseThemeVariation": "gold"
 		},
 		"typography": {
 			"fluid": true,

course/theme.json

@@ -145,6 +145,7 @@
 			"commentGapSmall" : "10px",
 			"commentGapMedium" : "1.25rem",
 			"courseNewsletterGap": "clamp(2.5rem, -0.292rem + 9.306vw, 6.688rem)",
+			"courseThemeVariation": "default",
 			"button": {
 				"radius": "0.5rem",
 				"typography": {