Improve Learning mode experience (#7120)

* Improve Learning mode experience

---------

Co-authored-by: Imran Hossain <imranh920@gmail.com>
Co-authored-by: Miroslav Mitev <m1r0@users.noreply.github.com>
Co-authored-by: Donna Peplinskie <donnapep@gmail.com>
Co-authored-by: Imran Hossain <imran.hossain@automattic.com>
Co-authored-by: Gabriel Caires <gabriel.caires@automattic.com>

course/functions.php

@@ -24,7 +24,6 @@ if ( ! function_exists( 'course_support' ) ) :
 
 		// Enqueue editor styles.
 		add_editor_style( 'style.css' );
-		add_editor_style( 'learning-mode.css' );
 	}
 
 endif;
@@ -63,8 +62,6 @@ endif;
 add_action( 'wp_enqueue_scripts', 'course_scripts' );
 
 function course_theme_init() {
-	add_option( 'course_theme_variation', 'default' );
-
 	register_block_style(
 		'core/navigation-link',
 		array(
@@ -87,47 +84,4 @@ function course_register_block_patterns_category() {
 }
 
 add_action( 'init', 'course_register_block_patterns_category' );
-/**
- * Determine the theme variation and save in option.
- *
- * @param int     $post_id Post ID.
- * @param WP_Post $post    Post object.
- * @param bool    $update  Whether this is an existing post being updated or not.
- */
-function course_save_global_styles( $post_id, $post, $update ) {
-	if ( 'wp_global_styles' !== $post->post_type ) {
-		return;
-	}
-
-	$global_styles      = json_decode( $post->post_content, true );
-	$global['settings'] = isset( $global_styles['settings'] ) ? $global_styles['settings'] : array();
-	$global['styles']   = isset( $global_styles['styles'] ) ? $global_styles['styles'] : array();
-	$variations         = WP_Theme_JSON_Resolver::get_style_variations();
-	$current_variation  = 'default';
-	foreach ( $variations as $variation ) {
-		if ( $variation['settings'] === $global['settings'] && $variation['styles'] === $global['styles'] ) {
-			$current_variation = sanitize_title( $variation['title'] );
-		}
-	}
-	update_option( 'course_theme_variation', $current_variation );
-}
-
-add_action( 'save_post', 'course_save_global_styles', 10, 3 );
-
-/**
- * Add the theme variation to the body class.
- *
- * @param array $classes Array of body classes.
- */
-function course_add_variation_body_class( $classes ) {
-	$current_variation = get_option( 'course_theme_variation' );
-	if ( ! $current_variation ) {
-		return $classes;
-	}
-
-	$classes[] = 'is-' . $current_variation;
-
-	return $classes;
-}
 
-add_action( 'body_class', 'course_add_variation_body_class' );

course/learning-mode.css

@@ -46,7 +46,6 @@ body {
 }
 
 .sensei-lms-course-navigation-module__summary {
-	font-family: var(--wp--preset--font-family--system);
 	font-weight: 400;
 	margin-top: 4px;
 	line-height: 16px;

course/parts/header.html

@@ -1,13 +1,15 @@
 <!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex"}} -->
-<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
+<div class="wp-block-group"><!-- wp:group {"className":"navigation-wrapper", "layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group navigation-wrapper"><!-- wp:group {"layout":{"type":"flex"}} -->
+  <div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
-<div class="wp-block-group"><!-- wp:site-title {"level":4,"fontSize":"medium"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
+    <!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
+    <div class="wp-block-group"><!-- wp:site-title {"level":4,"fontSize":"medium"} /--></div>
+    <!-- /wp:group -->
+  </div>
+  <!-- /wp:group -->
 
-<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /--></div>
+  <!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /-->
+</div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->

course/readme.txt

@@ -1,7 +1,7 @@
 === Course ===
 Contributors: Automattic
-Requires at least: 6.1
-Tested up to: 6.1
+Requires at least: 6.2
+Tested up to: 6.2
 Requires PHP: 7.2
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html

course/style.css

@@ -4,8 +4,8 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Course is a flexible and modern theme for anyone wanting to share their knowledge. The theme is built with integration with Sensei LMS and is ideal for Sensei users that are creating or selling courses. Style variations with multiple font and color combinations help you craft the perfect look and feel to show off courses and content. The theme can be used without Sensei too.
 Version: 1.2.4
-Requires at least: 6.1
-Tested up to: 6.1
+Requires at least: 6.2
+Tested up to: 6.2
 Requires PHP: 7.2
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -108,11 +108,22 @@ Tags: block-patterns, eLearning, education, full-site-editing, lms, online cours
 	color: var(--wp--preset--color--foreground);
 }
 
-header.wp-block-template-part {
+header {
 	background-color: transparent;
-	padding: 2.75rem 0px;
 }
 
+
+.wp-site-blocks header ~ main {
+	margin-block-start: 0;
+}
+
+header .navigation-wrapper {
+	min-height: 116px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	text-transform: revert;
+} 
 /*
  * Comments
  */
@@ -263,7 +274,6 @@ a {
 	border-color: currentcolor;
 	border-width: 1px;
 	color: currentcolor;
-	padding: 0.5856em 1.5238em;
 	text-decoration: none;
 }
 

course/styles/blue.json

@@ -45,7 +45,7 @@
 			"typography": {
 				"fontSizes": {
 					"normal": "clamp(1rem, 0.911rem + 0.238vw, 1.125rem)",
-					"button": "1.125rem"
+					"button": "clamp(1rem, 0.911rem + 0.238vw, 1.125rem)"
 				}
 			}
 		},
@@ -207,8 +207,8 @@
 					"name": "Huge",
 					"size": "3rem",
 					"fluid": {
-						"min": "3rem",
-						"max": "4rem"
+						"min": "2rem",
+						"max": "3.25rem"
 					},
 					"slug": "xx-large"
 				},
@@ -239,11 +239,58 @@
 			},
 			"core/post-content": {
 				"typography": {
-					"lineHeight": "132%"
+					"lineHeight": "138%"
+				}
+			},
+			"sensei-lms/course-title": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--body)",
+					"fontSize": "var(--wp--custom--typography--font-sizes--normal)",
+					"fontWeight": "700",
+					"letterSpacing": "-0.04em",
+					"lineHeight": "100%",
+					"textTransform": "uppercase"
 				}
+			},
+			"sensei-lms/course-theme-course-progress-counter": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--body)",
+					"fontSize": "clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem)",
+					"letterSpacing": "-0.03em"
+				}
+			},
+			"sensei-lms/course-theme-lesson-module": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--body)",
+					"letterSpacing": "-0.02em"
+				}
+			},
+			"sensei-lms/exit-course": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--body)",
+					"fontSize": "clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem)",
+					"letterSpacing": "-0.03em"
+				}
+			},
+			"sensei-lms/page-actions": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--body)"
+				}
+			},
+			"sensei-lms/course-navigation": {
+				"css": "& .sensei-lms-course-navigation-lesson__title { font-family: var(--wp--preset--font-family--body); font-size: .875rem; font-weight: 400; } & .sensei-lms-course-navigation-module__title { font-family: var(--wp--preset--font-family--body); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; text-transform: none; }"
 			}
 		},
 		"elements": {
+			"button": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--body)",
+					"letterSpacing": "-0.04em"
+				},
+				"spacing": {
+					"padding": "0.9em 1.75em"
+				}
+			},
 			"heading": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--heading)"

course/styles/dark.json

@@ -45,7 +45,8 @@
 			"typography": {
 				"fontSizes": {
 					"normal": "clamp(1.125rem, 1.036rem + 0.238vw, 1.25rem)",
-					"button": "1.125rem"
+					"button": "clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.481), 1.125rem)",
+					"fixed": "clamp(1.125rem, 1.125rem, 1.125rem)"
 				}
 			}
 		},
@@ -88,6 +89,14 @@
 							"fontStretch": "normal",
 							"src": [ "file:./assets/fonts/Syne-VariableFont_wght.ttf" ]
 						},
+						{
+							"fontFamily": "Syne",
+							"fontDisplay": "block",
+							"fontWeight": "500",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Syne-VariableFont_wght.ttf" ]
+						},
 						{
 							"fontFamily": "Syne",
 							"fontDisplay": "block",
@@ -158,10 +167,10 @@
 				},
 				{
 					"name": "Extra large",
-					"size": "2.25rem",
+					"size": "2rem",
 					"fluid": {
-						"min": "2.25rem",
-						"max": "3rem"
+						"min": "2rem",
+						"max": "3.25rem"
 					},
 					"slug": "x-large"
 				},
@@ -199,11 +208,58 @@
 			},
 			"core/post-content": {
 				"typography": {
-					"lineHeight": "132%"
+					"lineHeight": "145%"
+				}
+			},
+			"sensei-lms/course-title" : {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)",
+					"fontWeight": "500",
+					"letterSpacing": "-0.01em"
+				}
+			},
+			"sensei-lms/course-theme-course-progress-counter" : {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontSize": "var(--wp--custom--typography--font-sizes--fixed)",
+					"letterSpacing": "0"
 				}
+			},
+			"sensei-lms/course-theme-lesson-module": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"letterSpacing": "0"
+				}
+			},
+			"sensei-lms/exit-course": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontSize": "var(--wp--custom--typography--font-sizes--fixed)",
+					"letterSpacing": "0"
+				}
+			},
+			"sensei-lms/page-actions": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontSize": "var(--wp--custom--typography--font-sizes--fixed)",
+					"fontWeight": "500",
+					"letterSpacing": "-0.01em"
+				}
+			},
+			"sensei-lms/course-navigation": {
+				"css": "& .sensei-lms-course-navigation-lesson__title { font-family: var(--wp--preset--font-family--heading); font-size: .875rem; } & .sensei-lms-course-navigation-lesson__extra { font-family: var(--wp--preset--font-family--heading); } & .sensei-lms-course-navigation-module__summary { font-family: var(--wp--preset--font-family--heading); } & .sensei-lms-course-navigation-module__title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.04em; text-transform: none; }"
 			}
 		},
 		"elements": {
+			"button": {
+				"typography": {
+					"fontWeight": "500",
+					"letterSpacing": "-0.01em"
+				},
+				"spacing": {
+					"padding": "0.9em 1.6em"
+				}
+			},
 			"heading": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--heading)",
@@ -212,6 +268,8 @@
 			},
 			"h1": {
 				"typography": {
+					"fontSize": "var(--wp--preset--font-size--x-large)",
+					"letterSpacing": "-0.01em",
 					"textTransform": "none"
 				}
 			}

course/styles/gold.json

@@ -38,6 +38,16 @@
 					"color": "#A47A46",
 					"name": "Button Border - Hover",
 					"slug": "button-border-hover"
+				},
+				{
+					"color": "#787C82",
+					"name": "Course Navigation - Summary",
+					"slug": "course-navigation-summary"
+				},
+				{
+					"color": "#646970",
+					"name": "Course Navigation - Locked",
+					"slug": "course-navigation-locked"
 				}
 			]
 		},
@@ -82,6 +92,14 @@
 							"fontStretch": "normal",
 							"src": [ "file:./assets/fonts/montserrat/Montserrat-VariableFont_wght.ttf" ]
 						},
+						{
+							"fontFamily": "Montserrat",
+							"fontDisplay": "block",
+							"fontWeight": "500",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/montserrat/Montserrat-VariableFont_wght.ttf" ]
+						},
 						{
 							"fontFamily": "Montserrat",
 							"fontDisplay": "block",
@@ -105,6 +123,14 @@
 							"fontStyle": "italic",
 							"fontStretch": "normal",
 							"src": [ "file:./assets/fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf" ]
+						},
+						{
+							"fontFamily": "Montserrat",
+							"fontDisplay": "block",
+							"fontWeight": "800",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf" ]
 						}
 					]
 				},
@@ -167,8 +193,8 @@
 					"name": "Extra large",
 					"size": "2.25rem",
 					"fluid": {
-						"min": "2.25rem",
-						"max": "3rem"
+						"min": "2rem",
+						"max": "3.25rem"
 					},
 					"slug": "x-large"
 				},
@@ -203,6 +229,60 @@
 						}
 					}
 				}
+			},
+			"core/paragraph": {
+				"typography": {
+					"lineHeight": "1.6",
+					"letterSpacing": "-0.004em"
+				}
+			},
+			"sensei-lms/course-theme-lesson-module": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontWeight": "700",
+					"lineHeight": "1.21"
+				}
+			},
+			"sensei-lms/course-navigation": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontWeight": "400",
+					"letterSpacing": "-0.01em"
+				},
+				"css": "& .sensei-lms-course-navigation-module__title { font-size: 1.125rem; font-weight: 600; text-transform: none; } span.sensei-lms-course-navigation-lesson__title { font-family: var(--wp--preset--font-family--heading); font-weight: 400; line-height: 1.21; opacity:unset; } .sensei-lms-course-navigation-module__summary, a.sensei-lms-course-navigation-lesson__extra { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--course-navigation-summary) } .sensei-lms-course-navigation-lesson.status-locked a { color: var(--wp--preset--color--course-navigation-locked) }"
+			},
+			"sensei-lms/course-theme-course-progress-counter": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"letterSpacing": "-0.0001em",
+					"fontWeight": "500",
+					"fontSize": "var(--wp--preset--font-size--small)",
+					"lineHeight": "1.6"
+				}
+			},
+			"sensei-lms/exit-course": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontSize": "var(--wp--preset--font-size--x-small)",
+					"letterSpacing": "-0.02em",
+					"fontWeight": "500",
+					"lineHeight": "1.6"
+				}
+			},
+			"sensei-lms/course-title": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontSize": "var(--wp--preset--font-size--x-small)",
+					"fontWeight": "800",
+					"letterSpacing": "-0.01em",
+					"lineHeight": "1",
+					"textTransform": "uppercase"
+				}
+			},
+			"sensei-lms/page-actions": {
+				"typography": {
+					"fontWeight": "700"
+				}
 			}
 		},
 		"elements": {
@@ -214,12 +294,24 @@
 			},
 			"h1": {
 				"typography": {
-					"textTransform": "none"
+					"textTransform": "none",
+					"fontSize": "var(--wp--preset--font-size--x-large)"
+				}
+			},
+			"button": {
+				"typography": {
+					"fontWeight": "700",
+					"letterSpacing": "0.001em",
+					"fontSize": "var(--wp--preset--font-size--x-small)"
+				},
+				"spacing": {
+					"padding": "1em 1.3em"
 				}
 			}
 		},
 		"typography": {
-			"fontFamily": "var(--wp--preset--font-family--body)"
+			"fontFamily": "var(--wp--preset--font-family--body)",
+			"fontSize": "clamp(var(--wp--preset--font-size--small), 0.821rem + 0.476vw, var(--wp--custom--typography--font-sizes--normal))"
 		}
 	}
 }

course/theme.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://schemas.wp.org/wp/6.1/theme.json",
+	"$schema": "https://schemas.wp.org/wp/6.2/theme.json",
 	"version": 2,
 	"customTemplates": [
 		{
@@ -323,7 +323,7 @@
 					"size": "4.5rem",
 					"fluid": {
 						"min": "3rem",
-						"max": "6rem"
+						"max": "5rem"
 					},
 					"slug": "xx-large"
 				},
@@ -540,30 +540,16 @@
 					"letterSpacing": "-0.01em"
 				},
 				"elements": {
-					"link": {
-						"typography": {
-							"textDecoration": "underline"
-						},
-						":hover": {
-							"typography": {
-								"textDecoration": "none"
-							}
-						}
-					},
 					"heading": {
-						"typography": {
-							"letterSpacing": "-0.01em"
-						},
 						"spacing": {
 							"padding": {
 								"top": "20px"
 							}
 						}
 					},
-					"h2": {
+					"link": {
 						"typography": {
-							"fontWeight": "590",
-							"letterSpacing": "-0.01em"
+							"textDecoration": "underline"
 						}
 					}
 				}
@@ -655,21 +641,20 @@
 						}
 				}
 			},
-			"sensei-lms/course-title" : {
-				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--heading)",
-					"fontSize": "clamp(1.5rem, 1.5rem + 0vw, 1.5rem)",
-					"fontWeight": "400",
-					"letterSpacing": "0.01em",
-					"lineHeight": "1",
-					"textTransform": "uppercase"
-				}
-			},
-			"sensei-lms/course-navigation" : {
+			"sensei-lms/course-navigation": {
 				"spacing": {
 					"padding": {
 						"top": "1rem"
 					}
+				},
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--system)"
+				},
+				"css": "& .sensei-lms-course-navigation-module__summary { font-family: var(--wp--preset--font-family--system); }"
+			},
+			"sensei-lms/course-title": {
+				"typography": {
+					"fontSize": "clamp(1.5rem, 1.5rem + 0vw, 1.5rem)"
 				}
 			},
 			"sensei-lms/course-theme-course-progress-bar": {
@@ -677,24 +662,24 @@
 					"background": "#F8F5F3"
 				}
 			},
-			"sensei-lms/course-theme-course-progress-counter" : {
+			"sensei-lms/course-theme-course-progress-counter": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system)",
-					"fontSize": "var(--wp--preset--font-size--x-small)",
-					"letterSpacing": "0.02em",
-					"lineHeight": "1"
+					"fontSize": "1rem",
+					"letterSpacing": "0.02em"
 				}
 			},
 			"sensei-lms/course-theme-lesson-module": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--system)"
+					"fontFamily": "var(--wp--preset--font-family--system)",
+					"letterSpacing": "-0.01em",
+					"textTransform": "none"
 				}
 			},
 			"sensei-lms/exit-course": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system)",
-					"fontSize": "var(--wp--preset--font-size--x-small)",
-					"textDecoration": "underline",
+					"fontSize": "1rem",
 					"letterSpacing": "0.02em",
 					"lineHeight": "1"
 				}
@@ -703,7 +688,8 @@
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--heading)",
 					"fontSize": "var(--wp--custom--typography--font-sizes--button)",
-					"letterSpacing": "0.05em"
+					"letterSpacing": "0.05em",
+					"lineHeight": "2.666666666666667"
 				}
 			},
 			"core/quote": {
@@ -852,13 +838,14 @@
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--heading)",
 					"fontWeight": "400",
-					"lineHeight": "100%"
+					"letterSpacing": "0.01em",
+					"lineHeight": "1",
+					"textTransform": "uppercase"
 				}
 			},
 			"h1": {
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--xx-large)",
-					"textTransform": "uppercase"
+					"fontSize": "var(--wp--preset--font-size--xx-large)"
 				}
 			},
 			"h2": {
@@ -891,6 +878,7 @@
 					"text": "var(--wp--preset--color--primary)"
 				},
 				"typography": {
+					"fontWeight": "400",
 					"textDecoration": "none"
 				},
 				":active": {