From a04c8c85e0d5a15c31042fbf636f85f68debf27b Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 17 Oct 2023 21:58:45 +0600 Subject: [PATCH 1/4] Add custom property with variation name --- course/styles/blue.json | 3 ++- course/styles/dark.json | 3 ++- course/styles/gold.json | 3 ++- course/theme.json | 1 + 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/course/styles/blue.json b/course/styles/blue.json index c123869509..2ba97994aa 100644 --- a/course/styles/blue.json +++ b/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, diff --git a/course/styles/dark.json b/course/styles/dark.json index ad587bfa52..a645639a42 100644 --- a/course/styles/dark.json +++ b/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, diff --git a/course/styles/gold.json b/course/styles/gold.json index 71b84a1444..936a6cc093 100644 --- a/course/styles/gold.json +++ b/course/styles/gold.json @@ -57,7 +57,8 @@ "normal": "1.125rem", "button": "1rem" } - } + }, + "courseThemeVariation": "gold" }, "typography": { "fluid": true, diff --git a/course/theme.json b/course/theme.json index b0451ff989..66328a5ce5 100644 --- a/course/theme.json +++ b/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": { From dabe470c65d32f9e122d7884bdc81ff40bb2ae94 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 31 Oct 2023 20:33:43 +0600 Subject: [PATCH 2/4] Add function to add body class and enqueue proper stylesheets --- course/functions.php | 70 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 68 insertions(+), 2 deletions(-) diff --git a/course/functions.php b/course/functions.php index e9f80def6b..452073f227 100644 --- a/course/functions.php +++ b/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,65 @@ 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 $$next-version$$ + * + * @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 $$next-version$$ + * + * @return array Array of page templates. + */ +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' ) ); +} From e416f702aa1e286b43b3cd9e91694f6d067b6f05 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 31 Oct 2023 20:39:30 +0600 Subject: [PATCH 3/4] Add stylesheets for all variations --- course/assets/css/blue.css | 3 +++ course/assets/css/dark.css | 3 +++ course/assets/css/default.css | 3 +++ course/assets/css/gold.css | 3 +++ 4 files changed, 12 insertions(+) create mode 100644 course/assets/css/blue.css create mode 100644 course/assets/css/dark.css create mode 100644 course/assets/css/default.css create mode 100644 course/assets/css/gold.css diff --git a/course/assets/css/blue.css b/course/assets/css/blue.css new file mode 100644 index 0000000000..bf85eab148 --- /dev/null +++ b/course/assets/css/blue.css @@ -0,0 +1,3 @@ +/* +* Styles specific to blue variation +*/ \ No newline at end of file diff --git a/course/assets/css/dark.css b/course/assets/css/dark.css new file mode 100644 index 0000000000..c95857ddda --- /dev/null +++ b/course/assets/css/dark.css @@ -0,0 +1,3 @@ +/* +* Styles specific to dark variation +*/ \ No newline at end of file diff --git a/course/assets/css/default.css b/course/assets/css/default.css new file mode 100644 index 0000000000..1909baffff --- /dev/null +++ b/course/assets/css/default.css @@ -0,0 +1,3 @@ +/* +* Styles specific to default variation +*/ \ No newline at end of file diff --git a/course/assets/css/gold.css b/course/assets/css/gold.css new file mode 100644 index 0000000000..379cc8d7e2 --- /dev/null +++ b/course/assets/css/gold.css @@ -0,0 +1,3 @@ +/* +* Styles specific to gold variation +*/ \ No newline at end of file From 5c0a9b42710274d767638149e57baa72902ecdd6 Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 31 Oct 2023 23:18:59 +0600 Subject: [PATCH 4/4] Add version number --- course/functions.php | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/course/functions.php b/course/functions.php index 452073f227..cf40477374 100644 --- a/course/functions.php +++ b/course/functions.php @@ -148,7 +148,7 @@ function add_body_class_for_variation( $classes ) { * Action to perform variation specific tasks. * * @hook course_theme_variation_loaded Fires after determining which theme variation is loaded. - * @since $$next-version$$ + * @since 1.3.5 * * @param string $variation_name Name of the variation. */ @@ -162,9 +162,7 @@ function add_body_class_for_variation( $classes ) { * * @param string $variation_name The current theme variation. * - * @since Course $$next-version$$ - * - * @return array Array of page templates. + * @since Course 1.3.5 */ function enqueue_style_for_variation( $variation_name ) { if ( empty( $variation_name ) ) {