From d3ad12d6537168b5aa88cac02d2e35dffcbbd9dc Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Wed, 25 Mar 2026 16:02:08 +0100
Subject: [PATCH] FEATURE refactoriong component to handle background shapes

---
 .../carhop-blocks/src/content-box/block.json  |  14 ++
 plugins/carhop-blocks/src/content-box/edit.js | 148 +++++++++++++-----
 plugins/carhop-blocks/src/content-box/save.js |  40 ++++-
 .../carhop-blocks/src/content-box/shapeA.jsx  |  32 ++++
 .../carhop-blocks/src/content-box/shapeB.jsx  |  30 ++++
 .../carhop-blocks/src/content-box/shapeC.jsx  |  32 ++++
 6 files changed, 257 insertions(+), 39 deletions(-)
 create mode 100644 plugins/carhop-blocks/src/content-box/shapeA.jsx
 create mode 100644 plugins/carhop-blocks/src/content-box/shapeB.jsx
 create mode 100644 plugins/carhop-blocks/src/content-box/shapeC.jsx

diff --git a/plugins/carhop-blocks/src/content-box/block.json b/plugins/carhop-blocks/src/content-box/block.json
index a2d2b5c..c316772 100644
--- a/plugins/carhop-blocks/src/content-box/block.json
+++ b/plugins/carhop-blocks/src/content-box/block.json
@@ -38,10 +38,24 @@
 			"type": "string",
 			"default": "inherit"
 		},
+		"borderColor": {
+			"type": "string",
+			"default": null
+		},
 		"blockVariant": {
 			"type": "string",
 			"default": "framed"
 		},
+		"shapeType": {
+			"type": "string",
+			"default": "straight",
+			"enum": [
+				"straight",
+				"shapeA",
+				"shapeB",
+				"shapeC"
+			]
+		},
 		"blockWidth": {
 			"type": "string",
 			"default": "full",
diff --git a/plugins/carhop-blocks/src/content-box/edit.js b/plugins/carhop-blocks/src/content-box/edit.js
index fe658f1..ead398c 100644
--- a/plugins/carhop-blocks/src/content-box/edit.js
+++ b/plugins/carhop-blocks/src/content-box/edit.js
@@ -24,8 +24,12 @@ import {
 	Button,
 	CheckboxControl,
 	ColorPalette,
+	SelectControl,
 } from "@wordpress/components";
 
+import ShapeA from "./shapeA.jsx";
+import ShapeB from "./shapeB.jsx";
+import ShapeC from "./shapeC.jsx";
 import { filterBgColors, filterTextColors } from "./utilities";
 
 export default function Edit({ attributes, setAttributes, ...props }) {
@@ -38,6 +42,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		hasLightBackground,
 		blockVariant,
 		blockWidth,
+		shapeType,
+		borderColor,
 	} = attributes;
 
 	// Détecter le type de post actuel
@@ -84,6 +90,9 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 			setAttributes({ hasLightBackground: true });
 		}
 	}
+
+	console.log(shapeType);
+	console.log(blockVariant);
 	return (
 		<>
 			<InspectorControls>
@@ -119,48 +128,85 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						<ToggleGroupControlOption value="wide" label="Large" />
 						<ToggleGroupControlOption value="full" label="Pleine largeur" />
 					</ToggleGroupControl>
-
-					{blockVariant === "backgrounded" ||
-						(blockVariant === "framed-backgrounded" && (
-							<Card>
-								<CardHeader>
-									<h1>Couleur de fond</h1>
-								</CardHeader>
-								<CardBody>
-									<>
-										<ColorPalette
-											colors={filteredBgColors}
-											value={backgroundColor}
-											onChange={onBackgroundColorChange}
-										/>
-									</>
-								</CardBody>
-							</Card>
-						))}
-
-					{(blockVariant === "backgrounded" ||
-						blockVariant === "framed-backgrounded") &&
-						postType !== "articles" && (
-							<Card>
-								<CardHeader>
-									<h1>Couleur du texte </h1>
-								</CardHeader>
-								<CardBody>
-									<ColorPalette
-										colors={filteredTextColors}
-										value={textColor}
-										onChange={onTextColorChange}
-									/>
-								</CardBody>
-							</Card>
-						)}
 				</PanelBody>
+
+				{(blockVariant === "backgrounded" ||
+					blockVariant === "framed-backgrounded") && (
+					<PanelBody
+						className="deligraph-blocks-components-image__panel-body"
+						title={__("Arrière plan", "deligraph-blocks")}
+					>
+						<ToggleGroupControl
+							className="deligraph-blocks__variant"
+							isBlock
+							label="Type de forme"
+							onChange={(value) => setAttributes({ shapeType: value })}
+							value={shapeType}
+						>
+							<ToggleGroupControlOption label="Droite" value="straight" />
+							<ToggleGroupControlOption label="Forme A" value="shapeA" />
+							<ToggleGroupControlOption label="Forme B" value="shapeB" />
+							<ToggleGroupControlOption label="Forme C" value="shapeC" />
+						</ToggleGroupControl>
+
+						<SelectControl
+							__next40pxDefaultSize
+							label="Type de forme"
+							onChange={(value) => setAttributes({ shapeType: value })}
+							value={shapeType}
+							options={[
+								{
+									disabled: true,
+									label: "Type de forme",
+									value: "",
+								},
+								{
+									label: "Droite",
+									value: "straight",
+								},
+								{
+									label: "Forme A",
+									value: "shapeA",
+								},
+								{
+									label: "Forme B",
+									value: "shapeB",
+								},
+								{
+									label: "Forme C",
+									value: "shapeC",
+								},
+							]}
+						/>
+
+						<ColorPalette
+							colors={filteredBgColors}
+							value={backgroundColor}
+							onChange={onBackgroundColorChange}
+						/>
+					</PanelBody>
+				)}
+
+				{(blockVariant === "backgrounded" ||
+					blockVariant === "framed-backgrounded") &&
+					postType !== "articles" && (
+						<PanelBody
+							className="deligraph-blocks-components-image__panel-body"
+							title={__("Couleur du texte", "deligraph-blocks")}
+						>
+							<ColorPalette
+								colors={filteredTextColors}
+								value={textColor}
+								onChange={onTextColorChange}
+							/>
+						</PanelBody>
+					)}
 			</InspectorControls>
 			<section
 				{...useBlockProps({
 					className: `${
 						postType !== "articles" && "alignfull"
-					} content-box content-box--variant-${blockVariant} ${
+					} content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
 						hasLightBackground
 							? "content-box--bg-light"
 							: "content-box--bg-dark"
@@ -176,6 +222,36 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 					},
 				})}
 			>
+				{blockVariant === "backgrounded" &&
+					backgroundColor &&
+					shapeType === "shapeA" && (
+						<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
+					)}
+				{blockVariant === "backgrounded" &&
+					backgroundColor &&
+					shapeType === "shapeB" && (
+						<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
+					)}
+				{blockVariant === "backgrounded" &&
+					backgroundColor &&
+					shapeType === "shapeC" && (
+						<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
+					)}
+				{blockVariant === "framed" &&
+					backgroundColor &&
+					shapeType === "shapeA" && (
+						<ShapeA backgroundColor={"none"} borderColor={borderColor} />
+					)}
+				{blockVariant === "framed" &&
+					backgroundColor &&
+					shapeType === "shapeB" && (
+						<ShapeB backgroundColor={"none"} borderColor={borderColor} />
+					)}
+				{blockVariant === "framed" &&
+					backgroundColor &&
+					shapeType === "shapeC" && (
+						<ShapeC backgroundColor={"none"} borderColor={borderColor} />
+					)}
 				<div className="content-box__innerblocks">
 					<InnerBlocks
 						template={[
diff --git a/plugins/carhop-blocks/src/content-box/save.js b/plugins/carhop-blocks/src/content-box/save.js
index c667262..4af7721 100644
--- a/plugins/carhop-blocks/src/content-box/save.js
+++ b/plugins/carhop-blocks/src/content-box/save.js
@@ -1,6 +1,7 @@
 import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
-import { isColorLight } from "../../_utilities/utilities";
-
+import ShapeA from "./shapeA.jsx";
+import ShapeB from "./shapeB.jsx";
+import ShapeC from "./shapeC.jsx";
 export default function save({ attributes }) {
 	const {
 		backgroundColor,
@@ -9,11 +10,14 @@ export default function save({ attributes }) {
 		hasBackgroundColor,
 		blockVariant,
 		blockWidth,
+		shapeType,
+		borderColor,
 	} = attributes;
+
 	return (
 		<section
 			{...useBlockProps.save({
-				className: `content-box content-box--variant-${blockVariant} ${
+				className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
 					hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
 				}
 			${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
@@ -27,6 +31,36 @@ export default function save({ attributes }) {
 				},
 			})}
 		>
+			{blockVariant === "backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeA" && (
+					<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
+				)}
+			{blockVariant === "backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeB" && (
+					<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
+				)}
+			{blockVariant === "backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeC" && (
+					<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
+				)}
+			{blockVariant === "framed" &&
+				backgroundColor &&
+				shapeType === "shapeA" && (
+					<ShapeA backgroundColor={"none"} borderColor={borderColor} />
+				)}
+			{blockVariant === "framed" &&
+				backgroundColor &&
+				shapeType === "shapeB" && (
+					<ShapeB backgroundColor={"none"} borderColor={borderColor} />
+				)}
+			{blockVariant === "framed" &&
+				backgroundColor &&
+				shapeType === "shapeC" && (
+					<ShapeC backgroundColor={"none"} borderColor={borderColor} />
+				)}
 			<div className="content-box__innerblocks">
 				<InnerBlocks.Content />
 			</div>
diff --git a/plugins/carhop-blocks/src/content-box/shapeA.jsx b/plugins/carhop-blocks/src/content-box/shapeA.jsx
new file mode 100644
index 0000000..f92f323
--- /dev/null
+++ b/plugins/carhop-blocks/src/content-box/shapeA.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export default function ShapeA({
+	backgroundOrientation,
+	backgroundColor,
+	borderColor,
+}) {
+	return (
+		<svg
+			width="1440"
+			height="744"
+			viewBox="0 0 1440 744"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={`content-box__shape content-box__shape--${backgroundOrientation}`}
+			preserveAspectRatio="none"
+			vectorEffect="non-scaling-stroke"
+			overflow="visible"
+		>
+			<path
+				d="M0 0H1440V686.701L0 744V0Z"
+				fill={backgroundColor}
+				stroke={borderColor}
+				strokeWidth={borderColor ? "2px" : "0"}
+				style={{
+					strokeLinejoin: "round",
+					vectorEffect: "non-scaling-stroke",
+				}}
+			/>
+		</svg>
+	);
+}
diff --git a/plugins/carhop-blocks/src/content-box/shapeB.jsx b/plugins/carhop-blocks/src/content-box/shapeB.jsx
new file mode 100644
index 0000000..560d1d6
--- /dev/null
+++ b/plugins/carhop-blocks/src/content-box/shapeB.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function ShapeB({
+	backgroundOrientation,
+	backgroundColor,
+	borderColor,
+}) {
+	return (
+		<svg
+			className={`content-box__shape content-box__shape--${backgroundOrientation}`}
+			width="1302"
+			height="654"
+			viewBox="0 0 1302 654"
+			preserveAspectRatio="none"
+			vectorEffect="non-scaling-stroke"
+			overflow="visible"
+		>
+			<path
+				d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
+				fill={backgroundColor}
+				stroke={borderColor}
+				strokeWidth={borderColor ? "2px" : "0"}
+				style={{
+					strokeLinejoin: "round",
+					vectorEffect: "non-scaling-stroke",
+				}}
+			/>
+		</svg>
+	);
+}
diff --git a/plugins/carhop-blocks/src/content-box/shapeC.jsx b/plugins/carhop-blocks/src/content-box/shapeC.jsx
new file mode 100644
index 0000000..8725dc9
--- /dev/null
+++ b/plugins/carhop-blocks/src/content-box/shapeC.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export default function ShapeB({
+	backgroundOrientation,
+	backgroundColor,
+	borderColor,
+}) {
+	return (
+		<>
+			<svg
+				width="1440"
+				height="997"
+				viewBox="0 0 1440 997"
+				className={`content-box__shape content-box__shape--${backgroundOrientation}`}
+				preserveAspectRatio="none"
+				vectorEffect="non-scaling-stroke"
+				overflow="visible"
+			>
+				<path
+					d="M1440 29.8887L0 0V997L1440 979.242V29.8887Z"
+					fill={backgroundColor}
+					stroke={borderColor}
+					strokeWidth={borderColor ? "2px" : "0"}
+					style={{
+						strokeLinejoin: "round",
+						vectorEffect: "non-scaling-stroke",
+					}}
+				/>
+			</svg>
+		</>
+	);
+}