STYLE Refining cta aspect

plugins/carhop-blocks/blocks/_utilities/utilities.js

@@ -0,0 +1,24 @@
+// Fonction pour déterminer si une couleur est claire ou sombre
+export function isColorLight(color) {
+	// Si pas de couleur, considérer comme claire
+	if (!color) return true;
+
+	// Convertir hex en RGB
+	let hex = color.replace("#", "");
+	if (hex.length === 3) {
+		hex = hex
+			.split("")
+			.map((char) => char + char)
+			.join("");
+	}
+
+	const r = parseInt(hex.substr(0, 2), 16);
+	const g = parseInt(hex.substr(2, 2), 16);
+	const b = parseInt(hex.substr(4, 2), 16);
+
+	// Calculer la luminance relative (formule standard)
+	const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+	// Si luminance > 0.5, la couleur est claire
+	return luminance > 0.5;
+}

plugins/carhop-blocks/blocks/chapter-section/build/block.json

@@ -65,6 +65,10 @@
       "type": "string",
       "default": "#ffffff"
     },
+    "textColor": {
+      "type": "string",
+      "default": "#136f63"
+    },
     "backgroundOrientation": {
       "type": "string",
       "default": "left",

plugins/carhop-blocks/blocks/chapter-section/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '62a57819a79c88fe5e2d');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => 'd0e3316a30114b6e5e46');

plugins/carhop-blocks/blocks/chapter-section/build/index.js

@@ -41,7 +41,7 @@ const trash = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx
   \************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/chapter-section","version":"0.1.0","title":" Section Chapitre","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"align":{"type":"string","default":"full"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"coverId":{"type":"number"},"coverSize":{"type":"string","default":"large","enum":["small","medium","grande","large"]},"disposition":{"type":"string","default":"left","enum":["left","right"]},"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#ffffff"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"usesContext":["postType","postId"]}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/chapter-section","version":"0.1.0","title":" Section Chapitre","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"carhop-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php","attributes":{"align":{"type":"string","default":"full"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]},"coverUrl":{"type":"string"},"coverAlt":{"type":"string"},"coverId":{"type":"number"},"coverSize":{"type":"string","default":"large","enum":["small","medium","grande","large"]},"disposition":{"type":"string","default":"left","enum":["left","right"]},"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#ffffff"},"textColor":{"type":"string","default":"#136f63"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"usesContext":["postType","postId"]}');
 
 /***/ }),
 
@@ -87,18 +87,14 @@ function Edit({
     hasBackgroundColor,
     backgroundColor,
     backgroundOrientation,
-    blockWidth
+    blockWidth,
+    textColor
   } = attributes;
   function onDispositionChange(disposition) {
     setAttributes({
       disposition
     });
   }
-  function onCoverSizeChange(coverSize) {
-    setAttributes({
-      coverSize
-    });
-  }
   function setCoverAttributes(cover) {
     setAttributes({
       coverId: cover.id,
@@ -195,7 +191,9 @@ function Edit({
           className: "deligraph-blocks__variant",
           isBlock: true,
           label: "Taille de l'image",
-          onChange: onCoverSizeChange,
+          onChange: coverSize => setAttributes({
+            coverSize
+          }),
           value: coverSize,
           children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
             label: "Big",
@@ -218,32 +216,32 @@ function Edit({
           label: "Arri\xE8re plan color\xE9",
           checked: hasBackgroundColor,
           onChange: onHasBackgroundColorChange
-        }), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
+        }), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
-          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
             colors: colors,
             value: backgroundColor,
             onChange: onBackgroundColorChange
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
+          })
-            className: "deligraph-blocks__variant",
-            isBlock: true,
-            label: "Disposition",
-            onChange: onBackgroundOrientationChange,
-            value: backgroundOrientation,
-            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
-              label: "Gauche",
-              value: "left"
-            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
-              label: "Droite",
-              value: "right"
-            })]
-          })]
         })]
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
+        className: "deligraph-blocks-components-image__panel-body",
+        title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Couleur du texte", "deligraph-blocks"),
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
+          colors: colors,
+          value: textColor,
+          onChange: value => setAttributes({
+            textColor: value
+          })
+        })
       })]
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", {
       ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
         className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} 
 					${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}
-					${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}`
+					${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}`,
+        style: {
+          "--chapter-section-text-color": textColor ? textColor : "#136f63"
+        }
       }),
       children: [hasBackgroundColor && backgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("svg", {
         className: `chapter-section__background chapter-section__background--${backgroundOrientation}`,
@@ -366,11 +364,15 @@ function save({
     backgroundColor,
     hasBackgroundColor,
     backgroundOrientation,
-    blockWidth
+    blockWidth,
+    textColor
   } = attributes;
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("section", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
-      className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${backgroundColor ? "chapter-section--has-background" : ""} 	${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}`
+      className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${backgroundColor ? "chapter-section--has-background" : ""} 	${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}`,
+      style: {
+        "--chapter-section-text-color": textColor
+      }
     }),
     children: [hasBackgroundColor && backgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("svg", {
       className: `chapter-section__background chapter-section__background--${backgroundOrientation}`,

plugins/carhop-blocks/blocks/chapter-section/src/block.json

@@ -65,6 +65,10 @@
 			"type": "string",
 			"default": "#ffffff"
 		},
+		"textColor": {
+			"type": "string",
+			"default": "#136f63"
+		},
 		"backgroundOrientation": {
 			"type": "string",
 			"default": "left",

plugins/carhop-blocks/blocks/chapter-section/src/edit.js

@@ -30,14 +30,12 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		backgroundColor,
 		backgroundOrientation,
 		blockWidth,
+		textColor,
 	} = attributes;
 
 	function onDispositionChange(disposition) {
 		setAttributes({ disposition });
 	}
-	function onCoverSizeChange(coverSize) {
-		setAttributes({ coverSize });
-	}
 
 	function setCoverAttributes(cover) {
 		setAttributes({
@@ -129,7 +127,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						className="deligraph-blocks__variant"
 						isBlock
 						label="Taille de l'image"
-						onChange={onCoverSizeChange}
+						onChange={(coverSize) => setAttributes({ coverSize })}
 						value={coverSize}
 					>
 						<ToggleGroupControlOption label="Big" value="large" />
@@ -155,19 +153,20 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 								value={backgroundColor}
 								onChange={onBackgroundColorChange}
 							/>
-							<ToggleGroupControl
-								className="deligraph-blocks__variant"
-								isBlock
-								label="Disposition"
-								onChange={onBackgroundOrientationChange}
-								value={backgroundOrientation}
-							>
-								<ToggleGroupControlOption label="Gauche" value="left" />
-								<ToggleGroupControlOption label="Droite" value="right" />
-							</ToggleGroupControl>
 						</>
 					)}
 				</PanelBody>
+
+				<PanelBody
+					className="deligraph-blocks-components-image__panel-body"
+					title={__("Couleur du texte", "deligraph-blocks")}
+				>
+					<ColorPalette
+						colors={colors}
+						value={textColor}
+						onChange={(value) => setAttributes({ textColor: value })}
+					/>
+				</PanelBody>
 			</InspectorControls>
 			<section
 				{...useBlockProps({
@@ -182,6 +181,9 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 							? "chapter-section--has-background"
 							: ""
 					}`,
+					style: {
+						"--chapter-section-text-color": textColor ? textColor : "#136f63",
+					},
 				})}
 			>
 				{hasBackgroundColor && backgroundColor && (

plugins/carhop-blocks/blocks/chapter-section/src/save.js

@@ -9,6 +9,7 @@ export default function save({ attributes }) {
 		hasBackgroundColor,
 		backgroundOrientation,
 		blockWidth,
+		textColor,
 	} = attributes;
 	return (
 		<section
@@ -20,6 +21,9 @@ export default function save({ attributes }) {
 						? "chapter-section--width-full"
 						: "chapter-section--width-contained"
 				}`,
+				style: {
+					"--chapter-section-text-color": textColor,
+				},
 			})}
 		>
 			{hasBackgroundColor && backgroundColor && (

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' => '15318d1c4f5eab934866');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '73384dc26665f6c790ed');

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

@@ -2,6 +2,39 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "../_utilities/utilities.js":
+/*!**********************************!*\
+  !*** ../_utilities/utilities.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   isColorLight: () => (/* binding */ isColorLight)
+/* harmony export */ });
+// Fonction pour déterminer si une couleur est claire ou sombre
+function isColorLight(color) {
+  // Si pas de couleur, considérer comme claire
+  if (!color) return true;
+
+  // Convertir hex en RGB
+  let hex = color.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex.split("").map(char => char + char).join("");
+  }
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+
+  // Calculer la luminance relative (formule standard)
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Si luminance > 0.5, la couleur est claire
+  return luminance > 0.5;
+}
+
+/***/ }),
+
 /***/ "./src/block.json":
 /*!************************!*\
   !*** ./src/block.json ***!
@@ -27,10 +60,12 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_3__ = __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_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
+
 
 
 
@@ -47,6 +82,8 @@ function Edit({
     backgroundColor,
     textColor
   } = attributes;
+  const isLightBackgroundColor = (0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_3__.isColorLight)(backgroundColor);
+  console.log(isLightBackgroundColor);
   function onBackgroundColorChange(value) {
     setAttributes({
       backgroundColor: value
@@ -67,48 +104,48 @@ function Edit({
       textColor: value
     });
   }
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
         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_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.CheckboxControl, {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.CheckboxControl, {
           label: "Arri\xE8re plan color\xE9",
           checked: hasBackgroundColor,
           onChange: onHasBackgroundColorChange
-        }), hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
+        }), 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_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ColorPalette, {
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ColorPalette, {
             colors: colors,
             value: backgroundColor,
             onChange: onBackgroundColorChange
           })
         })]
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
         className: "deligraph-blocks-components-image__panel-body",
         title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Couleur du texte", "deligraph-blocks"),
-        children: hasBackgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
+        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_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ColorPalette, {
+          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_4__.jsx)("section", {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("section", {
       ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
-        className: "content-box",
+        className: `content-box ${isLightBackgroundColor ? "content-box--bg-light" : "content-box--bg-dark"}`,
         style: {
           "--content-box-background-color": backgroundColor,
           "--content-box-text-color": textColor
         }
       }),
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
         className: "content-box__innerblocks",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks, {
           template: [["core/paragraph", {
             placeholder: "Ajouter ici le texte"
           }]],
-          allowedBlocks: ["core/heading", "core/paragraph", "core/list", "core/button", "core/buttons", "carhop-blocks/heading", "carhop-blocks/decorative-shapes", "acf/statistics-datas", "carhop-blocks/scroll-story-block"]
+          allowedBlocks: ["core/heading", "core/paragraph", "core/list", "core/button", "core/buttons", "carhop-blocks/heading", "carhop-blocks/decorative-shapes", "acf/statistics-datas", "carhop-blocks/scroll-story-block", "ninja-forms/form"]
         })
       })
     })]
@@ -184,8 +221,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/* harmony import */ var _utilities_utilities__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
+
 
 
 function save({
@@ -196,17 +235,18 @@ function save({
     backgroundColor,
     textColor
   } = attributes;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("section", {
+  const isLightBackgroundColor = (0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_1__.isColorLight)(backgroundColor);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("section", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
-      className: "content-box",
+      className: `content-box ${isLightBackgroundColor ? "content-box--bg-light" : "content-box--bg-dark"}`,
       style: {
         "--content-box-background-color": backgroundColor,
         "--content-box-text-color": textColor
       }
     }),
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
+    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
       className: "content-box__innerblocks",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
     })
   });
 }

plugins/carhop-blocks/blocks/content-box/build/view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"view.js","mappings":";;;;AAAAA,OAAO,CAACC,GAAG,CAAC,qDAAqD,CAAC,C","sources":["webpack://front-header/./src/view.js"],"sourcesContent":["console.log(\"Hello World! (from front-header-front-header block)\");\n"],"names":["console","log"],"sourceRoot":""}

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

@@ -8,6 +8,7 @@ import {
 	MediaPlaceholder,
 } from "@wordpress/block-editor";
 import "./editor.scss";
+import { isColorLight } from "../../_utilities/utilities";
 
 import {
 	PanelBody,
@@ -22,6 +23,9 @@ 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);
+
 	function onBackgroundColorChange(value) {
 		setAttributes({ backgroundColor: value });
 	}
@@ -73,7 +77,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 			</InspectorControls>
 			<section
 				{...useBlockProps({
-					className: "content-box",
+					className: `content-box ${
+						isLightBackgroundColor
+							? "content-box--bg-light"
+							: "content-box--bg-dark"
+					}`,
 					style: {
 						"--content-box-background-color": backgroundColor,
 						"--content-box-text-color": textColor,
@@ -95,6 +103,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 							"carhop-blocks/decorative-shapes",
 							"acf/statistics-datas",
 							"carhop-blocks/scroll-story-block",
+							"ninja-forms/form",
 						]}
 					/>
 				</div>

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

@@ -1,11 +1,17 @@
 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);
 	return (
 		<section
 			{...useBlockProps.save({
-				className: "content-box",
+				className: `content-box ${
+					isLightBackgroundColor
+						? "content-box--bg-light"
+						: "content-box--bg-dark"
+				}`,
 				style: {
 					"--content-box-background-color": backgroundColor,
 					"--content-box-text-color": textColor,

plugins/carhop-blocks/blocks/cta/build/cta/style-index-rtl.css

@@ -23,7 +23,9 @@
 }
 .wp-block-carhop-blocks-cta .icon svg path,
 .wp-block-carhop-blocks-cta .icon svg circle {
+  fill: transparent;
   stroke: var(--cta-current-color);
+  stroke-width: 2;
 }
 .wp-block-carhop-blocks-cta.align--left {
   margin-right: 0;

plugins/carhop-blocks/blocks/cta/build/cta/style-index.css

@@ -23,7 +23,9 @@
 }
 .wp-block-carhop-blocks-cta .icon svg path,
 .wp-block-carhop-blocks-cta .icon svg circle {
+  fill: transparent;
   stroke: var(--cta-current-color);
+  stroke-width: 2;
 }
 .wp-block-carhop-blocks-cta.align--left {
   margin-left: 0;

plugins/carhop-blocks/blocks/cta/build/cta/style-index.css.map

@@ -1 +1 @@
-{"version":3,"file":"cta/style-index.css","mappings":";;;AAAA;EACC;EACA;EAEA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EAEA;AADD;AAGC;EACC;AADF;AAIE;EACC;EACA;AAFH;AAIE;;EAEC;AAFH;AAMC;EACC;AAJF;AAMC;EACC;EACA;AAJF;AAMC;EACC;AAJF,C","sources":["webpack://cta/./src/cta/style.scss"],"sourcesContent":[".wp-block-carhop-blocks-cta {\n\tmargin-top: 20px;\n\tcolor: var(--cta-current-color);\n\n\tpadding: 2px;\n\tdisplay: block;\n\twidth: fit-content;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tline-height: normal;\n\n\tfont-weight: 700;\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\t.icon {\n\t\tsvg {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\t\tsvg path,\n\t\tsvg circle {\n\t\t\tstroke: var(--cta-current-color);\n\t\t}\n\t}\n\n\t&.align--left {\n\t\tmargin-left: 0;\n\t}\n\t&.align--right {\n\t\tmargin-right: 0;\n\t\tmargin-left: auto;\n\t}\n\t&.align--center {\n\t\tmargin: 0 auto;\n\t}\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"cta/style-index.css","mappings":";;;AAAA;EACC;EACA;EAEA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EAEA;AADD;AAGC;EACC;AADF;AAIE;EACC;EACA;AAFH;AAIE;;EAEC;EACA;EACA;AAFH;AAMC;EACC;AAJF;AAMC;EACC;EACA;AAJF;AAMC;EACC;AAJF,C","sources":["webpack://cta/./src/cta/style.scss"],"sourcesContent":[".wp-block-carhop-blocks-cta {\n\tmargin-top: 20px;\n\tcolor: var(--cta-current-color);\n\n\tpadding: 2px;\n\tdisplay: block;\n\twidth: fit-content;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tline-height: normal;\n\n\tfont-weight: 700;\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\t.icon {\n\t\tsvg {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\t\tsvg path,\n\t\tsvg circle {\n\t\t\tfill: transparent;\n\t\t\tstroke: var(--cta-current-color);\n\t\t\tstroke-width: 2;\n\t\t}\n\t}\n\n\t&.align--left {\n\t\tmargin-left: 0;\n\t}\n\t&.align--right {\n\t\tmargin-right: 0;\n\t\tmargin-left: auto;\n\t}\n\t&.align--center {\n\t\tmargin: 0 auto;\n\t}\n}\n"],"names":[],"sourceRoot":""}

plugins/carhop-blocks/blocks/cta/src/cta/style.scss

@@ -22,7 +22,9 @@
 		}
 		svg path,
 		svg circle {
+			fill: transparent;
 			stroke: var(--cta-current-color);
+			stroke-width: 2;
 		}
 	}