FEATURE handlign a cover ratio variant

plugins/carhop-blocks/src/narrative-card/Cover.jsx

@@ -1,8 +1,15 @@
 import { MediaPlaceholder } from "@wordpress/block-editor";
 
-export default function Cover({ coverUrl, coverAlt, onSelect }) {
+export default function Cover({ coverUrl, coverAlt, onSelect, aspectRatio }) {
+	const ratioClass =
+		aspectRatio && aspectRatio !== "auto"
+			? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
+					/[/:]/g,
+					"-"
+			  )}`
+			: "";
 	return (
-		<div className="narrative-card__cover">
+		<div className={`narrative-card__cover${ratioClass}`}>
 			{coverUrl && <img src={coverUrl} alt={coverAlt} />}
 			{!coverUrl && (
 				<MediaPlaceholder

plugins/carhop-blocks/src/narrative-card/block.json

@@ -21,6 +21,22 @@
 			"type": "boolean",
 			"default": true
 		},
+		"aspectRatio": {
+			"type": "string",
+			"default": "auto",
+			"enum": [
+				"auto",
+				"1/1",
+				"4/3",
+				"3/4",
+				"3/2",
+				"2/3",
+				"16/9",
+				"21/9",
+				"9/16",
+				"9/21"
+			]
+		},
 		"coverPosition": {
 			"type": "string",
 			"default": "right",

plugins/carhop-blocks/src/narrative-card/edit.js

@@ -15,6 +15,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Button,
 	CheckboxControl,
+	SelectControl,
 } from "@wordpress/components";
 import "./editor.scss";
 import { lock, trash } from "@wordpress/icons";
@@ -28,6 +29,7 @@ export default function Edit({ attributes, setAttributes }) {
 		coverPosition,
 		hasCover,
 		blackWhiteCoverFilter,
+		aspectRatio,
 	} = attributes;
 	const colors = useSetting("color.palette.theme");
 
@@ -101,6 +103,28 @@ export default function Edit({ attributes, setAttributes }) {
 								<ToggleGroupControlOption label="Droite" value="right" />
 							</ToggleGroupControl>
 
+							<SelectControl
+								label={__("Proportion", "carhop-blocks")}
+								value={aspectRatio || "auto"}
+								options={[
+									{ label: __("Auto", "carhop-blocks"), value: "auto" },
+									{ label: "1:1", value: "1/1" },
+									{ label: "4:3", value: "4/3" },
+									{ label: "3:4", value: "3/4" },
+									{ label: "3:2", value: "3/2" },
+									{ label: "2:3", value: "2/3" },
+									{ label: "16:9", value: "16/9" },
+									{ label: "21:9", value: "21/9" },
+									{ label: "9:16", value: "9/16" },
+									{ label: "9:21", value: "9/21" },
+								]}
+								onChange={(value) => setAttributes({ aspectRatio: value })}
+								help={__(
+									"Sélectionnez la proportion d'affichage de la carte.",
+									"carhop-blocks"
+								)}
+							/>
+
 							<ToggleGroupControl
 								className="deligraph-blocks__variant"
 								isBlock
@@ -150,13 +174,20 @@ export default function Edit({ attributes, setAttributes }) {
 					<CoverImage
 						coverUrl={coverUrl}
 						coverAlt={coverAlt}
+						aspectRatio={aspectRatio}
 						onSelect={setCoverAttributes}
 					/>
 				)}
 
 				<div className="narrative-card__content">
 					<InnerBlocks
-						allowedBlocks={["core/paragraph", "core/heading", "core/image"]}
+						allowedBlocks={[
+							"core/paragraph",
+							"core/heading",
+							"core/image",
+							"carhop-blocks/cta",
+							"carhop-blocks/cta-group",
+						]}
 						template={[
 							["core/heading", { content: "Lorem ipsum" }],
 							[
@@ -174,6 +205,7 @@ export default function Edit({ attributes, setAttributes }) {
 					<CoverImage
 						coverUrl={coverUrl}
 						coverAlt={coverAlt}
+						aspectRatio={aspectRatio}
 						onSelect={setCoverAttributes}
 					/>
 				)}

plugins/carhop-blocks/src/narrative-card/save.js

@@ -2,8 +2,14 @@ import { useBlockProps } from "@wordpress/block-editor";
 import { InnerBlocks } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
-	const { hasCover, coverUrl, coverAlt, coverPosition, blackWhiteCoverFilter } =
+	const {
-		attributes;
+		hasCover,
+		coverUrl,
+		coverAlt,
+		coverPosition,
+		blackWhiteCoverFilter,
+		aspectRatio,
+	} = attributes;
 
 	return (
 		<div
@@ -36,7 +42,16 @@ export default function save({ attributes }) {
 			</svg>
 
 			{hasCover && coverPosition === "left" && (
-				<div className="narrative-card__cover">
+				<div
+					className={`narrative-card__cover${
+						aspectRatio && aspectRatio !== "auto"
+							? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
+									/[/:]/g,
+									"-"
+							  )}`
+							: ""
+					}`}
+				>
 					{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
 				</div>
 			)}
@@ -44,7 +59,16 @@ export default function save({ attributes }) {
 				<InnerBlocks.Content />
 			</div>
 			{hasCover && coverPosition === "right" && (
-				<div className="narrative-card__cover">
+				<div
+					className={`narrative-card__cover${
+						aspectRatio && aspectRatio !== "auto"
+							? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
+									/[/:]/g,
+									"-"
+							  )}`
+							: ""
+					}`}
+				>
 					{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
 				</div>
 			)}