Text orientation: Rotate vertical text when the text is aligned (Upsi…

…de down text) (#53175) * Try adding upside down writing mode * Update packages/block-library/src/post-navigation-link/index.php * Update packages/block-library/src/post-navigation-link/index.php * Revert the typography hook and update CSS * Add rotation for LTR
WordPress · Sep 1, 2023 · 1a29c02 · 1a29c02
1 parent 8e0fdca
commit 1a29c02
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
@@ -17,3 +17,8 @@
 		}
 	}
 }
+
+.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
+.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
+	rotate: 180deg;
+}
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
@@ -49,3 +49,8 @@ p.has-background {
 :where(p.has-text-color:not(.has-link-color)) a {
 	color: inherit;
 }
+
+p.has-text-align-right[style*="writing-mode:vertical-rl"],
+p.has-text-align-left[style*="writing-mode:vertical-lr"] {
+	rotate: 180deg;
+}
diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php
@@ -30,7 +30,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	}
 	$styles = '';
 	if ( isset( $attributes['style']['typography']['writingMode'] ) ) {
-		$styles = "writing-mode:{$attributes['style']['typography']['writingMode']};";
+		$styles = "writing-mode: {$attributes['style']['typography']['writingMode']};";
 	}
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

diff --git a/packages/block-library/src/post-navigation-link/style.scss b/packages/block-library/src/post-navigation-link/style.scss
@@ -20,4 +20,8 @@
 		}
 	}
 
+	&.has-text-align-right[style*="writing-mode: vertical-rl"],
+	&.has-text-align-left[style*="writing-mode: vertical-lr"] {
+		rotate: 180deg;
+	}
 }