From b0973a13d58d8f0d9aacd8b280278ce252f162e9 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 19 May 2026 15:36:18 +0200
Subject: [PATCH] FEATURE replacing the block width by a native align support

---
 .../src/chapter-section/block.json            |  14 +-
 .../carhop-blocks/src/chapter-section/edit.js | 162 +++++++++---------
 .../carhop-blocks/src/chapter-section/save.js |  69 ++++----
 3 files changed, 116 insertions(+), 129 deletions(-)

diff --git a/plugins/carhop-blocks/src/chapter-section/block.json b/plugins/carhop-blocks/src/chapter-section/block.json
index d83633b..345efbb 100644
--- a/plugins/carhop-blocks/src/chapter-section/block.json
+++ b/plugins/carhop-blocks/src/chapter-section/block.json
@@ -14,7 +14,11 @@
 			"color": true,
 			"style": true,
 			"width": true
-		}
+		},
+		"align": [
+			"wide",
+			"full"
+		]
 	},
 	"textdomain": "carhop-blocks",
 	"editorScript": "file:./index.js",
@@ -27,14 +31,6 @@
 			"type": "string",
 			"default": "full"
 		},
-		"blockWidth": {
-			"type": "string",
-			"default": "full",
-			"enum": [
-				"full",
-				"contained"
-			]
-		},
 		"coverType": {
 			"type": "string",
 			"default": "image",
diff --git a/plugins/carhop-blocks/src/chapter-section/edit.js b/plugins/carhop-blocks/src/chapter-section/edit.js
index 2f073e8..8a60ea4 100644
--- a/plugins/carhop-blocks/src/chapter-section/edit.js
+++ b/plugins/carhop-blocks/src/chapter-section/edit.js
@@ -27,6 +27,7 @@ import ShapeB from "./shapeB.jsx";
 export default function Edit({ attributes, setAttributes, ...props }) {
 	const colors = useSetting("color.palette.theme");
 	const {
+		align,
 		hasLightBackground,
 		disposition,
 		coverType,
@@ -35,7 +36,6 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		coverId,
 		coverSize,
 		backgroundColor,
-		blockWidth,
 		textColor,
 		shapeType,
 		blockVariant,
@@ -98,10 +98,10 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						className="deligraph-blocks__variant"
 						isBlock
 						label="Largeur du bloc"
-						onChange={(value) => setAttributes({ blockWidth: value })}
-						value={blockWidth}
+						onChange={(value) => setAttributes({ align: value })}
+						value={align || "wide"}
 					>
-						<ToggleGroupControlOption label="Contenue" value="contained" />
+						<ToggleGroupControlOption label="Contenue" value="wide" />
 						<ToggleGroupControlOption label="Pleine largeur" value="full" />
 					</ToggleGroupControl>
 					{/* Modèle de bloc */}
@@ -261,12 +261,6 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 			<section
 				{...useBlockProps({
 					className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
-						${
-							blockWidth === "full"
-								? "chapter-section--width-full"
-								: "chapter-section--width-contained"
-						}
-			
 						${
 							hasLightBackground
 								? "chapter-section--bg-light"
@@ -282,83 +276,85 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 					},
 				})}
 			>
-				{blockVariant === "backgrounded" &&
-					backgroundColor &&
-					shapeType === "variationA" && (
-						<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
-					)}
-				{blockVariant === "backgrounded" &&
-					backgroundColor &&
-					shapeType === "variationB" && (
-						<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
-					)}
-				{blockVariant === "framed" &&
-					backgroundColor &&
-					shapeType === "variationA" && (
-						<ShapeA backgroundColor={"none"} borderColor={borderColor} />
-					)}
-				{blockVariant === "framed" &&
-					backgroundColor &&
-					shapeType === "variationB" && (
-						<ShapeB backgroundColor={"none"} borderColor={borderColor} />
-					)}
-				<div className="chapter-section__content">
-					<div className="chapter-section__innerblocks">
-						<InnerBlocks
-							template={[
-								[
-									"carhop-blocks/heading",
-									{
-										innerBlocks: [
-											[
-												"core/heading",
-												{
-													content: "Un titre précis ",
-												},
+				<div className="chapter-section__inner">
+					{blockVariant === "backgrounded" &&
+						backgroundColor &&
+						shapeType === "variationA" && (
+							<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
+						)}
+					{blockVariant === "backgrounded" &&
+						backgroundColor &&
+						shapeType === "variationB" && (
+							<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
+						)}
+					{blockVariant === "framed" &&
+						backgroundColor &&
+						shapeType === "variationA" && (
+							<ShapeA backgroundColor={"none"} borderColor={borderColor} />
+						)}
+					{blockVariant === "framed" &&
+						backgroundColor &&
+						shapeType === "variationB" && (
+							<ShapeB backgroundColor={"none"} borderColor={borderColor} />
+						)}
+					<div className="chapter-section__content">
+						<div className="chapter-section__innerblocks">
+							<InnerBlocks
+								template={[
+									[
+										"carhop-blocks/heading",
+										{
+											innerBlocks: [
+												[
+													"core/heading",
+													{
+														content: "Un titre précis ",
+													},
+												],
 											],
-										],
-									},
-								],
-								[
+										},
+									],
+									[
+										"core/paragraph",
+										{
+											className: "chapter-section__title",
+											placeholder: "Chapter Title",
+											content:
+												"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. ",
+										},
+									],
+								]}
+								allowedBlocks={[
+									"core/heading",
 									"core/paragraph",
-									{
-										className: "chapter-section__title",
-										placeholder: "Chapter Title",
-										content:
-											"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. ",
-									},
-								],
-							]}
-							allowedBlocks={[
-								"core/heading",
-								"core/paragraph",
-								"core/list",
-								"core/file",
-								"core/button",
-								"core/buttons",
-								"carhop-blocks/heading",
-								"carhop-blocks/cta",
-								"carhop-blocks/cta-group",
-							]}
-						/>
+									"core/list",
+									"core/file",
+									"core/button",
+									"core/buttons",
+									"carhop-blocks/heading",
+									"carhop-blocks/cta",
+									"carhop-blocks/cta-group",
+								]}
+							/>
+						</div>
 					</div>
+					{coverUrl && (
+						<img
+							className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
+							src={coverUrl}
+							alt={coverAlt}
+						/>
+					)}
+					{!coverUrl && (
+						<MediaPlaceholder
+							accept="image/*"
+							allowedTypes={["image"]}
+							onSelect={setCoverAttributes}
+							multiple={false}
+							handleUpload={true}
+						/>
+					)}
 				</div>
-				{coverUrl && (
-					<img
-						className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
-						src={coverUrl}
-						alt={coverAlt}
-					/>
-				)}
-				{!coverUrl && (
-					<MediaPlaceholder
-						accept="image/*"
-						allowedTypes={["image"]}
-						onSelect={setCoverAttributes}
-						multiple={false}
-						handleUpload={true}
-					/>
-				)}
 			</section>
 		</>
 	);
diff --git a/plugins/carhop-blocks/src/chapter-section/save.js b/plugins/carhop-blocks/src/chapter-section/save.js
index 4c45bb9..df3248a 100644
--- a/plugins/carhop-blocks/src/chapter-section/save.js
+++ b/plugins/carhop-blocks/src/chapter-section/save.js
@@ -10,7 +10,6 @@ export default function save({ attributes }) {
 		coverSize,
 		coverType,
 		backgroundColor,
-		blockWidth,
 		textColor,
 		shapeType,
 		blockVariant,
@@ -21,12 +20,6 @@ export default function save({ attributes }) {
 		<section
 			{...useBlockProps.save({
 				className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}  chapter-section--${blockVariant}
-			${
-				blockWidth === "full"
-					? "chapter-section--width-full"
-					: "chapter-section--width-contained"
-			}
-			
 					${
 						hasLightBackground
 							? "chapter-section--bg-light"
@@ -43,39 +36,41 @@ export default function save({ attributes }) {
 				},
 			})}
 		>
-			{blockVariant === "backgrounded" &&
-				backgroundColor &&
-				shapeType === "variationA" && (
-					<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
-				)}
-			{blockVariant === "backgrounded" &&
-				backgroundColor &&
-				shapeType === "variationB" && (
-					<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
-				)}
-			{blockVariant === "framed" &&
-				backgroundColor &&
-				shapeType === "variationA" && (
-					<ShapeA backgroundColor={"none"} borderColor={borderColor} />
-				)}
-			{blockVariant === "framed" &&
-				backgroundColor &&
-				shapeType === "variationB" && (
-					<ShapeB backgroundColor={"none"} borderColor={borderColor} />
-				)}
+			<div className="chapter-section__inner">
+				{blockVariant === "backgrounded" &&
+					backgroundColor &&
+					shapeType === "variationA" && (
+						<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
+					)}
+				{blockVariant === "backgrounded" &&
+					backgroundColor &&
+					shapeType === "variationB" && (
+						<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
+					)}
+				{blockVariant === "framed" &&
+					backgroundColor &&
+					shapeType === "variationA" && (
+						<ShapeA backgroundColor={"none"} borderColor={borderColor} />
+					)}
+				{blockVariant === "framed" &&
+					backgroundColor &&
+					shapeType === "variationB" && (
+						<ShapeB backgroundColor={"none"} borderColor={borderColor} />
+					)}
 
-			<div className="chapter-section__content">
-				<div className="chapter-section__innerblocks">
-					<InnerBlocks.Content />
+				<div className="chapter-section__content">
+					<div className="chapter-section__innerblocks">
+						<InnerBlocks.Content />
+					</div>
 				</div>
+				{coverUrl && (
+					<img
+						className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
+						src={coverUrl}
+						alt={coverAlt}
+					/>
+				)}
 			</div>
-			{coverUrl && (
-				<img
-					className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
-					src={coverUrl}
-					alt={coverAlt}
-				/>
-			)}
 		</section>
 	);
 }