Course Release 1.3.5 (#7451)
* Update styles of question feedback (#7373) * Specify the grade style to be applied only in the question header * Update background color for gold variation * Update background color for default variation * Update border color for gold variation * Tweak CSS formatting * Tweak color for border of ordering question --------- Co-authored-by: Donna Peplinskie <donnapep@gmail.com> * Update version and description * Add new changelog * Remove legacy Learning Mode CSS as it's part of Sensei now (#7431) * 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 * Style the "Awaiting Grade" notice (#7401) * Style "Awaiting Grade" notice * Move custom CSS to other areas of theme.json * Remove typography setting as it needs to be done via CSS * Do the same for the variations * Fix notice style getting broken for css parsing issue --------- Co-authored-by: Imran Hossain <imranh920@gmail.com> * Bump versions and update change log --------- Co-authored-by: Imran Hossain <imranh920@gmail.com>
This commit is contained in:
Donna Peplinskie
GitHub
parent
0c0cd5bb13
commit
dafa06d928
12 changed files with 143 additions and 234 deletions
3
course/assets/css/blue.css
Normal file
3
course/assets/css/blue.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*
|
||||
* Styles specific to blue variation
|
||||
*/
|
||||
3
course/assets/css/dark.css
Normal file
3
course/assets/css/dark.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*
|
||||
* Styles specific to dark variation
|
||||
*/
|
||||
3
course/assets/css/default.css
Normal file
3
course/assets/css/default.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*
|
||||
* Styles specific to default variation
|
||||
*/
|
||||
3
course/assets/css/gold.css
Normal file
3
course/assets/css/gold.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*
|
||||
* Styles specific to gold variation
|
||||
*/
|
||||
|
|
@ -41,20 +41,8 @@ if ( ! function_exists( 'course_scripts' ) ) :
|
|||
*/
|
||||
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' );
|
||||
|
||||
/**
|
||||
* Temporary Hook to skip the learning mode style when the Sensei LMS is able to provide it.
|
||||
* It is only used to continue loading the deprecated styles if a old sensei version is installed.
|
||||
*/
|
||||
$use_deprecated_style = apply_filters( 'course_learning_mode_load_styles', true );
|
||||
|
||||
if ( class_exists( 'Sensei_Main' ) && $use_deprecated_style ) {
|
||||
wp_register_style( 'course-sensei-learning-mode', get_stylesheet_directory_uri() . '/learning-mode.css', array(), wp_get_theme()->get( 'Version' ) );
|
||||
wp_enqueue_style( 'course-sensei-learning-mode' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
endif;
|
||||
|
|
@ -79,7 +67,7 @@ add_action( 'init', 'course_theme_init' );
|
|||
function course_register_block_patterns_category() {
|
||||
register_block_pattern_category(
|
||||
'sensei-lms',
|
||||
[ 'label' => 'Sensei LMS' ]
|
||||
array( 'label' => 'Sensei LMS' )
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -92,6 +80,10 @@ add_filter(
|
|||
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.
|
||||
*
|
||||
|
|
@ -119,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' ) );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,212 +0,0 @@
|
|||
/**
|
||||
### DEPRECATED FILE ###
|
||||
Please don't update it, this file will be moved to the Sensei plugin to better Maintainability.
|
||||
|
||||
**/
|
||||
:root, .sensei-course-theme {
|
||||
--sensei-lm-header-height: 116px;
|
||||
}
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Override theme.json blockGap setting. */
|
||||
.sensei-course-theme .sensei-course-theme__sidebar,
|
||||
.sensei-course-theme__sidebar .wp-block-sensei-lms-course-navigation,
|
||||
.sensei-course-theme .is-layout-constrained > .wp-block-columns.is-layout-flex {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.sensei-course-theme__sidebar {
|
||||
--sensei-lm-sidebar-width: 290px;
|
||||
}
|
||||
|
||||
.sensei-course-theme__frame.sensei-course-theme__header {
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
/* Course Navigation */
|
||||
.sensei-lms-course-navigation-module:not(:first-of-type) {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-module__header{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-module__title {
|
||||
font-family: var(--wp--preset--font-family--heading);
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-module__summary {
|
||||
font-weight: 400;
|
||||
margin-top: 4px;
|
||||
line-height: 16px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson {
|
||||
align-items: baseline;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson__link {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson__title {
|
||||
font-family: var(--wp--preset--font-family--system);
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson__extra {
|
||||
font-family: var(--wp--preset--font-family--system);
|
||||
line-height: 1.23;
|
||||
font-weight: normal;
|
||||
opacity: 1;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Lesson Actions */
|
||||
.wp-block-sensei-button:where(:not(.is-style-link)) a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions__next-lesson {
|
||||
font-family: var(--wp--preset--font-family--heading);
|
||||
font-size: var(--wp--custom--typography--font-sizes--button);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions .is-link:hover {
|
||||
color: var(--sensei-primary-color) !important;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions[aria-disabled=true], .sensei-course-theme-lesson-actions:disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions.is-busy {
|
||||
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 28%, rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0.1) 72%, rgba(255, 255, 255, 0.5) 72%);
|
||||
animation: components-button__busy-animation 25000ms infinite linear;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions.is-busy:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions .sensei-course-theme__button:focus,
|
||||
.sensei-course-theme-lesson-actions .sensei-course-theme__link:focus {
|
||||
outline: dashed 1px var(--sensei-primary-color);
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions .sensei-course-theme__button.has-icon,
|
||||
.sensei-course-theme-lesson-actions .sensei-course-theme__link.has-icon {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sensei-course-theme-lesson-actions .sensei-course-theme__button.has-icon svg,
|
||||
.sensei-course-theme-lesson-actions .sensei-course-theme__link.has-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.sensei-course-theme .sensei-course-theme__video-container::after {
|
||||
--sensei-lm-sidebar-width: 290px;
|
||||
}
|
||||
|
||||
.sensei-course-theme .sensei-course-theme__video-container .sensei-course-theme-lesson-video .wp-block-video {
|
||||
border: 1px solid var(--wp--preset--color--primary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sensei-course-theme .sensei-course-theme__video-container .sensei-course-theme-course-progress {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Progress bar in Modern and Video templates. */
|
||||
.sensei-course-theme__sidebar .sensei-course-theme-course-progress-bar {
|
||||
background-color: transparent;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
height: auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.sensei-course-theme__sidebar .sensei-course-theme-course-progress-bar-inner {
|
||||
border-radius: 4px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.sensei-course-theme__frame .sensei-course-theme-course-progress-bar-inner {
|
||||
background-color: var(--sensei-primary-color);
|
||||
}
|
||||
|
||||
.sensei-course-theme .sensei-course-theme__video-container {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sensei-course-theme:not(.learning-mode-full-width) .sensei-course-theme__header > * {
|
||||
max-width: 1240px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.sensei-course-theme:not(.learning-mode-full-width) .sensei-course-theme__header.sensei-course-theme__frame:not(.learning-mode-full-width-header) {
|
||||
max-width: 1240px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.sensei-course-theme:not(.learning-mode-full-width) .wp-site-blocks > * {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.sensei-course-theme:not(.learning-mode-full-width) .sensei-course-theme__quiz__footer__wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sensei-course-theme__header + .sensei-course-theme__columns > div:first-child.sensei-course-theme__sidebar {
|
||||
border-radius: 0px;
|
||||
border-width: 0px 1px 0px 0px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Modern Template */
|
||||
.sensei-modern .sensei-course-theme__sidebar:not(.sensei-course-theme__secondary-sidebar) {
|
||||
border: 1px solid var(--sensei-text-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Modern Template */
|
||||
.sensei-course-theme.sensei-modern .sensei-course-theme__header,
|
||||
.sensei-course-theme.sensei-modern .sensei-course-theme__sidebar {
|
||||
background-color: var(--sensei-background-color);
|
||||
color: var(--sensei-text-color);
|
||||
}
|
||||
|
||||
.learning-mode-full-width .wp-block-sensei-lms-course-theme-course-progress-counter {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wp-block-sensei-lms-exit-course:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
=== Course ===
|
||||
Contributors: Automattic
|
||||
Requires at least: 6.2
|
||||
Tested up to: 6.3
|
||||
Requires PHP: 7.3
|
||||
Tested up to: 6.4
|
||||
Requires PHP: 7.4
|
||||
License: GPLv2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
|
||||
|
|
@ -12,6 +12,11 @@ Course is a flexible and modern education theme for anyone wanting to share thei
|
|||
|
||||
== Changelog ==
|
||||
|
||||
= 1.3.5 =
|
||||
* Style the "Awaiting Grade" notice (#7401)
|
||||
* Remove legacy Learning Mode CSS as it's part of Sensei now (#7431)
|
||||
* Add body class for theme variations (#7432)
|
||||
|
||||
= 1.3.4 =
|
||||
* Update styles of question feedback (#7373)
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ Theme Name: Course
|
|||
Author: Automattic
|
||||
Author URI: https://automattic.com/
|
||||
Description: Course is a flexible and modern education 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.3.4
|
||||
Version: 1.3.5
|
||||
Requires at least: 6.2
|
||||
Tested up to: 6.3
|
||||
Requires PHP: 7.3
|
||||
Tested up to: 6.4
|
||||
Requires PHP: 7.4
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: course
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -265,6 +266,18 @@
|
|||
"letterSpacing": "-0.02em"
|
||||
}
|
||||
},
|
||||
"sensei-lms/course-theme-notices": {
|
||||
"css": "& .sensei-course-theme-quiz-graded-notice__text { font-size: clamp(1rem, 0.917rem + 0.278vw, 1.125rem); }",
|
||||
"elements": {
|
||||
"h2": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--heading)",
|
||||
"fontSize": "clamp(1.5rem, 1rem + 1.667vw, 2.25rem)",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sensei-lms/exit-course": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--body)",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -231,6 +232,18 @@
|
|||
"letterSpacing": "0"
|
||||
}
|
||||
},
|
||||
"sensei-lms/course-theme-notices": {
|
||||
"css": "& .sensei-course-theme-quiz-graded-notice__text { font-size: clamp(1.125rem, 1.042rem + 0.278vw, 1.25rem); }",
|
||||
"elements": {
|
||||
"h2": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--heading)",
|
||||
"fontSize": "clamp(1.5rem, 1.167rem + 1.111vw, 2rem)",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sensei-lms/exit-course": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--heading)",
|
||||
|
|
|
|||
|
|
@ -57,7 +57,8 @@
|
|||
"normal": "1.125rem",
|
||||
"button": "1rem"
|
||||
}
|
||||
}
|
||||
},
|
||||
"courseThemeVariation": "gold"
|
||||
},
|
||||
"typography": {
|
||||
"fluid": true,
|
||||
|
|
@ -243,6 +244,18 @@
|
|||
"lineHeight": "1.21"
|
||||
}
|
||||
},
|
||||
"sensei-lms/course-theme-notices": {
|
||||
"css": "& .sensei-course-theme-quiz-graded-notice__text { font-size: clamp(1rem, 0.917rem + 0.278vw, 1.125rem); }",
|
||||
"elements": {
|
||||
"h2": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--heading)",
|
||||
"fontSize": "clamp(1.25rem, 0.75rem + 1.667vw, 2rem)",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sensei-lms/course-navigation": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--heading)",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
@ -670,6 +671,18 @@
|
|||
},
|
||||
"css": "& .sensei-lms-course-navigation-module__summary { font-family: var(--wp--preset--font-family--system); }"
|
||||
},
|
||||
"sensei-lms/course-theme-notices": {
|
||||
"css": "& .sensei-course-theme-quiz-graded-notice__text { font-size: clamp(1.25rem, 1.083rem + 0.556vw, 1.5rem); } & .sensei-course-theme-quiz-graded-notice__reset-quiz-form .sensei-course-theme__button { font-size: clamp(1.313rem, 1.188rem + 0.417vw, 1.5rem); }",
|
||||
"elements": {
|
||||
"h2": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--system)",
|
||||
"fontSize": "clamp(1.5rem, 1.167rem + 1.111vw, 2rem)",
|
||||
"fontWeight": "590"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sensei-lms/course-title": {
|
||||
"typography": {
|
||||
"fontSize": "clamp(1.5rem, 1.5rem + 0vw, 1.5rem)"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue