Skip to content

Commit

Permalink
Customize single lesson template (#2431)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@adamwoodnz
adamwoodnz authored May 13, 2024
1 parent 76eb821 commit 3a39fd9
Show file tree
Hide file tree
Showing 9 changed files with 261 additions and 1 deletion.
2 changes: 1 addition & 1 deletion phpcs.xml.dist
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@
provided as a comma-delimited list. -->
<rule ref="WordPress.WP.I18n">
<properties>
<property name="text_domain" type="array" value="wporg-learn,wporg_learn" />
<property name="text_domain" type="array" value="wporg-learn,wporg_learn,sensei-lms" />
</properties>
</rule>
</ruleset>
17 changes: 17 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
52 changes: 52 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<?php
/**
* Title: Sensei Lesson header
* Slug: wporg-learn-2024/sensei-lesson-header
* Inserter: no
*
* Original source: https://github.com/Automattic/sensei/blob/af62fb1115daf2063bc56331a7d8b1b3ea805866/themes/sensei-course-theme/patterns/header.html
*/

?>

<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__header","className":"sensei-version\u002d\u002d4-16-2"} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-version--4-16-2 sensei-course-theme__header">
<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"0px","bottom":"0px"}}},"className":"sensei-course-theme-header-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group sensei-course-theme-header-content" style="padding-top:0px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:0px;padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:group {"style":{"spacing":{"blockGap":"15px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-group">

<!-- wp:site-title {"level":2,"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"charcoal-4","fontSize":"small"} /-->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|light-grey-1"}}}},"textColor":"light-grey-1"} -->
<p class="has-light-grey-1-color has-text-color has-link-color" aria-hidden="true">/</p>
<!-- /wp:paragraph -->

<!-- wp:sensei-lms/course-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"margin":{"top":"0"},"padding":{"right":"0","left":"0"}}},"fontSize":"small"} /-->

</div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"12px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">

<!-- wp:group {"style":{"spacing":{"blockGap":"16px"}},"className":"sensei-course-theme__header__info","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group sensei-course-theme__header__info">
<!-- wp:sensei-lms/course-theme-course-progress-counter {"fontSize":"small"} /-->

<!-- wp:sensei-lms/exit-course {"fontSize":"small"} /-->
</div>
<!-- /wp:group -->

<!-- wp:sensei-lms/sidebar-toggle-button /-->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:sensei-lms/course-theme-course-progress-bar /-->
</div>
<!-- /wp:sensei-lms/ui -->
70 changes: 70 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<?php
/**
* Title: Sensei Lesson content
* Slug: wporg-learn-2024/sensei-lesson
* Inserter: no
*
* Original source: https://github.com/Automattic/sensei/blob/af62fb1115daf2063bc56331a7d8b1b3ea805866/themes/sensei-course-theme/templates/default/lesson.php
*/

?>

<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-header"} /-->

<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__columns","className":"sensei-version\u002d\u002d4-16-2"} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__columns sensei-version--4-16-2">

<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__sidebar","className":"","style"={"spacing":{"margin":{"top":"var:preset|spacing|50"},"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|30","bottom":"var:preset|spacing|50","left":"var:preset|spacing|edge-space"}}}} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-course-theme__sidebar" style="margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:sensei-lms/course-navigation /-->

</div>
<!-- /wp:sensei-lms/ui -->

<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__main-content","lock":{"move":false,"remove":false},"style"={"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|edge-space"}}}} -->
<div class="wp-block-sensei-lms-ui sensei-course-theme__main-content" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--edge-space)">

<!-- wp:sensei-lms/course-theme-lesson-module /-->

<!-- wp:post-title {"level":1,"fontSize":"heading-1"} /-->

<!-- wp:sensei-lms/course-theme-notices /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"40px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:40px">
<!-- wp:sensei-lms/page-actions {"style":{"spacing":{"blockGap":"43px"}}} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"20px"}}},"className":"sensei-lesson-footer","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group sensei-lesson-footer" style="margin-top:20px">
<!-- wp:sensei-lms/lesson-actions {"toggledBlocks":{"sensei-lms/button-reset-lesson":false}} -->
<div class="wp-block-sensei-lms-lesson-actions">
<div class="sensei-buttons-container">
<!-- wp:sensei-lms/button-complete-lesson {"inContainer":true,"className":"is-style-outline"} -->
<div class="wp-block-sensei-lms-button-complete-lesson is-style-outline sensei-buttons-container__button-block wp-block-sensei-lms-button-complete-lesson__wrapper"><div class="wp-block-sensei-lms-button-complete-lesson is-style-outline wp-block-sensei-button wp-block-button has-text-align-left"><button class="wp-block-button__link sensei-stop-double-submission"><?php esc_html_e( 'Complete Lesson', 'sensei-lms' ); ?></button></div></div>
<!-- /wp:sensei-lms/button-complete-lesson -->

<!-- wp:sensei-lms/button-view-quiz {"inContainer":true} -->
<div class="wp-block-sensei-lms-button-view-quiz is-style-default sensei-buttons-container__button-block wp-block-sensei-lms-button-view-quiz__wrapper"><div class="wp-block-sensei-lms-button-view-quiz is-style-default wp-block-sensei-button wp-block-button has-text-align-left"><button class="wp-block-button__link"><?php esc_html_e( 'Take Quiz', 'sensei-lms' ); ?></button></div></div>
<!-- /wp:sensei-lms/button-view-quiz -->

<!-- wp:sensei-lms/button-lesson-completed {"inContainer":true,"className":"is-style-outline"} -->
<div class="wp-block-sensei-lms-button-lesson-completed is-style-outline sensei-buttons-container__button-block wp-block-sensei-lms-button-lesson-completed__wrapper"><div class="wp-block-sensei-lms-button-lesson-completed is-style-outline wp-block-sensei-button wp-block-button has-text-align-left"><button class="wp-block-button__link"><?php esc_html_e( 'Completed', 'sensei-lms' ); ?></button></div></div>
<!-- /wp:sensei-lms/button-lesson-completed -->

<!-- wp:sensei-lms/button-next-lesson {"inContainer":true} -->
<div class="wp-block-sensei-lms-button-next-lesson is-style-default sensei-buttons-container__button-block wp-block-sensei-lms-button-next-lesson__wrapper"><div class="wp-block-sensei-lms-button-next-lesson is-style-default wp-block-sensei-button wp-block-button has-text-align-left"><button class="wp-block-button__link"><?php esc_html_e( 'Next Lesson', 'sensei-lms' ); ?></button></div></div>
<!-- /wp:sensei-lms/button-next-lesson -->
</div>
</div>
<!-- /wp:sensei-lms/lesson-actions -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:sensei-lms/ui -->
</div>
<!-- /wp:sensei-lms/ui -->
76 changes: 76 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
2 changes: 2 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
1 change: 1 addition & 0 deletions wp-content/themes/pub/wporg-learn-2024/templates/single-lesson.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson"} /-->
39 changes: 39 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!-- Original source: https://github.com/Automattic/sensei/blob/af62fb1115daf2063bc56331a7d8b1b3ea805866/themes/sensei-course-theme/templates/quiz.html -->

<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-header"} /-->

<!-- wp:group {"className":"sensei-course-theme__quiz__main-content sensei-version\u002d\u002d4-16-2 sensei-course-theme__main-content", "tagName": "main","style"={"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|edge-space"}}}} -->
<main class="wp-block-group sensei-course-theme__quiz__main-content sensei-version--4-16-2 sensei-course-theme__main-content" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--edge-space)">

<!-- wp:sensei-lms/quiz-back-to-lesson /-->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">

<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"0"},"padding":{"bottom":"0"}}},"fontSize":"heading-1"} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"right":"0","left":"0","top":"0","bottom":"0"}}},"className":"sensei-course-theme__quiz__header__right","layout":{"type":"constrained"}} -->
<div class="wp-block-group sensei-course-theme__quiz__header__right" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"></div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:sensei-lms/course-theme-notices /-->

<!-- wp:post-content /-->

</main>
<!-- /wp:group -->

<!-- wp:group {"className":"sensei-course-theme__quiz__footer_wrapper sensei-course-theme__frame"} -->
<div class="wp-block-group sensei-course-theme__quiz__footer__wrapper sensei-course-theme__frame">

<!-- wp:group {"className":"sensei-course-theme__quiz__footer alignwide"} -->
<div class="wp-block-group sensei-course-theme__quiz__footer alignwide">
<!-- wp:sensei-lms/quiz-actions /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->
3 changes: 3 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down

0 comments on commit 3a39fd9

Please sign in to comment.