Antoine/carhop__plugins__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Adapting content box to be handle by dynamic articles
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-08-27 11:01:43 +02:00
parent 23dc43cbfb
commit d72159c9e4
8 changed files with 289 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/carhop-blocks/blocks/content-box/build/block.json
View File

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

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

@ -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');

185
plugins/carhop-blocks/blocks/content-box/build/index.js
View File

@ -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 _utilities_utilities__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* 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_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__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* 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, {
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_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_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_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: backgroundColor,
onChange: onBackgroundColorChange
})
function onBlockVariantChange(value) {
setAttributes({
blockVariant: value
});
}
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Aspect", "carhop-blocks"),
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
label: "Mod\xE8le de bloc",
value: blockVariant,
onChange: onBlockVariantChange,
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",
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", {
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.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"] ***!

2
plugins/carhop-blocks/blocks/content-box/build/index.js.map
View File

File diff suppressed because one or more lines are too long

4
plugins/carhop-blocks/blocks/content-box/src/block.json
View File

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

128
plugins/carhop-blocks/blocks/content-box/src/edit.js
View File

@ -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
className="deligraph-blocks-components-image__panel-body"
title={__("Arrière plan", "deligraph-blocks")}
>
<CheckboxControl
label="Arrière plan coloré"
checked={hasBackgroundColor}
onChange={onHasBackgroundColorChange}
/>
{hasBackgroundColor && (
<>
<ColorPalette
colors={colors}
value={backgroundColor}
onChange={onBackgroundColorChange}
/>
</>
<PanelBody title={__("Aspect", "carhop-blocks")}>
<ToggleGroupControl
label="Modèle de bloc"
value={blockVariant}
onChange={onBlockVariantChange}
isBlock
__nextHasNoMarginBottom
__next40pxDefaultSize
>
<ToggleGroupControlOption value="framed" label="Encadré" />
<ToggleGroupControlOption
value="backgrounded"
label="Fond coloré"
/>
</ToggleGroupControl>
{blockVariant === "backgrounded" && (
<Card>
<CardHeader>
<h1>Couleur de fond</h1>
</CardHeader>
<CardBody>
<>
<ColorPalette
colors={filteredBgColors}
value={backgroundColor}
onChange={onBackgroundColorChange}
/>
</>
</CardBody>
</Card>
)}
</PanelBody>
<PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Couleur du texte", "deligraph-blocks")}
>
{hasBackgroundColor && (
<>
<ColorPalette
colors={colors}
value={textColor}
onChange={onTextColorChange}
/>
</>
{blockVariant === "backgrounded" && postType !== "articles" && (
<Card>
<CardHeader>
<h1>Couleur du texte </h1>
</CardHeader>
<CardBody>
<ColorPalette
colors={filteredTextColors}
value={textColor}
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
? backgroundColor
: "transparent",
"--content-box-background-color":
blockVariant === "backgrounded" ? backgroundColor : "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",

16
plugins/carhop-blocks/blocks/content-box/src/save.js
View File

@ -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 } =
attributes;
const {
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
? backgroundColor
: "transparent",
"--content-box-background-color":
blockVariant === "backgrounded" ? backgroundColor : "transparent",
},
})}
>

39
plugins/carhop-blocks/blocks/content-box/src/utilities.js Normal file
View File

@ -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 || [];
};