exteding block feature to handle text alignment

blocks/section-titling/build/block.json

@@ -19,6 +19,10 @@
     },
     "sectionSubtitle": {
       "type": "string"
+    },
+    "textAlign": {
+      "type": "string",
+      "default": "left"
     }
   }
 }

blocks/section-titling/build/index.asset.php

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

blocks/section-titling/build/index.css

@@ -0,0 +1,12 @@
+/*!****************************************************************************************************************************************************************************************************************************************!*\
+  !*** 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/editor.scss ***!
+  \****************************************************************************************************************************************************************************************************************************************/
+.homegrade-blocks-staff-list .homegrade-blocks-staff-list__staff-list {
+  display: unset;
+}
+.homegrade-blocks-staff-list .block-editor-block-list__layout {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/*# sourceMappingURL=index.css.map*/

blocks/section-titling/build/index.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.css","mappings":";;;AACC;EACC;AAAF;AAEC;EACC;EACA;AAAF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-staff-list {\r\n\t.homegrade-blocks-staff-list__staff-list {\r\n\t\tdisplay: unset;\r\n\t}\r\n\t.block-editor-block-list__layout {\r\n\t\tdisplay: grid;\r\n\t\tgrid-template-columns: repeat(3, 1fr);\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

blocks/section-titling/build/index.js

@@ -21,6 +21,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-left.js");
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-center.js");
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-right.js");
+
+
+
 
 
 
@@ -33,7 +39,8 @@ function Edit({
 }) {
   let {
     sectionTitle,
-    sectionSubtitle
+    sectionSubtitle,
+    textAlign
   } = attributes;
   function onChangeSectionTitle(sectionTitle) {
     setAttributes({
@@ -45,9 +52,32 @@ function Edit({
       sectionSubtitle
     });
   }
-  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_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "salut"))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  function onChangeTextAlignment(textAlign) {
+    setAttributes({
+      textAlign
+    });
+  }
+  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_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "salut"))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Toolbar, {
+    label: "Options"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarDropdownMenu, {
+    icon: textAlign === "left" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"] : textAlign === "center" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"] : _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
+    label: "Alignement du titrage",
+    controls: [{
+      title: "Gauche",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
+      onClick: () => onChangeTextAlignment("left")
+    }, {
+      title: "Centré",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
+      onClick: () => onChangeTextAlignment("center")
+    }, {
+      title: "Droite",
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
+      onClick: () => onChangeTextAlignment("right")
+    }]
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
-      className: `section_titling`
+      className: `section_titling section_titling--${textAlign}`
     })
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, {
     value: sectionTitle,
@@ -118,11 +148,12 @@ function save({
 }) {
   let {
     sectionTitle,
-    sectionSubtitle
+    sectionSubtitle,
+    textAlign
   } = attributes;
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `section_titling`
+      className: `section_titling section_titling--${textAlign}`
     })
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
     value: sectionTitle,
@@ -192,6 +223,99 @@ const header = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)
 
 /***/ }),
 
+/***/ "../../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":
 /*!*************************************!*\
   !*** external ["wp","blockEditor"] ***!
@@ -258,7 +382,7 @@ module.exports = window["wp"]["primitives"];
   \************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/section-titling","version":"0.1.0","title":"Titre de section","category":"homegrade-blocks","description":"Pour insérer un bloc de titrage (dans une grey-box ou une white-box) ","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"sectionTitle":{"type":"string"},"sectionSubtitle":{"type":"string"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/section-titling","version":"0.1.0","title":"Titre de section","category":"homegrade-blocks","description":"Pour insérer un bloc de titrage (dans une grey-box ou une white-box) ","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"sectionTitle":{"type":"string"},"sectionSubtitle":{"type":"string"},"textAlign":{"type":"string","default":"left"}}}');
 
 /***/ })
 

blocks/section-titling/build/style-index.css

@@ -0,0 +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/style.scss ***!
+  \***************************************************************************************************************************************************************************************************************************************/
+

blocks/section-titling/src/block.json

@@ -19,6 +19,10 @@
 		},
 		"sectionSubtitle": {
 			"type": "string"
+		},
+		"textAlign": {
+			"type": "string",
+			"default": "left"
 		}
 	}
 }

blocks/section-titling/src/edit.js

@@ -1,17 +1,23 @@
 import { __ } from "@wordpress/i18n";
 import "./editor.scss";
-
+import { BlockControls } from "@wordpress/block-editor";
 import {
 	useBlockProps,
 	RichText,
 	InnerBlocks,
 	InspectorControls,
 } from "@wordpress/block-editor";
-
+import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
+import {
+	more,
+	positionLeft,
+	positionCenter,
+	positionRight,
+} from "@wordpress/icons";
 import { Tip, PanelBody } from "@wordpress/components";
 
 export default function Edit({ attributes, setAttributes, clientId }) {
-	let { sectionTitle, sectionSubtitle } = attributes;
+	let { sectionTitle, sectionSubtitle, textAlign } = attributes;
 
 	function onChangeSectionTitle(sectionTitle) {
 		setAttributes({ sectionTitle });
@@ -20,6 +26,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 		setAttributes({ sectionSubtitle });
 	}
 
+	function onChangeTextAlignment(textAlign) {
+		setAttributes({ textAlign });
+	}
+
 	return (
 		<>
 			<InspectorControls>
@@ -27,9 +37,41 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 					<Tip>salut</Tip>
 				</PanelBody>
 			</InspectorControls>
+
+			<BlockControls>
+				<Toolbar label="Options">
+					<ToolbarDropdownMenu
+						icon={
+							textAlign === "left"
+								? positionLeft
+								: textAlign === "center"
+								? positionCenter
+								: positionRight
+						}
+						label="Alignement du titrage"
+						controls={[
+							{
+								title: "Gauche",
+								icon: positionLeft,
+								onClick: () => onChangeTextAlignment("left"),
+							},
+							{
+								title: "Centré",
+								icon: positionCenter,
+								onClick: () => onChangeTextAlignment("center"),
+							},
+							{
+								title: "Droite",
+								icon: positionRight,
+								onClick: () => onChangeTextAlignment("right"),
+							},
+						]}
+					/>
+				</Toolbar>
+			</BlockControls>
 			<div
 				{...useBlockProps({
-					className: `section_titling`,
+					className: `section_titling section_titling--${textAlign}`,
 				})}
 			>
 				<RichText

blocks/section-titling/src/save.js

@@ -1,12 +1,12 @@
 import { useBlockProps, RichText } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
-	let { sectionTitle, sectionSubtitle } = attributes;
+	let { sectionTitle, sectionSubtitle, textAlign } = attributes;
 
 	return (
 		<div
 			{...useBlockProps.save({
-				className: `section_titling`,
+				className: `section_titling section_titling--${textAlign}`,
 			})}
 		>
 			<RichText.Content