handling blok redhydratation

blocks/vocabulaire-summary/build/block.json

@@ -23,6 +23,10 @@
     "tooltipWords": {
       "type": "array",
       "default": []
+    },
+    "vocabulairesPostsIds": {
+      "type": "array",
+      "default": []
     }
   }
 }

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' => '5051d822b38f2dd8e9ad');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '26852ebc6e130b4f3af8');

blocks/vocabulaire-summary/build/index.js

@@ -100,46 +100,8 @@ function Edit({
   let {
     tooltipWords
   } = attributes;
-  console.log("tooltipWords", tooltipWords);
+  console.log("tooltipWords ATTRIBUTES", tooltipWords);
   let [hasFetchedDatas, setHasFetchedDatas] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useState)(false);
-  function CurrentThematiqueDisplay({
-    id
-  }) {
-    const {
-      record,
-      isResolving
-    } = (0,_wordpress_core_data__WEBPACK_IMPORTED_MODULE_4__.useEntityRecord)("taxonomy", "thematiques", id);
-    if (isResolving) {
-      return "Loading...";
-    }
-    if (!record) {
-      return "no post...";
-    }
-    return record.name;
-  }
-  function getCurrentThematique(id) {
-    const {
-      record,
-      isResolving
-    } = (0,_wordpress_core_data__WEBPACK_IMPORTED_MODULE_4__.useEntityRecord)("taxonomy", "thematiques", id);
-    if (isResolving) {
-      return "Loading...";
-    }
-    if (!record) {
-      return "no post...";
-    }
-    return record;
-  }
-  function filterToolTipsArray(tooltipWords) {
-    const filteredTooltipWords = [];
-    tooltipWords.forEach(tooltipWord => {
-      const existingTooltip = filteredTooltipWords.find(item => item.tooltipID === tooltipWord.tooltipID);
-      if (!existingTooltip) {
-        filteredTooltipWords.push(tooltipWord);
-      }
-    });
-    return filteredTooltipWords;
-  }
   function parseContentTooltips(editorContent) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(editorContent, "text/html");
@@ -170,13 +132,32 @@ function Edit({
     });
     return blocksTooltipWords;
   }
-  function buildTooltipWords() {
+  function filterToolTipsArray(tooltipWords) {
+    const filteredTooltipWords = Array.from(new Map(tooltipWords.map(tooltipWord => [tooltipWord.tooltipID, tooltipWord])).values());
+    return filteredTooltipWords;
+    // const filteredTooltipWords = [];
+
+    // tooltipWords.forEach((tooltipWord) => {
+    // 	const existingTooltip = filteredTooltipWords.find(
+    // 		(item) => item.tooltipID === tooltipWord.tooltipID,
+    // 	);
+
+    // 	if (!existingTooltip) {
+    // 		filteredTooltipWords.push(tooltipWord);
+    // 	}
+    // });
+  }
+  function parseTooltipWords() {
     let newParsedTooltipWords = parseContentTooltips(currentPost.content);
     let newBlocksTooltipWords = parseBlocksTooltips(currentBlocks);
     let allTooltipWords = [...newParsedTooltipWords, ...newBlocksTooltipWords];
     const filteredTooltipWords = filterToolTipsArray(allTooltipWords);
     return filteredTooltipWords;
   }
+  function buildTooltipWordsIdArray(tooltipsArray) {
+    const tooltipWordsIds = tooltipsArray.map(tooltipWord => tooltipWord.tooltipID);
+    return tooltipWordsIds;
+  }
   function compareHasNewVocabularyWord(previousWords, newWords) {
     return !(JSON.stringify(previousWords) === JSON.stringify(newWords));
   }
@@ -185,11 +166,21 @@ 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]);
+  const tooltipWordsIds = buildTooltipWordsIdArray(tooltipWords);
+  const vocabulairePosts = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_6__.useSelect)(select => {
+    if (!tooltipWordsIds.length) return [];
+    return select("core").getEntityRecords("postType", "vocabulaire", {
+      per_page: -1,
+      include: tooltipWordsIds
+    });
+  }, [tooltipWordsIds]);
+  console.log("vocabulairePosts", vocabulairePosts);
   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) {
-      const newTooltipWords = buildTooltipWords();
+      const newTooltipWords = parseTooltipWords();
+      const newTooltipWordsDatas = buildTooltipWordsIdArray(newTooltipWords);
       if (compareHasNewVocabularyWord(tooltipWords, newTooltipWords)) {
         setAttributes({
           tooltipWords: newTooltipWords
@@ -203,9 +194,9 @@ function Edit({
     })
   }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", {
     className: "homegrade-blocks-vocabulaire-summary__title"
-  }, localBlockName + " — ", currentThematique && currentThematique.name ? currentThematique.name : "...pas de thématique"), tooltipWords && tooltipWords.map(elem => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
+  }, localBlockName + " — ", currentThematique && currentThematique.name ? currentThematique.name : "...pas de thématique"), vocabulairePosts && vocabulairePosts.map(elem => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
     className: "question"
-  }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", null, elem.tooltipText, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", null, elem.title.rendered, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "open-close-icon"
   }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_7__["default"],
@@ -217,7 +208,7 @@ function Edit({
     class: " homegrade-dynamic-accordeon__content"
   }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
     className: "homegrade-blocks-vocabulaire-summary__content"
-  }, elem.tooltipDefinition))))));
+  }, elem.acf.definition))))));
 }
 
 /***/ }),
@@ -381,7 +372,7 @@ module.exports = window["wp"]["i18n"];
   \************************/
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/vocabulaire-summary","version":"0.1.0","title":"Vocabulaire de la fiche","category":"homegrade-blocks","icon":{"foreground":"#DF1E1E","src":"testimonial"},"description":"Pour afficher tout le vocabulaire contenu dans la fiche","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":{"tooltipWords":{"type":"array","default":[]}}}');
+module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/vocabulaire-summary","version":"0.1.0","title":"Vocabulaire de la fiche","category":"homegrade-blocks","icon":{"foreground":"#DF1E1E","src":"testimonial"},"description":"Pour afficher tout le vocabulaire contenu dans la fiche","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":{"tooltipWords":{"type":"array","default":[]},"vocabulairesPostsIds":{"type":"array","default":[]}}}');
 
 /***/ })
 

blocks/vocabulaire-summary/build/render.php

@@ -13,12 +13,7 @@ endif;
 
 global $post;
 $thematique = get_the_terms($post->ID, 'thematiques')[0] ?? null;
-
-
-write_log($tooltipWords);
-
 ?>
-
 <?php
 
 ?>

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

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

blocks/vocabulaire-summary/build/view.js

@@ -1,54 +0,0 @@
-/******/ (() => { // 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

@@ -1 +0,0 @@
-{"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/src/block.json

@@ -23,6 +23,10 @@
 		"tooltipWords": {
 			"type": "array",
 			"default": []
+		},
+		"vocabulairesPostsIds": {
+			"type": "array",
+			"default": []
 		}
 	}
 }

blocks/vocabulaire-summary/src/edit.js

@@ -11,56 +11,10 @@ import { getAdminLanguageFromCookie } from "../../utilities.js";
 
 export default function Edit({ attributes, setAttributes }) {
 	let { tooltipWords } = attributes;
+	console.log("tooltipWords ATTRIBUTES", tooltipWords);
 
-	console.log("tooltipWords", tooltipWords);
 	let [hasFetchedDatas, setHasFetchedDatas] = useState(false);
 
-	function CurrentThematiqueDisplay({ id }) {
-		const { record, isResolving } = useEntityRecord(
-			"taxonomy",
-			"thematiques",
-			id,
-		);
-
-		if (isResolving) {
-			return "Loading...";
-		}
-		if (!record) {
-			return "no post...";
-		}
-		return record.name;
-	}
-	function getCurrentThematique(id) {
-		const { record, isResolving } = useEntityRecord(
-			"taxonomy",
-			"thematiques",
-			id,
-		);
-
-		if (isResolving) {
-			return "Loading...";
-		}
-		if (!record) {
-			return "no post...";
-		}
-		return record;
-	}
-
-	function filterToolTipsArray(tooltipWords) {
-		const filteredTooltipWords = [];
-
-		tooltipWords.forEach((tooltipWord) => {
-			const existingTooltip = filteredTooltipWords.find(
-				(item) => item.tooltipID === tooltipWord.tooltipID,
-			);
-
-			if (!existingTooltip) {
-				filteredTooltipWords.push(tooltipWord);
-			}
-		});
-
-		return filteredTooltipWords;
-	}
 	function parseContentTooltips(editorContent) {
 		const parser = new DOMParser();
 		const doc = parser.parseFromString(editorContent, "text/html");
@@ -100,13 +54,42 @@ export default function Edit({ attributes, setAttributes }) {
 
 		return blocksTooltipWords;
 	}
-	function buildTooltipWords() {
+
+	function filterToolTipsArray(tooltipWords) {
+		const filteredTooltipWords = Array.from(
+			new Map(
+				tooltipWords.map((tooltipWord) => [tooltipWord.tooltipID, tooltipWord]),
+			).values(),
+		);
+
+		return filteredTooltipWords;
+		// const filteredTooltipWords = [];
+
+		// tooltipWords.forEach((tooltipWord) => {
+		// 	const existingTooltip = filteredTooltipWords.find(
+		// 		(item) => item.tooltipID === tooltipWord.tooltipID,
+		// 	);
+
+		// 	if (!existingTooltip) {
+		// 		filteredTooltipWords.push(tooltipWord);
+		// 	}
+		// });
+	}
+	function parseTooltipWords() {
 		let newParsedTooltipWords = parseContentTooltips(currentPost.content);
 		let newBlocksTooltipWords = parseBlocksTooltips(currentBlocks);
+
 		let allTooltipWords = [...newParsedTooltipWords, ...newBlocksTooltipWords];
 		const filteredTooltipWords = filterToolTipsArray(allTooltipWords);
+
 		return filteredTooltipWords;
 	}
+	function buildTooltipWordsIdArray(tooltipsArray) {
+		const tooltipWordsIds = tooltipsArray.map(
+			(tooltipWord) => tooltipWord.tooltipID,
+		);
+		return tooltipWordsIds;
+	}
 
 	function compareHasNewVocabularyWord(previousWords, newWords) {
 		return !(JSON.stringify(previousWords) === JSON.stringify(newWords));
@@ -133,12 +116,26 @@ export default function Edit({ attributes, setAttributes }) {
 			),
 		[currentTaxonomies],
 	);
+	const tooltipWordsIds = buildTooltipWordsIdArray(tooltipWords);
+
+	const vocabulairePosts = useSelect(
+		(select) => {
+			if (!tooltipWordsIds.length) return [];
+			return select("core").getEntityRecords("postType", "vocabulaire", {
+				per_page: -1,
+				include: tooltipWordsIds,
+			});
+		},
+		[tooltipWordsIds],
+	);
+	console.log("vocabulairePosts", vocabulairePosts);
 
 	const currentLang = getAdminLanguageFromCookie("wp-wpml_current_language");
 	const localBlockName = currentLang === "fr" ? "Vocabulaire" : "Woordenschat";
 	useEffect(() => {
 		if (currentPost.content && currentBlocks) {
-			const newTooltipWords = buildTooltipWords();
+			const newTooltipWords = parseTooltipWords();
+			const newTooltipWordsDatas = buildTooltipWordsIdArray(newTooltipWords);
 
 			if (compareHasNewVocabularyWord(tooltipWords, newTooltipWords)) {
 				setAttributes({ tooltipWords: newTooltipWords });
@@ -158,11 +155,12 @@ export default function Edit({ attributes, setAttributes }) {
 					? currentThematique.name
 					: "...pas de thématique"}
 			</h2>
-			{tooltipWords &&
+
-				tooltipWords.map((elem) => (
+			{vocabulairePosts &&
+				vocabulairePosts.map((elem) => (
 					<details className="question">
 						<summary>
-							{elem.tooltipText}
+							{elem.title.rendered}
 							<div className="open-close-icon">
 								<img src={chevronDown} className="open-close-cta" alt="" />
 							</div>
@@ -170,7 +168,7 @@ export default function Edit({ attributes, setAttributes }) {
 						<div className="homegrade-blocks-vocabulaire-summary__content-wrapper homegrade-dynamic-accordeon__content-wrapper">
 							<div class=" homegrade-dynamic-accordeon__content">
 								<p className="homegrade-blocks-vocabulaire-summary__content">
-									{elem.tooltipDefinition}
+									{elem.acf.definition}
 								</p>
 							</div>
 						</div>

blocks/vocabulaire-summary/src/render.php

@@ -13,12 +13,7 @@ endif;
 
 global $post;
 $thematique = get_the_terms($post->ID, 'thematiques')[0] ?? null;
-
-
-write_log($tooltipWords);
-
 ?>
-
 <?php
 
 ?>