refactoring block to be dynamic and enqueuing translations

blocks/plus-loin/build/block.json

@@ -14,5 +14,6 @@
   "editorScript": "file:./index.js",
   "editorStyle": "file:./index.css",
   "style": "file:./style-index.css",
+  "render": "file:./render.php",
   "attributes": {}
 }

blocks/plus-loin/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'b0b53a6fd3aa0f022ae5');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b667c1fff3778109862a');

blocks/plus-loin/build/index.css

@@ -1,13 +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/editor.scss ***!
   \****************************************************************************************************************************************************************************************************************************************/
-/**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-multiblocks {
-  border: 1px dotted #f00;
-}
 
-/*# sourceMappingURL=index.css.map*/

blocks/plus-loin/build/index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tborder: 1px dotted #f00;\n}\n"],"names":[],"sourceRoot":""}

blocks/plus-loin/build/index.js

@@ -181,8 +181,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _img_icon_bulb_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./img/icon_bulb.svg */ "./src/img/icon_bulb.svg");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__);
+
 
 
 
@@ -196,14 +199,32 @@ function Edit({
   attributes,
   setAttributes
 }) {
+  function getAdminLanguageFromCookie(c_name) {
+    var c_value = document.cookie,
+      c_start = c_value.indexOf(" " + c_name + "=");
+    if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
+    if (c_start == -1) {
+      c_value = null;
+    } else {
+      c_start = c_value.indexOf("=", c_start) + 1;
+      var c_end = c_value.indexOf(";", c_start);
+      if (c_end == -1) {
+        c_end = c_value.length;
+      }
+      c_value = unescape(c_value.substring(c_start, c_end));
+    }
+    return c_value;
+  }
+  const currentLang = getAdminLanguageFromCookie("wp-wpml_current_language");
+  const localBlockName = currentLang === "fr" ? "Pour aller plus loin" : "Om verder te gaan";
   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)("section", {
     id: "aller-plus-loin",
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.useBlockProps)({
       className: `homegrade-blocks-plus-loin`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", {
+  }, localBlockName && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", {
     className: "homegrade-blocks-plus-loin__block-title"
-  }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.InnerBlocks, {
+  }, localBlockName), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.InnerBlocks, {
     allowedBlocks: ["core/paragraph", "homegrade-blocks/content-heading", "core/list", "core/buttons", "core/button", "core/colums", "core/colum", "homegrade-content-blocks/content-heading"],
     template: [["core/paragraph"]]
   })));
@@ -271,14 +292,7 @@ function save({
   attributes,
   setAttributes
 }) {
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
+  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_1__.InnerBlocks.Content, null));
-    id: "aller-plus-loin",
-    ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `homegrade-blocks-plus-loin`
-    })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", {
-    className: "homegrade-blocks-plus-loin__block-title"
-  }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
 }
 
 /***/ }),
@@ -347,6 +361,16 @@ module.exports = window["wp"]["components"];
 
 /***/ }),
 
+/***/ "@wordpress/data":
+/*!******************************!*\
+  !*** external ["wp","data"] ***!
+  \******************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["data"];
+
+/***/ }),
+
 /***/ "@wordpress/element":
 /*!*********************************!*\
   !*** external ["wp","element"] ***!
@@ -373,7 +397,7 @@ module.exports = window["wp"]["i18n"];
   \************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/plus-loin","version":"0.1.0","title":"Plus loin","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations pour aller plus loin","supports":{"html":false,"multiple":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/plus-loin","version":"0.1.0","title":"Plus loin","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations pour aller plus loin","supports":{"html":false,"multiple":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{}}');
 
 /***/ })
 

blocks/plus-loin/build/render.php

@@ -0,0 +1,15 @@
+<?php
+// echo '<pre>';
+// print_r($attributes);
+// echo '</pre>';
+?>
+
+<section id="aller-plus-loin" <?php echo get_block_wrapper_attributes(['class' => 'homegrade-blocks-plus-loin']); ?>>
+	<h2 class="homegrade-blocks-plus-loin__block-title">
+		<?php echo
+		__("Pour aller plus loin", "homegrade-blocks")
+		?>
+	</h2>
+	<?php echo $content; ?>
+
+</section>

blocks/plus-loin/build/style-index.css

@@ -1,16 +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 ***!
   \***************************************************************************************************************************************************************************************************************************************/
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-multiblocks {
-  background-color: #21759b;
-  color: #fff;
-  padding: 2px;
-}
 
-/*# sourceMappingURL=style-index.css.map*/

blocks/plus-loin/build/style-index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"sourceRoot":""}

blocks/plus-loin/src/block.json

@@ -14,5 +14,6 @@
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
+	"render": "file:./render.php",
 	"attributes": {}
 }

blocks/plus-loin/src/edit.js

@@ -5,19 +5,40 @@ import chainIcon from "./img/icon_block_chain.svg";
 import houseIcon from "./img/icon_house.svg";
 import bulbIcon from "./img/icon_bulb.svg";
 import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
-
+import { useSelect } from "@wordpress/data";
 import { ToolbarButton, ToggleControl, PanelBody } from "@wordpress/components";
 
 export default function Edit({ attributes, setAttributes }) {
+	function getAdminLanguageFromCookie(c_name) {
+		var c_value = document.cookie,
+			c_start = c_value.indexOf(" " + c_name + "=");
+		if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
+		if (c_start == -1) {
+			c_value = null;
+		} else {
+			c_start = c_value.indexOf("=", c_start) + 1;
+			var c_end = c_value.indexOf(";", c_start);
+			if (c_end == -1) {
+				c_end = c_value.length;
+			}
+			c_value = unescape(c_value.substring(c_start, c_end));
+		}
+		return c_value;
+	}
+	const currentLang = getAdminLanguageFromCookie("wp-wpml_current_language");
+	const localBlockName =
+		currentLang === "fr" ? "Pour aller plus loin" : "Om verder te gaan";
 	return (
 		<>
 			<section
 				id="aller-plus-loin"
 				{...useBlockProps({ className: `homegrade-blocks-plus-loin` })}
 			>
-				<h2 className="homegrade-blocks-plus-loin__block-title">
+				{localBlockName && (
-					{__("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")}
+					<h2 className="homegrade-blocks-plus-loin__block-title">
-				</h2>
+						{localBlockName}
+					</h2>
+				)}
 
 				<InnerBlocks
 					allowedBlocks={[

blocks/plus-loin/src/editor.scss

@@ -1,9 +0,0 @@
-/**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-create-block-multiblocks {
-	border: 1px dotted #f00;
-}

blocks/plus-loin/src/render.php

@@ -0,0 +1,15 @@
+<?php
+// echo '<pre>';
+// print_r($attributes);
+// echo '</pre>';
+?>
+
+<section id="aller-plus-loin" <?php echo get_block_wrapper_attributes(['class' => 'homegrade-blocks-plus-loin']); ?>>
+	<h2 class="homegrade-blocks-plus-loin__block-title">
+		<?php echo
+		__("Pour aller plus loin", "homegrade-blocks")
+		?>
+	</h2>
+	<?php echo $content; ?>
+
+</section>

blocks/plus-loin/src/save.js

@@ -3,17 +3,8 @@ import { __ } from "@wordpress/i18n";
 
 export default function save({ attributes, setAttributes }) {
 	return (
-		<section
+		<>
-			id="aller-plus-loin"
-			{...useBlockProps.save({
-				className: `homegrade-blocks-plus-loin`,
-			})}
-		>
-			<h2 className="homegrade-blocks-plus-loin__block-title">
-				{__("Pour aller plus loin", "homegrade-blocks__texte-fonctionnel")}
-			</h2>
-
 			<InnerBlocks.Content />
-		</section>
+		</>
 	);
 }

blocks/plus-loin/src/style.scss

@@ -1,12 +0,0 @@
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-create-block-multiblocks {
-	background-color: #21759b;
-	color: #fff;
-	padding: 2px;
-}