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

developing the features

Browse Source
This commit is contained in:
Antoine M 2023-10-05 16:07:33 +02:00
parent 7560856982
commit c15e8502b0
34 changed files with 519 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
blocks/focused-thematique/build/block.json
View File

@ -3,7 +3,7 @@
"apiVersion": 2,
"name": "homegrade-content-blocks/focused-thematique",
"version": "0.1.0",
"title": "En tête de thématique + Focus",
"title": "Schéma de thématique avec points de focus",
"category": "homegrade-blocks",
"description": "Bloc en tête thématique avec points de focus",
"supports": {
@ -33,8 +33,8 @@
}
},
"textdomain": "homegrade-theme__bloks-texte-fonctionnel",
"viewScript": "file:./viewScript.js",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"viewScript": "file:./frontend.js",
"style": "file:./style-index.css"
}

2
blocks/focused-thematique/build/focus-point-thematique/block.json
View File

@ -3,7 +3,7 @@
"apiVersion": 2,
"name": "homegrade-content-blocks/focus-point-thematique",
"version": "0.1.0",
"title": "Point de légende ",
"title": "Point thématique ",
"category": "homegrade-blocks",
"description": "Point de légende focus pour en tête de thématique",
"supports": {

2
blocks/focused-thematique/build/focus-point-thematique/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => '77d61587131065780f21');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => 'b34654bdfab6ce8e5f75');

15
blocks/focused-thematique/build/focus-point-thematique/index.css
View File

@ -1,19 +1,4 @@
/*!***************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point-thematique/editor.scss ***!
\***************************************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focus-point {
position: absolute !important;
}
.components-panel__body .homegrade-blocks-focus-point-bullet {
position: static !important;
margin-top: -16px;
margin-bottom: 10px;
}
/*# sourceMappingURL=index.css.map*/

1
blocks/focused-thematique/build/focus-point-thematique/index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"focus-point-thematique/index.css","mappings":";;;AAAA;;;;EAAA;AAKA;EACC;AACD;;AAEA;EACC;EACA;EACA;AACD,C","sources":["webpack://multiblocks/./src/focus-point-thematique/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.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""}

2
blocks/focused-thematique/build/focus-point-thematique/index.js
View File

@ -286,7 +286,7 @@ module.exports = window["wp"]["notices"];
\***********************************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focus-point-thematique","version":"0.1.0","title":"Point de légende ","category":"homegrade-blocks","description":"Point de légende focus pour en tête de thématique","supports":{"html":false},"textdomain":"focus-point-thematique","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"focusTitle":{"type":"string","default":"Légende Sans titre"},"focusCaptionDescription":{"type":"string"},"focusIndex":{"type":"number","default":0},"focusPosition":{"type":"object","default":{"x":0.5,"y":0.5}}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focus-point-thematique","version":"0.1.0","title":"Point thématique ","category":"homegrade-blocks","description":"Point de légende focus pour en tête de thématique","supports":{"html":false},"textdomain":"focus-point-thematique","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"focusTitle":{"type":"string","default":"Légende Sans titre"},"focusCaptionDescription":{"type":"string"},"focusIndex":{"type":"number","default":0},"focusPosition":{"type":"object","default":{"x":0.5,"y":0.5}}}}');
/***/ })

2
blocks/focused-thematique/build/focus-point-thematique/index.js.map
View File

File diff suppressed because one or more lines are too long

1
blocks/focused-thematique/build/frontend.asset.php
View File

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

35
blocks/focused-thematique/build/frontend.js
View File

@ -1,35 +0,0 @@
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!*************************!*\
!*** ./src/frontend.js ***!
\*************************/
window.addEventListener("DOMContentLoaded", event => {
// alert("Hello from frontend.js");
const focusBulletPoints = document.querySelectorAll(".homegrade-blocks-focus-point-bullet");
focusBulletPoints.forEach(focusPoint => {
const focusPointsContainer = focusPoint.parentElement;
focusPoint.addEventListener("mouseover", event => {
const aleradyHoveredFocusPoint = document.querySelector("[data-hovered]");
console.log(aleradyHoveredFocusPoint);
const focusTitle = focusPoint.getAttribute("data-focus-bullet-title");
const focusPointPopupContainer = document.createElement("div");
focusPointPopupContainer.className = "focus-point-popup-container";
const focusPointPopupTitle = document.createElement("h4");
focusPointPopupTitle.textContent = focusTitle;
focusPointPopupTitle.className = "focus-point-popup-container__title";
focusPointPopupContainer.appendChild(focusPointPopupTitle);
focusPoint.appendChild(focusPointPopupContainer);
focusPoint.setAttribute("data-hovered", "");
});
focusPoint.addEventListener("mouseout", function () {
const focusPointPopupContainer = focusPoint.querySelector(".focus-point-popup-container");
// focusPoint.removeAttribute("data-hovered");
focusPointPopupContainer.remove();
// setTimeout(() => {
// }, 200);
});
});
});
/******/ })()
;
//# sourceMappingURL=frontend.js.map

1
blocks/focused-thematique/build/frontend.js.map
View File

@ -1 +0,0 @@
{"version":3,"file":"frontend.js","mappings":";;;;;AAAAA,MAAM,CAACC,gBAAgB,CAAC,kBAAkB,EAAGC,KAAK,IAAK;EACtD;EACA,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAClD,sCACD,CAAC;EACDF,iBAAiB,CAACG,OAAO,CAAEC,UAAU,IAAK;IACzC,MAAMC,oBAAoB,GAAGD,UAAU,CAACE,aAAa;IAErDF,UAAU,CAACN,gBAAgB,CAAC,WAAW,EAAGC,KAAK,IAAK;MACnD,MAAMQ,wBAAwB,GAAGN,QAAQ,CAACO,aAAa,CAAC,gBAAgB,CAAC;MACzEC,OAAO,CAACC,GAAG,CAACH,wBAAwB,CAAC;MAErC,MAAMI,UAAU,GAAGP,UAAU,CAACQ,YAAY,CAAC,yBAAyB,CAAC;MAErE,MAAMC,wBAAwB,GAAGZ,QAAQ,CAACa,aAAa,CAAC,KAAK,CAAC;MAC9DD,wBAAwB,CAACE,SAAS,GAAG,6BAA6B;MAElE,MAAMC,oBAAoB,GAAGf,QAAQ,CAACa,aAAa,CAAC,IAAI,CAAC;MACzDE,oBAAoB,CAACC,WAAW,GAAGN,UAAU;MAC7CK,oBAAoB,CAACD,SAAS,GAAG,oCAAoC;MAErEF,wBAAwB,CAACK,WAAW,CAACF,oBAAoB,CAAC;MAC1DZ,UAAU,CAACc,WAAW,CAACL,wBAAwB,CAAC;MAChDT,UAAU,CAACe,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC;IAC5C,CAAC,CAAC;IAEFf,UAAU,CAACN,gBAAgB,CAAC,UAAU,EAAE,YAAY;MACnD,MAAMe,wBAAwB,GAAGT,UAAU,CAACI,aAAa,CACxD,8BACD,CAAC;MACD;MACAK,wBAAwB,CAACO,MAAM,CAAC,CAAC;MACjC;MACA;IACD,CAAC,CAAC;EACH,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://multiblocks/./src/frontend.js"],"sourcesContent":["window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\t// alert(\"Hello from frontend.js\");\r\n\tconst focusBulletPoints = document.querySelectorAll(\r\n\t\t\".homegrade-blocks-focus-point-bullet\"\r\n\t);\r\n\tfocusBulletPoints.forEach((focusPoint) => {\r\n\t\tconst focusPointsContainer = focusPoint.parentElement;\r\n\r\n\t\tfocusPoint.addEventListener(\"mouseover\", (event) => {\r\n\t\t\tconst aleradyHoveredFocusPoint = document.querySelector(\"[data-hovered]\");\r\n\t\t\tconsole.log(aleradyHoveredFocusPoint);\r\n\r\n\t\t\tconst focusTitle = focusPoint.getAttribute(\"data-focus-bullet-title\");\r\n\r\n\t\t\tconst focusPointPopupContainer = document.createElement(\"div\");\r\n\t\t\tfocusPointPopupContainer.className = \"focus-point-popup-container\";\r\n\r\n\t\t\tconst focusPointPopupTitle = document.createElement(\"h4\");\r\n\t\t\tfocusPointPopupTitle.textContent = focusTitle;\r\n\t\t\tfocusPointPopupTitle.className = \"focus-point-popup-container__title\";\r\n\r\n\t\t\tfocusPointPopupContainer.appendChild(focusPointPopupTitle);\r\n\t\t\tfocusPoint.appendChild(focusPointPopupContainer);\r\n\t\t\tfocusPoint.setAttribute(\"data-hovered\", \"\");\r\n\t\t});\r\n\r\n\t\tfocusPoint.addEventListener(\"mouseout\", function () {\r\n\t\t\tconst focusPointPopupContainer = focusPoint.querySelector(\r\n\t\t\t\t\".focus-point-popup-container\"\r\n\t\t\t);\r\n\t\t\t// focusPoint.removeAttribute(\"data-hovered\");\r\n\t\t\tfocusPointPopupContainer.remove();\r\n\t\t\t// setTimeout(() => {\r\n\t\t\t// }, 200);\r\n\t\t});\r\n\t});\r\n});\r\n"],"names":["window","addEventListener","event","focusBulletPoints","document","querySelectorAll","forEach","focusPoint","focusPointsContainer","parentElement","aleradyHoveredFocusPoint","querySelector","console","log","focusTitle","getAttribute","focusPointPopupContainer","createElement","className","focusPointPopupTitle","textContent","appendChild","setAttribute","remove"],"sourceRoot":""}

2
blocks/focused-thematique/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => '0d40a2d06d81ea7a55c0');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices'), 'version' => 'f683d8da9de9c4a6d7d1');

17
blocks/focused-thematique/build/index.css
View File

@ -6,8 +6,8 @@
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-schema .block-editor-block-list__layout,
.homegrade-blocks-focused-schema .block-editor-block-list__block {
.homegrade-blocks-focused-thematique-cover .block-editor-block-list__layout,
.homegrade-blocks-focused-thematique-cover .block-editor-block-list__block {
position: unset;
}
@ -25,14 +25,7 @@
.wpblock-cover-container.is-loading img {
opacity: 10%;
}
/*!***************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point-thematique/editor.scss ***!
\***************************************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focus-point {
position: absolute !important;
}
@ -42,5 +35,9 @@
margin-top: -16px;
margin-bottom: 10px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point-thematique/editor.scss ***!
\***************************************************************************************************************************************************************************************************************************************************************/
/*# sourceMappingURL=index.css.map*/

2
blocks/focused-thematique/build/index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMC;;EAEC;AAAF;;AAGA;EACC;AAAD;AAEE;EACC;EACA;EACA;EACA;EACA;EACA;AAAH;AAEE;EACC;AAAH,C;;;;ACvBA;;;;EAAA;AAKA;EACC;AACD;;AAEA;EACC;EACA;EACA;AACD,C","sources":["webpack://multiblocks/./src/editor.scss","webpack://multiblocks/./src/focus-point-thematique/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.homegrade-blocks-focused-schema {\n\t.block-editor-block-list__layout,\n\t.block-editor-block-list__block {\n\t\tposition: unset;\n\t}\n}\n.wpblock-cover-container {\n\tposition: relative;\n\t&.is-loading {\n\t\t.components-spinner {\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tright: 50%;\n\t\t\tbottom: 0;\n\t\t\ttop: 0;\n\t\t\tmargin: auto;\n\t\t}\n\t\timg {\n\t\t\topacity: 10%;\n\t\t}\n\t}\n}\n","/**\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.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMC;;EAEC;AAAF;;AAGA;EACC;AAAD;AAEE;EACC;EACA;EACA;EACA;EACA;EACA;AAAH;AAEE;EACC;AAAH;;AAKA;EACC;AAFD;;AAKA;EACC;EACA;EACA;AAFD,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.homegrade-blocks-focused-thematique-cover {\n\t.block-editor-block-list__layout,\n\t.block-editor-block-list__block {\n\t\tposition: unset;\n\t}\n}\n.wpblock-cover-container {\n\tposition: relative;\n\t&.is-loading {\n\t\t.components-spinner {\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\tright: 50%;\n\t\t\tbottom: 0;\n\t\t\ttop: 0;\n\t\t\tmargin: auto;\n\t\t}\n\t\timg {\n\t\t\topacity: 10%;\n\t\t}\n\t}\n}\n\n.homegrade-blocks-focus-point {\n\tposition: absolute !important;\n}\n\n.components-panel__body .homegrade-blocks-focus-point-bullet {\n\tposition: static !important;\n\tmargin-top: -16px;\n\tmargin-bottom: 10px;\n}\n"],"names":[],"sourceRoot":""}

193
blocks/focused-thematique/build/index.js
View File

@ -2,6 +2,42 @@
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/img/chevron_down.svg":
/*!**********************************!*\
!*** ./src/img/chevron_down.svg ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ ReactComponent: () => (/* binding */ SvgChevronDown),
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
var _path;
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var SvgChevronDown = function SvgChevronDown(props) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
xmlns: "http://www.w3.org/2000/svg",
width: 10.037,
height: 6.876
}, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
"data-name": "Trac\\xE9 255",
d: "m1.406 1.406 3.612 4.47 3.612-4.47",
fill: "none",
stroke: "#000",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2
})));
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC4wMzciIGhlaWdodD0iNi44NzYiIHZpZXdCb3g9IjAgMCAxMC4wMzcgNi44NzYiPgogIDxnIGlkPSJmbGVjaGUtYmFzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjQwNiAxLjQwNikiPgogICAgPHBhdGggaWQ9IlRyYWPDqV8yNTUiIGRhdGEtbmFtZT0iVHJhY8OpIDI1NSIgZD0iTTEwNC44MTgsNzcuMzY2bDQuNDctMy42MTItNC40Ny0zLjYxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzcuMzY2IC0xMDQuODE4KSByb3RhdGUoOTApIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4K");
/***/ }),
/***/ "./src/edit.js":
/*!*********************!*\
!*** ./src/edit.js ***!
@ -22,12 +58,15 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var _wordpress_blob__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/blob */ "@wordpress/blob");
/* harmony import */ var _wordpress_blob__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/core-data */ "@wordpress/core-data");
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./img/chevron_down.svg */ "./src/img/chevron_down.svg");
@ -50,17 +89,42 @@ function Edit({
}) {
var _ref;
const {
coverUrl,
coverId,
coverAlt,
focusBullets
} = attributes;
const currentTaxonomiesID = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core/editor").getCurrentPostAttribute("thematiques"));
// ### Get current Thematique
const mainTaxonomy = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core").getEntityRecord("taxonomy", "thematiques", currentTaxonomiesID[0]), [currentTaxonomiesID]);
const coverID = (_ref = mainTaxonomy && mainTaxonomy.acf.taxonomy_pictures.illustration_xl) !== null && _ref !== void 0 ? _ref : null;
const cover = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => coverID ? select("core").getMedia(coverID) : null, [coverID]);
const coverUrl = cover && cover.source_url ? cover.source_url : null;
const currentBlockDatas = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => {
return select("core/block-editor").getBlocksByClientId(clientId)[0];
});
let children = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core/block-editor").getBlocksByClientId(clientId)[0].innerBlocks);
let postTaxonomies = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core/editor").getCurrentPostAttribute("thematiques"));
let postMainTaxonomy = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core").getEntityRecord("taxonomy", "thematiques", postTaxonomies[0]), [postTaxonomies]);
let postParentTaxonomy = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => {
if (postMainTaxonomy && postMainTaxonomy.parent) {
return select("core").getEntityRecord("taxonomy", "thematiques", postMainTaxonomy.parent);
}
return null;
}, [postMainTaxonomy]);
let currentGeneralThematique = (_ref = postParentTaxonomy !== null && postParentTaxonomy !== void 0 ? postParentTaxonomy : postMainTaxonomy) !== null && _ref !== void 0 ? _ref : null;
let thematiqueCover = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => {
if (currentGeneralThematique && currentGeneralThematique.acf.taxonomy_pictures && currentGeneralThematique.acf.taxonomy_pictures.illustration_xl) {
let thematiqueMediaId = currentGeneralThematique.acf.taxonomy_pictures.illustration_xl;
const media = select(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_6__.store).getMedia(thematiqueMediaId, {
context: "view"
});
return media;
}
return null;
}, [currentGeneralThematique]);
function updateCoverImg(thematiqueCoverDatas) {
if (thematiqueCoverDatas && thematiqueCoverDatas.source_url !== coverUrl) {
setAttributes({
coverUrl: thematiqueCoverDatas.source_url,
coverAlt: thematiqueCoverDatas.alt_text
});
}
}
function passCoverUrlToChildren() {
if (children && coverUrl) {
children.forEach(function (child) {
@ -95,16 +159,13 @@ function Edit({
}
function insertFocusPointBlock() {
const index = children && children.length ? children.length : 0;
const newBlock = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_5__.createBlock)("homegrade-content-blocks/focus-point", {});
const newBlock = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_5__.createBlock)("homegrade-content-blocks/focus-point-thematique", {});
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").insertBlocks(newBlock, index, clientId);
}
function handleBulletClick(index) {
const editor = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.select)("core/block-editor");
const innerBlocks = editor.getBlocks(attributes.clientId)[0].innerBlocks;
// const innerBlocks = editor.getBlocks(attributes.clientId)[0];
if (innerBlocks && innerBlocks[index]) {
const bulletBlock = editor.getBlocks(attributes.clientId)[0].innerBlocks[index];
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").selectBlock(bulletBlock.clientId);
if (currentBlockDatas && currentBlockDatas.innerBlocks) {
console.log(currentBlockDatas.innerBlocks[index].clientId);
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").selectBlock(currentBlockDatas.innerBlocks[index].clientId);
}
}
const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
@ -116,46 +177,52 @@ function Edit({
left: `${focusBullet.x * 100}%`
},
onClick: () => handleBulletClick(index)
}, index + 1);
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "homegrade-blocks-focus-point-bullet__index"
}));
});
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
updateFocusPointBullets();
if (!coverId && (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__.isBlobURL)(coverUrl)) {
setAttributes({
coverUrl: undefined,
coverAlt: ""
});
if (thematiqueCover && thematiqueCover.source_url) {
updateCoverImg(thematiqueCover);
}
}, []);
}, [thematiqueCover]);
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
passCoverUrlToChildren();
}, [coverUrl]);
updateFocusPointBullets();
}, []);
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
updateFocusPointBullets();
passCoverUrlToChildren();
}, [children]);
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_6__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.PanelBody, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.Button, {
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
passIndexToChildren();
}, [currentBlockDatas]);
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_7__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.PanelBody, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.Button, {
variant: "primary",
onClick: () => {
insertFocusPointBlock();
}
}, "Ajouter un point L\xE9gende"))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({
className: `homegrade-blocks-focused-schema`
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.useBlockProps)({
className: `homegrade-blocks-focused-thematique`
})
}, cover && cover.source_url && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: cover.source_url,
alt: ""
})), cover && cover.source_url && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
className: "picture-container"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: cover.source_url,
src: coverUrl,
alt: coverAlt
}), renderedFocusPointBullets), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ol", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InnerBlocks, {
allowedBlocks: ["homegrade-content-blocks/focus-point"]
}), renderedFocusPointBullets), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("button", {
className: "homegrade-blocks-focused-thematique__figcaption-toggle",
"aria-expanded": "false"
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)("Version texte des indications de l'illustration", "homegrade-blocks__texte-fonctionnel"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_9__["default"],
alt: ""
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", {
"aria-hidden": "true"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ol", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.InnerBlocks, {
allowedBlocks: ["homegrade-content-blocks/focus-point-thematique"]
})))));
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.withNotices)(Edit));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.withNotices)(Edit));
/***/ }),
@ -402,6 +469,12 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./img/chevron_down.svg */ "./src/img/chevron_down.svg");
@ -417,16 +490,16 @@ function save({
const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
"data-focus-bullet-title": focusBullet.title,
className: "homegrade-blocks-focus-point-bullet",
className: "homegrade-blocks-focus-point-bullet\t",
style: {
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`
}
}, index + 1);
});
});
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-focused-schema`
className: `homegrade-blocks-focused-thematique`
})
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
className: `picture-container`
@ -434,7 +507,15 @@ function save({
src: coverUrl,
alt: coverAlt,
className: `wp-image-${coverId}`
}), renderedFocusPointBullets), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ol", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))));
}), renderedFocusPointBullets), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("button", {
className: "homegrade-blocks-focused-thematique__figcaption-toggle",
"aria-expanded": "false"
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Version texte des indications de l'illustration", "homegrade-blocks__texte-fonctionnel"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_3__["default"],
alt: ""
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", {
"aria-hidden": "true"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ol", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))));
}
/***/ }),
@ -487,13 +568,13 @@ __webpack_require__.r(__webpack_exports__);
/***/ }),
/***/ "@wordpress/blob":
/*!******************************!*\
!*** external ["wp","blob"] ***!
\******************************/
/***/ "react":
/*!************************!*\
!*** external "React" ***!
\************************/
/***/ ((module) => {
module.exports = window["wp"]["blob"];
module.exports = window["React"];
/***/ }),
@ -527,6 +608,16 @@ module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/core-data":
/*!**********************************!*\
!*** external ["wp","coreData"] ***!
\**********************************/
/***/ ((module) => {
module.exports = window["wp"]["coreData"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
@ -573,7 +664,7 @@ module.exports = window["wp"]["notices"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focused-thematique","version":"0.1.0","title":"En tête de thématique + Focus","category":"homegrade-blocks","description":"Bloc en tête thématique avec points de focus","supports":{"html":false,"reusable":false},"attributes":{"coverId":{"type":"number"},"coverAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"coverUrl":{"type":"string","source":"attribute","selector":"img","attribute":"src"},"focusBullets":{"type":"array","default":[]}},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","viewScript":"file:./frontend.js","style":"file:./style-index.css"}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focused-thematique","version":"0.1.0","title":"Schéma de thématique avec points de focus","category":"homegrade-blocks","description":"Bloc en tête thématique avec points de focus","supports":{"html":false,"reusable":false},"attributes":{"coverId":{"type":"number"},"coverAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"coverUrl":{"type":"string","source":"attribute","selector":"img","attribute":"src"},"focusBullets":{"type":"array","default":[]}},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","viewScript":"file:./viewScript.js","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css"}');
/***/ }),
@ -583,7 +674,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
\***********************************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focus-point-thematique","version":"0.1.0","title":"Point de légende ","category":"homegrade-blocks","description":"Point de légende focus pour en tête de thématique","supports":{"html":false},"textdomain":"focus-point-thematique","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"focusTitle":{"type":"string","default":"Légende Sans titre"},"focusCaptionDescription":{"type":"string"},"focusIndex":{"type":"number","default":0},"focusPosition":{"type":"object","default":{"x":0.5,"y":0.5}}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focus-point-thematique","version":"0.1.0","title":"Point thématique ","category":"homegrade-blocks","description":"Point de légende focus pour en tête de thématique","supports":{"html":false},"textdomain":"focus-point-thematique","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"focusTitle":{"type":"string","default":"Légende Sans titre"},"focusCaptionDescription":{"type":"string"},"focusIndex":{"type":"number","default":0},"focusPosition":{"type":"object","default":{"x":0.5,"y":0.5}}}}');
/***/ })

2
blocks/focused-thematique/build/index.js.map
View File

File diff suppressed because one or more lines are too long

68
blocks/focused-thematique/build/style-index.css
View File

@ -1,24 +1,38 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-schema figure {
.homegrade-blocks-focused-thematique-cover figure {
position: relative;
}
/*!**************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point-thematique/style.scss ***!
\**************************************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-thematique {
padding-bottom: 100px;
}
.homegrade-blocks-focused-thematique figure {
padding-bottom: 50px;
}
.homegrade-blocks-focused-thematique__figcaption-toggle {
opacity: 0.9999;
font-weight: bold;
display: flex;
align-items: center;
}
.homegrade-blocks-focused-thematique__figcaption-toggle img {
height: 8px;
width: auto;
margin-top: 2px;
margin-left: 10px;
transition: all 0.3s ease-out;
transform: rotate(0deg);
}
.homegrade-blocks-focused-thematique__figcaption-toggle[aria-expanded=true] img {
transform: rotate(-180deg);
}
.homegrade-blocks-focused-thematique figcaption[aria-hidden=true] {
display: none;
height: 0;
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
@ -27,8 +41,8 @@
.homegrade-blocks-focus-point-bullet {
background-color: red;
border-radius: 50%;
width: 20px;
height: 20px;
width: 6px;
height: 6px;
position: absolute !important;
top: 0;
left: 0;
@ -37,9 +51,21 @@
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
padding: 10px;
transition: scale 0.2s ease-in-out;
}
.homegrade-blocks-focus-point-bullet:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: red;
opacity: 0.2;
width: 200%;
height: 200%;
}
.focus-point-popup-container {
background-color: white;
@ -72,5 +98,9 @@
width: auto;
min-width: 100px;
}
/*!**************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/focus-point-thematique/style.scss ***!
\**************************************************************************************************************************************************************************************************************************************************************/
/*# sourceMappingURL=style-index.css.map*/

2
blocks/focused-thematique/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAQC;EACC;AADF,C;;;;ACRA;;;;;EAAA;AAMA;EACC;EACA;AACD;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAED;;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGD;AADC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGF;AADC;EACC;EACA;AAGF,C","sources":["webpack://multiblocks/./src/style.scss","webpack://multiblocks/./src/focus-point-thematique/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-focused-schema {\n\tfigure {\n\t\tposition: relative;\n\t}\n}\n","/**\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.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n}\n.homegrade-blocks-focus-point-bullet {\n\tbackground-color: red;\n\tborder-radius: 50%;\n\twidth: 20px;\n\theight: 20px;\n\tposition: absolute !important;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 99;\n\tcolor: white;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding: 16px;\n\ttransition: scale 0.2s ease-in-out;\n}\n.focus-point-popup-container {\n\tbackground-color: white;\n\tborder-radius: 14px;\n\tpadding: 10px;\n\ttransform: translate(-34%, -110%);\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tmax-width: 400px;\n\ttext-align: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n\t&:after {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tbackground-color: white;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t}\n\t&__title {\n\t\twidth: auto;\n\t\tmin-width: 100px;\n\t}\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"./style-index.css","mappings":";;;AACC;EACC;AAAF;;AAIA;EACC;AADD;AAEC;EACC;AAAF;AAEC;EACC;EACA;EACA;EACA;AAAF;AACE;EACC;EACA;EACA;EACA;EACA;EACA;AACH;AACE;EACC;AACH;AAEC;EACC;EACA;AAAF;;AAGA;EACC;EACA;AAAD;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACD;AAAC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEF;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAED;AAAC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEF;AAAC;EACC;EACA;AAEF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":[".homegrade-blocks-focused-thematique-cover {\n\tfigure {\n\t\tposition: relative;\n\t}\n}\n\n.homegrade-blocks-focused-thematique {\n\tpadding-bottom: 100px;\n\tfigure {\n\t\tpadding-bottom: 50px;\n\t}\n\t&__figcaption-toggle {\n\t\topacity: 0.9999;\n\t\tfont-weight: bold;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\timg {\n\t\t\theight: 8px;\n\t\t\twidth: auto;\n\t\t\tmargin-top: 2px;\n\t\t\tmargin-left: 10px;\n\t\t\ttransition: all 0.3s ease-out;\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t&[aria-expanded=\"true\"] img {\n\t\t\ttransform: rotate(-180deg);\n\t\t}\n\t}\n\tfigcaption[aria-hidden=\"true\"] {\n\t\tdisplay: none;\n\t\theight: 0;\n\t}\n}\n.homegrade-blocks-focus-point-bullet:hover {\n\tscale: 1.2;\n\tfilter: brightness(1.2) hue-rotate(10deg);\n}\n.homegrade-blocks-focus-point-bullet {\n\tbackground-color: red;\n\tborder-radius: 50%;\n\twidth: 6px;\n\theight: 6px;\n\tposition: absolute !important;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 99;\n\tcolor: white;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding: 10px;\n\ttransition: scale 0.2s ease-in-out;\n\t&:after {\n\t\tposition: absolute;\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: red;\n\t\topacity: 0.2;\n\t\twidth: 200%;\n\t\theight: 200%;\n\t}\n}\n.focus-point-popup-container {\n\tbackground-color: white;\n\tborder-radius: 14px;\n\tpadding: 10px;\n\ttransform: translate(-34%, -110%);\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tmax-width: 400px;\n\ttext-align: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n\t&:after {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tbackground-color: white;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t}\n\t&__title {\n\t\twidth: auto;\n\t\tmin-width: 100px;\n\t}\n}\n"],"names":[],"sourceRoot":""}

1
blocks/focused-thematique/build/viewScript.asset.php Normal file
View File

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

25
blocks/focused-thematique/build/viewScript.js Normal file
View File

@ -0,0 +1,25 @@
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!***************************!*\
!*** ./src/viewScript.js ***!
\***************************/
window.addEventListener("DOMContentLoaded", event => {
const figcaptionToggle = document.querySelector(".homegrade-blocks-focused-thematique__figcaption-toggle");
const figcaptionContent = document.querySelector(".homegrade-blocks-focused-thematique figcaption");
function toggleFigcaption() {
if (isCaptionVisible()) {
figcaptionContent.setAttribute("aria-hidden", "true");
figcaptionToggle.setAttribute("aria-expanded", "false");
} else {
figcaptionContent.setAttribute("aria-hidden", "false");
figcaptionToggle.setAttribute("aria-expanded", "true");
}
}
function isCaptionVisible() {
return figcaptionContent.getAttribute("aria-hidden") === "false";
}
figcaptionToggle.addEventListener("click", toggleFigcaption);
});
/******/ })()
;
//# sourceMappingURL=viewScript.js.map

1
blocks/focused-thematique/build/viewScript.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"viewScript.js","mappings":";;;;;AAAAA,MAAM,CAACC,gBAAgB,CAAC,kBAAkB,EAAGC,KAAK,IAAK;EACtD,MAAMC,gBAAgB,GAAGC,QAAQ,CAACC,aAAa,CAC9C,yDACD,CAAC;EACD,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAC/C,iDACD,CAAC;EAED,SAASE,gBAAgBA,CAAA,EAAG;IAC3B,IAAIC,gBAAgB,CAAC,CAAC,EAAE;MACvBF,iBAAiB,CAACG,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;MACrDN,gBAAgB,CAACM,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;IACxD,CAAC,MAAM;MACNH,iBAAiB,CAACG,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC;MACtDN,gBAAgB,CAACM,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IACvD;EACD;EAEA,SAASD,gBAAgBA,CAAA,EAAG;IAC3B,OAAOF,iBAAiB,CAACI,YAAY,CAAC,aAAa,CAAC,KAAK,OAAO;EACjE;EAEAP,gBAAgB,CAACF,gBAAgB,CAAC,OAAO,EAAEM,gBAAgB,CAAC;AAC7D,CAAC,CAAC,C","sources":["webpack://multiblocks/./src/viewScript.js"],"sourcesContent":["window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\tconst figcaptionToggle = document.querySelector(\r\n\t\t\".homegrade-blocks-focused-thematique__figcaption-toggle\"\r\n\t);\r\n\tconst figcaptionContent = document.querySelector(\r\n\t\t\".homegrade-blocks-focused-thematique figcaption\"\r\n\t);\r\n\r\n\tfunction toggleFigcaption() {\r\n\t\tif (isCaptionVisible()) {\r\n\t\t\tfigcaptionContent.setAttribute(\"aria-hidden\", \"true\");\r\n\t\t\tfigcaptionToggle.setAttribute(\"aria-expanded\", \"false\");\r\n\t\t} else {\r\n\t\t\tfigcaptionContent.setAttribute(\"aria-hidden\", \"false\");\r\n\t\t\tfigcaptionToggle.setAttribute(\"aria-expanded\", \"true\");\r\n\t\t}\r\n\t}\r\n\r\n\tfunction isCaptionVisible() {\r\n\t\treturn figcaptionContent.getAttribute(\"aria-hidden\") === \"false\";\r\n\t}\r\n\r\n\tfigcaptionToggle.addEventListener(\"click\", toggleFigcaption);\r\n});\r\n"],"names":["window","addEventListener","event","figcaptionToggle","document","querySelector","figcaptionContent","toggleFigcaption","isCaptionVisible","setAttribute","getAttribute"],"sourceRoot":""}

27
blocks/focused-thematique/package-lock.json generated
View File

@ -8,6 +8,9 @@
"name": "multiblocks",
"version": "0.1.0",
"license": "GPL-2.0-or-later",
"dependencies": {
"lucide-react": "^0.284.0"
},
"devDependencies": {
"@wordpress/scripts": "^26.9.0"
}
@ -10206,8 +10209,7 @@
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"node_modules/js-yaml": {
"version": "3.14.1",
@ -10555,7 +10557,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
@ -10581,6 +10582,14 @@
"yallist": "^3.0.2"
}
},
"node_modules/lucide-react": {
"version": "0.284.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.284.0.tgz",
"integrity": "sha512-dVSMHYAya/TeY3+vsk+VQJEKNQN2AhIo0+Dp09B2qpzvcBuu93H98YZykFcjIAfmanFiDd8nqfXFR38L757cyQ==",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@ -12945,7 +12954,6 @@
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@ -23721,8 +23729,7 @@
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"js-yaml": {
"version": "3.14.1",
@ -23999,7 +24006,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
@ -24022,6 +24028,12 @@
"yallist": "^3.0.2"
}
},
"lucide-react": {
"version": "0.284.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.284.0.tgz",
"integrity": "sha512-dVSMHYAya/TeY3+vsk+VQJEKNQN2AhIo0+Dp09B2qpzvcBuu93H98YZykFcjIAfmanFiDd8nqfXFR38L757cyQ==",
"requires": {}
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@ -25705,7 +25717,6 @@
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0"
}

5
blocks/focused-thematique/package.json
View File

@ -20,5 +20,8 @@
},
"devDependencies": {
"@wordpress/scripts": "^26.9.0"
},
"dependencies": {
"lucide-react": "^0.284.0"
}
}
}

4
blocks/focused-thematique/src/block.json
View File

@ -3,7 +3,7 @@
"apiVersion": 2,
"name": "homegrade-content-blocks/focused-thematique",
"version": "0.1.0",
"title": "En tête de thématique + Focus" ,
"title": "Schéma de thématique avec points de focus",
"category": "homegrade-blocks",
"description": "Bloc en tête thématique avec points de focus",
"supports": {
@ -33,8 +33,8 @@
}
},
"textdomain": "homegrade-theme__bloks-texte-fonctionnel",
"viewScript": "file:./viewScript.js",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"viewScript": "file:./frontend.js",
"style": "file:./style-index.css"
}

174
blocks/focused-thematique/src/edit.js
View File

@ -2,28 +2,17 @@ import "./editor.scss";
import "./focus-point-thematique";
import { __ } from "@wordpress/i18n";
import { useSelect, dispatch, select } from "@wordpress/data";
import { useEffect, useState } from "@wordpress/element";
import { useSelect, dispatch } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
import { createBlock } from "@wordpress/blocks";
import { store as coreStore } from "@wordpress/core-data";
import {
useBlockProps,
MediaPlaceholder,
BlockControls,
MediaReplaceFlow,
InspectorControls,
} from "@wordpress/block-editor";
import {
ToolbarButton,
Spinner,
withNotices,
Button,
PanelBody,
} from "@wordpress/components";
import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
import { withNotices, Button, PanelBody } from "@wordpress/components";
import { InnerBlocks } from "@wordpress/block-editor";
import { isBlobURL, revokeBlobURL } from "@wordpress/blob";
import { ChevronDown } from "lucide-react";
import chevronDown from "./img/chevron_down.svg";
function Edit({
attributes,
setAttributes,
@ -33,37 +22,72 @@ function Edit({
clientId,
...props
}) {
const { coverId, coverAlt, focusBullets } = attributes;
const currentTaxonomiesID = useSelect((select) =>
select("core/editor").getCurrentPostAttribute("thematiques")
);
// ### Get current Thematique
const mainTaxonomy = useSelect(
(select) =>
select("core").getEntityRecord(
"taxonomy",
"thematiques",
currentTaxonomiesID[0]
),
[currentTaxonomiesID]
);
const coverID =
(mainTaxonomy && mainTaxonomy.acf.taxonomy_pictures.illustration_xl) ??
null;
const cover = useSelect(
(select) => (coverID ? select("core").getMedia(coverID) : null),
[coverID]
);
const coverUrl = cover && cover.source_url ? cover.source_url : null;
const { coverUrl, coverId, coverAlt, focusBullets } = attributes;
const currentBlockDatas = useSelect((select) => {
return select("core/block-editor").getBlocksByClientId(clientId)[0];
});
let children = useSelect(
(select) =>
select("core/block-editor").getBlocksByClientId(clientId)[0].innerBlocks
);
let postTaxonomies = useSelect((select) =>
select("core/editor").getCurrentPostAttribute("thematiques")
);
let postMainTaxonomy = useSelect(
(select) =>
select("core").getEntityRecord(
"taxonomy",
"thematiques",
postTaxonomies[0]
),
[postTaxonomies]
);
let postParentTaxonomy = useSelect(
(select) => {
if (postMainTaxonomy && postMainTaxonomy.parent) {
return select("core").getEntityRecord(
"taxonomy",
"thematiques",
postMainTaxonomy.parent
);
}
return null;
},
[postMainTaxonomy]
);
let currentGeneralThematique = postParentTaxonomy ?? postMainTaxonomy ?? null;
let thematiqueCover = useSelect(
(select) => {
if (
currentGeneralThematique &&
currentGeneralThematique.acf.taxonomy_pictures &&
currentGeneralThematique.acf.taxonomy_pictures.illustration_xl
) {
let thematiqueMediaId =
currentGeneralThematique.acf.taxonomy_pictures.illustration_xl;
const media = select(coreStore).getMedia(thematiqueMediaId, {
context: "view",
});
return media;
}
return null;
},
[currentGeneralThematique]
);
function updateCoverImg(thematiqueCoverDatas) {
if (thematiqueCoverDatas && thematiqueCoverDatas.source_url !== coverUrl) {
setAttributes({
coverUrl: thematiqueCoverDatas.source_url,
coverAlt: thematiqueCoverDatas.alt_text,
});
}
}
function passCoverUrlToChildren() {
if (children && coverUrl) {
children.forEach(function (child) {
@ -97,21 +121,22 @@ function Edit({
setAttributes({ focusBullets });
}
}
function insertFocusPointBlock() {
const index = children && children.length ? children.length : 0;
const newBlock = createBlock("homegrade-content-blocks/focus-point", {});
const newBlock = createBlock(
"homegrade-content-blocks/focus-point-thematique",
{}
);
dispatch("core/block-editor").insertBlocks(newBlock, index, clientId);
}
function handleBulletClick(index) {
const editor = select("core/block-editor");
const innerBlocks = editor.getBlocks(attributes.clientId)[0].innerBlocks;
// const innerBlocks = editor.getBlocks(attributes.clientId)[0];
if (innerBlocks && innerBlocks[index]) {
const bulletBlock = editor.getBlocks(attributes.clientId)[0].innerBlocks[
index
];
dispatch("core/block-editor").selectBlock(bulletBlock.clientId);
if (currentBlockDatas && currentBlockDatas.innerBlocks) {
console.log(currentBlockDatas.innerBlocks[index].clientId);
dispatch("core/block-editor").selectBlock(
currentBlockDatas.innerBlocks[index].clientId
);
}
}
@ -126,25 +151,28 @@ function Edit({
}}
onClick={() => handleBulletClick(index)}
>
{index + 1}
<span className="homegrade-blocks-focus-point-bullet__index"></span>
</div>
);
});
useEffect(() => {
updateFocusPointBullets();
if (!coverId && isBlobURL(coverUrl)) {
setAttributes({ coverUrl: undefined, coverAlt: "" });
if (thematiqueCover && thematiqueCover.source_url) {
updateCoverImg(thematiqueCover);
}
}, []);
}, [thematiqueCover]);
useEffect(() => {
passCoverUrlToChildren();
}, [coverUrl]);
updateFocusPointBullets();
}, []);
useEffect(() => {
updateFocusPointBullets();
passCoverUrlToChildren();
}, [children]);
useEffect(() => {
passIndexToChildren();
}, [currentBlockDatas]);
return (
<>
@ -163,25 +191,33 @@ function Edit({
<section
{...useBlockProps({
className: `homegrade-blocks-focused-schema`,
className: `homegrade-blocks-focused-thematique`,
})}
>
{cover && cover.source_url && (
<div>
<img src={cover.source_url} alt="" />
</div>
)}
{cover && cover.source_url && (
{coverUrl && (
<figure className="picture-container">
<img src={cover.source_url} alt={coverAlt} />
<img src={coverUrl} alt={coverAlt} />
{renderedFocusPointBullets}
</figure>
)}
<figcaption>
<button
className="homegrade-blocks-focused-thematique__figcaption-toggle"
aria-expanded="false"
>
{__(
"Version texte des indications de l'illustration",
"homegrade-blocks__texte-fonctionnel"
)}
{/* <ChevronDown /> */}
<img src={chevronDown} alt="" />
</button>
<figcaption aria-hidden="true">
<ol>
<InnerBlocks
allowedBlocks={["homegrade-content-blocks/focus-point"]}
allowedBlocks={[
"homegrade-content-blocks/focus-point-thematique",
]}
/>
</ol>
</figcaption>

12
blocks/focused-thematique/src/editor.scss
View File

@ -3,7 +3,7 @@
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-schema {
.homegrade-blocks-focused-thematique-cover {
.block-editor-block-list__layout,
.block-editor-block-list__block {
position: unset;
@ -25,3 +25,13 @@
}
}
}
.homegrade-blocks-focus-point {
position: absolute !important;
}
.components-panel__body .homegrade-blocks-focus-point-bullet {
position: static !important;
margin-top: -16px;
margin-bottom: 10px;
}

2
blocks/focused-thematique/src/focus-point-thematique/block.json
View File

@ -3,7 +3,7 @@
"apiVersion": 2,
"name": "homegrade-content-blocks/focus-point-thematique",
"version": "0.1.0",
"title": "Point de légende ",
"title": "Point thématique ",
"category": "homegrade-blocks",
"description": "Point de légende focus pour en tête de thématique",
"supports": {

12
blocks/focused-thematique/src/focus-point-thematique/edit.js
View File

@ -80,18 +80,6 @@ export default function Edit({
className: `homegrade-blocks-focus-point-caption`,
})}
>
{/* <div
{...useBlockProps({
className: `homegrade-blocks-focus-point`,
"data-focus-title": focusTitle,
style: {
top: `${focusPosition.y * 100}%`,
left: `${focusPosition.x * 100}%`,
},
})}
>
{focusIndex}
</div> */}
{focusCaptionDescription}
</li>
</>

14
blocks/focused-thematique/src/focus-point-thematique/editor.scss
View File

@ -1,14 +0,0 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focus-point {
position: absolute !important;
}
.components-panel__body .homegrade-blocks-focus-point-bullet {
position: static !important;
margin-top: -16px;
margin-bottom: 10px;
}

58
blocks/focused-thematique/src/focus-point-thematique/style.scss
View File

@ -1,58 +0,0 @@
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
}
.homegrade-blocks-focus-point-bullet {
background-color: red;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute !important;
top: 0;
left: 0;
z-index: 99;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
transition: scale 0.2s ease-in-out;
}
.focus-point-popup-container {
background-color: white;
border-radius: 14px;
padding: 10px;
transform: translate(-34%, -110%);
position: absolute;
top: 0;
left: 0;
max-width: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
&:after {
content: "";
display: block;
background-color: white;
position: absolute;
top: 100%;
left: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
}
&__title {
width: auto;
min-width: 100px;
}
}

37
blocks/focused-thematique/src/frontend.js
View File

@ -1,37 +0,0 @@
window.addEventListener("DOMContentLoaded", (event) => {
// alert("Hello from frontend.js");
const focusBulletPoints = document.querySelectorAll(
".homegrade-blocks-focus-point-bullet"
);
focusBulletPoints.forEach((focusPoint) => {
const focusPointsContainer = focusPoint.parentElement;
focusPoint.addEventListener("mouseover", (event) => {
const aleradyHoveredFocusPoint = document.querySelector("[data-hovered]");
console.log(aleradyHoveredFocusPoint);
const focusTitle = focusPoint.getAttribute("data-focus-bullet-title");
const focusPointPopupContainer = document.createElement("div");
focusPointPopupContainer.className = "focus-point-popup-container";
const focusPointPopupTitle = document.createElement("h4");
focusPointPopupTitle.textContent = focusTitle;
focusPointPopupTitle.className = "focus-point-popup-container__title";
focusPointPopupContainer.appendChild(focusPointPopupTitle);
focusPoint.appendChild(focusPointPopupContainer);
focusPoint.setAttribute("data-hovered", "");
});
focusPoint.addEventListener("mouseout", function () {
const focusPointPopupContainer = focusPoint.querySelector(
".focus-point-popup-container"
);
// focusPoint.removeAttribute("data-hovered");
focusPointPopupContainer.remove();
// setTimeout(() => {
// }, 200);
});
});
});

5
blocks/focused-thematique/src/img/chevron_down.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10.037" height="6.876" viewBox="0 0 10.037 6.876">
<g id="fleche-bas" transform="translate(1.406 1.406)">
<path id="Tracé_255" data-name="Tracé 255" d="M104.818,77.366l4.47-3.612-4.47-3.612" transform="translate(77.366 -104.818) rotate(90)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 402 B

26
blocks/focused-thematique/src/save.js
View File

@ -5,6 +5,11 @@ import {
BlockControls,
MediaReplaceFlow,
} from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import chevronDown from "./img/chevron_down.svg";
import { Camera } from "lucide-react";
import { InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
@ -13,20 +18,18 @@ export default function save({ attributes }) {
return (
<div
data-focus-bullet-title={focusBullet.title}
className="homegrade-blocks-focus-point-bullet"
className="homegrade-blocks-focus-point-bullet "
style={{
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`,
}}
>
{index + 1}
</div>
></div>
);
});
return (
<section
{...useBlockProps.save({
className: `homegrade-blocks-focused-schema`,
className: `homegrade-blocks-focused-thematique`,
})}
>
{coverUrl && (
@ -39,7 +42,18 @@ export default function save({ attributes }) {
{renderedFocusPointBullets}
</figure>
)}
<figcaption>
<button
className="homegrade-blocks-focused-thematique__figcaption-toggle"
aria-expanded="false"
>
{__(
"Version texte des indications de l'illustration",
"homegrade-blocks__texte-fonctionnel"
)}
{/* <ChevronDown /> */}
<img src={chevronDown} alt="" />
</button>
<figcaption aria-hidden="true">
<ol>
<InnerBlocks.Content />
</ol>

101
blocks/focused-thematique/src/style.scss
View File

@ -1,12 +1,97 @@
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-schema {
.homegrade-blocks-focused-thematique-cover {
figure {
position: relative;
}
}
.homegrade-blocks-focused-thematique {
padding-bottom: 100px;
figure {
padding-bottom: 50px;
}
&__figcaption-toggle {
opacity: 0.9999;
font-weight: bold;
display: flex;
align-items: center;
img {
height: 8px;
width: auto;
margin-top: 2px;
margin-left: 10px;
transition: all 0.3s ease-out;
transform: rotate(0deg);
}
&[aria-expanded="true"] img {
transform: rotate(-180deg);
}
}
figcaption[aria-hidden="true"] {
display: none;
height: 0;
}
}
.homegrade-blocks-focus-point-bullet:hover {
scale: 1.2;
filter: brightness(1.2) hue-rotate(10deg);
}
.homegrade-blocks-focus-point-bullet {
background-color: red;
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute !important;
top: 0;
left: 0;
z-index: 99;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
transition: scale 0.2s ease-in-out;
&:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: red;
opacity: 0.2;
width: 200%;
height: 200%;
}
}
.focus-point-popup-container {
background-color: white;
border-radius: 14px;
padding: 10px;
transform: translate(-34%, -110%);
position: absolute;
top: 0;
left: 0;
max-width: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
&:after {
content: "";
display: block;
background-color: white;
position: absolute;
top: 100%;
left: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
}
&__title {
width: auto;
min-width: 100px;
}
}

24
blocks/focused-thematique/src/viewScript.js Normal file
View File

@ -0,0 +1,24 @@
window.addEventListener("DOMContentLoaded", (event) => {
const figcaptionToggle = document.querySelector(
".homegrade-blocks-focused-thematique__figcaption-toggle"
);
const figcaptionContent = document.querySelector(
".homegrade-blocks-focused-thematique figcaption"
);
function toggleFigcaption() {
if (isCaptionVisible()) {
figcaptionContent.setAttribute("aria-hidden", "true");
figcaptionToggle.setAttribute("aria-expanded", "false");
} else {
figcaptionContent.setAttribute("aria-hidden", "false");
figcaptionToggle.setAttribute("aria-expanded", "true");
}
}
function isCaptionVisible() {
return figcaptionContent.getAttribute("aria-hidden") === "false";
}
figcaptionToggle.addEventListener("click", toggleFigcaption);
});