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

FEATURE Add block width option to content box with full and contained variants

Browse Source
This commit is contained in:
Antoine M 2025-11-26 11:56:53 +01:00
parent 9d1af3cacb
commit 18e53febae
4 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,6 +37,14 @@
"blockVariant": {
"type": "string",
"default": "framed"
},
"blockWidth": {
"type": "string",
"default": "full",
"enum": [
"full",
"contained"
]
}
}
}

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

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

43
plugins/carhop-blocks/build/content-box/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":"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},"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"},"blockVariant":{"type":"string","default":"framed"}}}');
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},"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"},"blockVariant":{"type":"string","default":"framed"},"blockWidth":{"type":"string","default":"full","enum":["full","contained"]}}}');
/***/ }),
@ -88,9 +88,10 @@ function Edit({
backgroundColor,
textColor,
hasLightBackground,
blockVariant
blockVariant,
blockWidth
} = attributes;
console.log(blockWidth);
// Détecter le type de post actuel
const postType = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
return select("core/editor").getCurrentPostType();
@ -142,6 +143,14 @@ function Edit({
setAttributes({
blockVariant: value
});
if (value === "framed" || value === "nude") {
setAttributes({
backgroundColor: "#fff"
});
setAttributes({
hasLightBackground: true
});
}
}
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, {
@ -155,12 +164,31 @@ function Edit({
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
value: "nude",
label: "Nu"
}), /*#__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"
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
label: "Largeur du bloc",
value: blockWidth,
onChange: value => setAttributes({
blockWidth: value
}),
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: "full",
label: "Pleine largeur"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
value: "contained",
label: "Contenue"
})]
}), 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", {
@ -191,7 +219,8 @@ function Edit({
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({
className: `${postType !== "articles" && "alignfull"} content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}`,
className: `${postType !== "articles" && "alignfull"} content-box content-box--variant-${blockVariant} ${hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"}
${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
style: {
"--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
"--content-box-background-color": blockVariant === "backgrounded" ? backgroundColor : "transparent"
@ -293,11 +322,13 @@ function save({
textColor,
hasLightBackground,
hasBackgroundColor,
blockVariant
blockVariant,
blockWidth
} = 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 content-box--variant-${blockVariant} ${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"}
${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
style: {
"--content-box-text-color": textColor !== null && textColor !== void 0 ? textColor : "inherit",
"--content-box-background-color": blockVariant === "backgrounded" ? backgroundColor : "transparent"

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

File diff suppressed because one or more lines are too long