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>
This commit is contained in:
Dmitry Merkushin 2023-06-01 21:43:14 +04:00 committed by GitHub
parent 683f477c13
commit 26b8718c65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 266 additions and 116 deletions

View file

@ -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' );

View file

@ -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;

View file

@ -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:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"1.25rem"},"typography":{"lineHeight":"1"}}} /--></div>
<!-- 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:group --></div>
<!-- /wp:group -->

View file

@ -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

View file

@ -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;
}

View file

@ -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)"

View file

@ -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"
}
}

View file

@ -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))"
}
}
}

View file

@ -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": {