From c456d7c999f6abac20f0130553fd3d4c3097f2b5 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Wed, 26 Nov 2025 11:55:05 +0100
Subject: [PATCH] FEATURE Add block width option to content box with full and
 contained variants

---
 .../carhop-blocks/src/content-box/block.json  |  8 +++++++
 plugins/carhop-blocks/src/content-box/edit.js | 21 ++++++++++++++++++-
 plugins/carhop-blocks/src/content-box/save.js |  4 +++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/plugins/carhop-blocks/src/content-box/block.json b/plugins/carhop-blocks/src/content-box/block.json
index 6654b0f..738d502 100644
--- a/plugins/carhop-blocks/src/content-box/block.json
+++ b/plugins/carhop-blocks/src/content-box/block.json
@@ -37,6 +37,14 @@
 		"blockVariant": {
 			"type": "string",
 			"default": "framed"
+		},
+		"blockWidth": {
+			"type": "string",
+			"default": "full",
+			"enum": [
+				"full",
+				"contained"
+			]
 		}
 	}
 }
\ No newline at end of file
diff --git a/plugins/carhop-blocks/src/content-box/edit.js b/plugins/carhop-blocks/src/content-box/edit.js
index f6062ca..d429505 100644
--- a/plugins/carhop-blocks/src/content-box/edit.js
+++ b/plugins/carhop-blocks/src/content-box/edit.js
@@ -37,6 +37,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		textColor,
 		hasLightBackground,
 		blockVariant,
+		blockWidth,
 	} = attributes;
 
 	// Détecter le type de post actuel
@@ -77,6 +78,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 	}
 	function onBlockVariantChange(value) {
 		setAttributes({ blockVariant: value });
+
+		if (value === "framed" || value === "nude") {
+			setAttributes({ backgroundColor: "#fff" });
+			setAttributes({ hasLightBackground: true });
+		}
 	}
 	return (
 		<>
@@ -90,12 +96,24 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 					>
+						<ToggleGroupControlOption value="nude" label="Nu" />
 						<ToggleGroupControlOption value="framed" label="Encadré" />
 						<ToggleGroupControlOption
 							value="backgrounded"
 							label="Fond coloré"
 						/>
 					</ToggleGroupControl>
+					<ToggleGroupControl
+						label="Largeur du bloc"
+						value={blockWidth}
+						onChange={(value) => setAttributes({ blockWidth: value })}
+						isBlock
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					>
+						<ToggleGroupControlOption value="full" label="Pleine largeur" />
+						<ToggleGroupControlOption value="contained" label="Contenue" />
+					</ToggleGroupControl>
 
 					{blockVariant === "backgrounded" && (
 						<Card>
@@ -138,7 +156,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						hasLightBackground
 							? "content-box--bg-light"
 							: "content-box--bg-dark"
-					}`,
+					}
+					${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
 					style: {
 						"--content-box-text-color": textColor ?? "inherit",
 						"--content-box-background-color":
diff --git a/plugins/carhop-blocks/src/content-box/save.js b/plugins/carhop-blocks/src/content-box/save.js
index 15b053f..1b01e75 100644
--- a/plugins/carhop-blocks/src/content-box/save.js
+++ b/plugins/carhop-blocks/src/content-box/save.js
@@ -8,13 +8,15 @@ export default function save({ attributes }) {
 		hasLightBackground,
 		hasBackgroundColor,
 		blockVariant,
+		blockWidth,
 	} = attributes;
 	return (
 		<section
 			{...useBlockProps.save({
 				className: `content-box content-box--variant-${blockVariant} ${
 					hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
-				}`,
+				}
+				${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
 				style: {
 					"--content-box-text-color": textColor ?? "inherit",
 					"--content-box-background-color":