Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handling blok redhydratation

Browse Source
This commit is contained in:
Antoine M 2024-07-10 13:18:52 +02:00
parent 0c53c32c23
commit 0a53199b3d
11 changed files with 97 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
blocks/vocabulaire-summary/build/block.json
View File

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

2
blocks/vocabulaire-summary/build/index.asset.php
View File

@ -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');

81
blocks/vocabulaire-summary/build/index.js
View File

@ -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":[]}}}');
/***/ })

2
blocks/vocabulaire-summary/build/index.js.map
View File

File diff suppressed because one or more lines are too long

5
blocks/vocabulaire-summary/build/render.php
View File

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

1
blocks/vocabulaire-summary/build/view.asset.php
View File

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

54
blocks/vocabulaire-summary/build/view.js
View File

@ -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

1
blocks/vocabulaire-summary/build/view.js.map
View File

@ -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":""}

4
blocks/vocabulaire-summary/src/block.json
View File

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

104
blocks/vocabulaire-summary/src/edit.js
View File

@ -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>

5
blocks/vocabulaire-summary/src/render.php
View File

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