THEMES-1219: Logical Properties | Lead art and Video player blocks (#…

…1829)

* THEMES-1219: updated lead art and video blocks with logical properties.

* THEMES-1219: updated storybook scss files.

.storybook/themes/news.scss

@@ -1651,7 +1651,10 @@
 						"media-item-fig-caption": (
 							"background-color": var(--global-white),
 							"line-height": var(--body-line-height-5),
-							"margin": var(--global-spacing-2) 0
+							"margin-block-end": var(--global-spacing-2),
+							"margin-block-start": var(--global-spacing-2),
+							"margin-inline-end": 0,
+							"margin-inline-start": 0
 						)
 					)
 				),
@@ -1663,15 +1666,18 @@
 						),
 						"icon": (
 							"fill": currentColor,
-							"height": var(--global-spacing-6),
-							"width": var(--global-spacing-6)
+							"block-size": var(--global-spacing-6),
+							"inline-size": var(--global-spacing-6)
 						)
 					)
 				),
 				"lead-art-carousel-fullscreen": (
 					"components": (
 						"media-item-fig-caption": (
-							"padding": 0 var(--global-spacing-2)
+							"padding-block-end": 0,
+							"padding-block-start": 0,
+							"padding-inline-end": var(--global-spacing-2),
+							"padding-inline-start": var(--global-spacing-2)
 						)
 					)
 				),
@@ -1681,13 +1687,13 @@
 					"background-color": var(--global-black),
 					"display": flex,
 					"justify-content": center,
-					"max-height": 75vh,
+					"max-block-size": 75vh,
 					"overflow": auto,
 					"components": (
 						"image": (
-							"height": auto,
-							"max-height": 100%,
-							"max-width": 100%,
+							"block-size": auto,
+							"max-block-size": 100%,
+							"max-inline-size": 100%,
 							"object-fit": contain
 						)
 					)
@@ -1700,8 +1706,8 @@
 						),
 						"icon": (
 							"fill": currentColor,
-							"height": var(--global-spacing-8),
-							"width": var(--global-spacing-8)
+							"block-size": var(--global-spacing-8),
+							"inline-size": var(--global-spacing-8)
 						)
 					)
 				),
@@ -2914,25 +2920,31 @@
 							"line-height": var(--heading-level-3-line-height)
 						),
 						"media-item": (
-							"width": 100%,
-							"margin": auto
+							"inline-size": 100%,
+							"margin-block-end": auto,
+							"margin-block-start": auto,
+							"margin-inline-end": auto,
+							"margin-inline-start": auto
 						)
 					)
 				),
 				"video-player-feature": (
 					"gap": var(--global-spacing-6),
 					"components": (
 						"media-item-fig-caption": (
-							"margin-bottom": 0,
-							"margin-left": var(--global-spacing-4),
-							"margin-right": var(--global-spacing-4),
-							"margin-top": 0
+							"margin-block-end": 0,
+							"margin-block-start": 0,
+							"margin-inline-end": var(--global-spacing-4),
+							"margin-inline-start": var(--global-spacing-4)
 						)
 					)
 				),
 				"video-player-feature-meta": (
-					"margin": auto,
-					"width": var(--content-scale-width),
+					"margin-block-end": auto,
+					"margin-block-start": auto,
+					"margin-inline-end": auto,
+					"margin-inline-start": auto,
+					"inline-size": var(--content-scale-width),
 					"components": (
 						"stack": (
 							"gap": var(--global-spacing-4)
@@ -3594,13 +3606,13 @@
 				"lead-art-carousel-fullscreen": (
 					"components": (
 						"media-item-fig-caption": (
-							"padding": 0 var(--global-spacing-5)
+							"padding-block-end": 0,
+							"padding-block-start": 0,
+							"padding-inline-end": var(--global-spacing-5),
+							"padding-inline-start": var(--global-spacing-5)
 						)
 					)
 				),
-				"lead-art-carousel-image-wrapper": (
-					"max-height": 75vh
-				),
 				"login-form": (
 					"components": (
 						"heading": (

blocks/lead-art-block/index.story.jsx

@@ -255,3 +255,17 @@ export const video = () => {
 	};
 	return <LeadArt content={globalContent} customFields={{ playthrough: false }} />;
 };
+
+export const rightToLeft = () => {
+	const globalContent = {
+		arcSite: "story-book",
+		promo_items: {
+			lead_art: leadArtGallery,
+		},
+	};
+	return (
+		<div dir="rtl">
+			<LeadArt content={globalContent} customFields={{}} />
+		</div>
+	);
+};

blocks/lead-art-block/themes/commerce.json

@@ -2,38 +2,47 @@
 	"lead-art": {
 		"styles": {
 			"default": {
-				"margin-bottom": "var(--global-spacing-5)",
+				"margin-block-end": "var(--global-spacing-5)",
 				"components": {
 					"button": {
-						"border-style": "none",
+						"border": "none",
 						"box-shadow": "none",
-						"height": "var(--global-spacing-4)"
+						"block-size": "var(--global-spacing-4)"
 					},
 					"carousel-controls": {
-						"padding": "0 0 var(--global-spacing-2) 0"
+						"padding-block-end": "var(--global-spacing-2)",
+						"padding-block-start": 0,
+						"padding-inline-end": 0,
+						"padding-inline-start": 0
 					},
 					"carousel-actions": {
 						"display": "flex"
 					},
 					"carousel-track": {
 						"gap": "initial",
-						"max-width": "initial"
+						"max-inline-size": "initial"
 					},
 					"carousel-button": {
 						"border": "none",
 						"box-shadow": "none",
-						"height": "var(--global-spacing-4)"
+						"block-size": "var(--global-spacing-4)"
 					},
 					"carousel-button-enter-full-screen": {
-						"padding": 0,
+						"padding-block-end": 0,
+						"padding-block-start": 0,
+						"padding-inline-end": 0,
+						"padding-inline-start": 0,
 						"font-size": "var(--body-font-size-tiny)",
 						"line-height": "var(--body-line-height-tiny)"
 					},
 					"carousel-additional-controls": {
 						"display": "none"
 					},
 					"carousel-button-toggle-auto-play": {
-						"padding": "0 var(--global-spacing-4)",
+						"padding-block-end": 0,
+						"padding-block-start": 0,
+						"padding-inline-end": "var(--global-spacing-4)",
+						"padding-inline-start": "var(--global-spacing-4)",
 						"font-size": "var(--body-font-size-tiny)",
 						"line-height": "var(--body-line-height-tiny)"
 					},
@@ -48,18 +57,24 @@
 						"background-color": "transparent"
 					},
 					"carousel-button-additional-previous": {
-						"padding": 0
+						"padding-block-end": 0,
+						"padding-block-start": 0,
+						"padding-inline-end": 0,
+						"padding-inline-start": 0
 					},
 					"carousel-button-additional-next": {
-						"padding": 0
+						"padding-block-end": 0,
+						"padding-block-start": 0,
+						"padding-inline-end": 0,
+						"padding-inline-start": 0
 					},
 					"icon": {
 						"fill": "var(--text-color)",
-						"height": "var(--global-spacing-4)",
-						"width": "var(--global-spacing-4)"
+						"block-size": "var(--global-spacing-4)",
+						"inline-size": "var(--global-spacing-4)"
 					},
 					"image": {
-						"width": "100%"
+						"inline-size": "100%"
 					}
 				}
 			},
@@ -68,7 +83,10 @@
 					"carousel-additional-controls": {
 						"display": "flex",
 						"gap": "var(--global-spacing-2)",
-						"padding": "0 0 0 var(--global-spacing-2)"
+						"padding-block-end": 0,
+						"padding-block-start": 0,
+						"padding-inline-end": 0,
+						"padding-inline-start": "var(--global-spacing-2)"
 					}
 				}
 			}
@@ -80,34 +98,37 @@
 				"align-items": "center",
 				"display": "flex",
 				"justify-content": "center",
-				"max-height": "75vh",
+				"max-block-size": "75vh",
 				"background-color": "var(--global-black)",
 				"components": {
 					"image": {
-						"width": "auto",
-						"max-height": "75vh"
+						"inline-size": "auto",
+						"max-block-size": "75vh"
 					},
 					"button": {
 						"position": "fixed",
-						"top": "var(--global-spacing-6)",
-						"right": 0
+						"inset-block-start": "var(--global-spacing-6)",
+						"inset-inline-end": 0
 					},
 					"button-medium": {
-						"padding": "var(--global-spacing-4) 0 var(--global-spacing-4) 0",
-						"top": "var(--global-spacing-4)",
-						"right": "var(--global-spacing-4)"
+						"padding-block-end": "var(--global-spacing-4)",
+						"padding-block-start": "var(--global-spacing-4)",
+						"padding-inline-end": 0,
+						"padding-inline-start": 0,
+						"inset-block-start": "var(--global-spacing-4)",
+						"inset-inline-end": "var(--global-spacing-4)"
 					},
 					"icon": {
 						"fill": "var(--global-white)",
-						"height": "var(--global-spacing-6)",
-						"width": "var(--global-spacing-6)"
+						"block-size": "var(--global-spacing-6)",
+						"inline-size": "var(--global-spacing-6)"
 					}
 				}
 			},
 			"desktop": {
 				"components": {
 					"button-medium": {
-						"left": "var(--global-spacing-4)"
+						"inset-inline-start": "var(--global-spacing-4)"
 					}
 				}
 			}
@@ -117,8 +138,8 @@
 		"styles": {
 			"default": {
 				"fill": "var(--global-white)",
-				"height": "var(--global-spacing-8)",
-				"width": "var(--global-spacing-8)"
+				"block-size": "var(--global-spacing-8)",
+				"inline-size": "var(--global-spacing-8)"
 			},
 			"desktop": {}
 		}
@@ -127,20 +148,20 @@
 		"styles": {
 			"default": {
 				"position": "fixed",
-				"top": "var(--global-spacing-4)",
-				"right": "var(--global-spacing-4)",
+				"inset-block-start": "var(--global-spacing-4)",
+				"inset-inline-end": "var(--global-spacing-4)",
 				"background-color": "transparent",
 				"components": {
 					"icon": {
 						"fill": "var(--global-white)",
-						"height": "var(--global-spacing-6)",
-						"width": "var(--global-spacing-6)"
+						"block-size": "var(--global-spacing-6)",
+						"inline-size": "var(--global-spacing-6)"
 					}
 				}
 			},
 			"desktop": {
-				"right": "calc(100% - var(--global-spacing-4))",
-				"left": "var(--global-spacing-4)"
+				"inset-inline-end": "calc(100% - var(--global-spacing-4))",
+				"inset-inline-start": "var(--global-spacing-4)"
 			}
 		}
 	}