Add support for Learning Mode for standalone lessons (#2594)

* Add support for Learning Mode for freestanding lessons

* Hide notices and exit course button

* Center the content

* Load course theme styles for freestanding quizzes too

* Tighten up quiz question styles

wp-content/themes/pub/wporg-learn-2024/functions.php

@@ -21,6 +21,7 @@
  */
 add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\maybe_enqueue_sensei_assets', 100 );
 
 add_filter( 'post_thumbnail_html', __NAMESPACE__ . '\set_default_featured_image', 10, 5 );
 add_filter( 'sensei_register_post_type_course', function( $args ) {
@@ -92,6 +93,26 @@ function enqueue_assets() {
 	}
 }
 
+/**
+ * Sensei doesn't enqueue learning mode styles for Lessons which are not part of a course.
+ * Enqueue the styles and add the required body class if needed.
+ */
+function maybe_enqueue_sensei_assets() {
+	if ( ( is_singular( 'lesson' ) || is_singular( 'quiz' ) ) && ! wp_style_is( 'sensei-course-theme-style', 'enqueued' ) ) {
+		wp_enqueue_style( 'sensei-learning-mode' );
+
+		add_filter( 'body_class', function( $classes ) {
+			$sensei_body_class = 'sensei-course-theme';
+
+			if ( ! in_array( $sensei_body_class, $classes, true ) ) {
+				$classes[] = $sensei_body_class;
+			}
+
+			return $classes;
+		} );
+	}
+}
+
 /**
  * Customize the syntax highlighter style.
  * See https://github.com/PrismJS/prism-themes.

wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php

@@ -11,8 +11,9 @@
 
 <!-- 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":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"0px","bottom":"0px"}}},"backgroundColor":"white","className":"sensei-course-theme-header-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+	<div class="wp-block-group sensei-course-theme-header-content has-white-background-color has-background" 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 {"className":"wporg-breadcrumbs","align":"full","style":{"spacing":{"padding":{"top":"23px","bottom":"23px","right":"var:preset|spacing|edge-space"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
 		<div class="wporg-breadcrumbs wp-block-group alignfull has-white-background-color has-background" style="padding-top:23px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:23px;">

wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss

@@ -3,6 +3,7 @@ body.sensei {
 	--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));
+	--sensei-wpadminbar-offset: var(--wp-admin--admin-bar--height);
 
 	--border-color: var(--wp--custom--color--border);
 	--sensei-secondary-color: var(--wp--preset--color--blueberry-1);
@@ -70,7 +71,15 @@ body.sensei {
 
 	&.quiz {
 		#sensei-quiz-list .question-title {
-			font-size: var(--wp--preset--font-size--heading-2);
+			font-size: var(--wp--preset--font-size--heading-4);
+		}
+
+		.wp-block-sensei-lms-quiz .wp-block-sensei-lms-quiz-question {
+			margin-top: var(--wp--preset--spacing--40);
+		}
+
+		.wp-block-sensei-lms-quiz .sensei-lms-question-block__header {
+			margin-bottom: var(--wp--preset--spacing--20);
 		}
 	}
 
@@ -232,6 +241,32 @@ body.sensei {
 			}
 		}
 	}
+
+	// This class missing an id indicates a freestanding lesson, not part of a course.
+	&.course-id- {
+		.sensei-course-theme-header-content {
+			border-bottom: 1px solid var(--wp--custom--color--border);
+		}
+
+		.wp-block-sensei-lms-exit-course,
+		.wp-block-sensei-lms-course-theme-notices {
+			display: none;
+		}
+
+		.sensei-course-theme__columns {
+			> div:not(.sensei-course-theme__main-content) {
+				display: none;
+			}
+
+			.sensei-course-theme__main-content {
+				margin-left: auto !important;
+				margin-right: auto !important;
+				max-width: var(--wp--style--global--content-size);
+				padding-left: var(--wp--preset--spacing--edge-space);
+				padding-right: var(--wp--preset--spacing--edge-space);
+			}
+		}
+	}
 }
 
 .course:not(body) {