From 8983a6951967566958bca7c6b7fe357565a692c6 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Thu, 11 May 2023 15:51:56 +0100 Subject: [PATCH 1/9] Enable to load specific css file for divi --- .../3rd-party/themes/divi/learning-mode.scss | 18 +++++++ includes/3rd-party/themes/divi.php | 48 +++++++++++++++++++ webpack.config.js | 1 + 3 files changed, 67 insertions(+) create mode 100644 assets/css/3rd-party/themes/divi/learning-mode.scss 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..eae5fd0c39 --- /dev/null +++ b/assets/css/3rd-party/themes/divi/learning-mode.scss @@ -0,0 +1,18 @@ +$desktop_min_width: 783px; + + +// Reset the title bottom padding +.wp-site-blocks :is(h1, h2, h3, h4, h5, h6) { + padding-bottom: 0; +} + +@media screen and (min-width: $desktop_min_width) { + :where(.is-layout-flex) { + gap: 8px; + } + + .sensei-course-theme__header__info { + gap:16px; + } + +} diff --git a/includes/3rd-party/themes/divi.php b/includes/3rd-party/themes/divi.php index 80dafb6ff2..095a64d3a1 100644 --- a/includes/3rd-party/themes/divi.php +++ b/includes/3rd-party/themes/divi.php @@ -89,4 +89,52 @@ 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 Course theme-specific Learning Mode styles. + */ +function sensei_load_learning_mode_style_for_divi_theme() { + $course_id = Sensei_Utils::get_current_course(); + $is_course_theme = 'divi' === wp_get_theme()->get_template(); + + if ( empty( $course_id ) || ! $is_course_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 Course 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_course_theme = 'divi' === wp_get_theme()->get_template(); + + + if ( ! is_admin() || ! function_exists( 'get_current_screen' ) || ! $is_course_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( + 'div-learning-mode', + 'css/3rd-party/themes/div/learning-mode.css', + [], + 'screen' + ); + } + +} + +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..06cb5bde47 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -125,6 +125,7 @@ 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', ]; function getName( filename ) { From 851c5a386ccb1ceb09ce5ab4892115e13eb9538f Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Fri, 12 May 2023 14:20:56 +0100 Subject: [PATCH 2/9] Review layout spacing --- .../3rd-party/themes/divi/learning-mode.scss | 60 ++++++++++++++++++- 1 file changed, 57 insertions(+), 3 deletions(-) diff --git a/assets/css/3rd-party/themes/divi/learning-mode.scss b/assets/css/3rd-party/themes/divi/learning-mode.scss index eae5fd0c39..ab51d4435e 100644 --- a/assets/css/3rd-party/themes/divi/learning-mode.scss +++ b/assets/css/3rd-party/themes/divi/learning-mode.scss @@ -1,18 +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) { +.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: 8px; + gap: 0.5rem; } .sensei-course-theme__header__info { - gap:16px; + 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; + } } From f5d4e0c0e1b3b2277e5d1687456317c03ccb1cf8 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Mon, 15 May 2023 14:55:26 +0100 Subject: [PATCH 3/9] Load learning mode style only for divi --- includes/3rd-party/themes/divi.php | 9 ++++++--- webpack.config.js | 1 + 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/includes/3rd-party/themes/divi.php b/includes/3rd-party/themes/divi.php index 095a64d3a1..b5ca5256ca 100644 --- a/includes/3rd-party/themes/divi.php +++ b/includes/3rd-party/themes/divi.php @@ -124,9 +124,12 @@ function sensei_admin_load_learning_mode_style_for_divi_theme() { if ( $is_lesson_editor || $is_site_editor ) { Sensei()->assets->enqueue( 'div-learning-mode', - 'css/3rd-party/themes/div/learning-mode.css', - [], - 'screen' + 'css/3rd-party/themes/div/learning-mode.css' + ); + + Sensei()->assets->enqueue( + 'div-learning-mode-editor', + 'css/3rd-party/themes/divi/learning-mode.editor.css', ); } diff --git a/webpack.config.js b/webpack.config.js index 06cb5bde47..74147f5507 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -126,6 +126,7 @@ const files = [ '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 ) { From a64e38da43b57522ac004bdbc0cbdd6edd37dda3 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Mon, 15 May 2023 14:56:29 +0100 Subject: [PATCH 4/9] Fix learning mode layout issues on divi --- .../themes/divi/learning-mode.editor.scss | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 assets/css/3rd-party/themes/divi/learning-mode.editor.scss 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..5a89192259 --- /dev/null +++ b/assets/css/3rd-party/themes/divi/learning-mode.editor.scss @@ -0,0 +1,21 @@ +.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; + } +} From 22cc0f67aa2b8fa4969a8167548ce1787971a74a Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Mon, 15 May 2023 14:59:36 +0100 Subject: [PATCH 5/9] Fix formatting issues --- .../themes/divi/learning-mode.editor.scss | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/assets/css/3rd-party/themes/divi/learning-mode.editor.scss b/assets/css/3rd-party/themes/divi/learning-mode.editor.scss index 5a89192259..fcb8597326 100644 --- a/assets/css/3rd-party/themes/divi/learning-mode.editor.scss +++ b/assets/css/3rd-party/themes/divi/learning-mode.editor.scss @@ -1,21 +1,23 @@ .sensei-course-theme__header { width: 100%; - max-width: unset; + max-width: unset; } .sensei-course-theme-header-content { - width: 100%; + 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 .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; - } + >.sensei-lesson-footer, + >.sensei-course-theme__post-pagination { + margin-left: unset !important; + margin-left: unset !important; + } } From 13e5462fb9e7469dc9fca711aa57db2b0d8a7480 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Wed, 17 May 2023 19:57:42 +0100 Subject: [PATCH 6/9] Fix lint issues --- includes/3rd-party/themes/divi.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/includes/3rd-party/themes/divi.php b/includes/3rd-party/themes/divi.php index b5ca5256ca..a80d2f227c 100644 --- a/includes/3rd-party/themes/divi.php +++ b/includes/3rd-party/themes/divi.php @@ -112,7 +112,6 @@ function sensei_load_learning_mode_style_for_divi_theme() { function sensei_admin_load_learning_mode_style_for_divi_theme() { $is_course_theme = 'divi' === wp_get_theme()->get_template(); - if ( ! is_admin() || ! function_exists( 'get_current_screen' ) || ! $is_course_theme ) { return; } @@ -129,7 +128,7 @@ function sensei_admin_load_learning_mode_style_for_divi_theme() { Sensei()->assets->enqueue( 'div-learning-mode-editor', - 'css/3rd-party/themes/divi/learning-mode.editor.css', + 'css/3rd-party/themes/divi/learning-mode.editor.css' ); } From bac70547bd090c04f457194a18833a85d5d4c66d Mon Sep 17 00:00:00 2001 From: Imran Hossain Date: Tue, 23 May 2023 15:46:17 +0600 Subject: [PATCH 7/9] Remove case sensitivity from matching divi theme name --- includes/3rd-party/themes/divi.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/3rd-party/themes/divi.php b/includes/3rd-party/themes/divi.php index a80d2f227c..2b0b0e3fde 100644 --- a/includes/3rd-party/themes/divi.php +++ b/includes/3rd-party/themes/divi.php @@ -95,7 +95,7 @@ function sensei_fix_divi_learning_mode_video_template_excerpt() { */ function sensei_load_learning_mode_style_for_divi_theme() { $course_id = Sensei_Utils::get_current_course(); - $is_course_theme = 'divi' === wp_get_theme()->get_template(); + $is_course_theme = 'divi' === strtolower( wp_get_theme()->get_template() ); if ( empty( $course_id ) || ! $is_course_theme ) { return false; @@ -110,7 +110,7 @@ function sensei_load_learning_mode_style_for_divi_theme() { * Enqueue Course 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_course_theme = 'divi' === wp_get_theme()->get_template(); + $is_course_theme = 'divi' === strtolower( wp_get_theme()->get_template() ); if ( ! is_admin() || ! function_exists( 'get_current_screen' ) || ! $is_course_theme ) { return; From 2703ebb8fbfc9261c5196a2fc433f2101db148a0 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Tue, 23 May 2023 14:22:02 +0100 Subject: [PATCH 8/9] Fix wrong theme name --- includes/3rd-party/themes/divi.php | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/includes/3rd-party/themes/divi.php b/includes/3rd-party/themes/divi.php index 2b0b0e3fde..6e9ed76e16 100644 --- a/includes/3rd-party/themes/divi.php +++ b/includes/3rd-party/themes/divi.php @@ -91,13 +91,13 @@ function sensei_fix_divi_learning_mode_video_template_excerpt() { } /** - * Enqueue Course theme-specific Learning Mode styles. + * Enqueue Divi theme-specific Learning Mode styles. */ function sensei_load_learning_mode_style_for_divi_theme() { $course_id = Sensei_Utils::get_current_course(); - $is_course_theme = 'divi' === strtolower( wp_get_theme()->get_template() ); + $is_target_theme = 'divi' === strtolower( wp_get_theme()->get_template() ); - if ( empty( $course_id ) || ! $is_course_theme ) { + if ( empty( $course_id ) || ! $is_target_theme ) { return false; } @@ -107,12 +107,12 @@ function sensei_load_learning_mode_style_for_divi_theme() { } /** - * Enqueue Course theme-specific Learning Mode styles in the admin for the Site Editor and Lesson Editor. + * 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_course_theme = 'divi' === strtolower( wp_get_theme()->get_template() ); + $is_target_theme = 'divi' === strtolower( wp_get_theme()->get_template() ); - if ( ! is_admin() || ! function_exists( 'get_current_screen' ) || ! $is_course_theme ) { + if ( ! is_admin() || ! function_exists( 'get_current_screen' ) || ! $is_target_theme ) { return; } @@ -122,12 +122,12 @@ function sensei_admin_load_learning_mode_style_for_divi_theme() { if ( $is_lesson_editor || $is_site_editor ) { Sensei()->assets->enqueue( - 'div-learning-mode', + 'divi-learning-mode', 'css/3rd-party/themes/div/learning-mode.css' ); Sensei()->assets->enqueue( - 'div-learning-mode-editor', + 'divi-learning-mode-editor', 'css/3rd-party/themes/divi/learning-mode.editor.css' ); } From 8ca3169300fb3e2f8c95b0a023da0461c274359a Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Tue, 23 May 2023 17:05:14 +0100 Subject: [PATCH 9/9] Remove content padding override when is admin --- assets/css/sensei-course-theme/mobile.scss | 7 ------- 1 file changed, 7 deletions(-) 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;