From 1d7bcbe57bc9a363c3f2cc1df9a7942da20676f2 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 19 Jul 2024 12:29:44 -0400 Subject: [PATCH] 2024 Theme: Add RTL style overrides, ensure RTL CSS is loaded on RTL sites (#2669) * Styles: Ensure the RTL CSS loads on RTL sites * Styles: Add spacing to online workshops buttons so they are swapped in RTL * Add RTL-specific overrides * Fix spacing on checkbox answers in quiz * Flip the focal point of the image on RTL views * Remove the border from module title entirely * Set a left border to fix RTL style The RTL CSS incorrectly applies a right border style, which creates a visible border. Adding a width to the block's left border (which is right, when flipped RTL), hides the incorrect border. --- .../themes/pub/wporg-learn-2024/functions.php | 13 +++++- .../src/learning-pathway-cards/index.php | 11 ++--- .../pub/wporg-learn-2024/src/style/_rtl.scss | 44 +++++++++++++++++++ .../wporg-learn-2024/src/style/_sensei.scss | 6 +++ .../src/style/_wporg-meeting-calendar.scss | 10 +++++ .../pub/wporg-learn-2024/src/style/style.scss | 1 + 6 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_rtl.scss diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index e0a7bdca0..f7c56fe7d 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -80,12 +80,21 @@ function enqueue_assets() { // The parent style is registered as `wporg-parent-2021-style`, and will be loaded unless // explicitly unregistered. We can load any child-theme overrides by declaring the parent // stylesheet as a dependency. + $style_path = get_stylesheet_directory() . '/build/style/style-index.css'; + $style_uri = get_stylesheet_directory_uri() . '/build/style/style-index.css'; wp_enqueue_style( 'wporg-learn-2024-style', - get_stylesheet_directory_uri() . '/build/style/style-index.css', + $style_uri, array( 'wporg-parent-2021-style', 'wporg-global-fonts' ), - filemtime( get_stylesheet_directory() . '/build/style/style-index.css' ) + filemtime( $style_path ) ); + wp_style_add_data( 'wporg-learn-2024-style', 'path', $style_path ); + + $rtl_file = str_replace( '.css', '-rtl.css', $style_path ); + if ( is_rtl() && file_exists( $rtl_file ) ) { + wp_style_add_data( 'wporg-learn-2024-style', 'rtl', 'replace' ); + wp_style_add_data( 'wporg-learn-2024-style', 'path', $rtl_file ); + } // Preload the heading font(s). if ( is_callable( 'global_fonts_preload' ) ) { diff --git a/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/index.php b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/index.php index 9944d9e84..af985d04f 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/index.php +++ b/wp-content/themes/pub/wporg-learn-2024/src/learning-pathway-cards/index.php @@ -87,14 +87,14 @@ function render_full_card( $learning_pathway ) { - + - +
@@ -113,7 +113,7 @@ function render_full_card( $learning_pathway ) { -

%7$s

+

%8$s

@@ -128,6 +128,7 @@ function render_full_card( $learning_pathway ) { esc_html( $learning_pathway->name ), esc_html( $learning_pathway->description ), esc_url( get_stylesheet_directory_uri() . '/assets/learning-pathway-' . $learning_pathway->slug . '.svg' ), + is_rtl() ? '100% 50%' : '0% 50%', esc_html( $learning_pathway->term_id ), esc_url( get_term_link( $learning_pathway ) ), $count > 1 @@ -154,8 +155,8 @@ function render_mini_card( $learning_pathway ) {
- -
+ +

%2$s

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_rtl.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_rtl.scss new file mode 100644 index 000000000..f77840bfb --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_rtl.scss @@ -0,0 +1,44 @@ +/** + * Styles for RTL sites. + * Note, these styles are set here using the LTR layout keywords, so that when + * `rtlcss` runs it flips the right/left to the correct values. + */ + +body.rtl { + + // Override the inline styles on Learning Pathway Card content. + .wporg-learn-learning-pathway-card-header-content { + padding-right: 0 !important; + padding-left: 30px !important; + } + + // Override the alignment on Sensei buttons. + .wp-block-sensei-lms-button-take-course.has-text-align-left { + text-align: unset; + } + + // Flip the chevrons on Sensei lesson listings, "back to lesson". + .wp-block-sensei-lms-course-outline-lesson__chevron, + .sensei-lms-quiz-back-to-lesson svg { + transform: rotate(180deg); + } + + // Override the space between quiz inputs and question labels. + &.quiz form #sensei-quiz-list li ul li input { + margin: 0 10px 0 0; + } + + &.quiz form #sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox + label { + margin-left: 0; + + &::before { + margin: 0 10px 0 0; + } + } + + // Fix the spacing of the locked lesson icon. + .sensei-course-theme-locked-lesson-notice__icon { + padding-right: 14px; + padding-left: 0; + } +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index a93b31317..bd32b9937 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -26,6 +26,12 @@ body.sensei { } } + // Remove the border on module title. + .wp-block-sensei-lms-course-theme-lesson-module { + padding-left: unset; + border: none; + } + .sensei-lms-course-navigation-module__header { .sensei-collapsible__toggle.sensei-lms-course-navigation-module__button { flex-direction: row-reverse; diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss index 6b1de53a9..e67ac3265 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss @@ -11,6 +11,11 @@ } } + .wporg-meeting-calendar__btn-group button:not(:last-child) { + margin-right: var(--wp--preset--spacing--10); + margin-left: unset; + } + // Calendar/List toggle .components-button-group { display: flex; @@ -80,6 +85,11 @@ border: unset; padding-left: unset; + .wporg-meeting-calendar__filter-label { + padding-left: unset; + padding-right: var(--wp--preset--spacing--10); + } + .wporg-meeting-calendar__filter-feed { display: none; } diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss index b9ebbc681..1f58987a4 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss @@ -12,6 +12,7 @@ @import "taxonomy"; @import "wp-components"; @import "wporg-meeting-calendar"; +@import "rtl"; body { --wp-components-color-accent: var(--wp--preset--color--blueberry-1);