handling block definitions and titles dynamic rehydration

blocks/vocabulaire-summary/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '9fc901c23a6f2db0e80d');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '5051d822b38f2dd8e9ad');

blocks/vocabulaire-summary/build/index.js

@@ -2,6 +2,61 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "../utilities.js":
+/*!***********************!*\
+  !*** ../utilities.js ***!
+  \***********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   cleanString: () => (/* binding */ cleanString),
+/* harmony export */   getAdminLanguageFromCookie: () => (/* binding */ getAdminLanguageFromCookie),
+/* harmony export */   getThematiqueFamilySlug: () => (/* binding */ getThematiqueFamilySlug)
+/* harmony export */ });
+function getThematiqueFamilySlug(thematique_slug) {
+  switch (thematique_slug) {
+    case "energie":
+    case "urbanisme":
+      return "energies-urbanisme";
+    case "acoustique":
+    case "petites-coproprietes":
+      return "acoustique-coproprietes";
+    case "isolation":
+    case "au-quotidien":
+      return "isolation-quotidien";
+    case "energies":
+    case "urbanisme":
+      return "energies-urbanisme";
+    case "patrimoine":
+    case "sante-et-securite":
+      return "patrimoine-sante-securite";
+    case "location":
+      return "location";
+  }
+}
+function cleanString(string) {
+  return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().split(" ").join("-");
+}
+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;
+}
+
+/***/ }),
+
 /***/ "./src/edit.js":
 /*!*********************!*\
   !*** ./src/edit.js ***!
@@ -26,6 +81,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
 /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./img/chevron_down.svg */ "./src/img/chevron_down.svg");
+/* harmony import */ var _utilities_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utilities.js */ "../utilities.js");
+
 
 
 
@@ -43,6 +100,7 @@ function Edit({
   let {
     tooltipWords
   } = attributes;
+  console.log("tooltipWords", tooltipWords);
   let [hasFetchedDatas, setHasFetchedDatas] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useState)(false);
   function CurrentThematiqueDisplay({
     id
@@ -127,23 +185,7 @@ function Edit({
   const currentTaxonomies = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_6__.useSelect)(select => select("core/editor").getCurrentPostAttribute("thematiques"));
   let currentThematique = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_6__.useSelect)(select => select("core").getEntityRecord("taxonomy", "thematiques", currentTaxonomies[0] // or currentPost.thematiques[0] works as well
   ), [currentTaxonomies]);
-  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 currentLang = (0,_utilities_js__WEBPACK_IMPORTED_MODULE_8__.getAdminLanguageFromCookie)("wp-wpml_current_language");
   const localBlockName = currentLang === "fr" ? "Vocabulaire" : "Woordenschat";
   (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useEffect)(() => {
     if (currentPost.content && currentBlocks) {

blocks/vocabulaire-summary/build/render.php

@@ -14,17 +14,26 @@ endif;
 global $post;
 $thematique = get_the_terms($post->ID, 'thematiques')[0] ?? null;
 
+
+write_log($tooltipWords);
+
 ?>
 
+<?php
+
+?>
 <section id="vocabulaire-summary" class="homegrade-blocks-vocabulaire-summary">
 	<h2 className="homegrade-blocks-vocabulaire-summary__title">
 		<?php echo __("Vocabulaire", "homegrade-blocks") ?><?php echo  $thematique && $thematique->name ?  " — " . $thematique->name : ""; ?>
 	</h2>
-
 	<?php foreach ($tooltipWords as $word) : ?>
-		<details class="question homegrade-dynamic-accordeon">
+		<?php
+		$wordUpToDateTitle  = get_the_title($word['tooltipID']);
+		$wordUpToDateDefinition  = get_field('definition', $word['tooltipID']);
+		?>
+		<details class="question homegrade-dynamic-accordeon" data-definition-id="<?php echo $word['tooltipID'] ?>">
 			<summary>
-				<?php echo $word['tooltipText']; ?>
+				<?php echo $wordUpToDateTitle; ?>
 				<div class="open-close-icon">
 					<img src="<?php echo plugins_url('/', dirname(__FILE__)) . 'src/img/chevron_down.svg' ?>" class="open-close-cta" alt="" />
 				</div>
@@ -32,7 +41,7 @@ $thematique = get_the_terms($post->ID, 'thematiques')[0] ?? null;
 			<div class="homegrade-blocks-vocabulaire-summary__content-wrapper homegrade-dynamic-accordeon__content-wrapper">
 				<div class=" homegrade-dynamic-accordeon__content">
 					<p class="homegrade-blocks-vocabulaire-summary__content">
-						<?php echo $word['tooltipDefinition']; ?>
+						<?php echo $wordUpToDateDefinition; ?>
 					</p>
 				</div>
 			</div>

blocks/vocabulaire-summary/build/view.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '399a1e7def5ebaedbda7');

blocks/vocabulaire-summary/build/view.js

@@ -0,0 +1,54 @@
+/******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+/*!*********************!*\
+  !*** ./src/view.js ***!
+  \*********************/
+// NO NEEDED ANYMORE BECAUSE DIRECTLY UPDATED BY PHP
+
+// async function updateWordsDefinitions() {
+// 	const vocabularySummary = document.querySelector("#vocabulaire-summary");
+// 	let tooltipWordsDefinition = vocabularySummary.querySelectorAll("details");
+
+// 	const vocabulairesPostsIds = Array.from(tooltipWordsDefinition).map(
+// 		(element) => element.getAttribute("data-definition-id"),
+// 	);
+
+// 	try {
+// 		const tooltipData = await getTooltipsDatas(vocabulairesPostsIds);
+
+// 		tooltipWordsDefinition.forEach((word, index) => {
+// 			const foundTooltipDatas = tooltipData.find(
+// 				(tooltip) =>
+// 					tooltip.id === parseInt(word.getAttribute("data-definition-id")),
+// 			);
+
+// 			const definitionText = word.querySelector(
+// 				".homegrade-blocks-vocabulaire-summary__content",
+// 			);
+// 			definitionText.textContent = foundTooltipDatas.acf.definition;
+// 		});
+// 	} catch (error) {
+// 		console.log("Something went wrong!", error);
+// 	}
+// }
+
+// async function getTooltipsDatas(vocabulairesPostsIds) {
+// 	try {
+// 		const response = await fetch(
+// 			`/wp-json/wp/v2/vocabulaire?include=${vocabulairesPostsIds.toString()}`,
+// 		);
+// 		if (!response.ok) {
+// 			throw new Error(`Request failed with status: ${response.status}`);
+// 		}
+// 		const data = await response.json();
+// 		return data;
+// 	} catch (err) {
+// 		throw err;
+// 	}
+// }
+// window.addEventListener("DOMContentLoaded", (event) => {
+// 	updateWordsDefinitions();
+// });
+/******/ })()
+;
+//# sourceMappingURL=view.js.map

blocks/vocabulaire-summary/build/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","mappings":";;;;;AAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,M","sources":["webpack://vocabulaire-summary/./src/view.js"],"sourcesContent":["// NO NEEDED ANYMORE BECAUSE DIRECTLY UPDATED BY PHP\r\n\r\n// async function updateWordsDefinitions() {\r\n// \tconst vocabularySummary = document.querySelector(\"#vocabulaire-summary\");\r\n// \tlet tooltipWordsDefinition = vocabularySummary.querySelectorAll(\"details\");\r\n\r\n// \tconst vocabulairesPostsIds = Array.from(tooltipWordsDefinition).map(\r\n// \t\t(element) => element.getAttribute(\"data-definition-id\"),\r\n// \t);\r\n\r\n// \ttry {\r\n// \t\tconst tooltipData = await getTooltipsDatas(vocabulairesPostsIds);\r\n\r\n// \t\ttooltipWordsDefinition.forEach((word, index) => {\r\n// \t\t\tconst foundTooltipDatas = tooltipData.find(\r\n// \t\t\t\t(tooltip) =>\r\n// \t\t\t\t\ttooltip.id === parseInt(word.getAttribute(\"data-definition-id\")),\r\n// \t\t\t);\r\n\r\n// \t\t\tconst definitionText = word.querySelector(\r\n// \t\t\t\t\".homegrade-blocks-vocabulaire-summary__content\",\r\n// \t\t\t);\r\n// \t\t\tdefinitionText.textContent = foundTooltipDatas.acf.definition;\r\n// \t\t});\r\n// \t} catch (error) {\r\n// \t\tconsole.log(\"Something went wrong!\", error);\r\n// \t}\r\n// }\r\n\r\n// async function getTooltipsDatas(vocabulairesPostsIds) {\r\n// \ttry {\r\n// \t\tconst response = await fetch(\r\n// \t\t\t`/wp-json/wp/v2/vocabulaire?include=${vocabulairesPostsIds.toString()}`,\r\n// \t\t);\r\n// \t\tif (!response.ok) {\r\n// \t\t\tthrow new Error(`Request failed with status: ${response.status}`);\r\n// \t\t}\r\n// \t\tconst data = await response.json();\r\n// \t\treturn data;\r\n// \t} catch (err) {\r\n// \t\tthrow err;\r\n// \t}\r\n// }\r\n// window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n// \tupdateWordsDefinitions();\r\n// });\r\n"],"names":[],"sourceRoot":""}

blocks/vocabulaire-summary/package.json

@@ -5,10 +5,6 @@
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"main": "build/index.js",
-	"entry": {
-		"index": "./src/index.js",
-		"frontend": "./src/frontend.js"
-	},
 	"scripts": {
 		"build": "wp-scripts build",
 		"format": "wp-scripts format",

blocks/vocabulaire-summary/src/edit.js

@@ -7,9 +7,12 @@ import { useSelect, useDispatch } from "@wordpress/data";
 import { useEffect } from "@wordpress/element";
 import { useEntityProp } from "@wordpress/core-data";
 import chevronDown from "./img/chevron_down.svg";
+import { getAdminLanguageFromCookie } from "../../utilities.js";
 
 export default function Edit({ attributes, setAttributes }) {
 	let { tooltipWords } = attributes;
+
+	console.log("tooltipWords", tooltipWords);
 	let [hasFetchedDatas, setHasFetchedDatas] = useState(false);
 
 	function CurrentThematiqueDisplay({ id }) {
@@ -130,22 +133,7 @@ export default function Edit({ attributes, setAttributes }) {
 			),
 		[currentTaxonomies],
 	);
-	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" ? "Vocabulaire" : "Woordenschat";
 	useEffect(() => {

blocks/vocabulaire-summary/src/render.php

@@ -14,17 +14,26 @@ endif;
 global $post;
 $thematique = get_the_terms($post->ID, 'thematiques')[0] ?? null;
 
+
+write_log($tooltipWords);
+
 ?>
 
+<?php
+
+?>
 <section id="vocabulaire-summary" class="homegrade-blocks-vocabulaire-summary">
 	<h2 className="homegrade-blocks-vocabulaire-summary__title">
 		<?php echo __("Vocabulaire", "homegrade-blocks") ?><?php echo  $thematique && $thematique->name ?  " — " . $thematique->name : ""; ?>
 	</h2>
-
 	<?php foreach ($tooltipWords as $word) : ?>
-		<details class="question homegrade-dynamic-accordeon">
+		<?php
+		$wordUpToDateTitle  = get_the_title($word['tooltipID']);
+		$wordUpToDateDefinition  = get_field('definition', $word['tooltipID']);
+		?>
+		<details class="question homegrade-dynamic-accordeon" data-definition-id="<?php echo $word['tooltipID'] ?>">
 			<summary>
-				<?php echo $word['tooltipText']; ?>
+				<?php echo $wordUpToDateTitle; ?>
 				<div class="open-close-icon">
 					<img src="<?php echo plugins_url('/', dirname(__FILE__)) . 'src/img/chevron_down.svg' ?>" class="open-close-cta" alt="" />
 				</div>
@@ -32,7 +41,7 @@ $thematique = get_the_terms($post->ID, 'thematiques')[0] ?? null;
 			<div class="homegrade-blocks-vocabulaire-summary__content-wrapper homegrade-dynamic-accordeon__content-wrapper">
 				<div class=" homegrade-dynamic-accordeon__content">
 					<p class="homegrade-blocks-vocabulaire-summary__content">
-						<?php echo $word['tooltipDefinition']; ?>
+						<?php echo $wordUpToDateDefinition; ?>
 					</p>
 				</div>
 			</div>

blocks/vocabulaire-summary/src/view.js

@@ -0,0 +1,46 @@
+// NO NEEDED ANYMORE BECAUSE DIRECTLY UPDATED BY PHP
+
+// async function updateWordsDefinitions() {
+// 	const vocabularySummary = document.querySelector("#vocabulaire-summary");
+// 	let tooltipWordsDefinition = vocabularySummary.querySelectorAll("details");
+
+// 	const vocabulairesPostsIds = Array.from(tooltipWordsDefinition).map(
+// 		(element) => element.getAttribute("data-definition-id"),
+// 	);
+
+// 	try {
+// 		const tooltipData = await getTooltipsDatas(vocabulairesPostsIds);
+
+// 		tooltipWordsDefinition.forEach((word, index) => {
+// 			const foundTooltipDatas = tooltipData.find(
+// 				(tooltip) =>
+// 					tooltip.id === parseInt(word.getAttribute("data-definition-id")),
+// 			);
+
+// 			const definitionText = word.querySelector(
+// 				".homegrade-blocks-vocabulaire-summary__content",
+// 			);
+// 			definitionText.textContent = foundTooltipDatas.acf.definition;
+// 		});
+// 	} catch (error) {
+// 		console.log("Something went wrong!", error);
+// 	}
+// }
+
+// async function getTooltipsDatas(vocabulairesPostsIds) {
+// 	try {
+// 		const response = await fetch(
+// 			`/wp-json/wp/v2/vocabulaire?include=${vocabulairesPostsIds.toString()}`,
+// 		);
+// 		if (!response.ok) {
+// 			throw new Error(`Request failed with status: ${response.status}`);
+// 		}
+// 		const data = await response.json();
+// 		return data;
+// 	} catch (err) {
+// 		throw err;
+// 	}
+// }
+// window.addEventListener("DOMContentLoaded", (event) => {
+// 	updateWordsDefinitions();
+// });