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.
WordPress · Jul 19, 2024 · 1d7bcbe · 1d7bcbe
1 parent fea1e5b
commit 1d7bcbe
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 7 deletions.
diff --git 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
@@ -87,14 +87,14 @@ function render_full_card( $learning_pathway ) {
 				</div>
 				<!-- /wp:group -->
 
-				<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%%"},"background":{"backgroundImage":{"url":"%4$s","id":184,"source":"file"},"backgroundPosition":"0%% 50%%"}},"layout":{"type":"constrained"}} -->
+				<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%%"},"background":{"backgroundImage":{"url":"%4$s","id":184,"source":"file"},"backgroundPosition":"%5$s"}},"layout":{"type":"constrained"}} -->
 				<div class="wp-block-group" aria-hidden="true"></div>
 				<!-- /wp:group -->
 
 			</div>
 			<!-- /wp:group -->
 
-			<!-- wp:query {"queryId":15,"query":{"perPage":5,"pages":0,"offset":0,"postType":"course","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{"learning-pathway":[%5$s]},"parents":[]}} -->
+			<!-- wp:query {"queryId":15,"query":{"perPage":5,"pages":0,"offset":0,"postType":"course","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{"learning-pathway":[%6$s]},"parents":[]}} -->
 			<div class="wp-block-query">
 
 				<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","verticalAlignment":"space-between"}} -->
@@ -113,7 +113,7 @@ function render_full_card( $learning_pathway ) {
 					<!-- /wp:group -->
 					
 					<!-- wp:paragraph {"align":"right","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"30px","right":"30px"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-1"}}}},"textColor":"charcoal-1","fontSize":"small"} -->
-					<p class="has-text-align-right has-charcoal-1-color has-text-color has-link-color has-small-font-size" style="padding-top:var(--wp--preset--spacing--20);padding-right:30px;padding-bottom:var(--wp--preset--spacing--20);padding-left:30px"><a href="%6$s">%7$s</a></p>
+					<p class="has-text-align-right has-charcoal-1-color has-text-color has-link-color has-small-font-size" style="padding-top:var(--wp--preset--spacing--20);padding-right:30px;padding-bottom:var(--wp--preset--spacing--20);padding-left:30px"><a href="%7$s">%8$s</a></p>
 					<!-- /wp:paragraph -->
 				
 				</div>
@@ -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 ) {
 			<!-- wp:group {"style":{"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%%"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"stretch","justifyContent":"space-between"}} -->
 			<div class="wp-block-group" style="min-height:100%%">
 			
-				<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","bottom":"40px","left":"30px","right":"40px"},"blockGap":"10px"},"layout":{"selfStretch":"fixed","flexSize":"53%%"},"border":{"right":{"color":"var:preset|color|light-grey-1","width":"1px"},"top":{},"bottom":{},"left":{}}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center"}} -->
-				<div class="wp-block-group" style="border-right-color:var(--wp--preset--color--light-grey-1);border-right-width:1px;padding-top:40px;padding-right:30px;padding-bottom:40px;padding-left:40px">
+				<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","bottom":"40px","left":"30px","right":"40px"},"blockGap":"10px"},"layout":{"selfStretch":"fixed","flexSize":"53%%"},"border":{"right":{"color":"var:preset|color|light-grey-1","width":"1px","style":"solid"},"top":{},"bottom":{},"left":{"width":"0px","style":"none"}}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center"}} -->
+				<div class="wp-block-group" style="border-right-color:var(--wp--preset--color--light-grey-1);border-right-style:solid;border-right-width:1px;border-left-style:none;border-left-width:0px;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:30px">
 				
 					<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-1"}}}},"textColor":"charcoal-1","fontSize":"18px,"lineHeight":"1.3""} -->
 					<h3 class="wp-block-heading has-charcoal-1-color has-text-color has-link-color" style="margin-top:0;font-size:18px;line-height:1.3">%2$s</h3>

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
@@ -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
@@ -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
@@ -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
@@ -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);