From 845b7b56f657ba338716538b90c030bdef450344 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 15 Jul 2025 10:42:18 +0200
Subject: [PATCH] REFACTOR FIX Handling fallback colors with text ang bg colors

---
 .../blocks/content-box/src/edit.js            | 22 +++++++++++++------
 .../blocks/content-box/src/save.js            | 14 ++++++------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/plugins/carhop-blocks/blocks/content-box/src/edit.js b/plugins/carhop-blocks/blocks/content-box/src/edit.js
index 937398c..aa840b7 100644
--- a/plugins/carhop-blocks/blocks/content-box/src/edit.js
+++ b/plugins/carhop-blocks/blocks/content-box/src/edit.js
@@ -21,12 +21,17 @@ import {
 
 export default function Edit({ attributes, setAttributes, ...props }) {
 	const colors = useSetting("color.palette.theme");
-	const { hasBackgroundColor, backgroundColor, textColor } = attributes;
-
-	const isLightBackgroundColor = isColorLight(backgroundColor);
-	console.log(isLightBackgroundColor);
+	const { hasBackgroundColor, backgroundColor, textColor, hasLightBackground } =
+		attributes;
 
 	function onBackgroundColorChange(value) {
+		if (value === undefined) {
+			setAttributes({ hasBackgroundColor: false });
+			setAttributes({ backgroundColor: "transparent" });
+		}
+		const isLightBackgroundColor = isColorLight(backgroundColor);
+		setAttributes({ hasLightBackground: isLightBackgroundColor });
+
 		setAttributes({ backgroundColor: value });
 	}
 	function onHasBackgroundColorChange(value) {
@@ -78,13 +83,15 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 			<section
 				{...useBlockProps({
 					className: `content-box ${
-						isLightBackgroundColor
+						hasLightBackground
 							? "content-box--bg-light"
 							: "content-box--bg-dark"
 					}`,
 					style: {
-						"--content-box-background-color": backgroundColor,
-						"--content-box-text-color": textColor,
+						"--content-box-text-color": textColor ?? "inherit",
+						"--content-box-background-color": hasBackgroundColor
+							? backgroundColor
+							: "transparent",
 					},
 				})}
 			>
@@ -96,6 +103,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						allowedBlocks={[
 							"core/heading",
 							"core/paragraph",
+							"core/group",
 							"core/list",
 							"core/button",
 							"core/buttons",
diff --git a/plugins/carhop-blocks/blocks/content-box/src/save.js b/plugins/carhop-blocks/blocks/content-box/src/save.js
index 0681660..281319d 100644
--- a/plugins/carhop-blocks/blocks/content-box/src/save.js
+++ b/plugins/carhop-blocks/blocks/content-box/src/save.js
@@ -2,19 +2,19 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 import { isColorLight } from "../../_utilities/utilities";
 
 export default function save({ attributes }) {
-	const { hasBackgroundColor, backgroundColor, textColor } = attributes;
-	const isLightBackgroundColor = isColorLight(backgroundColor);
+	const { backgroundColor, textColor, hasLightBackground, hasBackgroundColor } =
+		attributes;
 	return (
 		<section
 			{...useBlockProps.save({
 				className: `content-box ${
-					isLightBackgroundColor
-						? "content-box--bg-light"
-						: "content-box--bg-dark"
+					hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
 				}`,
 				style: {
-					"--content-box-background-color": backgroundColor,
-					"--content-box-text-color": textColor,
+					"--content-box-text-color": textColor ?? "inherit",
+					"--content-box-background-color": hasBackgroundColor
+						? backgroundColor
+						: "transparent",
 				},
 			})}
 		>