From 68f21c7a9689e30c6e53d0a35e4293f2aa6f3e72 Mon Sep 17 00:00:00 2001
From: blakeganderson <85515364+blakeganderson@users.noreply.github.com>
Date: Tue, 12 Dec 2023 15:10:03 -0500
Subject: [PATCH] THEMES-1224 Logical Properties on Ad-Block (#1848)

* added logical properties to add block

* updated border-radius to use logical properties
---
 .storybook/themes/news.scss           | 12 +++++++++---
 blocks/ads-block/index.story.jsx      | 12 ++++++++++++
 blocks/ads-block/themes/commerce.json | 12 +++++++++---
 blocks/ads-block/themes/news.json     | 12 +++++++++---
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index 647569e555..1482ef1f0a 100644
--- a/.storybook/themes/news.scss
+++ b/.storybook/themes/news.scss
@@ -272,12 +272,18 @@
 				),
 				"ads-block-admin": (
 					"background-color": "$global.neutral-7",
-					"padding": "$global.spacing-4",
-					"border-radius": var(--border-radius),
+					"padding-block-start": "$global.spacing-4",
+					"padding-inline-end": "$global.spacing-4",
+					"padding-block-end": "$global.spacing-4",
+					"padding-inline-start": "$global.spacing-4",
+					"border-start-start-radius": var(--border-radius),
+					"border-start-end-radius": var(--border-radius),
+					"border-end-start-radius": var(--border-radius),
+					"border-end-end-radius": var(--border-radius),
 					"components": (
 						"stack": (
 							"gap": "$global.spacing-4",
-							"padding-bottom": "$global.spacing-5"
+							"padding-block-end": "$global.spacing-5"
 						),
 						"paragraph": (
 							"color": "$global.white"
diff --git a/blocks/ads-block/index.story.jsx b/blocks/ads-block/index.story.jsx
index 263ce80505..a7de05b9e6 100644
--- a/blocks/ads-block/index.story.jsx
+++ b/blocks/ads-block/index.story.jsx
@@ -36,3 +36,15 @@ export const adViewWithTopLabel = () => <ArcAdDisplay {...DEFAULT_PROPS} />;
 export const adViewHidingTopLabel = () => (
 	<ArcAdDisplay {...DEFAULT_PROPS} displayAdLabel={false} />
 );
+
+export const adminViewRightToLeft = () => (
+	<div dir="rtl">
+		<ArcAdDisplay {...DEFAULT_PROPS} isAdmin />
+	</div>
+);
+
+export const adViewWithTopLabelRightToLeft = () => (
+	<div dir="rtl">
+		<ArcAdDisplay {...DEFAULT_PROPS} />
+	</div>
+);
diff --git a/blocks/ads-block/themes/commerce.json b/blocks/ads-block/themes/commerce.json
index 57e263829e..a020e4b8c4 100644
--- a/blocks/ads-block/themes/commerce.json
+++ b/blocks/ads-block/themes/commerce.json
@@ -19,12 +19,18 @@
 		"styles": {
 			"default": {
 				"background-color": "$global.neutral-7",
-				"padding": "$global.spacing-4",
-				"border-radius": "var(--border-radius)",
+				"padding-block-start": "$global.spacing-4",
+				"padding-inline-end": "$global.spacing-4",
+				"padding-block-end": "$global.spacing-4",
+				"padding-inline-start": "$global.spacing-4",
+				"border-start-start-radius": "var(--border-radius)",
+				"border-start-end-radius": "var(--border-radius)",
+				"border-end-start-radius": "var(--border-radius)",
+				"border-end-end-radius": "var(--border-radius)",
 				"components": {
 					"stack": {
 						"gap": "$global.spacing-4",
-						"padding-bottom": "$global.spacing-5"
+						"padding-block-end": "$global.spacing-5"
 					},
 					"paragraph": {
 						"color": "$global.white"
diff --git a/blocks/ads-block/themes/news.json b/blocks/ads-block/themes/news.json
index 57e263829e..a020e4b8c4 100644
--- a/blocks/ads-block/themes/news.json
+++ b/blocks/ads-block/themes/news.json
@@ -19,12 +19,18 @@
 		"styles": {
 			"default": {
 				"background-color": "$global.neutral-7",
-				"padding": "$global.spacing-4",
-				"border-radius": "var(--border-radius)",
+				"padding-block-start": "$global.spacing-4",
+				"padding-inline-end": "$global.spacing-4",
+				"padding-block-end": "$global.spacing-4",
+				"padding-inline-start": "$global.spacing-4",
+				"border-start-start-radius": "var(--border-radius)",
+				"border-start-end-radius": "var(--border-radius)",
+				"border-end-start-radius": "var(--border-radius)",
+				"border-end-end-radius": "var(--border-radius)",
 				"components": {
 					"stack": {
 						"gap": "$global.spacing-4",
-						"padding-bottom": "$global.spacing-5"
+						"padding-block-end": "$global.spacing-5"
 					},
 					"paragraph": {
 						"color": "$global.white"