From 1a29c029e3e95556f0d0bd3c48e2a4e47b641f5d Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Fri, 1 Sep 2023 11:53:42 +0200
Subject: [PATCH] Text orientation: Rotate vertical text when the text is
 aligned (Upside 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
---
 packages/block-library/src/paragraph/editor.scss           | 5 +++++
 packages/block-library/src/paragraph/style.scss            | 5 +++++
 packages/block-library/src/post-navigation-link/index.php  | 2 +-
 packages/block-library/src/post-navigation-link/style.scss | 4 ++++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
index 61dfe13ed9bbaa..369cc5cb1d63a9 100644
--- 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
index f3bb9f8c5aee86..34960bdb2fd589 100644
--- 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
index 8b5d82e745aeed..c9e3bfa8aeff1e 100644
--- 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
index 7af462c3808193..0f6a9fd3062b81 100644
--- 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;
+	}
 }