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

plugins/carhop-blocks/build/content-box/block.json

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

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

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

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

@@ -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"