Merge pull request #6883 from Automattic/update/review-div-spacing

Adjust spacings and alignment for Divi

assets/css/3rd-party/themes/divi/learning-mode.editor.scss

@@ -0,0 +1,23 @@
+.sensei-course-theme__header {
+	width: 100%;
+	max-width: unset;
+}
+
+.sensei-course-theme-header-content {
+	width: 100%;
+}
+
+.editor-styles-wrapper .block-editor-block-list__layout.is-root-container>*,
+.wp-block {
+	max-width: unset;
+	margin-left: unset !important;
+	margin-right: unset !important;
+}
+
+.editor-styles-wrapper .is-layout-constrained {
+	>.sensei-lesson-footer,
+	>.sensei-course-theme__post-pagination {
+		margin-left: unset !important;
+		margin-left: unset !important;
+	}
+}

assets/css/3rd-party/themes/divi/learning-mode.scss

@@ -0,0 +1,72 @@
+$desktop_min_width: 783px;
+:root, .sensei-course-theme {
+	--sensei-lm-header-height:70px;
+}
+
+
+// Reset the title bottom padding
+.wp-site-blocks :is(h1, h2, h3, h4, h5, h6) {
+	padding-bottom: 0;
+}
+
+.wp-block-post-content * {
+	padding-bottom: 0;
+}
+
+
+.sensei-course-theme__frame .sensei-course-theme-course-progress-bar-inner {
+	background-color: var(--sensei-primary-color);
+}
+
+.sensei-course-theme .entry-content.wp-block-post-content {
+	margin-top: 1.5rem;
+}
+
+.is-layout-flow {
+	& > * + * {
+		margin-block-start: 1.5rem;
+		margin-block-end: 0;
+	}
+
+	& > * + .sensei-course-theme__main-content {
+		margin-top: 0;
+	}
+}
+
+@media screen and (min-width: $desktop_min_width) {
+
+	:root, .sensei-course-theme {
+		--sensei-lm-header-height:80px;
+	}
+
+	:where(.is-layout-flex) {
+		gap: 0.5rem;
+	}
+
+	.sensei-course-theme__header__info {
+		gap: 1rem;
+	}
+
+	.sensei-course-theme__columns .sensei-course-theme__sidebar ~ .sensei-course-theme__main-content {
+		padding-top: 3.5rem;
+	}
+
+	.is-layout-flow {
+		& > * + * {
+			margin-block-start: 2.5rem;
+			margin-block-end: 0;
+		}
+
+		& > * + .sensei-course-theme__main-content {
+			margin-top: 0;
+		}
+
+		& > * + .wp-block-post-title {
+			margin-block-start: 1.5rem;
+		}
+	}
+
+	.sensei-course-theme .sensei-lesson-footer {
+		margin-left: 0 !important;
+	}
+}

assets/css/sensei-course-theme/mobile.scss

@@ -9,13 +9,6 @@ $breakpoint: 783px;
 		--content-padding: 24px;
 	}
 
-
-	@at-root :root:has(.admin-bar) .sensei-course-theme__sidebar {
-		// When the admin bar is present, something is applying and extra spacing that is messing the padding calculate, so it require cut the padding by half.
-		--content-padding: 12px;
-	}
-
-
 	body .is-layout-flow > * + .sensei-course-theme__main-content {
 		margin-top: 32px;
 		padding-bottom: 32px;

includes/3rd-party/themes/divi.php

@@ -89,4 +89,54 @@ function sensei_fix_divi_learning_mode_video_template_excerpt() {
 		remove_filter( 'render_block_core/post-excerpt', array( ET_GB_Block_Post_Excerpt::instance(), 'render_block' ) );
 	}
 }
+
+/**
+ * Enqueue Divi theme-specific Learning Mode styles.
+ */
+function sensei_load_learning_mode_style_for_divi_theme() {
+	$course_id       = Sensei_Utils::get_current_course();
+	$is_target_theme = 'divi' === strtolower( wp_get_theme()->get_template() );
+
+	if ( empty( $course_id ) || ! $is_target_theme ) {
+		return false;
+	}
+
+	if ( Sensei_Course_Theme_Option::has_learning_mode_enabled( $course_id ) ) {
+		Sensei()->assets->enqueue( 'divi-learning-mode', 'css/3rd-party/themes/divi/learning-mode.css' );
+	}
+}
+
+/**
+ * Enqueue Divi theme-specific Learning Mode styles in the admin for the Site Editor and Lesson Editor.
+ */
+function sensei_admin_load_learning_mode_style_for_divi_theme() {
+	$is_target_theme = 'divi' === strtolower( wp_get_theme()->get_template() );
+
+	if ( ! is_admin() || ! function_exists( 'get_current_screen' ) || ! $is_target_theme ) {
+		return;
+	}
+
+	$screen           = get_current_screen();
+	$is_lesson_editor = 'lesson' === $screen->post_type && 'post' === $screen->base;
+	$is_site_editor   = 'site-editor' === $screen->id;
+
+	if ( $is_lesson_editor || $is_site_editor ) {
+		Sensei()->assets->enqueue(
+			'divi-learning-mode',
+			'css/3rd-party/themes/div/learning-mode.css'
+		);
+
+		Sensei()->assets->enqueue(
+			'divi-learning-mode-editor',
+			'css/3rd-party/themes/divi/learning-mode.editor.css'
+		);
+	}
+
+}
+
+add_action( 'wp_enqueue_scripts', 'sensei_load_learning_mode_style_for_course_theme' );
+add_action( 'admin_enqueue_scripts', 'sensei_admin_load_learning_mode_style_for_course_theme' );
+
 add_action( 'template_redirect', 'sensei_fix_divi_learning_mode_video_template_excerpt' );
+add_action( 'wp_enqueue_scripts', 'sensei_load_learning_mode_style_for_divi_theme' );
+add_action( 'admin_enqueue_scripts', 'sensei_admin_load_learning_mode_style_for_divi_theme' );

webpack.config.js

@@ -125,6 +125,8 @@ const files = [
 	'course-theme/learning-mode-templates/index.js',
 	'course-theme/learning-mode-templates/styles.scss',
 	'css/3rd-party/themes/course/learning-mode.scss',
+	'css/3rd-party/themes/divi/learning-mode.scss',
+	'css/3rd-party/themes/divi/learning-mode.editor.scss',
 ];
 
 function getName( filename ) {