adding alignment handling feature

blocks/column-cards/build/card/block.json

@@ -15,6 +15,10 @@
   "attributes": {
     "childName": {
       "type": "string"
+    },
+    "contentAlign": {
+      "type": "string",
+      "default": "left"
     }
   }
 }

blocks/column-cards/build/card/figure/style-index.css

@@ -1,4 +1,4 @@
-/*!****************************************************************************************************************************************************************************************************************************************************!*\
+/*!***************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/card/figure/editor.scss ***!
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/card/figure/style.scss ***!
-  \****************************************************************************************************************************************************************************************************************************************************/
+  \***************************************************************************************************************************************************************************************************************************************************/
 

blocks/column-cards/build/card/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n'), 'version' => '6b8e3f9d4de7f2e2558d');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '96e659fe0995744abe2b');

blocks/column-cards/build/card/index.js

@@ -20,6 +20,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _figure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./figure */ "./src/card/figure/index.js");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-left.js");
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-center.js");
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-right.js");
+
 
 
 
@@ -31,9 +37,35 @@ function Edit({
   setAttributes,
   ...props
 }) {
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  const {
+    contentAlign
+  } = attributes;
+  function onChangeContentAlignment(contentAlign) {
+    setAttributes({
+      contentAlign
+    });
+  }
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.Toolbar, {
+    label: "Options"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarDropdownMenu, {
+    icon: contentAlign === "left" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"] : contentAlign === "center" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"] : _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
+    label: "Alignement du titrage",
+    controls: [{
+      title: "Gauche",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
+      onClick: () => onChangeContentAlignment("left")
+    }, {
+      title: "Centré",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
+      onClick: () => onChangeContentAlignment("center")
+    }, {
+      title: "Droite",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
+      onClick: () => onChangeContentAlignment("right")
+    }]
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
-      className: `homegrade-blocks-card`
+      className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`
     })
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
     allowedBlocks: ["core/paragraph", "homegrade-content-blocks/figure", "core/image"]
@@ -269,9 +301,12 @@ __webpack_require__.r(__webpack_exports__);
 function save({
   attributes
 }) {
+  const {
+    contentAlign
+  } = attributes;
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `homegrade-blocks-card`
+      className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`
     })
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
 }
@@ -324,6 +359,99 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/position-center.js":
+/*!***********************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/position-center.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_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const positionCenter = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionCenter);
+//# sourceMappingURL=position-center.js.map
+
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/position-left.js":
+/*!*********************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/position-left.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_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const positionLeft = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionLeft);
+//# sourceMappingURL=position-left.js.map
+
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/position-right.js":
+/*!**********************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/position-right.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_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const positionRight = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionRight);
+//# sourceMappingURL=position-right.js.map
+
 /***/ }),
 
 /***/ "@wordpress/block-editor":
@@ -346,6 +474,16 @@ module.exports = window["wp"]["blocks"];
 
 /***/ }),
 
+/***/ "@wordpress/components":
+/*!************************************!*\
+  !*** external ["wp","components"] ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["components"];
+
+/***/ }),
+
 /***/ "@wordpress/element":
 /*!*********************************!*\
   !*** external ["wp","element"] ***!
@@ -366,13 +504,23 @@ module.exports = window["wp"]["i18n"];
 
 /***/ }),
 
+/***/ "@wordpress/primitives":
+/*!************************************!*\
+  !*** external ["wp","primitives"] ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["primitives"];
+
+/***/ }),
+
 /***/ "./src/card/block.json":
 /*!*****************************!*\
   !*** ./src/card/block.json ***!
   \*****************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/column-card","version":"0.1.0","title":"Carte","category":"homegrade-blocks","description":"Carte à insérer dans des colonnes","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"childName":{"type":"string"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/column-card","version":"0.1.0","title":"Carte","category":"homegrade-blocks","description":"Carte à insérer dans des colonnes","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"childName":{"type":"string"},"contentAlign":{"type":"string","default":"left"}}}');
 
 /***/ }),
 

blocks/column-cards/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '8dc5132303b5c86f6962');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'ba32e980f0f0c77c3cc6');

blocks/column-cards/build/index.css

@@ -18,6 +18,20 @@
 .homegrade-blocks-column-cards--has-4-columns > .block-editor-inner-blocks > .block-editor-block-list__layout {
   grid-template-columns: 1fr 1fr 1fr 1fr;
 }
+
+.homegrade-blocks-card--align-center .block-editor-block-list__layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.homegrade-blocks-card--align-right .block-editor-block-list__layout {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+}
 /*!*********************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/card/editor.scss ***!
   \*********************************************************************************************************************************************************************************************************************************************/

blocks/column-cards/build/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;EACC;AACD;AACC;EACC;EACA;OAAA;AACF;AACC;EAGC;AADF;AAGC;EAGC;AAHF;AAKC;EAGC;AALF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-column-cards {\r\n\tdisplay: block !important;\r\n\r\n\t.block-editor-block-list__layout {\r\n\t\tdisplay: grid;\r\n\t\tcolumn-gap: 1rem;\r\n\t}\r\n\t&--has-2-columns\r\n\t\t> .block-editor-inner-blocks\r\n\t\t> .block-editor-block-list__layout {\r\n\t\tgrid-template-columns: 1fr 1fr;\r\n\t}\r\n\t&--has-3-columns\r\n\t\t> .block-editor-inner-blocks\r\n\t\t> .block-editor-block-list__layout {\r\n\t\tgrid-template-columns: 1fr 1fr 1fr;\r\n\t}\r\n\t&--has-4-columns\r\n\t\t> .block-editor-inner-blocks\r\n\t\t> .block-editor-block-list__layout {\r\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AAAA;EACC;AACD;AACC;EACC;EACA;OAAA;AACF;AACC;EAGC;AADF;AAGC;EAGC;AAHF;AAKC;EAGC;AALF;;AASC;EACC;EACA;EACA;EACA;AANF;;AAUC;EACC;EACA;EACA;EACA;AAPF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-column-cards {\r\n\tdisplay: block !important;\r\n\r\n\t.block-editor-block-list__layout {\r\n\t\tdisplay: grid;\r\n\t\tcolumn-gap: 1rem;\r\n\t}\r\n\t&--has-2-columns\r\n\t\t> .block-editor-inner-blocks\r\n\t\t> .block-editor-block-list__layout {\r\n\t\tgrid-template-columns: 1fr 1fr;\r\n\t}\r\n\t&--has-3-columns\r\n\t\t> .block-editor-inner-blocks\r\n\t\t> .block-editor-block-list__layout {\r\n\t\tgrid-template-columns: 1fr 1fr 1fr;\r\n\t}\r\n\t&--has-4-columns\r\n\t\t> .block-editor-inner-blocks\r\n\t\t> .block-editor-block-list__layout {\r\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr;\r\n\t}\r\n}\r\n.homegrade-blocks-card--align-center {\r\n\t.block-editor-block-list__layout {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\ttext-align: center;\r\n\t}\r\n}\r\n.homegrade-blocks-card--align-right {\r\n\t.block-editor-block-list__layout {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: flex-end;\r\n\t\ttext-align: right;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

blocks/column-cards/build/index.js

@@ -20,6 +20,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _figure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./figure */ "./src/card/figure/index.js");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-left.js");
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-center.js");
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-right.js");
+
 
 
 
@@ -31,9 +37,35 @@ function Edit({
   setAttributes,
   ...props
 }) {
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  const {
+    contentAlign
+  } = attributes;
+  function onChangeContentAlignment(contentAlign) {
+    setAttributes({
+      contentAlign
+    });
+  }
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.Toolbar, {
+    label: "Options"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarDropdownMenu, {
+    icon: contentAlign === "left" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"] : contentAlign === "center" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"] : _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
+    label: "Alignement du titrage",
+    controls: [{
+      title: "Gauche",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
+      onClick: () => onChangeContentAlignment("left")
+    }, {
+      title: "Centré",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
+      onClick: () => onChangeContentAlignment("center")
+    }, {
+      title: "Droite",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
+      onClick: () => onChangeContentAlignment("right")
+    }]
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
-      className: `homegrade-blocks-card`
+      className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`
     })
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
     allowedBlocks: ["core/paragraph", "homegrade-content-blocks/figure", "core/image"]
@@ -269,9 +301,12 @@ __webpack_require__.r(__webpack_exports__);
 function save({
   attributes
 }) {
+  const {
+    contentAlign
+  } = attributes;
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `homegrade-blocks-card`
+      className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`
     })
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
 }
@@ -489,6 +524,99 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/position-center.js":
+/*!***********************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/position-center.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_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const positionCenter = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionCenter);
+//# sourceMappingURL=position-center.js.map
+
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/position-left.js":
+/*!*********************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/position-left.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_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const positionLeft = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionLeft);
+//# sourceMappingURL=position-left.js.map
+
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/position-right.js":
+/*!**********************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/position-right.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_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const positionRight = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionRight);
+//# sourceMappingURL=position-right.js.map
+
 /***/ }),
 
 /***/ "@wordpress/block-editor":
@@ -541,6 +669,16 @@ module.exports = window["wp"]["i18n"];
 
 /***/ }),
 
+/***/ "@wordpress/primitives":
+/*!************************************!*\
+  !*** external ["wp","primitives"] ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["primitives"];
+
+/***/ }),
+
 /***/ "./src/block.json":
 /*!************************!*\
   !*** ./src/block.json ***!
@@ -557,7 +695,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
   \*****************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/column-card","version":"0.1.0","title":"Carte","category":"homegrade-blocks","description":"Carte à insérer dans des colonnes","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"childName":{"type":"string"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/column-card","version":"0.1.0","title":"Carte","category":"homegrade-blocks","description":"Carte à insérer dans des colonnes","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"childName":{"type":"string"},"contentAlign":{"type":"string","default":"left"}}}');
 
 /***/ }),
 

blocks/column-cards/src/card/block.json

@@ -15,6 +15,10 @@
 	"attributes": {
 		"childName": {
 			"type": "string"
+		},
+		"contentAlign": {
+			"type": "string",
+			"default": "left"
 		}
 	}
 }

blocks/column-cards/src/card/edit.js

@@ -1,14 +1,61 @@
 import { __ } from "@wordpress/i18n";
 import "./editor.scss";
 import "./figure";
-import { useBlockProps, RichText } from "@wordpress/block-editor";
+import {
-import { InnerBlocks } from "@wordpress/block-editor";
+	useBlockProps,
+	InnerBlocks,
+	InspectorControls,
+	BlockControls,
+} from "@wordpress/block-editor";
+import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
+import {
+	more,
+	positionLeft,
+	positionCenter,
+	positionRight,
+} from "@wordpress/icons";
+
 export default function Edit({ attributes, setAttributes, ...props }) {
+	const { contentAlign } = attributes;
+	function onChangeContentAlignment(contentAlign) {
+		setAttributes({ contentAlign });
+	}
 	return (
 		<>
+			<BlockControls>
+				<Toolbar label="Options">
+					<ToolbarDropdownMenu
+						icon={
+							contentAlign === "left"
+								? positionLeft
+								: contentAlign === "center"
+								? positionCenter
+								: positionRight
+						}
+						label="Alignement du titrage"
+						controls={[
+							{
+								title: "Gauche",
+								icon: positionLeft,
+								onClick: () => onChangeContentAlignment("left"),
+							},
+							{
+								title: "Centré",
+								icon: positionCenter,
+								onClick: () => onChangeContentAlignment("center"),
+							},
+							{
+								title: "Droite",
+								icon: positionRight,
+								onClick: () => onChangeContentAlignment("right"),
+							},
+						]}
+					/>
+				</Toolbar>
+			</BlockControls>
 			<div
 				{...useBlockProps({
-					className: `homegrade-blocks-card`,
+					className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`,
 				})}
 			>
 				<InnerBlocks

blocks/column-cards/src/card/save.js

@@ -1,10 +1,12 @@
 import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
+	const { contentAlign } = attributes;
+
 	return (
 		<div
 			{...useBlockProps.save({
-				className: `homegrade-blocks-card`,
+				className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`,
 			})}
 		>
 			<InnerBlocks.Content />

blocks/column-cards/src/editor.scss

@@ -21,3 +21,19 @@
 		grid-template-columns: 1fr 1fr 1fr 1fr;
 	}
 }
+.homegrade-blocks-card--align-center {
+	.block-editor-block-list__layout {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+}
+.homegrade-blocks-card--align-right {
+	.block-editor-block-list__layout {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		text-align: right;
+	}
+}