From 3a39fd99ee1b465ad0cb387c29d0861ed262fdbc Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Mon, 13 May 2024 14:26:06 +1200 Subject: [PATCH] Customize single lesson template (#2431) * Restyle the Lesson page * Copy Sensei Course Theme templates into theme Filter the template hierarchy to intercept Sensei and load our single lesson template Use block markup for styles as much as possible * Add single quiz template * Use permalinks for Sensei single lesson template refs * Revert adding sensei custom property * Use block markup for h1 styles * Adjust quiz template fonts and spacing * Order sensei custom properties --- phpcs.xml.dist | 2 +- .../themes/pub/wporg-learn-2024/functions.php | 17 +++++ .../patterns/sensei-lesson-header.php | 52 +++++++++++++ .../patterns/sensei-lesson.php | 70 +++++++++++++++++ .../wporg-learn-2024/src/style/_sensei.scss | 76 +++++++++++++++++++ .../pub/wporg-learn-2024/src/style/style.scss | 2 + .../templates/single-lesson.html | 1 + .../templates/single-quiz.html | 39 ++++++++++ .../themes/pub/wporg-learn-2024/theme.json | 3 + 9 files changed, 261 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php create mode 100644 wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson.php create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss create mode 100644 wp-content/themes/pub/wporg-learn-2024/templates/single-lesson.html create mode 100644 wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html diff --git a/phpcs.xml.dist b/phpcs.xml.dist index 41079030f..c3e709e24 100644 --- a/phpcs.xml.dist +++ b/phpcs.xml.dist @@ -147,7 +147,7 @@ provided as a comma-delimited list. --> - + diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index 1f4b95ac7..e41a44681 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -59,6 +59,23 @@ function get_views_path() { add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' ); add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' ); add_filter( 'wporg_block_navigation_menus', __NAMESPACE__ . '\add_site_navigation_menus' ); +add_filter( 'single_template_hierarchy', __NAMESPACE__ . '\modify_single_template' ); + +/** + * Modify the single template hierarchy to use a customised copy of the Sensei Course Theme template for lessons. + * + * @param array $templates Array of template files. + * @return array + */ +function modify_single_template( $templates ) { + if ( is_singular( 'lesson' ) ) { + array_unshift( $templates, 'single-lesson.html' ); + } elseif ( is_singular( 'quiz' ) ) { + array_unshift( $templates, 'single-quiz.html' ); + } + + return $templates; +} /** * Sets up theme defaults and registers support for various WordPress features. diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php new file mode 100644 index 000000000..bd7cc790b --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php @@ -0,0 +1,52 @@ + + + +
+ +
+ + +
+ + + + + + + + + +
+ + + +
+ + +
+ + + +
+ + + + +
+ + +
+ + + +
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson.php new file mode 100644 index 000000000..fce172c4d --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson.php @@ -0,0 +1,70 @@ + + + + + +
+ + +
+ + + +
+ + + +
+ + + + + + + + + + +
+ + + +
+ +
+
+ +
+ + + +
+ + + +
+ + + +
+ +
+
+ +
+ +
+ +
+ +
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss new file mode 100644 index 000000000..99f450041 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -0,0 +1,76 @@ +body.sensei { + --content-size: var(--wp--style--global--content-size); + --content-padding: var(--wp--preset--spacing--edge-space); + --sensei-lm-header-height: 60px; + --sensei-lm-sidebar-width: calc(280px + var(--wp--preset--spacing--edge-space)); + + --border-color: var(--wp--custom--color--border); + --sensei-secondary-color: var(--wp--preset--color--blueberry-1); + --sensei-button-text-color: var(--wp--preset--color--white); + + --sensei-course-progress-bar-color: var(--wp--custom--color--border); + --sensei-course-progress-bar-inner-color: var(--wp--preset--color--blueberry-1); + --sensei-lesson-meta-color: var(--wp--preset--color--charcoal-4); + --sensei-module-lesson-color: var(--wp--preset--color--charcoal-1); + + .sensei-course-theme-header-content > .wp-block-group { + row-gap: 0; + } + + .sensei-course-theme__columns .sensei-course-theme__sidebar ~ .sensei-course-theme__main-content { + --sensei-lm-sidebar-width: calc(280px + (var(--wp--preset--spacing--edge-space) * 2) - 24px); + + @media (min-width: 890px) { + padding-right: calc(var(--wp--preset--spacing--edge-space) - 24px); + } + } + + .sensei-lms-course-navigation-module__header { + .sensei-collapsible__toggle.sensei-lms-course-navigation-module__button { + flex-direction: row-reverse; + align-items: flex-start; + gap: 0; + } + } + + .sensei-lms-course-navigation-module__title { + font-weight: 700; + font-size: var(--wp--preset--font-size--small); + color: var(--wp--preset--color--charcoal-1); + margin-top: unset; + } + + .sensei-lms-course-navigation-module__lessons.sensei-collapsible__content, + .sensei-lms-course-navigation-module__summary { + padding-left: 24px; + } + + .sensei-lms-course-navigation-module__summary { + font-size: var(--wp--preset--font-size--xsmall); + } + + .sensei-lms-course-navigation-lesson { + font-size: var(--wp--preset--font-size--small); + + &.status-in-progress, + &.status-not-started { + --sensei-module-lesson-color: var(--wp--preset--color--charcoal-4); + } + } + + @media screen and (max-width: 782px) { + .sensei-lesson-footer .wp-block-sensei-lms-button-lesson-completed { + display: flex; + + .wp-block-button__link { + flex: 1; + } + } + } + + &.quiz { + #sensei-quiz-list .question-title { + font-size: var(--wp--preset--font-size--heading-2); + } + } +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss index 7aef2a689..d265da04b 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss @@ -2,3 +2,5 @@ * Note: only add styles here in cases where you can't achieve the style with * templates or theme.json settings. */ + +@import "sensei"; diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/single-lesson.html b/wp-content/themes/pub/wporg-learn-2024/templates/single-lesson.html new file mode 100644 index 000000000..66fbdb85e --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/templates/single-lesson.html @@ -0,0 +1 @@ + diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html b/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html new file mode 100644 index 000000000..f36a6a130 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html @@ -0,0 +1,39 @@ + + + + + +
+ + + + +
+ + + + +
+ + +
+ + + + + + +
+ + + +
+ + +
+ +
+ + +
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/theme.json b/wp-content/themes/pub/wporg-learn-2024/theme.json index e583f70a5..1ef4c473b 100644 --- a/wp-content/themes/pub/wporg-learn-2024/theme.json +++ b/wp-content/themes/pub/wporg-learn-2024/theme.json @@ -3,6 +3,9 @@ "version": 2, "settings": { "custom": { + "color": { + "border": "var(--wp--preset--color--light-grey-1)" + }, "heading": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)",