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

FEATURE Handling isBackgroundLight

Browse Source
This commit is contained in:
Antoine M 2025-10-07 17:44:45 +02:00
parent ee2937eef2
commit 4addf355f8
7 changed files with 124 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/carhop-blocks/blocks/chapter-section/build/block.json
View File

@ -73,6 +73,10 @@
"type": "string", "type": "string",
"default": "#ffffff" "default": "#ffffff"
}, },
"hasLightBackground": {
"type": "boolean",
"default": true
},
"textColor": { "textColor": {
"type": "string", "type": "string",
"default": "#136f63" "default": "#136f63"

2
plugins/carhop-blocks/blocks/chapter-section/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', 'wp-primitives'), 'version' => 'ca8961fe68bd680871dd'); <?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => '7a32b34d94d6ec867f7f');

137
plugins/carhop-blocks/blocks/chapter-section/build/index.js
View File

@ -2,6 +2,39 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ 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;
}
/***/ }),
/***/ "./node_modules/.pnpm/@wordpress+icons@10.19.0_react@18.3.1/node_modules/@wordpress/icons/build-module/library/trash.js": /***/ "./node_modules/.pnpm/@wordpress+icons@10.19.0_react@18.3.1/node_modules/@wordpress/icons/build-module/library/trash.js":
/*!******************************************************************************************************************************!*\ /*!******************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/@wordpress+icons@10.19.0_react@18.3.1/node_modules/@wordpress/icons/build-module/library/trash.js ***! !*** ./node_modules/.pnpm/@wordpress+icons@10.19.0_react@18.3.1/node_modules/@wordpress/icons/build-module/library/trash.js ***!
@ -41,7 +74,7 @@ const trash = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx
\************************/ \************************/
/***/ ((module) => { /***/ ((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"]},"coverType":{"type":"string","default":"image","enum":["classic","photoframe"]},"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"]}'); 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"]},"coverType":{"type":"string","default":"image","enum":["classic","photoframe"]},"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"},"hasLightBackground":{"type":"boolean","default":true},"textColor":{"type":"string","default":"#136f63"},"backgroundOrientation":{"type":"string","default":"left","enum":["left","right"]}},"usesContext":["postType","postId"]}');
/***/ }), /***/ }),
@ -59,12 +92,14 @@ __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_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__ = __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 _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/.pnpm/@wordpress+icons@10.19.0_react@18.3.1/node_modules/@wordpress/icons/build-module/library/trash.js"); /* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/.pnpm/@wordpress+icons@10.19.0_react@18.3.1/node_modules/@wordpress/icons/build-module/library/trash.js");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); /* 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_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss"); /* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime"); /* harmony import */ var _utilities_utilities__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../_utilities/utilities */ "../_utilities/utilities.js");
/* 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__);
@ -79,6 +114,7 @@ function Edit({
}) { }) {
const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme"); const colors = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useSetting)("color.palette.theme");
const { const {
hasLightBackground,
disposition, disposition,
coverType, coverType,
coverUrl, coverUrl,
@ -111,9 +147,11 @@ function Edit({
}); });
} }
function onBackgroundColorChange(value) { function onBackgroundColorChange(value) {
if (!value) return;
setAttributes({ setAttributes({
backgroundColor: value backgroundColor: value
}); });
setHasLightBackground(value);
} }
function onHasBackgroundColorChange(value) { function onHasBackgroundColorChange(value) {
setAttributes({ setAttributes({
@ -135,12 +173,20 @@ function Edit({
backgroundOrientation: value backgroundOrientation: value
}); });
} }
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, { function setHasLightBackground(backgroundColor) {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, { if (!backgroundColor) return;
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, { const isLightBackgroundColor = (0,_utilities_utilities__WEBPACK_IMPORTED_MODULE_4__.isColorLight)(backgroundColor);
console.log(isLightBackgroundColor);
setAttributes({
hasLightBackground: isLightBackgroundColor
});
}
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__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body", className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Largeur", "deligraph-blocks"), title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Largeur", "deligraph-blocks"),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant", className: "deligraph-blocks__variant",
isBlock: true, isBlock: true,
label: "Largeur du bloc", label: "Largeur du bloc",
@ -148,65 +194,65 @@ function Edit({
blockWidth: value blockWidth: value
}), }),
value: blockWidth, value: blockWidth,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Contenue", label: "Contenue",
value: "contained" value: "contained"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Pleine largeur", label: "Pleine largeur",
value: "full" value: "full"
})] })]
}) })
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body", className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Image d'accompagnement", "deligraph-blocks"), title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Image d'accompagnement", "deligraph-blocks"),
children: [coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("img", { children: [coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("img", {
src: coverUrl, src: coverUrl,
alt: coverAlt alt: coverAlt
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
className: "media-replace-container", className: "media-replace-container",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaReplaceFlow, { children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaReplaceFlow, {
mediaId: coverId, mediaId: coverId,
mediaUrl: coverUrl, mediaUrl: coverUrl,
allowedTypes: ["image"], allowedTypes: ["image"],
accept: "image/*", accept: "image/*",
onSelect: setCoverAttributes, onSelect: setCoverAttributes,
name: !coverUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Ajouter votre image manuellement", "homegrade-blocks") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Remplacer", "homegrade-blocks") name: !coverUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Ajouter votre image manuellement", "homegrade-blocks") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Remplacer", "homegrade-blocks")
}), coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, { }), coverUrl && /*#__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_2__.Button, { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Button, {
className: "custom-flow-button", className: "custom-flow-button",
variant: "primary", variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
label: "Supprimer", label: "Supprimer",
onClick: removeCoverAttributes onClick: removeCoverAttributes
}) })
})] })]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant", className: "deligraph-blocks__variant",
isBlock: true, isBlock: true,
label: "Type d'image", label: "Type d'image",
onChange: onCoverTypeChange, onChange: onCoverTypeChange,
value: coverType, value: coverType,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Classique", label: "Classique",
value: "classic" value: "classic"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Encadr\xE9e", label: "Encadr\xE9e",
value: "photoframe" value: "photoframe"
})] })]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant", className: "deligraph-blocks__variant",
isBlock: true, isBlock: true,
label: "Disposition", label: "Disposition",
onChange: onDispositionChange, onChange: onDispositionChange,
value: disposition, value: disposition,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Gauche", label: "Gauche",
value: "left" value: "left"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Droite", label: "Droite",
value: "right" value: "right"
})] })]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
className: "deligraph-blocks__variant", className: "deligraph-blocks__variant",
isBlock: true, isBlock: true,
label: "Taille de l'image", label: "Taille de l'image",
@ -214,38 +260,38 @@ function Edit({
coverSize coverSize
}), }),
value: coverSize, value: coverSize,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Big", label: "Big",
value: "large" value: "large"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Grande", label: "Grande",
value: "grande" value: "grande"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Moyenne", label: "Moyenne",
value: "medium" value: "medium"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
label: "Petite", label: "Petite",
value: "small" value: "small"
})] })]
})] })]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body", className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Arrière plan", "deligraph-blocks"), 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_2__.CheckboxControl, { children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.CheckboxControl, {
label: "Arri\xE8re plan color\xE9", label: "Arri\xE8re plan color\xE9",
checked: hasBackgroundColor, checked: hasBackgroundColor,
onChange: onHasBackgroundColorChange 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_2__.ColorPalette, { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
colors: colors, colors: colors,
value: backgroundColor, value: backgroundColor,
onChange: onBackgroundColorChange onChange: onBackgroundColorChange
}) })
})] })]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
className: "deligraph-blocks-components-image__panel-body", className: "deligraph-blocks-components-image__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Couleur du texte", "deligraph-blocks"), 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, { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
colors: colors, colors: colors,
value: textColor, value: textColor,
onChange: value => setAttributes({ onChange: value => setAttributes({
@ -253,32 +299,33 @@ function Edit({
}) })
}) })
})] })]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("section", { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({ ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}
${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"} ${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}
${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}`, ${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}
${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}`,
style: { style: {
"--chapter-section-text-color": textColor ? textColor : "#136f63" "--chapter-section-text-color": textColor ? textColor : "#136f63"
} }
}), }),
children: [hasBackgroundColor && backgroundColor && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, { children: [hasBackgroundColor && backgroundColor && /*#__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)("svg", { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("svg", {
className: `chapter-section__background chapter-section__background--${backgroundOrientation}`, className: `chapter-section__background chapter-section__background--${backgroundOrientation}`,
width: "1302", width: "1302",
height: "654", height: "654",
viewBox: "0 0 1302 654", viewBox: "0 0 1302 654",
preserveAspectRatio: "none", preserveAspectRatio: "none",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path", { children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("path", {
d: "M1302 0L0 15.8281V654L1302 642.633L1302 0Z", d: "M1302 0L0 15.8281V654L1302 642.633L1302 0Z",
fill: backgroundColor fill: backgroundColor
}) })
}) })
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", { }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
className: "chapter-section__content", className: "chapter-section__content",
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: "chapter-section__innerblocks", className: "chapter-section__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: [["carhop-blocks/heading", { template: [["carhop-blocks/heading", {
innerBlocks: [["core/heading", { innerBlocks: [["core/heading", {
content: "Un titre précis " content: "Un titre précis "
@ -291,11 +338,11 @@ function Edit({
allowedBlocks: ["core/heading", "core/paragraph", "core/list", "core/button", "core/buttons", "carhop-blocks/cta", "carhop-blocks/heading"] allowedBlocks: ["core/heading", "core/paragraph", "core/list", "core/button", "core/buttons", "carhop-blocks/cta", "carhop-blocks/heading"]
}) })
}) })
}), coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("img", { }), coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("img", {
className: `chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`, className: `chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`,
src: coverUrl, src: coverUrl,
alt: coverAlt alt: coverAlt
}), !coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaPlaceholder, { }), !coverUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaPlaceholder, {
accept: "image/*", accept: "image/*",
allowedTypes: ["image"], allowedTypes: ["image"],
onSelect: setCoverAttributes, onSelect: setCoverAttributes,
@ -378,6 +425,7 @@ function save({
attributes attributes
}) { }) {
const { const {
hasLightBackground,
disposition, disposition,
coverUrl, coverUrl,
coverAlt, coverAlt,
@ -393,6 +441,7 @@ function save({
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_0__.useBlockProps.save({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}
${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"} ${blockWidth === "full" ? "chapter-section--width-full" : "chapter-section--width-contained"}
${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}
${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}`, ${hasBackgroundColor && backgroundColor ? "chapter-section--has-background" : ""}`,
style: { style: {
"--chapter-section-text-color": textColor ? textColor : "#136f63" "--chapter-section-text-color": textColor ? textColor : "#136f63"

2
plugins/carhop-blocks/blocks/chapter-section/build/index.js.map
View File

File diff suppressed because one or more lines are too long

4
plugins/carhop-blocks/blocks/chapter-section/src/block.json
View File

@ -73,6 +73,10 @@
"type": "string", "type": "string",
"default": "#ffffff" "default": "#ffffff"
}, },
"hasLightBackground": {
"type": "boolean",
"default": true
},
"textColor": { "textColor": {
"type": "string", "type": "string",
"default": "#136f63" "default": "#136f63"

19
plugins/carhop-blocks/blocks/chapter-section/src/edit.js
View File

@ -18,9 +18,12 @@ import {
} from "@wordpress/components"; } from "@wordpress/components";
import "./editor.scss"; import "./editor.scss";
import { isColorLight } from "../../_utilities/utilities";
export default function Edit({ attributes, setAttributes, ...props }) { export default function Edit({ attributes, setAttributes, ...props }) {
const colors = useSetting("color.palette.theme"); const colors = useSetting("color.palette.theme");
const { const {
hasLightBackground,
disposition, disposition,
coverType, coverType,
coverUrl, coverUrl,
@ -53,7 +56,9 @@ export default function Edit({ attributes, setAttributes, ...props }) {
}); });
} }
function onBackgroundColorChange(value) { function onBackgroundColorChange(value) {
if (!value) return;
setAttributes({ backgroundColor: value }); setAttributes({ backgroundColor: value });
setHasLightBackground(value);
} }
function onHasBackgroundColorChange(value) { function onHasBackgroundColorChange(value) {
setAttributes({ hasBackgroundColor: value }); setAttributes({ hasBackgroundColor: value });
@ -68,6 +73,14 @@ export default function Edit({ attributes, setAttributes, ...props }) {
function onBackgroundOrientationChange(value) { function onBackgroundOrientationChange(value) {
setAttributes({ backgroundOrientation: value }); setAttributes({ backgroundOrientation: value });
} }
function setHasLightBackground(backgroundColor) {
if (!backgroundColor) return;
const isLightBackgroundColor = isColorLight(backgroundColor);
console.log(isLightBackgroundColor);
setAttributes({ hasLightBackground: isLightBackgroundColor });
}
return ( return (
<> <>
<InspectorControls> <InspectorControls>
@ -194,7 +207,13 @@ export default function Edit({ attributes, setAttributes, ...props }) {
hasBackgroundColor && backgroundColor hasBackgroundColor && backgroundColor
? "chapter-section--has-background" ? "chapter-section--has-background"
: "" : ""
}
${
hasLightBackground
? "chapter-section--bg-light"
: "chapter-section--bg-dark"
}`, }`,
style: { style: {
"--chapter-section-text-color": textColor ? textColor : "#136f63", "--chapter-section-text-color": textColor ? textColor : "#136f63",
}, },

2
plugins/carhop-blocks/blocks/chapter-section/src/save.js
View File

@ -1,6 +1,7 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { const {
hasLightBackground,
disposition, disposition,
coverUrl, coverUrl,
coverAlt, coverAlt,
@ -22,6 +23,7 @@ export default function save({ attributes }) {
? "chapter-section--width-full" ? "chapter-section--width-full"
: "chapter-section--width-contained" : "chapter-section--width-contained"
} }
${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}
${ ${
hasBackgroundColor && backgroundColor hasBackgroundColor && backgroundColor
? "chapter-section--has-background" ? "chapter-section--has-background"