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

FEATURE Transforming content box to be dynamic to avoid wp kses break block with non admin
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2026-06-01 10:02:49 +02:00
parent 4534fe6f39
commit d68507a55b
11 changed files with 544 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/carhop-blocks/build/blocks-manifest.php
View File

@ -334,7 +334,12 @@ return array(
'editorStyle' => 'file:./index.css',
'style' => 'file:./style-index.css',
'viewScript' => 'file:./view.js',
'render' => 'file:./render.php',
'attributes' => array(
'align' => array(
'type' => 'string',
'default' => ''
),
'hasBackgroundColor' => array(
'type' => 'boolean',
'default' => false

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

@ -21,7 +21,12 @@
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js",
"render": "file:./render.php",
"attributes": {
"align": {
"type": "string",
"default": ""
},
"hasBackgroundColor": {
"type": "boolean",
"default": false

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

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

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

@ -41,7 +41,184 @@ 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":"Boite de contenu","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false,"anchor":true,"align":["wide","full"]},"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":"#f1fcf9"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"inherit"},"borderColor":{"type":"string","default":null},"blockVariant":{"type":"string","default":"backgrounded","enum":["nude","framed","framed-backgrounded","backgrounded"]},"shapeType":{"type":"string","default":"straight","enum":["straight","shapeA","shapeB","shapeC"]},"blockWidth":{"type":"string","default":"full","enum":["contained","wide","full"]}}}');
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":"Boite de contenu","category":"carhop-blocks","icon":"smiley","description":"Boite de contenu pour la mise en forme d\'éléments de contenu","example":{},"supports":{"html":false,"anchor":true,"align":["wide","full"]},"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":""},"hasBackgroundColor":{"type":"boolean","default":false},"backgroundColor":{"type":"string","default":"#f1fcf9"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"inherit"},"borderColor":{"type":"string","default":null},"blockVariant":{"type":"string","default":"backgrounded","enum":["nude","framed","framed-backgrounded","backgrounded"]},"shapeType":{"type":"string","default":"straight","enum":["straight","shapeA","shapeB","shapeC"]},"blockWidth":{"type":"string","default":"full","enum":["contained","wide","full"]}}}');
/***/ }),
/***/ "./src/content-box/deprecated-save.js":
/*!********************************************!*\
!*** ./src/content-box/deprecated-save.js ***!
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ deprecatedSave)
/* 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 _shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./shapeA.jsx */ "./src/content-box/shapeA.jsx");
/* harmony import */ var _shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shapeB.jsx */ "./src/content-box/shapeB.jsx");
/* harmony import */ var _shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shapeC.jsx */ "./src/content-box/shapeC.jsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
/**
* Ancien save (blockWidth) — conservé pour la migration des blocs.
*/
function deprecatedSave({
attributes
}) {
const {
backgroundColor,
textColor,
hasLightBackground,
blockVariant,
blockWidth,
shapeType,
borderColor
} = attributes;
const blockWidthClass = blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull";
const lightnessClass = hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark";
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${blockWidthClass}`,
style: {
"--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
"--content-box-background-color": blockVariant === "backgrounded" || blockVariant === "framed-backgrounded" ? backgroundColor : "transparent"
}
}),
children: [blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
className: "content-box__innerblocks",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
})]
});
}
/***/ }),
/***/ "./src/content-box/deprecated.js":
/*!***************************************!*\
!*** ./src/content-box/deprecated.js ***!
\***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* 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 _shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./shapeA.jsx */ "./src/content-box/shapeA.jsx");
/* harmony import */ var _shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shapeB.jsx */ "./src/content-box/shapeB.jsx");
/* harmony import */ var _shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shapeC.jsx */ "./src/content-box/shapeC.jsx");
/* harmony import */ var _deprecated_save__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./deprecated-save */ "./src/content-box/deprecated-save.js");
/* 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__);
/**
* Ancien save statique (SVG + section) — validation en éditeur
* des contenus publiés avant le passage au rendu dynamique.
*/
function StaticSaveWithAlign({
attributes
}) {
const {
backgroundColor,
textColor,
hasLightBackground,
blockVariant,
align,
shapeType,
borderColor
} = attributes;
const lightnessClass = hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark";
const alignClass = align === "full" ? "alignfull" : align === "wide" ? "alignwide" : "aligncontained";
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
style: {
"--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
"--content-box-background-color": blockVariant === "backgrounded" || blockVariant === "framed-backgrounded" ? backgroundColor : "transparent"
}
}),
children: [blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: "content-box__innerblocks",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
})]
});
}
const deprecated = [{
save: StaticSaveWithAlign
}, {
save: _deprecated_save__WEBPACK_IMPORTED_MODULE_4__["default"]
}];
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (deprecated);
/***/ }),
@ -341,33 +518,36 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/content-box/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/content-box/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/content-box/save.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./block.json */ "./src/content-box/block.json");
/* 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 _deprecated__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./deprecated */ "./src/content-box/deprecated.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./block.json */ "./src/content-box/block.json");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__);
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_4__.name, {
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, {
icon: {
foreground: "#136f63",
src: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("svg", {
src: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("svg", {
width: "40",
height: "40",
viewBox: "0 0 100 100",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("g", {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("path", {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("g", {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("path", {
d: "m50,99.84988l-43.14852,-24.92494l0,-49.84988l43.14852,-24.92494l43.14852,24.92494l0,49.84988l-43.14852,24.92494zm-40.75518,-26.32675l40.75518,23.52312l40.75518,-23.52312l0,-47.04625l-40.75518,-23.55731l-40.75518,23.55731l0,47.04625z"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("path", {
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("path", {
d: "m50,86.13945l-31.28439,-18.05263l0,-36.13945l31.28439,-18.05263l31.28439,18.05263l0,36.13945l-31.28439,18.05263zm-13.50528,-28.344l13.50528,7.79545l13.50528,-7.79545l0,-15.59091l-13.50528,-7.79545l-13.50528,7.79545l0,15.59091z"
})]
})
})
},
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_3__["default"]
save: _save__WEBPACK_IMPORTED_MODULE_3__["default"],
deprecated: _deprecated__WEBPACK_IMPORTED_MODULE_4__["default"]
});
/***/ }),
@ -384,71 +564,12 @@ __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 _shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./shapeA.jsx */ "./src/content-box/shapeA.jsx");
/* harmony import */ var _shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shapeB.jsx */ "./src/content-box/shapeB.jsx");
/* harmony import */ var _shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shapeC.jsx */ "./src/content-box/shapeC.jsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* 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_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
function save({
attributes
}) {
const {
backgroundColor,
textColor,
hasLightBackground,
hasBackgroundColor,
blockVariant,
align,
shapeType,
borderColor
} = attributes;
const lightnessClass = hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark";
const alignClass = align === "full" ? "alignfull" : align === "wide" ? "alignwide" : "aligncontained";
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
style: {
"--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
"--content-box-background-color": blockVariant === "backgrounded" || blockVariant === "framed-backgrounded" ? backgroundColor : "transparent"
}
}),
children: [blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: backgroundColor,
borderColor: "none"
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: "none",
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeA" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeA_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeB" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeB_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), blockVariant === "framed-backgrounded" && backgroundColor && shapeType === "shapeC" && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_shapeC_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
backgroundColor: backgroundColor,
borderColor: borderColor
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
className: "content-box__innerblocks",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {})
})]
});
function save() {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.InnerBlocks.Content, {});
}
/***/ }),

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

File diff suppressed because one or more lines are too long

110
plugins/carhop-blocks/build/content-box/render.php Normal file
View File

@ -0,0 +1,110 @@
<?php
/**
* Rendu serveur : évite de persister du SVG dans le post
* (filtré par KSES pour les rôles sans unfiltered_html).
*
* @var array $attributes Attributs du bloc.
* @var string $content HTML des blocs internes (InnerBlocks).
* @var WP_Block $block Instance du bloc.
*/
$background_color = $attributes['backgroundColor'] ?? '#f1fcf9';
$text_color = $attributes['textColor'] ?? 'inherit';
$has_light_background = ! empty($attributes['hasLightBackground']);
$block_variant = $attributes['blockVariant'] ?? 'backgrounded';
$shape_type = $attributes['shapeType'] ?? 'straight';
$border_color = $attributes['borderColor'] ?? null;
$align = $attributes['align'] ?? '';
if ('' === $align && ! empty($attributes['blockWidth'])) {
$block_width = $attributes['blockWidth'];
$align = 'contained' === $block_width ? '' : $block_width;
}
// Ancien save statique : le HTML complet est déjà dans $content.
$is_legacy_static = $content && (
str_contains($content, 'content-box content-box--variant-')
|| str_contains($content, 'class="content-box ')
);
if ($is_legacy_static) {
echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return;
}
$lightness_class = $has_light_background ? 'content-box--bg-light' : 'content-box--bg-dark';
$align_class = 'aligncontained';
if ('full' === $align) {
$align_class = 'alignfull';
} elseif ('wide' === $align) {
$align_class = 'alignwide';
}
$bg_css = ('backgrounded' === $block_variant || 'framed-backgrounded' === $block_variant)
? $background_color
: 'transparent';
$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => sprintf(
'content-box content-box--variant-%s content-box--%s %s %s',
esc_attr($block_variant),
esc_attr($shape_type),
esc_attr($lightness_class),
esc_attr($align_class)
),
'style' => sprintf(
'--content-box-text-color:%s;--content-box-background-color:%s',
esc_attr($text_color ? $text_color : 'inherit'),
esc_attr($bg_css)
),
),
isset($block) ? $block : null
);
$show_shapes = $background_color && in_array($shape_type, array('shapeA', 'shapeB', 'shapeC'), true);
$shape_fill = 'none';
$shape_stroke = 'none';
if ($show_shapes) {
if ('backgrounded' === $block_variant) {
$shape_fill = $background_color;
$shape_stroke = 'none';
} elseif ('framed' === $block_variant) {
$shape_fill = 'none';
$shape_stroke = $border_color ? $border_color : 'none';
} elseif ('framed-backgrounded' === $block_variant) {
$shape_fill = $background_color;
$shape_stroke = $border_color ? $border_color : 'none';
} else {
$show_shapes = false;
}
}
$shape_fill_attr = esc_attr($shape_fill);
$shape_stroke_attr = esc_attr($shape_stroke && 'none' !== $shape_stroke ? $shape_stroke : 'none');
$stroke_width = ($shape_stroke && 'none' !== $shape_stroke) ? '2px' : '0';
?>
<section <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<?php if ($show_shapes && 'shapeA' === $shape_type) : ?>
<svg width="1440" height="744" viewBox="0 0 1440 744" fill="none" xmlns="http://www.w3.org/2000/svg" class="content-box__shape" preserveAspectRatio="none" vector-effect="non-scaling-stroke" overflow="visible" aria-hidden="true" focusable="false">
<path d="M0 0H1440V686.701L0 744V0Z" fill="<?php echo $shape_fill_attr; ?>" stroke="<?php echo $shape_stroke_attr; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round;vector-effect:non-scaling-stroke"></path>
</svg>
<?php endif; ?>
<?php if ($show_shapes && 'shapeB' === $shape_type) : ?>
<svg class="content-box__shape" width="1302" height="654" viewBox="0 0 1302 654" preserveAspectRatio="none" vector-effect="non-scaling-stroke" overflow="visible" aria-hidden="true" focusable="false">
<path d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z" fill="<?php echo $shape_fill_attr; ?>" stroke="<?php echo $shape_stroke_attr; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round;vector-effect:non-scaling-stroke"></path>
</svg>
<?php endif; ?>
<?php if ($show_shapes && 'shapeC' === $shape_type) : ?>
<svg width="1440" height="997" viewBox="0 0 1440 997" class="content-box__shape" preserveAspectRatio="none" vector-effect="non-scaling-stroke" overflow="visible" aria-hidden="true" focusable="false">
<path d="M1440 29.8887L0 0V997L1440 979.242V29.8887Z" fill="<?php echo $shape_fill_attr; ?>" stroke="<?php echo $shape_stroke_attr; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round;vector-effect:non-scaling-stroke"></path>
</svg>
<?php endif; ?>
<div class="content-box__innerblocks">
<?php echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</section>

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

@ -21,7 +21,12 @@
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js",
"render": "file:./render.php",
"attributes": {
"align": {
"type": "string",
"default": ""
},
"hasBackgroundColor": {
"type": "boolean",
"default": false

108
plugins/carhop-blocks/src/content-box/deprecated.js Normal file
View File

@ -0,0 +1,108 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
import ShapeC from "./shapeC.jsx";
import deprecatedSave from "./deprecated-save";
/**
* Ancien save statique (SVG + section) — validation en éditeur
* des contenus publiés avant le passage au rendu dynamique.
*/
function StaticSaveWithAlign({ attributes }) {
const {
backgroundColor,
textColor,
hasLightBackground,
blockVariant,
align,
shapeType,
borderColor,
} = attributes;
const lightnessClass = hasLightBackground
? "content-box--bg-light"
: "content-box--bg-dark";
const alignClass =
align === "full"
? "alignfull"
: align === "wide"
? "alignwide"
: "aligncontained";
return (
<section
{...useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
style: {
"--content-box-text-color": textColor ?? "inherit",
"--content-box-background-color":
blockVariant === "backgrounded" ||
blockVariant === "framed-backgrounded"
? backgroundColor
: "transparent",
},
})}
>
{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} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
)}
<div className="content-box__innerblocks">
<InnerBlocks.Content />
</div>
</section>
);
}
const deprecated = [
{
save: StaticSaveWithAlign,
},
{
save: deprecatedSave,
},
];
export default deprecated;

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

@ -3,6 +3,7 @@ import "./style.scss";
import Edit from "./edit";
import save from "./save";
import deprecated from "./deprecated";
import metadata from "./block.json";
registerBlockType(metadata.name, {
@ -19,4 +20,5 @@ registerBlockType(metadata.name, {
},
edit: Edit,
save,
deprecated,
});

110
plugins/carhop-blocks/src/content-box/render.php Normal file
View File

@ -0,0 +1,110 @@
<?php
/**
* Rendu serveur : évite de persister du SVG dans le post
* (filtré par KSES pour les rôles sans unfiltered_html).
*
* @var array $attributes Attributs du bloc.
* @var string $content HTML des blocs internes (InnerBlocks).
* @var WP_Block $block Instance du bloc.
*/
$background_color = $attributes['backgroundColor'] ?? '#f1fcf9';
$text_color = $attributes['textColor'] ?? 'inherit';
$has_light_background = ! empty($attributes['hasLightBackground']);
$block_variant = $attributes['blockVariant'] ?? 'backgrounded';
$shape_type = $attributes['shapeType'] ?? 'straight';
$border_color = $attributes['borderColor'] ?? null;
$align = $attributes['align'] ?? '';
if ('' === $align && ! empty($attributes['blockWidth'])) {
$block_width = $attributes['blockWidth'];
$align = 'contained' === $block_width ? '' : $block_width;
}
// Ancien save statique : le HTML complet est déjà dans $content.
$is_legacy_static = $content && (
str_contains($content, 'content-box content-box--variant-')
|| str_contains($content, 'class="content-box ')
);
if ($is_legacy_static) {
echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return;
}
$lightness_class = $has_light_background ? 'content-box--bg-light' : 'content-box--bg-dark';
$align_class = 'aligncontained';
if ('full' === $align) {
$align_class = 'alignfull';
} elseif ('wide' === $align) {
$align_class = 'alignwide';
}
$bg_css = ('backgrounded' === $block_variant || 'framed-backgrounded' === $block_variant)
? $background_color
: 'transparent';
$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => sprintf(
'content-box content-box--variant-%s content-box--%s %s %s',
esc_attr($block_variant),
esc_attr($shape_type),
esc_attr($lightness_class),
esc_attr($align_class)
),
'style' => sprintf(
'--content-box-text-color:%s;--content-box-background-color:%s',
esc_attr($text_color ? $text_color : 'inherit'),
esc_attr($bg_css)
),
),
isset($block) ? $block : null
);
$show_shapes = $background_color && in_array($shape_type, array('shapeA', 'shapeB', 'shapeC'), true);
$shape_fill = 'none';
$shape_stroke = 'none';
if ($show_shapes) {
if ('backgrounded' === $block_variant) {
$shape_fill = $background_color;
$shape_stroke = 'none';
} elseif ('framed' === $block_variant) {
$shape_fill = 'none';
$shape_stroke = $border_color ? $border_color : 'none';
} elseif ('framed-backgrounded' === $block_variant) {
$shape_fill = $background_color;
$shape_stroke = $border_color ? $border_color : 'none';
} else {
$show_shapes = false;
}
}
$shape_fill_attr = esc_attr($shape_fill);
$shape_stroke_attr = esc_attr($shape_stroke && 'none' !== $shape_stroke ? $shape_stroke : 'none');
$stroke_width = ($shape_stroke && 'none' !== $shape_stroke) ? '2px' : '0';
?>
<section <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<?php if ($show_shapes && 'shapeA' === $shape_type) : ?>
<svg width="1440" height="744" viewBox="0 0 1440 744" fill="none" xmlns="http://www.w3.org/2000/svg" class="content-box__shape" preserveAspectRatio="none" vector-effect="non-scaling-stroke" overflow="visible" aria-hidden="true" focusable="false">
<path d="M0 0H1440V686.701L0 744V0Z" fill="<?php echo $shape_fill_attr; ?>" stroke="<?php echo $shape_stroke_attr; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round;vector-effect:non-scaling-stroke"></path>
</svg>
<?php endif; ?>
<?php if ($show_shapes && 'shapeB' === $shape_type) : ?>
<svg class="content-box__shape" width="1302" height="654" viewBox="0 0 1302 654" preserveAspectRatio="none" vector-effect="non-scaling-stroke" overflow="visible" aria-hidden="true" focusable="false">
<path d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z" fill="<?php echo $shape_fill_attr; ?>" stroke="<?php echo $shape_stroke_attr; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round;vector-effect:non-scaling-stroke"></path>
</svg>
<?php endif; ?>
<?php if ($show_shapes && 'shapeC' === $shape_type) : ?>
<svg width="1440" height="997" viewBox="0 0 1440 997" class="content-box__shape" preserveAspectRatio="none" vector-effect="non-scaling-stroke" overflow="visible" aria-hidden="true" focusable="false">
<path d="M1440 29.8887L0 0V997L1440 979.242V29.8887Z" fill="<?php echo $shape_fill_attr; ?>" stroke="<?php echo $shape_stroke_attr; ?>" stroke-width="<?php echo esc_attr($stroke_width); ?>" style="stroke-linejoin:round;vector-effect:non-scaling-stroke"></path>
</svg>
<?php endif; ?>
<div class="content-box__innerblocks">
<?php echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</section>

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

@ -1,92 +1,5 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
import ShapeC from "./shapeC.jsx";
export default function save({ attributes }) {
const {
backgroundColor,
textColor,
hasLightBackground,
hasBackgroundColor,
blockVariant,
align,
shapeType,
borderColor,
} = attributes;
import { InnerBlocks } from "@wordpress/block-editor";
const lightnessClass = hasLightBackground
? "content-box--bg-light"
: "content-box--bg-dark";
const alignClass =
align === "full"
? "alignfull"
: align === "wide"
? "alignwide"
: "aligncontained";
return (
<section
{...useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
style: {
"--content-box-text-color": textColor ?? "inherit",
"--content-box-background-color":
blockVariant === "backgrounded" ||
blockVariant === "framed-backgrounded"
? backgroundColor
: "transparent",
},
})}
>
{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} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
)}
{blockVariant === "framed-backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
)}
<div className="content-box__innerblocks">
<InnerBlocks.Content />
</div>
</section>
);
export default function save() {
return <InnerBlocks.Content />;
}