diff --git a/assets/css/3rd-party/themes/divi/learning-mode.editor.scss b/assets/css/3rd-party/themes/divi/learning-mode.editor.scss new file mode 100644 index 0000000000..fcb8597326 --- /dev/null +++ b/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; + } +} diff --git a/assets/css/3rd-party/themes/divi/learning-mode.scss b/assets/css/3rd-party/themes/divi/learning-mode.scss new file mode 100644 index 0000000000..ab51d4435e --- /dev/null +++ b/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; + } +} diff --git a/assets/css/sensei-course-theme/mobile.scss b/assets/css/sensei-course-theme/mobile.scss index 1910326695..a6d88d0122 100644 --- a/assets/css/sensei-course-theme/mobile.scss +++ b/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; diff --git a/includes/3rd-party/themes/divi.php b/includes/3rd-party/themes/divi.php index 80dafb6ff2..6e9ed76e16 100644 --- a/includes/3rd-party/themes/divi.php +++ b/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' ); diff --git a/webpack.config.js b/webpack.config.js index eee576a489..74147f5507 100644 --- a/webpack.config.js +++ b/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 ) {