handling block definitions and titles dynamic rehydration

This commit is contained in:
Antoine M 2024-07-10 10:15:33 +02:00
parent 52e41f0cee
commit 0c53c32c23
11 changed files with 193 additions and 47 deletions

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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(() => {

View File

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

View File

@ -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();
// });