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

refining blocks and first version of summary

Browse Source
This commit is contained in:
Antoine M 2023-08-24 18:24:59 +02:00
parent 601bf18cc3
commit 7440feadf3
22 changed files with 429 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/questions-container/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'f47ee4eb14a532a726cf');
<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '510a827284e76c648042');

4
blocks/questions-container/build/index.js
View File

@ -142,7 +142,9 @@ function Edit({
if (!relatedPostsOptions) {
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)("p", null, "chargement\u2026"));
}
console.log(relatedPostId);
// console.log(relatedPostId);
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_2__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Question Relié", "homegrade-blocks__texte-fonctionnel")
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.SelectControl, {

2
blocks/questions-container/build/index.js.map
View File

File diff suppressed because one or more lines are too long

2
blocks/questions-container/src/edit.js
View File

@ -144,8 +144,6 @@ export default function Edit({ attributes, setAttributes }) {
);
}
console.log(relatedPostId);
return (
<>
<InspectorControls>

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

@ -12,12 +12,17 @@
},
"textdomain": "homegrade-blocks",
"editorScript": "file:./index.js",
"script": "file:./frontend-file.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"attributes": {
"tooltipWords": {
"type": "array",
"default": []
},
"thematiqueName": {
"type": "string",
"default": ""
}
}
}

1
blocks/vocabulaire-summary/build/frontend-file.asset.php Normal file
View File

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

45
blocks/vocabulaire-summary/build/frontend-file.js Normal file
View File

@ -0,0 +1,45 @@
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!******************************!*\
!*** ./src/frontend-file.js ***!
\******************************/
window.addEventListener("DOMContentLoaded", event => {
// GETTING ELEMENTS FROM THE DOM
const vocabulaireSummary = document.querySelector(".homegrade-blocks-vocabulaire-summary");
const wordsDetails = vocabulaireSummary.querySelectorAll("details");
function openAccordion(wordDetail) {
let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper");
let contentDefinitionParagraph = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content");
wordDetail.setAttribute("open", "true");
contentDefinitionWrapper.style.height = contentDefinitionParagraph.offsetHeight + "px";
}
function closeAccordion(wordDetail) {
console.log("will close");
let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper");
contentDefinitionWrapper.style.height = "0px";
setTimeout(() => {
wordDetail.removeAttribute("open");
}, 300);
}
// HANDLING CLICK
function toggleActive(wordDetail) {
let isOpen = wordDetail.getAttribute("open");
if (isOpen == null) {
openAccordion(wordDetail);
}
if (isOpen == "true") {
closeAccordion(wordDetail);
}
}
// HANDLING CLICK
Array.from(wordsDetails).forEach(wordDetail => {
wordDetail.addEventListener("click", event => {
event.preventDefault();
toggleActive(wordDetail);
});
});
});
/******/ })()
;
//# sourceMappingURL=frontend-file.js.map

1
blocks/vocabulaire-summary/build/frontend-file.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"frontend-file.js","mappings":";;;;;AAAAA,MAAM,CAACC,gBAAgB,CAAC,kBAAkB,EAAGC,KAAK,IAAK;EACtD;EACA,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAChD,uCACD,CAAC;EACD,MAAMC,YAAY,GAAGH,kBAAkB,CAACI,gBAAgB,CAAC,SAAS,CAAC;EAEnE,SAASC,aAAaA,CAACC,UAAU,EAAE;IAClC,IAAIC,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IACD,IAAIM,0BAA0B,GAAGF,UAAU,CAACJ,aAAa,CACxD,gDACD,CAAC;IACDI,UAAU,CAACG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;IAEvCF,wBAAwB,CAACG,KAAK,CAACC,MAAM,GACpCH,0BAA0B,CAACI,YAAY,GAAG,IAAI;EAChD;EACA,SAASC,cAAcA,CAACP,UAAU,EAAE;IACnCQ,OAAO,CAACC,GAAG,CAAC,YAAY,CAAC;IACzB,IAAIR,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IAEDK,wBAAwB,CAACG,KAAK,CAACC,MAAM,GAAG,KAAK;IAE7CK,UAAU,CAAC,MAAM;MAChBV,UAAU,CAACW,eAAe,CAAC,MAAM,CAAC;IACnC,CAAC,EAAE,GAAG,CAAC;EACR;EACA;EACA,SAASC,YAAYA,CAACZ,UAAU,EAAE;IACjC,IAAIa,MAAM,GAAGb,UAAU,CAACc,YAAY,CAAC,MAAM,CAAC;IAC5C,IAAID,MAAM,IAAI,IAAI,EAAE;MACnBd,aAAa,CAACC,UAAU,CAAC;IAC1B;IACA,IAAIa,MAAM,IAAI,MAAM,EAAE;MACrBN,cAAc,CAACP,UAAU,CAAC;IAC3B;EACD;;EAEA;EACAe,KAAK,CAACC,IAAI,CAACnB,YAAY,CAAC,CAACoB,OAAO,CAAEjB,UAAU,IAAK;IAChDA,UAAU,CAACR,gBAAgB,CAAC,OAAO,EAAGC,KAAK,IAAK;MAC/CA,KAAK,CAACyB,cAAc,CAAC,CAAC;MACtBN,YAAY,CAACZ,UAAU,CAAC;IACzB,CAAC,CAAC;EACH,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://vocabulaire-summary/./src/frontend-file.js"],"sourcesContent":["window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\t// GETTING ELEMENTS FROM THE DOM\r\n\tconst vocabulaireSummary = document.querySelector(\r\n\t\t\".homegrade-blocks-vocabulaire-summary\"\r\n\t);\r\n\tconst wordsDetails = vocabulaireSummary.querySelectorAll(\"details\");\r\n\r\n\tfunction openAccordion(wordDetail) {\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\t\tlet contentDefinitionParagraph = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content\"\r\n\t\t);\r\n\t\twordDetail.setAttribute(\"open\", \"true\");\r\n\r\n\t\tcontentDefinitionWrapper.style.height =\r\n\t\t\tcontentDefinitionParagraph.offsetHeight + \"px\";\r\n\t}\r\n\tfunction closeAccordion(wordDetail) {\r\n\t\tconsole.log(\"will close\");\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\r\n\t\tcontentDefinitionWrapper.style.height = \"0px\";\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\twordDetail.removeAttribute(\"open\");\r\n\t\t}, 300);\r\n\t}\r\n\t// HANDLING CLICK\r\n\tfunction toggleActive(wordDetail) {\r\n\t\tlet isOpen = wordDetail.getAttribute(\"open\");\r\n\t\tif (isOpen == null) {\r\n\t\t\topenAccordion(wordDetail);\r\n\t\t}\r\n\t\tif (isOpen == \"true\") {\r\n\t\t\tcloseAccordion(wordDetail);\r\n\t\t}\r\n\t}\r\n\r\n\t// HANDLING CLICK\r\n\tArray.from(wordsDetails).forEach((wordDetail) => {\r\n\t\twordDetail.addEventListener(\"click\", (event) => {\r\n\t\t\tevent.preventDefault();\r\n\t\t\ttoggleActive(wordDetail);\r\n\t\t});\r\n\t});\r\n});\r\n"],"names":["window","addEventListener","event","vocabulaireSummary","document","querySelector","wordsDetails","querySelectorAll","openAccordion","wordDetail","contentDefinitionWrapper","contentDefinitionParagraph","setAttribute","style","height","offsetHeight","closeAccordion","console","log","setTimeout","removeAttribute","toggleActive","isOpen","getAttribute","Array","from","forEach","preventDefault"],"sourceRoot":""}

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

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'eca7f67fbda9a9ec8501');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b45c406563e1d7762cf6');

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

@ -1 +1 @@
{"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":""}
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://vocabulaire-summary/./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":""}

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

@ -19,29 +19,55 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/core-data */ "@wordpress/core-data");
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__);
function Edit({
attributes,
setAttributes
function CurrentThematiqueDisplay({
id
}) {
let {
tooltipWords
} = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
console.log("#### EDITOR");
const editorContent = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core/editor").getCurrentPost().content);
if (editorContent) {
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 buildTooltipWords(editorContent) {
// Parsing Content
const parser = new DOMParser();
const doc = parser.parseFromString(editorContent, "text/html");
const domTooltipWords = doc.querySelectorAll(".tooltip-word");
const filteredTooltipWords = [];
// Looping over tooltip words and filtering duplicates
Array.from(domTooltipWords).forEach(tooltipWord => {
const tooltipID = tooltipWord.getAttribute("data-definition-id");
const tooltipText = tooltipWord.getAttribute("data-tooltip-word");
@ -55,20 +81,53 @@ function Edit({
});
}
});
if (!hasFetchedDatas) {
return filteredTooltipWords;
}
function Edit({
attributes,
setAttributes
}) {
let {
tooltipWords,
thematiqueName
} = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const currentPost = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core/editor").getCurrentPost());
const currentTaxonomies = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core/editor").getCurrentPostAttribute("thematiques"));
let fetchedCurrentThematique = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core").getEntityRecord("taxonomy", "thematiques", currentTaxonomies[0] // or currentPost.thematiques[0] works as well
), [currentTaxonomies]);
if (!currentPost || !currentPost.content) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "Loading...");
}
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (currentPost.content) {
let newTooltipWords = buildTooltipWords(currentPost.content);
setAttributes({
tooltipWords: filteredTooltipWords
tooltipWords: newTooltipWords
});
setHasFetchedDatas(true);
}
}
}, [currentPost]);
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (!fetchedCurrentThematique) return;
setAttributes({
thematiqueName: fetchedCurrentThematique.name
});
}, [fetchedCurrentThematique, currentPost]);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)()
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", null, "Vocabulaire"), tooltipWords && tooltipWords.map(elem => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
class: " question"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", null, elem.tooltipText, " "), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
class: "content"
}, elem.tooltipDefinition))));
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", {
className: "homegrade-blocks-vocabulaire-summary__title"
}, "Vocabulaire \u2014 ", thematiqueName), tooltipWords && tooltipWords.map(elem => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
className: " question"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", {
onClick: () => {
alert("hey");
}
}, elem.tooltipText, " "), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-vocabulaire-summary__content-wrapper"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "homegrade-blocks-vocabulaire-summary__content"
}, elem.tooltipDefinition)))));
}
/***/ }),
@ -148,15 +207,27 @@ function save({
setAttributes
}) {
let {
tooltipWords
tooltipWords,
thematiqueName
} = attributes;
function handleClick() {
alert("hey");
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save()
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", null, "Vocabulaire"), tooltipWords && tooltipWords.map(elem => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `vocabulaire-summary`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", {
className: "homegrade-blocks-vocabulaire-summary__title"
}, "Vocabulaire \u2014 ", thematiqueName), " ", tooltipWords && tooltipWords.map(elem => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
class: " question"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", null, elem.tooltipText, " "), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
class: "content"
}, elem.tooltipDefinition))));
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", {
onClick: handleClick
}, elem.tooltipText, " "), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-vocabulaire-summary__content-wrapper"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "homegrade-blocks-vocabulaire-summary__content"
}, elem.tooltipDefinition)))));
}
/***/ }),
@ -205,6 +276,16 @@ module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/core-data":
/*!**********************************!*\
!*** external ["wp","coreData"] ***!
\**********************************/
/***/ ((module) => {
module.exports = window["wp"]["coreData"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
@ -241,7 +322,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/vocabulaire-summary","version":"0.1.0","title":"Vocabulaire de la fiche","category":"homegrade-blocks","icon":"testimonial","description":"Pour afficher tout le vocabulaire contenu dans la fiche","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"tooltipWords":{"type":"array","default":[]}}}');
module.exports = 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":"testimonial","description":"Pour afficher tout le vocabulaire contenu dans la fiche","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","script":"file:./frontend-file.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"tooltipWords":{"type":"array","default":[]},"thematiqueName":{"type":"string","default":""}}}');
/***/ })
@ -400,7 +481,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || [];
/******/ var chunkLoadingGlobal = self["webpackChunkvocabulaire_summary"] = self["webpackChunkvocabulaire_summary"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();

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

File diff suppressed because one or more lines are too long

30
blocks/vocabulaire-summary/build/style-index.css
View File

@ -7,10 +7,32 @@
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
background-color: #21759b;
color: #fff;
padding: 2px;
.homegrade-blocks-vocabulaire-summary {
padding: 20px;
}
.homegrade-blocks-vocabulaire-summary details {
cursor: pointer;
padding: 20px;
background-color: white;
}
.homegrade-blocks-vocabulaire-summary summary {
margin: 0;
font-weight: bold;
}
.homegrade-blocks-vocabulaire-summary summary::marker {
content: none;
}
.homegrade-blocks-vocabulaire-summary__title {
margin: 0;
padding-bottom: 20px;
}
.homegrade-blocks-vocabulaire-summary__content {
padding-top: 30px;
}
.homegrade-blocks-vocabulaire-summary__content-wrapper {
overflow: hidden;
height: 0;
transition: height 0.3s ease-in-out;
}
/*# sourceMappingURL=style-index.css.map*/

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

@ -1 +1 @@
{"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":""}
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;AAAD;AACC;EACC;EACA;EACA;AACF;AACC;EACC;EACA;AACF;AAAE;EACC;AAEH;AACC;EACC;EACA;AACF;AACC;EACC;AACF;AACC;EACC;EACA;EACA;AACF,C","sources":["webpack://vocabulaire-summary/./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.homegrade-blocks-vocabulaire-summary {\n\tpadding: 20px;\n\tdetails {\n\t\tcursor: pointer;\n\t\tpadding: 20px;\n\t\tbackground-color: white;\n\t}\n\tsummary {\n\t\tmargin: 0;\n\t\tfont-weight: bold;\n\t\t&::marker {\n\t\t\tcontent: none;\n\t\t}\n\t}\n\t&__title {\n\t\tmargin: 0;\n\t\tpadding-bottom: 20px;\n\t}\n\t&__content {\n\t\tpadding-top: 30px;\n\t}\n\t&__content-wrapper {\n\t\toverflow: hidden;\n\t\theight: 0;\n\t\ttransition: height 0.3s ease-in-out;\n\t}\n}\n"],"names":[],"sourceRoot":""}

6
blocks/vocabulaire-summary/package.json
View File

@ -1,10 +1,14 @@
{
"name": "multiblocks",
"name": "vocabulaire-summary",
"version": "0.1.0",
"description": "Example block scaffolded with Create Block tool.",
"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",

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

@ -12,12 +12,17 @@
},
"textdomain": "homegrade-blocks",
"editorScript": "file:./index.js",
"script": "file:./frontend-file.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"attributes": {
"tooltipWords": {
"type": "array",
"default": []
},
"thematiqueName": {
"type": "string",
"default": ""
}
}
}

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

@ -1,24 +1,52 @@
import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
import { useEntityRecord } from "@wordpress/core-data";
import { useState } from "@wordpress/element";
import { useSelect } from "@wordpress/data";
import { useSelect, useDispatch } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
import { useEntityProp } from "@wordpress/core-data";
export default function Edit({ attributes, setAttributes }) {
let { tooltipWords } = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = useState(false);
console.log("#### EDITOR");
const editorContent = useSelect(
(select) => select("core/editor").getCurrentPost().content
function CurrentThematiqueDisplay({ id }) {
const { record, isResolving } = useEntityRecord(
"taxonomy",
"thematiques",
id
);
if (editorContent) {
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 buildTooltipWords(editorContent) {
// Parsing Content
const parser = new DOMParser();
const doc = parser.parseFromString(editorContent, "text/html");
const domTooltipWords = doc.querySelectorAll(".tooltip-word");
const filteredTooltipWords = [];
// Looping over tooltip words and filtering duplicates
Array.from(domTooltipWords).forEach((tooltipWord) => {
const tooltipID = tooltipWord.getAttribute("data-definition-id");
const tooltipText = tooltipWord.getAttribute("data-tooltip-word");
@ -38,20 +66,66 @@ export default function Edit({ attributes, setAttributes }) {
});
}
});
if (!hasFetchedDatas) {
setAttributes({ tooltipWords: filteredTooltipWords });
setHasFetchedDatas(true);
return filteredTooltipWords;
}
export default function Edit({ attributes, setAttributes }) {
let { tooltipWords, thematiqueName } = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = useState(false);
const currentPost = useSelect((select) =>
select("core/editor").getCurrentPost()
);
const currentTaxonomies = useSelect((select) =>
select("core/editor").getCurrentPostAttribute("thematiques")
);
let fetchedCurrentThematique = useSelect(
(select) =>
select("core").getEntityRecord(
"taxonomy",
"thematiques",
currentTaxonomies[0] // or currentPost.thematiques[0] works as well
),
[currentTaxonomies]
);
if (!currentPost || !currentPost.content) {
return <p>Loading...</p>;
}
useEffect(() => {
if (currentPost.content) {
let newTooltipWords = buildTooltipWords(currentPost.content);
setAttributes({ tooltipWords: newTooltipWords });
}
}, [currentPost]);
useEffect(() => {
if (!fetchedCurrentThematique) return;
setAttributes({ thematiqueName: fetchedCurrentThematique.name });
}, [fetchedCurrentThematique, currentPost]);
return (
<section {...useBlockProps()}>
<h3>Vocabulaire</h3>
<h3 className="homegrade-blocks-vocabulaire-summary__title">
Vocabulaire — {thematiqueName}
</h3>
{tooltipWords &&
tooltipWords.map((elem) => (
<details class=" question">
<summary>{elem.tooltipText} </summary>
<div class="content">{elem.tooltipDefinition}</div>
<details className=" question">
<summary
onClick={() => {
alert("hey");
}}
>
{elem.tooltipText}{" "}
</summary>
<div className="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p className="homegrade-blocks-vocabulaire-summary__content">
{elem.tooltipDefinition}
</p>
</div>
</details>
))}
</section>

50
blocks/vocabulaire-summary/src/frontend-file.js Normal file
View File

@ -0,0 +1,50 @@
window.addEventListener("DOMContentLoaded", (event) => {
// GETTING ELEMENTS FROM THE DOM
const vocabulaireSummary = document.querySelector(
".homegrade-blocks-vocabulaire-summary"
);
const wordsDetails = vocabulaireSummary.querySelectorAll("details");
function openAccordion(wordDetail) {
let contentDefinitionWrapper = wordDetail.querySelector(
".homegrade-blocks-vocabulaire-summary__content-wrapper"
);
let contentDefinitionParagraph = wordDetail.querySelector(
".homegrade-blocks-vocabulaire-summary__content"
);
wordDetail.setAttribute("open", "true");
contentDefinitionWrapper.style.height =
contentDefinitionParagraph.offsetHeight + "px";
}
function closeAccordion(wordDetail) {
console.log("will close");
let contentDefinitionWrapper = wordDetail.querySelector(
".homegrade-blocks-vocabulaire-summary__content-wrapper"
);
contentDefinitionWrapper.style.height = "0px";
setTimeout(() => {
wordDetail.removeAttribute("open");
}, 300);
}
// HANDLING CLICK
function toggleActive(wordDetail) {
let isOpen = wordDetail.getAttribute("open");
if (isOpen == null) {
openAccordion(wordDetail);
}
if (isOpen == "true") {
closeAccordion(wordDetail);
}
}
// HANDLING CLICK
Array.from(wordsDetails).forEach((wordDetail) => {
wordDetail.addEventListener("click", (event) => {
event.preventDefault();
toggleActive(wordDetail);
});
});
});

24
blocks/vocabulaire-summary/src/save.js
View File

@ -1,16 +1,28 @@
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes, setAttributes }) {
let { tooltipWords } = attributes;
let { tooltipWords, thematiqueName } = attributes;
function handleClick() {
alert("hey");
}
return (
<section {...useBlockProps.save()}>
<h3>Vocabulaire</h3>
<section
{...useBlockProps.save({
className: `vocabulaire-summary`,
})}
>
<h3 className="homegrade-blocks-vocabulaire-summary__title">
Vocabulaire — {thematiqueName}
</h3>{" "}
{tooltipWords &&
tooltipWords.map((elem) => (
<details class=" question">
<summary>{elem.tooltipText} </summary>
<div class="content">{elem.tooltipDefinition}</div>
<summary onClick={handleClick}>{elem.tooltipText} </summary>
<div className="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p className="homegrade-blocks-vocabulaire-summary__content">
{elem.tooltipDefinition}
</p>
</div>
</details>
))}
</section>

30
blocks/vocabulaire-summary/src/style.scss
View File

@ -5,8 +5,30 @@
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
background-color: #21759b;
color: #fff;
padding: 2px;
.homegrade-blocks-vocabulaire-summary {
padding: 20px;
details {
cursor: pointer;
padding: 20px;
background-color: white;
}
summary {
margin: 0;
font-weight: bold;
&::marker {""
content: none;
}
}
&__title {
margin: 0;
padding-bottom: 20px;
}
&__content {
padding-top: 30px;
}
&__content-wrapper {
overflow: hidden;
height: 0;
transition: height 0.3s ease-in-out;
}
}

2
build/index.js.map
View File

File diff suppressed because one or more lines are too long

2
src/format-types/brochure-front.js
View File

@ -9,7 +9,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
// alert("SALUT");
const iconSrc = img_path_datas.downloadIconPath;
brochureLinks.forEach((brochureLink) => {
console.log(brochureLink);
// console.log(brochureLink);
const brochureLinkIcon = document.createElement("img");
brochureLinkIcon.src = iconSrc;