Merge pull request #7087 from Automattic/add/header-on-lm-quiz-template

Add header on quiz template on Learning Mode
Automattic · Aug 18, 2023 · 2f0677e · 2f0677e
2 parents 57d4a78 + 52a1cef
commit 2f0677e
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 45 deletions.
diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss
@@ -32,8 +32,6 @@ $tablet-breakpoint: 768px;
 	}
 
 	&__header {
-		position: sticky;
-		top: var(--top-offset);
 		background-color: var(--sensei-background-color);
 		z-index: 100;
 

diff --git a/assets/css/sensei-course-theme/sidebar-mobile-menu.scss b/assets/css/sensei-course-theme/sidebar-mobile-menu.scss
@@ -5,7 +5,11 @@
 
 $breakpoint: 783px;
 
-.sensei-course-theme__sidebar-toggle {
+.single-quiz .sensei-course-theme__sidebar-toggle {
+	display: none;
+}
+
+.single-lesson .sensei-course-theme__sidebar-toggle {
 	display: block;
 	width: 24px;
 	height: 24px;
@@ -31,17 +35,17 @@ $breakpoint: 783px;
 		background: none;
 	}
 }
+
 // Desktop
 @media screen and (min-width: ($breakpoint)) {
-	.sensei-course-theme__sidebar-toggle {
+	.single-lesson .sensei-course-theme__sidebar-toggle {
 		display: none;
 	}
 }
 
 // Mobile
 @media screen and (max-width: ($breakpoint - 1)) {
 	.sensei-course-theme {
-
 		&--sidebar-open {
 			overflow: hidden;
 
@@ -84,6 +88,5 @@ $breakpoint: 783px;
 		&:not(&--sidebar-open) &__sidebar {
 			opacity: 0;
 		}
-
 	}
 }
diff --git a/changelog/add-header-on-lm-quiz-template b/changelog/add-header-on-lm-quiz-template
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added header on the learning mode template of quizzes
diff --git a/includes/course-theme/class-sensei-course-theme-templates.php b/includes/course-theme/class-sensei-course-theme-templates.php
@@ -70,6 +70,7 @@ public function init() {
 		add_filter( 'pre_get_block_file_template', [ $this, 'get_single_block_template' ], 10, 3 );
 		add_filter( 'theme_lesson_templates', [ $this, 'add_learning_mode_template' ], 10, 4 );
 		add_filter( 'theme_quiz_templates', [ $this, 'add_learning_mode_template' ], 10, 4 );
+		add_action( 'init', [ $this, 'load_course_theme_patterns' ] );
 
 	}
 
@@ -303,7 +304,6 @@ function( $template ) use ( $slugs ) {
 	 * @return array
 	 */
 	public function get_block_templates() {
-
 		$this->load_file_templates();
 
 		$db_templates = $this->get_custom_templates();
@@ -502,6 +502,31 @@ private function should_hide_lesson_template( $post_type ) {
 		return false;
 	}
 
+	/**
+	 * Loads and registers the learning mode specific patterns prior to loading the templates so that their
+	 * reference can be used in the LM templates.
+	 *
+	 * @internal
+	 *
+	 * @since $$next-version$$
+	 */
+	public function load_course_theme_patterns() : void {
+		$pattern_files = glob( Sensei_Course_Theme::instance()->get_course_theme_root() . '/patterns/*.html' );
+
+		foreach ( $pattern_files as $pattern_file ) {
+			$pattern_title = basename( $pattern_file, '.html' );
+
+			register_block_pattern(
+				'sensei-course-theme/' . $pattern_title,
+				[
+					'title'    => $pattern_title,
+					'inserter' => false,
+					'content'  => file_get_contents( $pattern_file ), // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- Using local file.
+				]
+			);
+		}
+	}
+
 	/**
 	 * Filters the block templates to hide the lesson template in the post editor if the course does not have learning mode enabled.
 	 *

diff --git a/tests/unit-tests/course-theme/test-class-sensei-course-theme-templates.php b/tests/unit-tests/course-theme/test-class-sensei-course-theme-templates.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * This file contains the Sensei_Course_Theme_Templates class.
+ * This file contains the Sensei_Course_Theme_Templates_Test class.
  *
  * @package sensei
  */
@@ -15,6 +15,45 @@
  * @group course-theme
  */
 class Sensei_Course_Theme_Templates_Test extends WP_UnitTestCase {
+
+	public function testSenseiCourseThemeTemplates_WhenClassInitialized_PatternCreationFunctionIsAttachedWithInit() {
+		/* Arrange */
+		$registry = \WP_Block_Patterns_Registry::get_instance();
+
+		/* Act */
+		$course_theme_templates = Sensei_Course_Theme_Templates::instance();
+
+		/* Assert */
+		self::assertSame( 10, has_filter( 'init', [ $course_theme_templates, 'load_course_theme_patterns' ] ) );
+	}
+
+	public function testSenseiCourseThemeTemplates_WhenPatternAccessed_IsCreatedAlreadyByInit() {
+		/* Arrange */
+		$registry = \WP_Block_Patterns_Registry::get_instance();
+
+		/* Assert */
+		self::assertTrue( $registry->is_registered( 'sensei-course-theme/header' ) );
+	}
+
+	public function testLoadCoursePattern_WhenCalled_CreatesTheHeaderPattern() {
+		/* Arrange */
+		$registry               = \WP_Block_Patterns_Registry::get_instance();
+		$course_theme_templates = Sensei_Course_Theme_Templates::instance();
+
+		$registry->unregister( 'sensei-course-theme/header' );
+
+		$is_registered_before = $registry->is_registered( 'sensei-course-theme/header' );
+
+		/* Act */
+		$course_theme_templates->load_course_theme_patterns();
+
+		$is_registered_after = $registry->is_registered( 'sensei-course-theme/header' );
+
+		/* Assert */
+		self::assertFalse( $is_registered_before );
+		self::assertTrue( $is_registered_after );
+	}
+
 	public function testTemplateFilter_WhenCourseThemeEnabled_ReturnsFilteredTemplateList() {
 		/* Arrange */
 		$templates = [

diff --git a/themes/sensei-course-theme/patterns/header.html b/themes/sensei-course-theme/patterns/header.html
@@ -0,0 +1,32 @@
+<!-- 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":{"right":"24px","left":"24px","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:24px;padding-bottom:0px;padding-left:24px">
+		<!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"shouldSyncIcon":true,"style":{"layout":{"selfStretch":"fit","flexSize":null}}} /-->
+
+			<!-- wp:sensei-lms/course-title /-->
+		</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 /-->
+
+				<!-- wp:sensei-lms/exit-course /-->
+			</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 -->
diff --git a/themes/sensei-course-theme/templates/default/lesson.html b/themes/sensei-course-theme/templates/default/lesson.html
@@ -1,38 +1,7 @@
-<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__header","className":"sensei-version\u002d\u002d4-8-0"} -->
-<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-version--4-8-0 sensei-course-theme__header">
-	<!-- wp:group {"style":{"spacing":{"padding":{"right":"24px","left":"24px","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:24px;padding-bottom:0px;padding-left:24px">
-		<!-- wp:group {"style":{"spacing":{"blockGap":"8px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group">
-			<!-- wp:site-logo {"shouldSyncIcon":true,"style":{"layout":{"selfStretch":"fit","flexSize":null}}} /-->
+<!-- wp:pattern {"slug":"sensei-course-theme/header"} /-->
 
-			<!-- wp:sensei-lms/course-title /-->
-		</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 /-->
-
-				<!-- wp:sensei-lms/exit-course /-->
-			</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 -->
-
-<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__columns"} -->
-<div class="wp-block-sensei-lms-ui sensei-course-theme__columns">
+<!-- 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":""} -->
 	<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-course-theme__sidebar">
 		<!-- wp:sensei-lms/course-navigation /--></div>

diff --git a/themes/sensei-course-theme/templates/quiz.html b/themes/sensei-course-theme/templates/quiz.html
@@ -1,3 +1,5 @@
+<!-- wp:pattern {"slug":"sensei-course-theme/header"} /-->
+
 <!-- wp:columns {"className":"sensei-course-theme__quiz__header sensei-course-theme__frame"} -->
 <div class="wp-block-columns sensei-course-theme__quiz__header sensei-course-theme__frame">
 	<!-- wp:column {"className":"sensei-course-theme__quiz__header__left"} -->
@@ -14,8 +16,8 @@
 </div>
 <!-- /wp:columns -->
 
-<!-- wp:group {"className":"sensei-course-theme__quiz__main-content", "tagName": "main"} -->
-<main class="wp-block-group sensei-course-theme__quiz__main-content">
+<!-- wp:group {"className":"sensei-course-theme__quiz__main-content sensei-version\u002d\u002d4-16-2", "tagName": "main"} -->
+<main class="wp-block-group sensei-course-theme__quiz__main-content sensei-version--4-16-2">
 	<!-- wp:sensei-lms/course-theme-notices /-->
 	<!-- wp:post-content /-->
 </main>
@@ -29,4 +31,4 @@
 	</div>
 	<!-- /wp:group -->
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->