FEATURE Adapting content box to be handle by dynamic articles

plugins/carhop-blocks/blocks/content-box/build/block.json

@@ -32,6 +32,10 @@
     "textColor": {
       "type": "string",
       "default": "#ffffff"
+    },
+    "blockVariant": {
+      "type": "string",
+      "default": "framed"
     }
   }
 }

plugins/carhop-blocks/blocks/content-box/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '1e925ab101f7d6d0270a');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => 'fbe907136f52d95a3931');

plugins/carhop-blocks/blocks/content-box/build/index.js

@@ -41,7 +41,7 @@ function isColorLight(color) {
   \************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/content-box","version":"0.1.0","title":"Content Box","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#136f63"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"#ffffff"}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/content-box","version":"0.1.0","title":"Content Box","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","attributes":{"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#136f63"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"#ffffff"},"blockVariant":{"type":"string","default":"framed"}}}');
 
 /***/ }),
 
@@ -59,12 +59,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _utilities_utilities__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _utilities_utilities__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
+/* harmony import */ var _utilities__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utilities */ "./src/utilities.js");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);
+
+
+
 
 
 
@@ -81,8 +87,16 @@ function Edit({
     hasBackgroundColor,
     backgroundColor,
     textColor,
-    hasLightBackground
+    hasLightBackground,
+    blockVariant
   } = attributes;
+
+  // Détecter le type de post actuel
+  const postType = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
+    return select("core/editor").getCurrentPostType();
+  }, []);
+  const filteredBgColors = (0,_utilities__WEBPACK_IMPORTED_MODULE_6__.filterBgColors)(colors, postType);
+  const filteredTextColors = (0,_utilities__WEBPACK_IMPORTED_MODULE_6__.filterTextColors)(colors, postType, backgroundColor);
   function onBackgroundColorChange(value) {
     if (value === undefined) {
       setAttributes({
@@ -92,13 +106,22 @@ function Edit({
         backgroundColor: "transparent"
       });
     }
-    const isLightBackgroundColor = (0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_3__.isColorLight)(backgroundColor);
+    const isLightBackgroundColor = (0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_5__.isColorLight)(value);
     setAttributes({
       hasLightBackground: isLightBackgroundColor
     });
     setAttributes({
       backgroundColor: value
     });
+    if (!isLightBackgroundColor) {
+      setAttributes({
+        textColor: "#fff"
+      });
+    } else {
+      setAttributes({
+        textColor: "inherit"
+      });
+    }
   }
   function onHasBackgroundColorChange(value) {
     setAttributes({
@@ -115,48 +138,72 @@ function Edit({
       textColor: value
     });
   }
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
+  function onBlockVariantChange(value) {
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
+    setAttributes({
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
+      blockVariant: value
-        className: "deligraph-blocks-components-image__panel-body",
+    });
-        title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Arrière plan", "deligraph-blocks"),
+  }
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.CheckboxControl, {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {
-          label: "Arri\xE8re plan color\xE9",
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
-          checked: hasBackgroundColor,
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
-          onChange: onHasBackgroundColorChange
+        title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Aspect", "carhop-blocks"),
-        }), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ColorPalette, {
+          label: "Mod\xE8le de bloc",
-            colors: colors,
+          value: blockVariant,
-            value: backgroundColor,
+          onChange: onBlockVariantChange,
-            onChange: onBackgroundColorChange
+          isBlock: true,
-          })
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true,
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+            value: "framed",
+            label: "Encadr\xE9"
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+            value: "backgrounded",
+            label: "Fond color\xE9"
+          })]
+        }), blockVariant === "backgrounded" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Card, {
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.CardHeader, {
+            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("h1", {
+              children: "Couleur de fond"
+            })
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.CardBody, {
+            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {
+              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
+                colors: filteredBgColors,
+                value: backgroundColor,
+                onChange: onBackgroundColorChange
+              })
+            })
+          })]
+        }), blockVariant === "backgrounded" && postType !== "articles" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Card, {
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.CardHeader, {
+            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("h1", {
+              children: "Couleur du texte "
+            })
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.CardBody, {
+            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
+              colors: filteredTextColors,
+              value: textColor,
+              onChange: onTextColorChange
+            })
+          })]
         })]
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
+      })
-        className: "deligraph-blocks-components-image__panel-body",
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("section", {
-        title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Couleur du texte", "deligraph-blocks"),
-        children: hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ColorPalette, {
-            colors: colors,
-            value: textColor,
-            onChange: onTextColorChange
-          })
-        })
-      })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("section", {
       ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
-        className: `content-box ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}`,
+        className: `content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}`,
         style: {
           "--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
-          "--content-box-background-color": hasBackgroundColor ? backgroundColor : "transparent"
+          "--content-box-background-color": blockVariant === "backgrounded" ? backgroundColor : "transparent"
         }
       }),
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", {
         className: "content-box__innerblocks",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
           template: [["core/paragraph", {
             placeholder: "Ajouter ici le texte"
           }]],
-          allowedBlocks: ["core/heading", "core/paragraph", "core/group", "core/list", "core/button", "core/buttons", "carhop-blocks/heading", "carhop-blocks/decorative-shapes", "acf/statistics-datas", "carhop-blocks/scroll-story-block", "carhop-blocks/cta-group", "ninja-forms/form"]
+          allowedBlocks: ["core/heading", "core/paragraph", "core/group", "core/list", "core/button", "core/image", "core/buttons", "carhop-blocks/heading", "carhop-blocks/decorative-shapes", "acf/statistics-datas", "carhop-blocks/scroll-story-block", "carhop-blocks/cta-group", "ninja-forms/form"]
         })
       })
     })]
@@ -245,14 +292,15 @@ function save({
     backgroundColor,
     textColor,
     hasLightBackground,
-    hasBackgroundColor
+    hasBackgroundColor,
+    blockVariant
   } = attributes;
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("section", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
-      className: `content-box ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}`,
+      className: `content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}`,
       style: {
         "--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
-        "--content-box-background-color": hasBackgroundColor ? backgroundColor : "transparent"
+        "--content-box-background-color": blockVariant === "backgrounded" ? backgroundColor : "transparent"
       }
     }),
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
@@ -274,6 +322,45 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "./src/utilities.js":
+/*!**************************!*\
+  !*** ./src/utilities.js ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   filterBgColors: () => (/* binding */ filterBgColors),
+/* harmony export */   filterTextColors: () => (/* binding */ filterTextColors)
+/* harmony export */ });
+/* harmony import */ var _utilities_utilities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
+
+const filterBgColors = (colors, postType) => {
+  if (!postType) return colors || [];
+  if (postType === "articles") {
+    return colors?.filter(color => {
+      // Garder seulement certaines couleurs pour les articles
+      const allowedColors = ["carhop-green-light", "carhop-blue-light", "carhop-orange-light", "carhop-red-light", "carhop-purple-light"];
+      return allowedColors.includes(color.slug);
+    }) || [];
+  }
+  return colors || [];
+};
+const filterTextColors = (colors, postType, backgroundColor) => {
+  if (!postType) return colors || [];
+  if (postType === "page" && !(0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_0__.isColorLight)(backgroundColor)) {
+    // Retourner seulement du blanc pour les pages avec arrière-plan sombre
+    return [{
+      name: "White",
+      slug: "white",
+      color: "#ffffff"
+    }];
+  }
+  return colors || [];
+};
+
 /***/ }),
 
 /***/ "@wordpress/block-editor":
@@ -306,6 +393,16 @@ module.exports = window["wp"]["components"];
 
 /***/ }),
 
+/***/ "@wordpress/data":
+/*!******************************!*\
+  !*** external ["wp","data"] ***!
+  \******************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["data"];
+
+/***/ }),
+
 /***/ "@wordpress/i18n":
 /*!******************************!*\
   !*** external ["wp","i18n"] ***!

plugins/carhop-blocks/blocks/content-box/src/block.json

@@ -32,6 +32,10 @@
 		"textColor": {
 			"type": "string",
 			"default": "#ffffff"
+		},
+		"blockVariant": {
+			"type": "string",
+			"default": "framed"
 		}
 	}
 }

plugins/carhop-blocks/blocks/content-box/src/edit.js

@@ -7,9 +7,16 @@ import {
 	MediaReplaceFlow,
 	MediaPlaceholder,
 } from "@wordpress/block-editor";
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	Heading,
+	Text,
+} from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
 import "./editor.scss";
 import { isColorLight } from "../../_utilities/utilities";
-
 import {
 	PanelBody,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -19,20 +26,45 @@ import {
 	ColorPalette,
 } from "@wordpress/components";
 
+import { filterBgColors, filterTextColors } from "./utilities";
+
 export default function Edit({ attributes, setAttributes, ...props }) {
 	const colors = useSetting("color.palette.theme");
-	const { hasBackgroundColor, backgroundColor, textColor, hasLightBackground } =
+
-		attributes;
+	const {
+		hasBackgroundColor,
+		backgroundColor,
+		textColor,
+		hasLightBackground,
+		blockVariant,
+	} = attributes;
+
+	// Détecter le type de post actuel
+	const postType = useSelect((select) => {
+		return select("core/editor").getCurrentPostType();
+	}, []);
+
+	const filteredBgColors = filterBgColors(colors, postType);
+	const filteredTextColors = filterTextColors(
+		colors,
+		postType,
+		backgroundColor,
+	);
 
 	function onBackgroundColorChange(value) {
 		if (value === undefined) {
 			setAttributes({ hasBackgroundColor: false });
 			setAttributes({ backgroundColor: "transparent" });
 		}
-		const isLightBackgroundColor = isColorLight(backgroundColor);
+		const isLightBackgroundColor = isColorLight(value);
 		setAttributes({ hasLightBackground: isLightBackgroundColor });
-
 		setAttributes({ backgroundColor: value });
+
+		if (!isLightBackgroundColor) {
+			setAttributes({ textColor: "#fff" });
+		} else {
+			setAttributes({ textColor: "inherit" });
+		}
 	}
 	function onHasBackgroundColorChange(value) {
 		setAttributes({ hasBackgroundColor: value });
@@ -43,55 +75,72 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 	function onTextColorChange(value) {
 		setAttributes({ textColor: value });
 	}
+	function onBlockVariantChange(value) {
+		setAttributes({ blockVariant: value });
+	}
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody
+				<PanelBody title={__("Aspect", "carhop-blocks")}>
-					className="deligraph-blocks-components-image__panel-body"
+					<ToggleGroupControl
-					title={__("Arrière plan", "deligraph-blocks")}
+						label="Modèle de bloc"
-				>
+						value={blockVariant}
-					<CheckboxControl
+						onChange={onBlockVariantChange}
-						label="Arrière plan coloré"
+						isBlock
-						checked={hasBackgroundColor}
+						__nextHasNoMarginBottom
-						onChange={onHasBackgroundColorChange}
+						__next40pxDefaultSize
-					/>
+					>
-					{hasBackgroundColor && (
+						<ToggleGroupControlOption value="framed" label="Encadré" />
-						<>
+						<ToggleGroupControlOption
-							<ColorPalette
+							value="backgrounded"
-								colors={colors}
+							label="Fond coloré"
-								value={backgroundColor}
+						/>
-								onChange={onBackgroundColorChange}
+					</ToggleGroupControl>
-							/>
+
-						</>
+					{blockVariant === "backgrounded" && (
+						<Card>
+							<CardHeader>
+								<h1>Couleur de fond</h1>
+							</CardHeader>
+							<CardBody>
+								<>
+									<ColorPalette
+										colors={filteredBgColors}
+										value={backgroundColor}
+										onChange={onBackgroundColorChange}
+									/>
+								</>
+							</CardBody>
+						</Card>
 					)}
-				</PanelBody>
+
-				<PanelBody
+					{blockVariant === "backgrounded" && postType !== "articles" && (
-					className="deligraph-blocks-components-image__panel-body"
+						<Card>
-					title={__("Couleur du texte", "deligraph-blocks")}
+							<CardHeader>
-				>
+								<h1>Couleur du texte </h1>
-					{hasBackgroundColor && (
+							</CardHeader>
-						<>
+							<CardBody>
-							<ColorPalette
+								<ColorPalette
-								colors={colors}
+									colors={filteredTextColors}
-								value={textColor}
+									value={textColor}
-								onChange={onTextColorChange}
+									onChange={onTextColorChange}
-							/>
+								/>
-						</>
+							</CardBody>
+						</Card>
 					)}
 				</PanelBody>
 			</InspectorControls>
 			<section
 				{...useBlockProps({
-					className: `content-box ${
+					className: `content-box content-box--variant-${blockVariant} ${
 						hasLightBackground
 							? "content-box--bg-light"
 							: "content-box--bg-dark"
 					}`,
 					style: {
 						"--content-box-text-color": textColor ?? "inherit",
-						"--content-box-background-color": hasBackgroundColor
+						"--content-box-background-color":
-							? backgroundColor
+							blockVariant === "backgrounded" ? backgroundColor : "transparent",
-							: "transparent",
 					},
 				})}
 			>
@@ -106,6 +155,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 							"core/group",
 							"core/list",
 							"core/button",
+							"core/image",
 							"core/buttons",
 							"carhop-blocks/heading",
 							"carhop-blocks/decorative-shapes",

plugins/carhop-blocks/blocks/content-box/src/save.js

@@ -2,19 +2,23 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 import { isColorLight } from "../../_utilities/utilities";
 
 export default function save({ attributes }) {
-	const { backgroundColor, textColor, hasLightBackground, hasBackgroundColor } =
+	const {
-		attributes;
+		backgroundColor,
+		textColor,
+		hasLightBackground,
+		hasBackgroundColor,
+		blockVariant,
+	} = attributes;
 	return (
 		<section
 			{...useBlockProps.save({
-				className: `content-box ${
+				className: `content-box content-box--variant-${blockVariant} ${
 					hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
 				}`,
 				style: {
 					"--content-box-text-color": textColor ?? "inherit",
-					"--content-box-background-color": hasBackgroundColor
+					"--content-box-background-color":
-						? backgroundColor
+						blockVariant === "backgrounded" ? backgroundColor : "transparent",
-						: "transparent",
 				},
 			})}
 		>

plugins/carhop-blocks/blocks/content-box/src/utilities.js

@@ -0,0 +1,39 @@
+import { isColorLight } from "../../_utilities/utilities";
+
+export const filterBgColors = (colors, postType) => {
+	if (!postType) return colors || [];
+
+	if (postType === "articles") {
+		return (
+			colors?.filter((color) => {
+				// Garder seulement certaines couleurs pour les articles
+				const allowedColors = [
+					"carhop-green-light",
+					"carhop-blue-light",
+					"carhop-orange-light",
+					"carhop-red-light",
+					"carhop-purple-light",
+				];
+				return allowedColors.includes(color.slug);
+			}) || []
+		);
+	}
+
+	return colors || [];
+};
+
+export const filterTextColors = (colors, postType, backgroundColor) => {
+	if (!postType) return colors || [];
+	if (postType === "page" && !isColorLight(backgroundColor)) {
+		// Retourner seulement du blanc pour les pages avec arrière-plan sombre
+		return [
+			{
+				name: "White",
+				slug: "white",
+				color: "#ffffff",
+			},
+		];
+	}
+
+	return colors || [];
+};