refactoring blocks

This commit is contained in:
Antoine M 2023-08-30 18:10:52 +02:00
parent 7440feadf3
commit 14071448dc
143 changed files with 91200 additions and 467 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

View File

@ -60,6 +60,7 @@ export default function Edit({ attributes, setAttributes }) {
);
let currentGeneralThematique = postParentTaxonomy ?? postMainTaxonomy ?? null;
// let currentGeneralThematiqueSlug = postParentTaxonomy
// ? getThematiqueFamilySlug(postParentTaxonomy.slug)
// : postMainTaxonomy
@ -90,6 +91,7 @@ export default function Edit({ attributes, setAttributes }) {
return (
<section className="homegrade-blocks-chapter-header-block">
<div className="homegrade-blocks-chapter-header-block__infos">
<p className="homegrade-blocks-chapter-header-block__page-thematic-title">
{currentGeneralThematique.name}
</p>

View File

@ -5,6 +5,12 @@ import "./editor.scss";
export default function Edit() {
return (
<p {...useBlockProps()}>{__("Test hello from the editor!", "test")}</p>
<p
{...useBlockProps({
className: `homegrade-blocks-starter`,
})}
>
{__("Test hello from the editor!", "test")}
</p>
);
}

View File

@ -4,7 +4,11 @@ import "./editor.scss";
export default function Edit() {
return (
<p {...useBlockProps()}>
<p
{...useBlockProps({
className: `homegrade-blocks-starter`,
})}
>
{__("Multiblocks salut from the editor!", "multiblocks")}
</p>
);

View File

@ -17,7 +17,11 @@ import { useBlockProps } from "@wordpress/block-editor";
*/
export default function save() {
return (
<p {...useBlockProps.save()}>
<p
{...useBlockProps.save({
className: `homegrade-blocks-starter`,
})}
>
{"Multiblocks salut from the saved content!"}
</p>
);

View File

@ -0,0 +1,18 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
# WordPress Coding Standards
# https://make.wordpress.org/core/handbook/coding-standards/
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = tab
[*.{yml,yaml}]
indent_style = space
indent_size = 2

30
blocks/focused-schema/.gitignore vendored Normal file
View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Coverage directory used by tools like istanbul
coverage
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Output of `npm pack`
*.tgz
# Output of `wp-scripts plugin-zip`
*.zip
# dotenv environment variables file
.env

View File

@ -0,0 +1,40 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "homegrade-content-blocks/focused-schema",
"version": "0.1.0",
"title": "Schéma + Légende",
"category": "homegrade-blocks",
"description": "Bloc de Gestion schéma. Insérer un schéma et insérez-y la légende nécéssaire à l'aide de 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"
}

View File

@ -0,0 +1,36 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "homegrade-content-blocks/focus-point",
"version": "0.1.0",
"title": "Point de légende ",
"category": "homegrade-blocks",
"description": "Point de légende pour titrer ou décrire un point de légende spécifique sur un Schéma ",
"supports": {
"html": false
},
"textdomain": "focus-point",
"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
}
}
}
}

View File

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

View File

@ -0,0 +1,19 @@
/*!****************************************************************************************************************************************************************************************************************************************************!*\
!*** 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/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*/

View File

@ -0,0 +1 @@
{"version":3,"file":"focus-point/index.css","mappings":";;;AAAA;;;;EAAA;AAKA;EACC;AACD;;AAEA;EACC;EACA;EACA;AACD,C","sources":["webpack://multiblocks/./src/focus-point/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":""}

View File

@ -0,0 +1,464 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/focus-point/edit.js":
/*!*********************************!*\
!*** ./src/focus-point/edit.js ***!
\*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* 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/focus-point/editor.scss");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/notices */ "@wordpress/notices");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_notices__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__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__);
function Edit({
attributes,
setAttributes,
clientId,
...props
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
coverUrl,
focusIndex
} = attributes;
function handleChangeFocusPosition(focusPosition) {
setAttributes({
focusPosition
});
}
function handleChangeTitle(focusTitle) {
setAttributes({
focusTitle: focusTitle
});
}
function handleChangeCaptionDescription(focusCaptionDescription) {
setAttributes({
focusCaptionDescription
});
}
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_6__.PanelBody, {
className: "focus-point-modification-pannel",
title: "Gestion du points de focus"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-focus-point-bullet"
}, focusIndex), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextControl, {
placeholder: "Ins\xE9rer le titre de votre point focus",
label: "Titre du point focus",
value: focusTitle !== "Légende Sans titre" ? focusTitle : null,
placeholder: "Ins\xE9rer le titre de votre point focus",
onChange: value => {
handleChangeTitle(value);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextareaControl, {
label: "Description du point focus",
value: focusCaptionDescription,
rows: 3,
onChange: description => {
handleChangeCaptionDescription(description);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.FocalPointPicker, {
url: coverUrl !== null && coverUrl !== void 0 ? coverUrl : null,
dimensions: {
width: 400,
height: 50
},
value: focusPosition,
onChange: focalPoint => {
handleChangeFocusPosition(focalPoint);
}
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription));
}
/***/ }),
/***/ "./src/focus-point/index.js":
/*!**********************************!*\
!*** ./src/focus-point/index.js ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/focus-point/style.scss");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/focus-point/block.json");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/focus-point/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./save */ "./src/focus-point/save.js");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
title: _block_json__WEBPACK_IMPORTED_MODULE_3__.title,
icon: {
foreground: "#DF1E1E",
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
id: "Capa_1",
"enable-background": "new 0 0 512 512",
height: "512",
viewBox: "0 0 512 512",
width: "512",
xmlns: "http://www.w3.org/2000/svg"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m100.001 255.776c0-80.958 61.992-147.702 140.999-155.275v-100.277c-62.739 3.601-121.221 29.734-166.02 74.533-48.351 48.352-74.98 112.64-74.98 181.019 0 43.893 10.989 86.092 31.636 123.48l85.806-51.86c-11.138-21.46-17.441-45.817-17.441-71.62z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m256 411.776c-49.473 0-93.636-23.154-122.236-59.189l-86.098 52.037c8.139 11.341 17.249 22.106 27.315 32.173 48.352 48.352 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c11.293-11.293 21.384-23.465 30.245-36.346l-87.133-50.306c-28.524 37.426-73.552 61.631-124.133 61.631z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m411.999 255.776c0 24.704-5.781 48.08-16.048 68.86l86.835 50.134c19.084-36.263 29.214-76.848 29.214-118.994 0-68.38-26.629-132.667-74.98-181.02-44.799-44.798-103.281-70.931-166.02-74.532v100.278c79.007 7.573 140.999 74.316 140.999 155.274z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "256",
cy: "255.776",
r: "103.902"
})))
},
supports: _block_json__WEBPACK_IMPORTED_MODULE_3__.supports,
attributes: _block_json__WEBPACK_IMPORTED_MODULE_3__.attributes,
edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_5__["default"]
});
/***/ }),
/***/ "./src/focus-point/save.js":
/*!*********************************!*\
!*** ./src/focus-point/save.js ***!
\*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* 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__);
function save({
attributes
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
focusIndex
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription);
}
/***/ }),
/***/ "./src/focus-point/editor.scss":
/*!*************************************!*\
!*** ./src/focus-point/editor.scss ***!
\*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/focus-point/style.scss":
/*!************************************!*\
!*** ./src/focus-point/style.scss ***!
\************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
\*************************************/
/***/ ((module) => {
module.exports = window["wp"]["blockEditor"];
/***/ }),
/***/ "@wordpress/blocks":
/*!********************************!*\
!*** external ["wp","blocks"] ***!
\********************************/
/***/ ((module) => {
module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/components":
/*!************************************!*\
!*** external ["wp","components"] ***!
\************************************/
/***/ ((module) => {
module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["data"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["element"];
/***/ }),
/***/ "@wordpress/i18n":
/*!******************************!*\
!*** external ["wp","i18n"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["i18n"];
/***/ }),
/***/ "@wordpress/notices":
/*!*********************************!*\
!*** external ["wp","notices"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["notices"];
/***/ }),
/***/ "./src/focus-point/block.json":
/*!************************************!*\
!*** ./src/focus-point/block.json ***!
\************************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focus-point","version":"0.1.0","title":"Point de légende ","category":"homegrade-blocks","description":"Point de légende pour titrer ou décrire un point de légende spécifique sur un Schéma ","supports":{"html":false},"textdomain":"focus-point","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}}}}');
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/chunk loaded */
/******/ (() => {
/******/ var deferred = [];
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "focus-point/index": 0,
/******/ "./style-index": 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["./style-index"], () => (__webpack_require__("./src/focus-point/index.js")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@ -0,0 +1 @@
{"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":""}

View File

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

View File

@ -0,0 +1,46 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* 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 {
position: unset;
}
.wpblock-cover-container {
position: relative;
}
.wpblock-cover-container.is-loading .components-spinner {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
top: 0;
margin: auto;
}
.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/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*/

View File

@ -0,0 +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/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":""}

View File

@ -0,0 +1,819 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/edit.js":
/*!*********************!*\
!*** ./src/edit.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _focus_point__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./focus-point */ "./src/focus-point/index.js");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
/* 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_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__);
function Edit({
attributes,
setAttributes,
noticeOperations,
noticeList,
noticeUI,
clientId,
...props
}) {
const {
coverUrl,
coverId,
coverAlt,
focusBullets
} = attributes;
const [blobUrl, setBlobUrl] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)();
let children = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core/block-editor").getBlocksByClientId(clientId)[0].innerBlocks);
function onUploadError(message) {
noticeOperations.removeAllNotices(); // Remove all previous notices
noticeOperations.createErrorNotice(message);
}
function removeCoverImg() {
setAttributes({
coverUrl: undefined,
coverId: undefined,
coverAlt: ""
});
}
function updateImage(image) {
if (!image || !image.url) {
setAttributes({
coverUrl: undefined,
coverId: undefined,
coverAlt: ""
});
return;
}
setAttributes({
coverUrl: image.url,
coverId: image.id,
coverAlt: image.alt
});
}
function passCoverUrlToChildren() {
if (children && coverUrl) {
children.forEach(function (child) {
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").updateBlockAttributes(child.clientId, {
coverUrl: coverUrl
});
});
}
}
function passIndexToChildren() {
if (children) {
children.forEach((child, index) => {
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").updateBlockAttributes(child.clientId, {
focusIndex: index + 1
});
});
}
}
function updateFocusPointBullets() {
if (children) {
const focusBullets = children.map((child, index) => {
return {
title: child.attributes.focusTitle,
x: child.attributes.focusPosition.x,
y: child.attributes.focusPosition.y
};
});
setAttributes({
focusBullets
});
}
}
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", {});
(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;
console.log(innerBlocks);
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);
}
}
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",
style: {
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`
},
onClick: () => handleBulletClick(index)
}, index + 1);
});
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
updateFocusPointBullets();
if (!coverId && (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__.isBlobURL)(coverUrl)) {
setAttributes({
coverUrl: undefined,
coverAlt: ""
});
}
}, []);
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
if ((0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__.isBlobURL)(coverUrl)) {
// Si la cover est une blob, c'est que ça upload donc on met cette url dans le state
setBlobUrl(coverUrl);
} else {
// Si la cover en'est plus une blob, c'est que l'upload est terminé, on revoke la blob et on clean le state
(0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__.revokeBlobURL)(blobUrl); // On utilise la valeur stocké dans le state pour revoke l'url
setBlobUrl();
}
passCoverUrlToChildren();
}, [coverUrl]);
(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, {
variant: "primary",
onClick: () => {
insertFocusPointBlock();
}
}, "Ajouter un point L\xE9gende"))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.BlockControls, null, coverUrl && (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__.MediaReplaceFlow, {
group: "inline",
name: "Remplacer l'image",
disableMediaButtons: coverUrl,
icon: "trash",
onSelect: updateImage,
onError: onUploadError,
accept: "image/*" // On upload Allow only images
,
allowedTypes: ["image"] // Onlibrary Allow only images
,
notices: noticeUI // En cas d'erreur d'upload
,
mediaId: coverId,
mediaURL: coverUrl,
className: "media-button-replacer"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
icon: "trash",
title: "Supprimer l'image",
onClick: removeCoverImg
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.MediaPlaceholder, {
disableMediaButtons: coverUrl,
icon: "admin-appearance",
onSelect: updateImage,
onError: onUploadError,
accept: "image/*" // On upload Allow only images
,
allowedTypes: ["image"] // Onlibrary Allow only images
,
notices: noticeUI // En cas d'erreur d'upload
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({
className: `homegrade-blocks-focused-schema`
})
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
className: `picture-container ${(0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__.isBlobURL)(coverUrl) ? "is-loading" : ""}`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: coverUrl,
alt: coverAlt
}), renderedFocusPointBullets, (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__.isBlobURL)(coverUrl) && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.Spinner, null)), (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"]
})))));
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.withNotices)(Edit));
/***/ }),
/***/ "./src/focus-point/edit.js":
/*!*********************************!*\
!*** ./src/focus-point/edit.js ***!
\*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* 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/focus-point/editor.scss");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/notices */ "@wordpress/notices");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_notices__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__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__);
function Edit({
attributes,
setAttributes,
clientId,
...props
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
coverUrl,
focusIndex
} = attributes;
function handleChangeFocusPosition(focusPosition) {
setAttributes({
focusPosition
});
}
function handleChangeTitle(focusTitle) {
setAttributes({
focusTitle: focusTitle
});
}
function handleChangeCaptionDescription(focusCaptionDescription) {
setAttributes({
focusCaptionDescription
});
}
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_6__.PanelBody, {
className: "focus-point-modification-pannel",
title: "Gestion du points de focus"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-focus-point-bullet"
}, focusIndex), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextControl, {
placeholder: "Ins\xE9rer le titre de votre point focus",
label: "Titre du point focus",
value: focusTitle !== "Légende Sans titre" ? focusTitle : null,
placeholder: "Ins\xE9rer le titre de votre point focus",
onChange: value => {
handleChangeTitle(value);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextareaControl, {
label: "Description du point focus",
value: focusCaptionDescription,
rows: 3,
onChange: description => {
handleChangeCaptionDescription(description);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.FocalPointPicker, {
url: coverUrl !== null && coverUrl !== void 0 ? coverUrl : null,
dimensions: {
width: 400,
height: 50
},
value: focusPosition,
onChange: focalPoint => {
handleChangeFocusPosition(focalPoint);
}
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription));
}
/***/ }),
/***/ "./src/focus-point/index.js":
/*!**********************************!*\
!*** ./src/focus-point/index.js ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/focus-point/style.scss");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/focus-point/block.json");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/focus-point/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./save */ "./src/focus-point/save.js");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
title: _block_json__WEBPACK_IMPORTED_MODULE_3__.title,
icon: {
foreground: "#DF1E1E",
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
id: "Capa_1",
"enable-background": "new 0 0 512 512",
height: "512",
viewBox: "0 0 512 512",
width: "512",
xmlns: "http://www.w3.org/2000/svg"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m100.001 255.776c0-80.958 61.992-147.702 140.999-155.275v-100.277c-62.739 3.601-121.221 29.734-166.02 74.533-48.351 48.352-74.98 112.64-74.98 181.019 0 43.893 10.989 86.092 31.636 123.48l85.806-51.86c-11.138-21.46-17.441-45.817-17.441-71.62z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m256 411.776c-49.473 0-93.636-23.154-122.236-59.189l-86.098 52.037c8.139 11.341 17.249 22.106 27.315 32.173 48.352 48.352 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c11.293-11.293 21.384-23.465 30.245-36.346l-87.133-50.306c-28.524 37.426-73.552 61.631-124.133 61.631z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m411.999 255.776c0 24.704-5.781 48.08-16.048 68.86l86.835 50.134c19.084-36.263 29.214-76.848 29.214-118.994 0-68.38-26.629-132.667-74.98-181.02-44.799-44.798-103.281-70.931-166.02-74.532v100.278c79.007 7.573 140.999 74.316 140.999 155.274z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "256",
cy: "255.776",
r: "103.902"
})))
},
supports: _block_json__WEBPACK_IMPORTED_MODULE_3__.supports,
attributes: _block_json__WEBPACK_IMPORTED_MODULE_3__.attributes,
edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_5__["default"]
});
/***/ }),
/***/ "./src/focus-point/save.js":
/*!*********************************!*\
!*** ./src/focus-point/save.js ***!
\*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* 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__);
function save({
attributes
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
focusIndex
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription);
}
/***/ }),
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./save */ "./src/save.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, {
icon: {
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
id: "Capa_1",
height: "512",
viewBox: "0 0 512 512",
width: "512",
xmlns: "http://www.w3.org/2000/svg"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m443.093 324.907c0-103.163-83.93-187.092-187.093-187.092s-187.093 83.929-187.093 187.092c0 42.261 14.092 81.289 37.814 112.647-6.216-16.99-9.611-35.328-9.611-54.444 0-87.612 71.277-158.89 158.89-158.89s158.89 71.277 158.89 158.89c0 19.116-3.395 37.454-9.611 54.444 23.722-31.358 37.814-70.386 37.814-112.647z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m384.89 383.11c0-71.07-57.819-128.89-128.89-128.89s-128.89 57.82-128.89 128.89c0 41.62 19.834 78.688 50.541 102.268-2.706-8.157-4.192-16.865-4.192-25.919 0-45.514 37.027-82.542 82.541-82.542s82.541 37.028 82.541 82.542c0 9.054-1.486 17.762-4.192 25.919 30.706-23.58 50.541-60.648 50.541-102.268z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m308.541 459.459c0-28.972-23.569-52.542-52.541-52.542s-52.541 23.57-52.541 52.542 23.569 52.541 52.541 52.541 52.541-23.569 52.541-52.541z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m512 256c0-68.38-26.629-132.667-74.98-181.02-48.353-48.351-112.64-74.98-181.02-74.98s-132.667 26.629-181.02 74.98c-48.351 48.353-74.98 112.64-74.98 181.02 0 62.294 22.108 121.187 62.599 167.734-15.483-30.22-23.692-63.891-23.692-98.827 0-57.987 22.582-112.504 63.585-153.507 41.004-41.004 95.521-63.585 153.508-63.585s112.504 22.581 153.508 63.585c41.003 41.003 63.585 95.52 63.585 153.507 0 34.936-8.208 68.606-23.692 98.827 40.491-46.547 62.599-105.44 62.599-167.734z"
}))),
foreground: "#DF1E1E"
},
edit: _edit__WEBPACK_IMPORTED_MODULE_3__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_4__["default"]
});
/***/ }),
/***/ "./src/save.js":
/*!*********************!*\
!*** ./src/save.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* 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__);
function save({
attributes
}) {
const {
coverUrl,
coverId,
coverAlt,
focusBullets
} = attributes;
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",
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`
})
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
className: `picture-container`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
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))));
}
/***/ }),
/***/ "./src/editor.scss":
/*!*************************!*\
!*** ./src/editor.scss ***!
\*************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/focus-point/editor.scss":
/*!*************************************!*\
!*** ./src/focus-point/editor.scss ***!
\*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/focus-point/style.scss":
/*!************************************!*\
!*** ./src/focus-point/style.scss ***!
\************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/style.scss":
/*!************************!*\
!*** ./src/style.scss ***!
\************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "@wordpress/blob":
/*!******************************!*\
!*** external ["wp","blob"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["blob"];
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
\*************************************/
/***/ ((module) => {
module.exports = window["wp"]["blockEditor"];
/***/ }),
/***/ "@wordpress/blocks":
/*!********************************!*\
!*** external ["wp","blocks"] ***!
\********************************/
/***/ ((module) => {
module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/components":
/*!************************************!*\
!*** external ["wp","components"] ***!
\************************************/
/***/ ((module) => {
module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["data"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["element"];
/***/ }),
/***/ "@wordpress/i18n":
/*!******************************!*\
!*** external ["wp","i18n"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["i18n"];
/***/ }),
/***/ "@wordpress/notices":
/*!*********************************!*\
!*** external ["wp","notices"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["notices"];
/***/ }),
/***/ "./src/block.json":
/*!************************!*\
!*** ./src/block.json ***!
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focused-schema","version":"0.1.0","title":"Schéma + Légende","category":"homegrade-blocks","description":"Bloc de Gestion schéma. Insérer un schéma et insérez-y la légende nécéssaire à l\'aide de 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"}');
/***/ }),
/***/ "./src/focus-point/block.json":
/*!************************************!*\
!*** ./src/focus-point/block.json ***!
\************************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/focus-point","version":"0.1.0","title":"Point de légende ","category":"homegrade-blocks","description":"Point de légende pour titrer ou décrire un point de légende spécifique sur un Schéma ","supports":{"html":false},"textdomain":"focus-point","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}}}}');
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/chunk loaded */
/******/ (() => {
/******/ var deferred = [];
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "index": 0,
/******/ "./style-index": 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["./style-index"], () => (__webpack_require__("./src/index.js")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,76 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** 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 {
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/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-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);
}
.focus-point-popup-container: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);
}
.focus-point-popup-container__title {
width: auto;
min-width: 100px;
}
/*# sourceMappingURL=style-index.css.map*/

View File

@ -0,0 +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/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":""}

28142
blocks/focused-schema/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,24 @@
{
"name": "multiblocks",
"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",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^26.9.0"
}
}

View File

@ -0,0 +1,40 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "homegrade-content-blocks/focused-schema",
"version": "0.1.0",
"title": "Schéma + Légende",
"category": "homegrade-blocks",
"description": "Bloc de Gestion schéma. Insérer un schéma et insérez-y la légende nécéssaire à l'aide de 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"
}

View File

@ -0,0 +1,242 @@
import "./editor.scss";
import "./focus-point";
import { __ } from "@wordpress/i18n";
import { useSelect, dispatch, select } from "@wordpress/data";
import { useEffect, useState } from "@wordpress/element";
import { createBlock } from "@wordpress/blocks";
import {
useBlockProps,
MediaPlaceholder,
BlockControls,
MediaReplaceFlow,
InspectorControls,
} from "@wordpress/block-editor";
import {
ToolbarButton,
Spinner,
withNotices,
Button,
PanelBody,
} from "@wordpress/components";
import { InnerBlocks } from "@wordpress/block-editor";
import { isBlobURL, revokeBlobURL } from "@wordpress/blob";
function Edit({
attributes,
setAttributes,
noticeOperations,
noticeList,
noticeUI,
clientId,
...props
}) {
const { coverUrl, coverId, coverAlt, focusBullets } = attributes;
const [blobUrl, setBlobUrl] = useState();
let children = useSelect(
(select) =>
select("core/block-editor").getBlocksByClientId(clientId)[0].innerBlocks
);
function onUploadError(message) {
noticeOperations.removeAllNotices(); // Remove all previous notices
noticeOperations.createErrorNotice(message);
}
function removeCoverImg() {
setAttributes({
coverUrl: undefined,
coverId: undefined,
coverAlt: "",
});
}
function updateImage(image) {
if (!image || !image.url) {
setAttributes({
coverUrl: undefined,
coverId: undefined,
coverAlt: "",
});
return;
}
setAttributes({
coverUrl: image.url,
coverId: image.id,
coverAlt: image.alt,
});
}
function passCoverUrlToChildren() {
if (children && coverUrl) {
children.forEach(function (child) {
dispatch("core/block-editor").updateBlockAttributes(child.clientId, {
coverUrl: coverUrl,
});
});
}
}
function passIndexToChildren() {
if (children) {
children.forEach((child, index) => {
dispatch("core/block-editor").updateBlockAttributes(child.clientId, {
focusIndex: index + 1,
});
});
}
}
function updateFocusPointBullets() {
if (children) {
const focusBullets = children.map((child, index) => {
return {
title: child.attributes.focusTitle,
x: child.attributes.focusPosition.x,
y: child.attributes.focusPosition.y,
};
});
setAttributes({ focusBullets });
}
}
function insertFocusPointBlock() {
const index = children && children.length ? children.length : 0;
const newBlock = createBlock("homegrade-content-blocks/focus-point", {});
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;
console.log(innerBlocks);
if (innerBlocks && innerBlocks[index]) {
const bulletBlock = editor.getBlocks(attributes.clientId)[0].innerBlocks[
index
];
dispatch("core/block-editor").selectBlock(bulletBlock.clientId);
}
}
const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
return (
<div
data-focus-bullet-title={focusBullet.title}
className="homegrade-blocks-focus-point-bullet"
style={{
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`,
}}
onClick={() => handleBulletClick(index)}
>
{index + 1}
</div>
);
});
useEffect(() => {
updateFocusPointBullets();
if (!coverId && isBlobURL(coverUrl)) {
setAttributes({ coverUrl: undefined, coverAlt: "" });
}
}, []);
useEffect(() => {
// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
if (isBlobURL(coverUrl)) {
// Si la cover est une blob, c'est que ça upload donc on met cette url dans le state
setBlobUrl(coverUrl);
} else {
// Si la cover en'est plus une blob, c'est que l'upload est terminé, on revoke la blob et on clean le state
revokeBlobURL(blobUrl); // On utilise la valeur stocké dans le state pour revoke l'url
setBlobUrl();
}
passCoverUrlToChildren();
}, [coverUrl]);
useEffect(() => {
updateFocusPointBullets();
passCoverUrlToChildren();
}, [children]);
return (
<>
<InspectorControls>
<PanelBody>
<Button
variant="primary"
onClick={() => {
insertFocusPointBlock();
}}
>
Ajouter un point Légende
</Button>
</PanelBody>
</InspectorControls>
<BlockControls>
{coverUrl && (
<>
<MediaReplaceFlow
group="inline"
name="Remplacer l'image"
disableMediaButtons={coverUrl}
icon="trash"
onSelect={updateImage}
onError={onUploadError}
accept="image/*" // On upload Allow only images
allowedTypes={["image"]} // Onlibrary Allow only images
notices={noticeUI} // En cas d'erreur d'upload
mediaId={coverId}
mediaURL={coverUrl}
className="media-button-replacer"
/>
<ToolbarButton
icon={"trash"}
title="Supprimer l'image"
onClick={removeCoverImg}
/>
</>
)}
</BlockControls>
<MediaPlaceholder
disableMediaButtons={coverUrl}
icon="admin-appearance"
onSelect={updateImage}
onError={onUploadError}
accept="image/*" // On upload Allow only images
allowedTypes={["image"]} // Onlibrary Allow only images
notices={noticeUI} // En cas d'erreur d'upload
/>
<section
{...useBlockProps({
className: `homegrade-blocks-focused-schema`,
})}
>
{coverUrl && (
<figure
className={`picture-container ${
isBlobURL(coverUrl) ? "is-loading" : ""
}`}
>
<img src={coverUrl} alt={coverAlt} />
{renderedFocusPointBullets}
{isBlobURL(coverUrl) && <Spinner />}
</figure>
)}
<figcaption>
<ol>
<InnerBlocks
allowedBlocks={["homegrade-content-blocks/focus-point"]}
/>
</ol>
</figcaption>
</section>
</>
);
}
export default withNotices(Edit);

View File

@ -0,0 +1,27 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-schema {
.block-editor-block-list__layout,
.block-editor-block-list__block {
position: unset;
}
}
.wpblock-cover-container {
position: relative;
&.is-loading {
.components-spinner {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
top: 0;
margin: auto;
}
img {
opacity: 10%;
}
}
}

View File

@ -0,0 +1,36 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "homegrade-content-blocks/focus-point",
"version": "0.1.0",
"title": "Point de légende ",
"category": "homegrade-blocks",
"description": "Point de légende pour titrer ou décrire un point de légende spécifique sur un Schéma ",
"supports": {
"html": false
},
"textdomain": "focus-point",
"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
}
}
}
}

View File

@ -0,0 +1,100 @@
import { __ } from "@wordpress/i18n";
import { useBlockProps, RichText } from "@wordpress/block-editor";
import "./editor.scss";
import { InspectorControls } from "@wordpress/block-editor";
import { createErrorNotice, removeNotice } from "@wordpress/notices";
import { useDispatch, useSelect } from "@wordpress/data";
import { store as noticesStore } from "@wordpress/notices";
import {
PanelBody,
FocalPointPicker,
TextControl,
TextareaControl,
} from "@wordpress/components";
export default function Edit({
attributes,
setAttributes,
clientId,
...props
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
coverUrl,
focusIndex,
} = attributes;
function handleChangeFocusPosition(focusPosition) {
setAttributes({ focusPosition });
}
function handleChangeTitle(focusTitle) {
setAttributes({ focusTitle: focusTitle });
}
function handleChangeCaptionDescription(focusCaptionDescription) {
setAttributes({ focusCaptionDescription });
}
return (
<>
<InspectorControls>
<PanelBody
className="focus-point-modification-pannel"
title="Gestion du points de focus"
>
<div className="homegrade-blocks-focus-point-bullet">
{focusIndex}
</div>
<TextControl
placeholder="Insérer le titre de votre point focus"
label="Titre du point focus"
value={focusTitle !== "Légende Sans titre" ? focusTitle : null}
placeholder="Insérer le titre de votre point focus"
onChange={(value) => {
handleChangeTitle(value);
}}
/>
<TextareaControl
label="Description du point focus"
value={focusCaptionDescription}
rows={3}
onChange={(description) => {
handleChangeCaptionDescription(description);
}}
/>
<FocalPointPicker
url={coverUrl ?? null}
dimensions={{
width: 400,
height: 50,
}}
value={focusPosition}
onChange={(focalPoint) => {
handleChangeFocusPosition(focalPoint);
}}
/>
</PanelBody>
</InspectorControls>
<li
{...useBlockProps({
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>
</>
);
}

View File

@ -0,0 +1,14 @@
/**
* 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;
}

View File

@ -0,0 +1,35 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import metadata from "./block.json";
import Edit from "./edit";
import Save from "./save";
registerBlockType(metadata.name, {
title: metadata.title,
icon: {
foreground: "#DF1E1E",
src: (
<svg
id="Capa_1"
enable-background="new 0 0 512 512"
height="512"
viewBox="0 0 512 512"
width="512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path d="m100.001 255.776c0-80.958 61.992-147.702 140.999-155.275v-100.277c-62.739 3.601-121.221 29.734-166.02 74.533-48.351 48.352-74.98 112.64-74.98 181.019 0 43.893 10.989 86.092 31.636 123.48l85.806-51.86c-11.138-21.46-17.441-45.817-17.441-71.62z" />
<path d="m256 411.776c-49.473 0-93.636-23.154-122.236-59.189l-86.098 52.037c8.139 11.341 17.249 22.106 27.315 32.173 48.352 48.352 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c11.293-11.293 21.384-23.465 30.245-36.346l-87.133-50.306c-28.524 37.426-73.552 61.631-124.133 61.631z" />
<path d="m411.999 255.776c0 24.704-5.781 48.08-16.048 68.86l86.835 50.134c19.084-36.263 29.214-76.848 29.214-118.994 0-68.38-26.629-132.667-74.98-181.02-44.799-44.798-103.281-70.931-166.02-74.532v100.278c79.007 7.573 140.999 74.316 140.999 155.274z" />
<circle cx="256" cy="255.776" r="103.902" />
</g>
</svg>
),
},
supports: metadata.supports,
attributes: metadata.attributes,
edit: Edit,
save: Save,
});

View File

@ -0,0 +1,27 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { focusTitle, focusPosition, focusCaptionDescription, focusIndex } =
attributes;
return (
<li
{...useBlockProps.save({
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>
);
}

View File

@ -0,0 +1,58 @@
/**
* 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;
}
}

View File

@ -0,0 +1,37 @@
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);
});
});
});

View File

@ -0,0 +1,31 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import save from "./save";
import metadata from "./block.json";
registerBlockType(metadata.name, {
icon: {
src: (
<svg
id="Capa_1"
height="512"
viewBox="0 0 512 512"
width="512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path d="m443.093 324.907c0-103.163-83.93-187.092-187.093-187.092s-187.093 83.929-187.093 187.092c0 42.261 14.092 81.289 37.814 112.647-6.216-16.99-9.611-35.328-9.611-54.444 0-87.612 71.277-158.89 158.89-158.89s158.89 71.277 158.89 158.89c0 19.116-3.395 37.454-9.611 54.444 23.722-31.358 37.814-70.386 37.814-112.647z" />
<path d="m384.89 383.11c0-71.07-57.819-128.89-128.89-128.89s-128.89 57.82-128.89 128.89c0 41.62 19.834 78.688 50.541 102.268-2.706-8.157-4.192-16.865-4.192-25.919 0-45.514 37.027-82.542 82.541-82.542s82.541 37.028 82.541 82.542c0 9.054-1.486 17.762-4.192 25.919 30.706-23.58 50.541-60.648 50.541-102.268z" />
<path d="m308.541 459.459c0-28.972-23.569-52.542-52.541-52.542s-52.541 23.57-52.541 52.542 23.569 52.541 52.541 52.541 52.541-23.569 52.541-52.541z" />
<path d="m512 256c0-68.38-26.629-132.667-74.98-181.02-48.353-48.351-112.64-74.98-181.02-74.98s-132.667 26.629-181.02 74.98c-48.351 48.353-74.98 112.64-74.98 181.02 0 62.294 22.108 121.187 62.599 167.734-15.483-30.22-23.692-63.891-23.692-98.827 0-57.987 22.582-112.504 63.585-153.507 41.004-41.004 95.521-63.585 153.508-63.585s112.504 22.581 153.508 63.585c41.003 41.003 63.585 95.52 63.585 153.507 0 34.936-8.208 68.606-23.692 98.827 40.491-46.547 62.599-105.44 62.599-167.734z" />
</g>
</svg>
),
foreground: "#DF1E1E",
},
edit: Edit,
save,
});

View File

@ -0,0 +1,13 @@
<?php
// $relatedPostId = $attributes['relatedPostId'] ?? null;
// write_log($attributes);
$blocks = parse_blocks($content);
// echo '<pre>';
// print_r($attributes);
// print_r($blocks[0]);
// echo '</pre>';
?>
<h2>Salut</h2>
<?php echo $content ?>

View File

@ -0,0 +1,49 @@
import {
useBlockProps,
MediaPlaceholder,
RichText,
BlockControls,
MediaReplaceFlow,
} from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { coverUrl, coverId, coverAlt, focusBullets } = attributes;
const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
return (
<div
data-focus-bullet-title={focusBullet.title}
className="homegrade-blocks-focus-point-bullet"
style={{
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`,
}}
>
{index + 1}
</div>
);
});
return (
<section
{...useBlockProps.save({
className: `homegrade-blocks-focused-schema`,
})}
>
{coverUrl && (
<figure className={`picture-container`}>
<img
src={coverUrl}
alt={coverAlt}
className={`wp-image-${coverId}`}
/>
{renderedFocusPointBullets}
</figure>
)}
<figcaption>
<ol>
<InnerBlocks.Content />
</ol>
</figcaption>
</section>
);
}

View File

@ -0,0 +1,12 @@
/**
* 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 {
position: relative;
}
}

View File

@ -0,0 +1,18 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
# WordPress Coding Standards
# https://make.wordpress.org/core/handbook/coding-standards/
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = tab
[*.{yml,yaml}]
indent_style = space
indent_size = 2

30
blocks/focused-thematique/.gitignore vendored Normal file
View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Coverage directory used by tools like istanbul
coverage
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Output of `npm pack`
*.tgz
# Output of `wp-scripts plugin-zip`
*.zip
# dotenv environment variables file
.env

View File

@ -0,0 +1,40 @@
{
"$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"
}

View File

@ -0,0 +1,36 @@
{
"$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
}
}
}
}

View File

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

View File

@ -0,0 +1,19 @@
/*!***************************************************************************************************************************************************************************************************************************************************************!*\
!*** 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*/

View File

@ -0,0 +1 @@
{"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":""}

View File

@ -0,0 +1,463 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/focus-point-thematique/edit.js":
/*!********************************************!*\
!*** ./src/focus-point-thematique/edit.js ***!
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* 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/focus-point-thematique/editor.scss");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/notices */ "@wordpress/notices");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_notices__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__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__);
function Edit({
attributes,
setAttributes,
clientId,
...props
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
coverUrl,
focusIndex
} = attributes;
function handleChangeFocusPosition(focusPosition) {
setAttributes({
focusPosition
});
}
function handleChangeTitle(focusTitle) {
setAttributes({
focusTitle: focusTitle
});
}
function handleChangeCaptionDescription(focusCaptionDescription) {
setAttributes({
focusCaptionDescription
});
}
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_6__.PanelBody, {
className: "focus-point-modification-pannel",
title: "Gestion du points de focus"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-focus-point-bullet"
}, focusIndex), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextControl, {
placeholder: "Ins\xE9rer le titre de votre point focus",
label: "Titre du point focus",
value: focusTitle !== "Légende Sans titre" ? focusTitle : null,
onChange: value => {
handleChangeTitle(value);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextareaControl, {
label: "Description du point focus",
value: focusCaptionDescription,
rows: 3,
onChange: description => {
handleChangeCaptionDescription(description);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.FocalPointPicker, {
url: coverUrl !== null && coverUrl !== void 0 ? coverUrl : null,
dimensions: {
width: 400,
height: 50
},
value: focusPosition,
onChange: focalPoint => {
handleChangeFocusPosition(focalPoint);
}
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription));
}
/***/ }),
/***/ "./src/focus-point-thematique/index.js":
/*!*********************************************!*\
!*** ./src/focus-point-thematique/index.js ***!
\*********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/focus-point-thematique/style.scss");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/focus-point-thematique/block.json");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/focus-point-thematique/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./save */ "./src/focus-point-thematique/save.js");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
title: _block_json__WEBPACK_IMPORTED_MODULE_3__.title,
icon: {
foreground: "#DF1E1E",
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
id: "Capa_1",
"enable-background": "new 0 0 512 512",
height: "512",
viewBox: "0 0 512 512",
width: "512",
xmlns: "http://www.w3.org/2000/svg"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m100.001 255.776c0-80.958 61.992-147.702 140.999-155.275v-100.277c-62.739 3.601-121.221 29.734-166.02 74.533-48.351 48.352-74.98 112.64-74.98 181.019 0 43.893 10.989 86.092 31.636 123.48l85.806-51.86c-11.138-21.46-17.441-45.817-17.441-71.62z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m256 411.776c-49.473 0-93.636-23.154-122.236-59.189l-86.098 52.037c8.139 11.341 17.249 22.106 27.315 32.173 48.352 48.352 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c11.293-11.293 21.384-23.465 30.245-36.346l-87.133-50.306c-28.524 37.426-73.552 61.631-124.133 61.631z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m411.999 255.776c0 24.704-5.781 48.08-16.048 68.86l86.835 50.134c19.084-36.263 29.214-76.848 29.214-118.994 0-68.38-26.629-132.667-74.98-181.02-44.799-44.798-103.281-70.931-166.02-74.532v100.278c79.007 7.573 140.999 74.316 140.999 155.274z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "256",
cy: "255.776",
r: "103.902"
})))
},
supports: _block_json__WEBPACK_IMPORTED_MODULE_3__.supports,
attributes: _block_json__WEBPACK_IMPORTED_MODULE_3__.attributes,
edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_5__["default"]
});
/***/ }),
/***/ "./src/focus-point-thematique/save.js":
/*!********************************************!*\
!*** ./src/focus-point-thematique/save.js ***!
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* 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__);
function save({
attributes
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
focusIndex
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription);
}
/***/ }),
/***/ "./src/focus-point-thematique/editor.scss":
/*!************************************************!*\
!*** ./src/focus-point-thematique/editor.scss ***!
\************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/focus-point-thematique/style.scss":
/*!***********************************************!*\
!*** ./src/focus-point-thematique/style.scss ***!
\***********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
\*************************************/
/***/ ((module) => {
module.exports = window["wp"]["blockEditor"];
/***/ }),
/***/ "@wordpress/blocks":
/*!********************************!*\
!*** external ["wp","blocks"] ***!
\********************************/
/***/ ((module) => {
module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/components":
/*!************************************!*\
!*** external ["wp","components"] ***!
\************************************/
/***/ ((module) => {
module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["data"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["element"];
/***/ }),
/***/ "@wordpress/i18n":
/*!******************************!*\
!*** external ["wp","i18n"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["i18n"];
/***/ }),
/***/ "@wordpress/notices":
/*!*********************************!*\
!*** external ["wp","notices"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["notices"];
/***/ }),
/***/ "./src/focus-point-thematique/block.json":
/*!***********************************************!*\
!*** ./src/focus-point-thematique/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}}}}');
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/chunk loaded */
/******/ (() => {
/******/ var deferred = [];
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "focus-point-thematique/index": 0,
/******/ "./style-index": 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["./style-index"], () => (__webpack_require__("./src/focus-point-thematique/index.js")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@ -0,0 +1 @@
{"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":""}

View File

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

View File

@ -0,0 +1,46 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* 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 {
position: unset;
}
.wpblock-cover-container {
position: relative;
}
.wpblock-cover-container.is-loading .components-spinner {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
top: 0;
margin: auto;
}
.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;
}
.components-panel__body .homegrade-blocks-focus-point-bullet {
position: static !important;
margin-top: -16px;
margin-bottom: 10px;
}
/*# sourceMappingURL=index.css.map*/

View File

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

View File

@ -0,0 +1,760 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/edit.js":
/*!*********************!*\
!*** ./src/edit.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _focus_point_thematique__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./focus-point-thematique */ "./src/focus-point-thematique/index.js");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
/* 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_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__);
function Edit({
attributes,
setAttributes,
noticeOperations,
noticeList,
noticeUI,
clientId,
...props
}) {
var _ref;
const {
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;
let children = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => select("core/block-editor").getBlocksByClientId(clientId)[0].innerBlocks);
function passCoverUrlToChildren() {
if (children && coverUrl) {
children.forEach(function (child) {
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").updateBlockAttributes(child.clientId, {
coverUrl: coverUrl
});
});
}
}
function passIndexToChildren() {
if (children) {
children.forEach((child, index) => {
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").updateBlockAttributes(child.clientId, {
focusIndex: index + 1
});
});
}
}
function updateFocusPointBullets() {
if (children) {
const focusBullets = children.map((child, index) => {
return {
title: child.attributes.focusTitle,
x: child.attributes.focusPosition.x,
y: child.attributes.focusPosition.y
};
});
setAttributes({
focusBullets
});
}
}
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", {});
(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);
}
}
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",
style: {
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`
},
onClick: () => handleBulletClick(index)
}, index + 1);
});
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
updateFocusPointBullets();
if (!coverId && (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_8__.isBlobURL)(coverUrl)) {
setAttributes({
coverUrl: undefined,
coverAlt: ""
});
}
}, []);
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
passCoverUrlToChildren();
}, [coverUrl]);
(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, {
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`
})
}, 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", {
className: "picture-container"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: cover.source_url,
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"]
})))));
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.withNotices)(Edit));
/***/ }),
/***/ "./src/focus-point-thematique/edit.js":
/*!********************************************!*\
!*** ./src/focus-point-thematique/edit.js ***!
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* 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/focus-point-thematique/editor.scss");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/notices */ "@wordpress/notices");
/* harmony import */ var _wordpress_notices__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_notices__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__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__);
function Edit({
attributes,
setAttributes,
clientId,
...props
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
coverUrl,
focusIndex
} = attributes;
function handleChangeFocusPosition(focusPosition) {
setAttributes({
focusPosition
});
}
function handleChangeTitle(focusTitle) {
setAttributes({
focusTitle: focusTitle
});
}
function handleChangeCaptionDescription(focusCaptionDescription) {
setAttributes({
focusCaptionDescription
});
}
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_6__.PanelBody, {
className: "focus-point-modification-pannel",
title: "Gestion du points de focus"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-focus-point-bullet"
}, focusIndex), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextControl, {
placeholder: "Ins\xE9rer le titre de votre point focus",
label: "Titre du point focus",
value: focusTitle !== "Légende Sans titre" ? focusTitle : null,
onChange: value => {
handleChangeTitle(value);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.TextareaControl, {
label: "Description du point focus",
value: focusCaptionDescription,
rows: 3,
onChange: description => {
handleChangeCaptionDescription(description);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.FocalPointPicker, {
url: coverUrl !== null && coverUrl !== void 0 ? coverUrl : null,
dimensions: {
width: 400,
height: 50
},
value: focusPosition,
onChange: focalPoint => {
handleChangeFocusPosition(focalPoint);
}
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription));
}
/***/ }),
/***/ "./src/focus-point-thematique/index.js":
/*!*********************************************!*\
!*** ./src/focus-point-thematique/index.js ***!
\*********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/focus-point-thematique/style.scss");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/focus-point-thematique/block.json");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./edit */ "./src/focus-point-thematique/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./save */ "./src/focus-point-thematique/save.js");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
title: _block_json__WEBPACK_IMPORTED_MODULE_3__.title,
icon: {
foreground: "#DF1E1E",
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
id: "Capa_1",
"enable-background": "new 0 0 512 512",
height: "512",
viewBox: "0 0 512 512",
width: "512",
xmlns: "http://www.w3.org/2000/svg"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m100.001 255.776c0-80.958 61.992-147.702 140.999-155.275v-100.277c-62.739 3.601-121.221 29.734-166.02 74.533-48.351 48.352-74.98 112.64-74.98 181.019 0 43.893 10.989 86.092 31.636 123.48l85.806-51.86c-11.138-21.46-17.441-45.817-17.441-71.62z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m256 411.776c-49.473 0-93.636-23.154-122.236-59.189l-86.098 52.037c8.139 11.341 17.249 22.106 27.315 32.173 48.352 48.352 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c11.293-11.293 21.384-23.465 30.245-36.346l-87.133-50.306c-28.524 37.426-73.552 61.631-124.133 61.631z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m411.999 255.776c0 24.704-5.781 48.08-16.048 68.86l86.835 50.134c19.084-36.263 29.214-76.848 29.214-118.994 0-68.38-26.629-132.667-74.98-181.02-44.799-44.798-103.281-70.931-166.02-74.532v100.278c79.007 7.573 140.999 74.316 140.999 155.274z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "256",
cy: "255.776",
r: "103.902"
})))
},
supports: _block_json__WEBPACK_IMPORTED_MODULE_3__.supports,
attributes: _block_json__WEBPACK_IMPORTED_MODULE_3__.attributes,
edit: _edit__WEBPACK_IMPORTED_MODULE_4__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_5__["default"]
});
/***/ }),
/***/ "./src/focus-point-thematique/save.js":
/*!********************************************!*\
!*** ./src/focus-point-thematique/save.js ***!
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* 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__);
function save({
attributes
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
focusIndex
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-focus-point-caption`
})
}, focusCaptionDescription);
}
/***/ }),
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./save */ "./src/save.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, {
icon: {
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
id: "_22_Pyramid_graph_",
"data-name": "22 Pyramid graph\n",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 512 512"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m301.92,200h115.1c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-121.01c-.58,0-1.15.07-1.7.18l-15.5-32.18h-125.61l-46.22,96h218.05l-23.11-48Z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m359.69,320h73.32c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-81.02l-19.26-40H99.27l-46.22,96h325.91l-19.26-40Z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m247.99,88h153.02c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-160.73l-17.08-35.47c-1.33-2.77-4.13-4.53-7.21-4.53s-5.88,1.76-7.21,4.53l-47.89,99.47h110.2l-23.11-48Z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "m480,400c-14.88,0-27.43,10.21-30.99,24h-39.24l-23.11-48H45.34L.79,468.53c-1.19,2.48-1.03,5.4.43,7.73,1.46,2.33,4.02,3.74,6.77,3.74h416c2.75,0,5.31-1.41,6.77-3.74,1.46-2.33,1.63-5.25.43-7.73l-13.74-28.53h31.54c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32Z"
})),
foreground: "#DF1E1E"
},
edit: _edit__WEBPACK_IMPORTED_MODULE_3__["default"],
save: _save__WEBPACK_IMPORTED_MODULE_4__["default"]
});
/***/ }),
/***/ "./src/save.js":
/*!*********************!*\
!*** ./src/save.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* 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__);
function save({
attributes
}) {
const {
coverUrl,
coverId,
coverAlt,
focusBullets
} = attributes;
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",
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`
})
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
className: `picture-container`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
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))));
}
/***/ }),
/***/ "./src/editor.scss":
/*!*************************!*\
!*** ./src/editor.scss ***!
\*************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/focus-point-thematique/editor.scss":
/*!************************************************!*\
!*** ./src/focus-point-thematique/editor.scss ***!
\************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/focus-point-thematique/style.scss":
/*!***********************************************!*\
!*** ./src/focus-point-thematique/style.scss ***!
\***********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/style.scss":
/*!************************!*\
!*** ./src/style.scss ***!
\************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "@wordpress/blob":
/*!******************************!*\
!*** external ["wp","blob"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["blob"];
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
\*************************************/
/***/ ((module) => {
module.exports = window["wp"]["blockEditor"];
/***/ }),
/***/ "@wordpress/blocks":
/*!********************************!*\
!*** external ["wp","blocks"] ***!
\********************************/
/***/ ((module) => {
module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/components":
/*!************************************!*\
!*** external ["wp","components"] ***!
\************************************/
/***/ ((module) => {
module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["data"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["element"];
/***/ }),
/***/ "@wordpress/i18n":
/*!******************************!*\
!*** external ["wp","i18n"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["i18n"];
/***/ }),
/***/ "@wordpress/notices":
/*!*********************************!*\
!*** external ["wp","notices"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["notices"];
/***/ }),
/***/ "./src/block.json":
/*!************************!*\
!*** ./src/block.json ***!
\************************/
/***/ ((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"}');
/***/ }),
/***/ "./src/focus-point-thematique/block.json":
/*!***********************************************!*\
!*** ./src/focus-point-thematique/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}}}}');
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/chunk loaded */
/******/ (() => {
/******/ var deferred = [];
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "index": 0,
/******/ "./style-index": 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["./style-index"], () => (__webpack_require__("./src/index.js")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,76 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** 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 {
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-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);
}
.focus-point-popup-container: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);
}
.focus-point-popup-container__title {
width: auto;
min-width: 100px;
}
/*# sourceMappingURL=style-index.css.map*/

View File

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

28142
blocks/focused-thematique/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,24 @@
{
"name": "multiblocks",
"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",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^26.9.0"
}
}

View File

@ -0,0 +1,40 @@
{
"$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"
}

View File

@ -0,0 +1,193 @@
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 { createBlock } from "@wordpress/blocks";
import {
useBlockProps,
MediaPlaceholder,
BlockControls,
MediaReplaceFlow,
InspectorControls,
} from "@wordpress/block-editor";
import {
ToolbarButton,
Spinner,
withNotices,
Button,
PanelBody,
} from "@wordpress/components";
import { InnerBlocks } from "@wordpress/block-editor";
import { isBlobURL, revokeBlobURL } from "@wordpress/blob";
function Edit({
attributes,
setAttributes,
noticeOperations,
noticeList,
noticeUI,
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;
let children = useSelect(
(select) =>
select("core/block-editor").getBlocksByClientId(clientId)[0].innerBlocks
);
function passCoverUrlToChildren() {
if (children && coverUrl) {
children.forEach(function (child) {
dispatch("core/block-editor").updateBlockAttributes(child.clientId, {
coverUrl: coverUrl,
});
});
}
}
function passIndexToChildren() {
if (children) {
children.forEach((child, index) => {
dispatch("core/block-editor").updateBlockAttributes(child.clientId, {
focusIndex: index + 1,
});
});
}
}
function updateFocusPointBullets() {
if (children) {
const focusBullets = children.map((child, index) => {
return {
title: child.attributes.focusTitle,
x: child.attributes.focusPosition.x,
y: child.attributes.focusPosition.y,
};
});
setAttributes({ focusBullets });
}
}
function insertFocusPointBlock() {
const index = children && children.length ? children.length : 0;
const newBlock = createBlock("homegrade-content-blocks/focus-point", {});
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);
}
}
const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
return (
<div
data-focus-bullet-title={focusBullet.title}
className="homegrade-blocks-focus-point-bullet"
style={{
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`,
}}
onClick={() => handleBulletClick(index)}
>
{index + 1}
</div>
);
});
useEffect(() => {
updateFocusPointBullets();
if (!coverId && isBlobURL(coverUrl)) {
setAttributes({ coverUrl: undefined, coverAlt: "" });
}
}, []);
useEffect(() => {
passCoverUrlToChildren();
}, [coverUrl]);
useEffect(() => {
updateFocusPointBullets();
passCoverUrlToChildren();
}, [children]);
return (
<>
<InspectorControls>
<PanelBody>
<Button
variant="primary"
onClick={() => {
insertFocusPointBlock();
}}
>
Ajouter un point Légende
</Button>
</PanelBody>
</InspectorControls>
<section
{...useBlockProps({
className: `homegrade-blocks-focused-schema`,
})}
>
{cover && cover.source_url && (
<div>
<img src={cover.source_url} alt="" />
</div>
)}
{cover && cover.source_url && (
<figure className="picture-container">
<img src={cover.source_url} alt={coverAlt} />
{renderedFocusPointBullets}
</figure>
)}
<figcaption>
<ol>
<InnerBlocks
allowedBlocks={["homegrade-content-blocks/focus-point"]}
/>
</ol>
</figcaption>
</section>
</>
);
}
export default withNotices(Edit);

View File

@ -0,0 +1,27 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.homegrade-blocks-focused-schema {
.block-editor-block-list__layout,
.block-editor-block-list__block {
position: unset;
}
}
.wpblock-cover-container {
position: relative;
&.is-loading {
.components-spinner {
position: absolute;
left: 50%;
right: 50%;
bottom: 0;
top: 0;
margin: auto;
}
img {
opacity: 10%;
}
}
}

View File

@ -0,0 +1,36 @@
{
"$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
}
}
}
}

View File

@ -0,0 +1,99 @@
import { __ } from "@wordpress/i18n";
import { useBlockProps, RichText } from "@wordpress/block-editor";
import "./editor.scss";
import { InspectorControls } from "@wordpress/block-editor";
import { createErrorNotice, removeNotice } from "@wordpress/notices";
import { useDispatch, useSelect } from "@wordpress/data";
import { store as noticesStore } from "@wordpress/notices";
import {
PanelBody,
FocalPointPicker,
TextControl,
TextareaControl,
} from "@wordpress/components";
export default function Edit({
attributes,
setAttributes,
clientId,
...props
}) {
const {
focusTitle,
focusPosition,
focusCaptionDescription,
coverUrl,
focusIndex,
} = attributes;
function handleChangeFocusPosition(focusPosition) {
setAttributes({ focusPosition });
}
function handleChangeTitle(focusTitle) {
setAttributes({ focusTitle: focusTitle });
}
function handleChangeCaptionDescription(focusCaptionDescription) {
setAttributes({ focusCaptionDescription });
}
return (
<>
<InspectorControls>
<PanelBody
className="focus-point-modification-pannel"
title="Gestion du points de focus"
>
<div className="homegrade-blocks-focus-point-bullet">
{focusIndex}
</div>
<TextControl
placeholder="Insérer le titre de votre point focus"
label="Titre du point focus"
value={focusTitle !== "Légende Sans titre" ? focusTitle : null}
onChange={(value) => {
handleChangeTitle(value);
}}
/>
<TextareaControl
label="Description du point focus"
value={focusCaptionDescription}
rows={3}
onChange={(description) => {
handleChangeCaptionDescription(description);
}}
/>
<FocalPointPicker
url={coverUrl ?? null}
dimensions={{
width: 400,
height: 50,
}}
value={focusPosition}
onChange={(focalPoint) => {
handleChangeFocusPosition(focalPoint);
}}
/>
</PanelBody>
</InspectorControls>
<li
{...useBlockProps({
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>
</>
);
}

View File

@ -0,0 +1,14 @@
/**
* 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;
}

View File

@ -0,0 +1,34 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import metadata from "./block.json";
import Edit from "./edit";
import Save from "./save";
registerBlockType(metadata.name, {
title: metadata.title,
icon: {
foreground: "#DF1E1E",
src: (
<svg
id="Capa_1"
enable-background="new 0 0 512 512"
height="512"
viewBox="0 0 512 512"
width="512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path d="m100.001 255.776c0-80.958 61.992-147.702 140.999-155.275v-100.277c-62.739 3.601-121.221 29.734-166.02 74.533-48.351 48.352-74.98 112.64-74.98 181.019 0 43.893 10.989 86.092 31.636 123.48l85.806-51.86c-11.138-21.46-17.441-45.817-17.441-71.62z" />
<path d="m256 411.776c-49.473 0-93.636-23.154-122.236-59.189l-86.098 52.037c8.139 11.341 17.249 22.106 27.315 32.173 48.352 48.352 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c11.293-11.293 21.384-23.465 30.245-36.346l-87.133-50.306c-28.524 37.426-73.552 61.631-124.133 61.631z" />
<path d="m411.999 255.776c0 24.704-5.781 48.08-16.048 68.86l86.835 50.134c19.084-36.263 29.214-76.848 29.214-118.994 0-68.38-26.629-132.667-74.98-181.02-44.799-44.798-103.281-70.931-166.02-74.532v100.278c79.007 7.573 140.999 74.316 140.999 155.274z" />
<circle cx="256" cy="255.776" r="103.902" />
</g>
</svg>
),
},
supports: metadata.supports,
attributes: metadata.attributes,
edit: Edit,
save: Save,
});

View File

@ -0,0 +1,11 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import save from "./save";
import metadata from "./block.json";
registerBlockType(metadata.name, {
edit: Edit,
save,
});

View File

@ -0,0 +1,27 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { focusTitle, focusPosition, focusCaptionDescription, focusIndex } =
attributes;
return (
<li
{...useBlockProps.save({
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>
);
}

View File

@ -0,0 +1,58 @@
/**
* 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;
}
}

View File

@ -0,0 +1,37 @@
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);
});
});
});

View File

@ -0,0 +1,29 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import save from "./save";
import metadata from "./block.json";
registerBlockType(metadata.name, {
icon: {
src: (
<svg
id="_22_Pyramid_graph_"
data-name="22 Pyramid graph
"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m301.92,200h115.1c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-121.01c-.58,0-1.15.07-1.7.18l-15.5-32.18h-125.61l-46.22,96h218.05l-23.11-48Z" />
<path d="m359.69,320h73.32c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-81.02l-19.26-40H99.27l-46.22,96h325.91l-19.26-40Z" />
<path d="m247.99,88h153.02c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-160.73l-17.08-35.47c-1.33-2.77-4.13-4.53-7.21-4.53s-5.88,1.76-7.21,4.53l-47.89,99.47h110.2l-23.11-48Z" />
<path d="m480,400c-14.88,0-27.43,10.21-30.99,24h-39.24l-23.11-48H45.34L.79,468.53c-1.19,2.48-1.03,5.4.43,7.73,1.46,2.33,4.02,3.74,6.77,3.74h416c2.75,0,5.31-1.41,6.77-3.74,1.46-2.33,1.63-5.25.43-7.73l-13.74-28.53h31.54c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32Z" />
</svg>
),
foreground: "#DF1E1E",
},
edit: Edit,
save,
});

View File

@ -0,0 +1,49 @@
import {
useBlockProps,
MediaPlaceholder,
RichText,
BlockControls,
MediaReplaceFlow,
} from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { coverUrl, coverId, coverAlt, focusBullets } = attributes;
const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
return (
<div
data-focus-bullet-title={focusBullet.title}
className="homegrade-blocks-focus-point-bullet"
style={{
top: `${focusBullet.y * 100}%`,
left: `${focusBullet.x * 100}%`,
}}
>
{index + 1}
</div>
);
});
return (
<section
{...useBlockProps.save({
className: `homegrade-blocks-focused-schema`,
})}
>
{coverUrl && (
<figure className={`picture-container`}>
<img
src={coverUrl}
alt={coverAlt}
className={`wp-image-${coverId}`}
/>
{renderedFocusPointBullets}
</figure>
)}
<figcaption>
<ol>
<InnerBlocks.Content />
</ol>
</figcaption>
</section>
);
}

View File

@ -0,0 +1,12 @@
/**
* 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 {
position: relative;
}
}

View File

@ -0,0 +1,18 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
# WordPress Coding Standards
# https://make.wordpress.org/core/handbook/coding-standards/
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = tab
[*.{yml,yaml}]
indent_style = space
indent_size = 2

View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Coverage directory used by tools like istanbul
coverage
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Output of `npm pack`
*.tgz
# Output of `wp-scripts plugin-zip`
*.zip
# dotenv environment variables file
.env

View File

@ -0,0 +1,24 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "homegrade-content-blocks/illustration-thematique",
"version": "0.1.0",
"title": "Illustration thématique",
"category": "homegrade-blocks",
"icon": "smiley",
"description": "Pour insérer une illustration thématique générale",
"supports": {
"html": false
},
"textdomain": "test",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",
"attributes": {
"focusPoints": {
"type": "array",
"default": []
}
}
}

View File

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

View File

@ -0,0 +1,23 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.illustration-thematique-adding-focus-point-modal .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
border-bottom-color: transparent;
display: none;
}
.illustration-thematique-adding-focus-point-modal .components-modal__content {
max-width: 450px !important;
padding: 40px 100px;
margin: 0px auto 0 auto;
}
.focus-points-pannel button {
margin-right: 10px;
}
/*# sourceMappingURL=index.css.map*/

View File

@ -0,0 +1 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAOC;EAEC;EACA;AAFF;AAKC;EACC;EACA;EACA;AAHF;;AAQC;EACC;AALF,C","sources":["webpack://test/./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.illustration-thematique-adding-focus-point-modal {\n\t.components-modal__content.has-scrolled-content:not(.hide-header)\n\t\t.components-modal__header {\n\t\tborder-bottom-color: transparent;\n\t\tdisplay: none;\n\t}\n\n\t.components-modal__content {\n\t\tmax-width: 450px !important;\n\t\tpadding: 40px 100px;\n\t\tmargin: 0px auto 0 auto;\n\t}\n}\n\n.focus-points-pannel {\n\tbutton {\n\t\tmargin-right: 10px;\n\t}\n}\n"],"names":[],"sourceRoot":""}

View File

@ -0,0 +1,552 @@
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/FocusPointControls.js":
/*!***********************************!*\
!*** ./src/FocusPointControls.js ***!
\***********************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": function() { return /* binding */ focusPointsControl; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* 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 _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
function focusPointsControl({
focusPoints,
coverUrl,
setAttributes
}) {
const [isModalOpen, setIsModalOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const focusPointsDefaultValue = {
titre: "pas de titre",
x: 0.5,
y: 0.5
};
const [selectedOptionIndex, setSelectedOptionIndex] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
const [currentEditedFocusPoint, setCurrentEditedFocusPoint] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(focusPointsDefaultValue);
let [isAdding, setIsAdding] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(true);
let [isEditing, setIsEditing] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
function buildOptions() {
// HANDLE OPTIONS
const focusPointsOptions = focusPoints.map((point, arrayIndex) => {
return {
label: `#${point.titre}`,
value: arrayIndex
};
});
focusPointsOptions.unshift({
label: "Nouveau point",
value: "addpoint",
selected: true
// disabled: true,
});
return focusPointsOptions;
}
function handleChangeOption(selectedValue) {
setIsEditing(false);
setIsAdding(false);
console.log(isAdding);
console.log(isEditing);
if (selectedValue === "addpoint") {
setIsAdding(true);
setIsEditing(false);
return;
}
if (selectedValue !== null && selectedValue !== "") {
setIsEditing(true);
setSelectedOptionIndex(selectedValue);
setCurrentEditedFocusPoint(focusPoints[selectedValue]);
return;
}
}
function createFocusPoint() {
const newFocusPoints = [...focusPoints];
newFocusPoints.push(currentEditedFocusPoint);
setAttributes({
focusPoints: newFocusPoints
});
setCurrentEditedFocusPoint(focusPointsDefaultValue);
}
function editFocusPoint() {
setIsModalOpen(!isModalOpen);
setCurrentEditedFocusPoint(focusPoints[selectedOptionIndex]);
}
function updateFocusPoint() {
const newFocusPoints = [...focusPoints];
newFocusPoints[selectedOptionIndex] = currentEditedFocusPoint;
setAttributes({
focusPoints: newFocusPoints
});
setCurrentEditedFocusPoint(focusPointsDefaultValue);
setIsEditing(false);
}
function deleteFocusPoint() {
const newFocusPoints = [...focusPoints];
newFocusPoints.splice(selectedOptionIndex, 1);
setAttributes({
focusPoints: newFocusPoints
});
setIsEditing(false);
}
const focusPointsOptions = buildOptions();
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.InspectorControls, null, coverUrl && (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_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
className: "focus-points-pannel",
title: "Gestion des points de focus"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.SelectControl, {
options: focusPointsOptions,
onChange: selectValue => {
handleChangeOption(selectValue);
}
}), isAdding && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
variant: "primary",
onClick: () => {
setIsModalOpen(!isModalOpen);
}
}, "Ajouter un focus"), isEditing && (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_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
variant: "secondary",
onClick: deleteFocusPoint
}, "Supprimer"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
variant: "secondary",
onClick: editFocusPoint
}, "\xC9diter")), isModalOpen && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Modal, {
className: "illustration-thematique-adding-focus-point-modal"
// title="Ajouter un focus point"
,
id: "illustration-thematique-adding-focus-point-modal",
onRequestClose: () => setIsModalOpen(false)
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.TextControl, {
label: "Titre du point focus",
value: currentEditedFocusPoint.titre,
onChange: value => {
setCurrentEditedFocusPoint({
...currentEditedFocusPoint,
titre: value
});
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.FocalPointPicker, {
url: coverUrl,
dimensions: {
width: 400,
height: 50
},
value: currentEditedFocusPoint,
onChange: focalPoint => {
setCurrentEditedFocusPoint({
...currentEditedFocusPoint,
x: focalPoint.x,
y: focalPoint.y
});
}
}), isAdding && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
variant: "primary",
onClick: () => {
createFocusPoint();
setIsModalOpen(false);
}
}, "Ajouter"), isEditing && (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_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
variant: "primary",
onClick: () => {
updateFocusPoint();
setIsModalOpen(false);
}
}, "Valider"))))));
}
/***/ }),
/***/ "./src/edit.js":
/*!*********************!*\
!*** ./src/edit.js ***!
\*********************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": function() { return /* binding */ Edit; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/core-data */ "@wordpress/core-data");
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _FocusPointControls__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./FocusPointControls */ "./src/FocusPointControls.js");
// function getCurrentThematique(id) {
// const { record, isResolving } = useEntityRecord(
// "taxonomy",
// "thematiques",
// id
// );
// if (isResolving) {
// console.log(`isResolving`, isResolving);
// return "Loading...";
// }
// if (!record) {
// return "no post...";
// }
// return record;
// }
function Edit({
attributes,
setAttributes
}) {
var _ref;
let {
focusPoints
} = attributes;
// ### Load Taxonomies
const currentTaxonomiesID = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useSelect)(select => select("core/editor").getCurrentPostAttribute("thematiques"));
// ### Get current Thematique
const mainTaxonomy = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useSelect)(select => select("core").getEntityRecord("taxonomy", "thematiques", currentTaxonomiesID[0] // or currentPost.thematiques[0] works as well
), [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_2__.useSelect)(select => coverID ? select("core").getMedia(coverID) : null, [coverID]);
const coverUrl = cover && cover.source_url ? cover.source_url : null;
console.log("focusPoints");
console.log(focusPoints);
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)(_FocusPointControls__WEBPACK_IMPORTED_MODULE_7__["default"], {
focusPoints: focusPoints,
coverUrl: coverUrl,
setAttributes: setAttributes
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
className: `homegrade-blocks-starter`
})
}, !cover && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, "Pas d'images li\xE9 \xE0 cette th\xE9matique. V\xE9rifiez que la th\xE9matique poss\xE8de bien une image et qu'elle est bien une th\xE9matique parente.", " "), 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: ""
}))));
}
/***/ }),
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"]
});
/***/ }),
/***/ "./src/editor.scss":
/*!*************************!*\
!*** ./src/editor.scss ***!
\*************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/style.scss":
/*!************************!*\
!*** ./src/style.scss ***!
\************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
\*************************************/
/***/ (function(module) {
module.exports = window["wp"]["blockEditor"];
/***/ }),
/***/ "@wordpress/blocks":
/*!********************************!*\
!*** external ["wp","blocks"] ***!
\********************************/
/***/ (function(module) {
module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/components":
/*!************************************!*\
!*** external ["wp","components"] ***!
\************************************/
/***/ (function(module) {
module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/core-data":
/*!**********************************!*\
!*** external ["wp","coreData"] ***!
\**********************************/
/***/ (function(module) {
module.exports = window["wp"]["coreData"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
\******************************/
/***/ (function(module) {
module.exports = window["wp"]["data"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
\*********************************/
/***/ (function(module) {
module.exports = window["wp"]["element"];
/***/ }),
/***/ "@wordpress/i18n":
/*!******************************!*\
!*** external ["wp","i18n"] ***!
\******************************/
/***/ (function(module) {
module.exports = window["wp"]["i18n"];
/***/ }),
/***/ "./src/block.json":
/*!************************!*\
!*** ./src/block.json ***!
\************************/
/***/ (function(module) {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/illustration-thematique","version":"0.1.0","title":"Illustration thématique","category":"homegrade-blocks","icon":"smiley","description":"Pour insérer une illustration thématique générale","supports":{"html":false},"textdomain":"test","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"focusPoints":{"type":"array","default":[]}}}');
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/chunk loaded */
/******/ !function() {
/******/ var deferred = [];
/******/ __webpack_require__.O = function(result, chunkIds, fn, priority) {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ !function() {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "index": 0,
/******/ "./style-index": 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ __webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = function(parentChunkLoadingFunction, data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunktest"] = self["webpackChunktest"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ }();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["./style-index"], function() { return __webpack_require__("./src/index.js"); })
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,3 @@
<p <?php echo get_block_wrapper_attributes(); ?>>
<?php esc_html_e( 'Test hello from a dynamic block!', 'test' ); ?>
</p>

View File

@ -0,0 +1,16 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** 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.
*/
.wp-block-create-block-test {
background-color: #21759b;
color: #fff;
padding: 2px;
}
/*# sourceMappingURL=style-index.css.map*/

View File

@ -0,0 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://test/./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-test {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"sourceRoot":""}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,20 @@
{
"name": "test",
"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",
"scripts": {
"build": "wp-scripts build --webpack-copy-php",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start --webpack-copy-php"
},
"devDependencies": {
"@wordpress/scripts": "^26.11.0"
}
}

View File

@ -0,0 +1,200 @@
import { __ } from "@wordpress/i18n";
import { InspectorControls } from "@wordpress/block-editor";
import { useState } from "@wordpress/element";
import {
FocalPointPicker,
PanelBody,
SelectControl,
Button,
Modal,
TextControl,
} from "@wordpress/components";
export default function focusPointsControl({
focusPoints,
coverUrl,
setAttributes,
}) {
const [isModalOpen, setIsModalOpen] = useState(false);
const focusPointsDefaultValue = {
titre: "pas de titre",
x: 0.5,
y: 0.5,
};
const [selectedOptionIndex, setSelectedOptionIndex] = useState(null);
const [currentEditedFocusPoint, setCurrentEditedFocusPoint] = useState(
focusPointsDefaultValue
);
let [isAdding, setIsAdding] = useState(true);
let [isEditing, setIsEditing] = useState(false);
function buildOptions() {
// HANDLE OPTIONS
const focusPointsOptions = focusPoints.map((point, arrayIndex) => {
return {
label: `#${point.titre}`,
value: arrayIndex,
};
});
focusPointsOptions.unshift({
label: "Nouveau point",
value: "addpoint",
selected: true,
// disabled: true,
});
return focusPointsOptions;
}
function handleChangeOption(selectedValue) {
setIsEditing(false);
setIsAdding(false);
console.log(isAdding);
console.log(isEditing);
if (selectedValue === "addpoint") {
setIsAdding(true);
setIsEditing(false);
return;
}
if (selectedValue !== null && selectedValue !== "") {
setIsEditing(true);
setSelectedOptionIndex(selectedValue);
setCurrentEditedFocusPoint(focusPoints[selectedValue]);
return;
}
}
function createFocusPoint() {
const newFocusPoints = [...focusPoints];
newFocusPoints.push(currentEditedFocusPoint);
setAttributes({ focusPoints: newFocusPoints });
setCurrentEditedFocusPoint(focusPointsDefaultValue);
}
function editFocusPoint() {
setIsModalOpen(!isModalOpen);
setCurrentEditedFocusPoint(focusPoints[selectedOptionIndex]);
}
function updateFocusPoint() {
const newFocusPoints = [...focusPoints];
newFocusPoints[selectedOptionIndex] = currentEditedFocusPoint;
setAttributes({ focusPoints: newFocusPoints });
setCurrentEditedFocusPoint(focusPointsDefaultValue);
setIsEditing(false);
}
function deleteFocusPoint() {
const newFocusPoints = [...focusPoints];
newFocusPoints.splice(selectedOptionIndex, 1);
setAttributes({ focusPoints: newFocusPoints });
setIsEditing(false);
}
const focusPointsOptions = buildOptions();
return (
<InspectorControls>
{coverUrl && (
<>
<PanelBody
className="focus-points-pannel"
title="Gestion des points de focus"
>
<SelectControl
options={focusPointsOptions}
onChange={(selectValue) => {
handleChangeOption(selectValue);
}}
/>
{isAdding && (
<Button
variant="primary"
onClick={() => {
setIsModalOpen(!isModalOpen);
}}
>
Ajouter un focus
</Button>
)}
{isEditing && (
<>
<Button variant="secondary" onClick={deleteFocusPoint}>
Supprimer
</Button>
<Button variant="secondary" onClick={editFocusPoint}>
Éditer
</Button>
</>
)}
{/* Popover */}
{isModalOpen && (
<Modal
className="illustration-thematique-adding-focus-point-modal"
// title="Ajouter un focus point"
id="illustration-thematique-adding-focus-point-modal"
onRequestClose={() => setIsModalOpen(false)}
>
<TextControl
label="Titre du point focus"
value={currentEditedFocusPoint.titre}
onChange={(value) => {
setCurrentEditedFocusPoint({
...currentEditedFocusPoint,
titre: value,
});
}}
/>
<FocalPointPicker
url={coverUrl}
dimensions={{
width: 400,
height: 50,
}}
value={currentEditedFocusPoint}
onChange={(focalPoint) => {
setCurrentEditedFocusPoint({
...currentEditedFocusPoint,
x: focalPoint.x,
y: focalPoint.y,
});
}}
/>
{isAdding && (
<Button
variant="primary"
onClick={() => {
createFocusPoint();
setIsModalOpen(false);
}}
>
Ajouter
</Button>
)}
{isEditing && (
<>
<Button
variant="primary"
onClick={() => {
updateFocusPoint();
setIsModalOpen(false);
}}
>
Valider
</Button>
</>
)}
</Modal>
)}
</PanelBody>
</>
)}
</InspectorControls>
);
}

View File

@ -0,0 +1,24 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "homegrade-content-blocks/illustration-thematique",
"version": "0.1.0",
"title": "Illustration thématique",
"category": "homegrade-blocks",
"icon": "smiley",
"description": "Pour insérer une illustration thématique générale",
"supports": {
"html": false
},
"textdomain": "test",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",
"attributes": {
"focusPoints": {
"type": "array",
"default": []
}
}
}

View File

@ -0,0 +1,88 @@
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { useEntityRecord, useEntityProp } from "@wordpress/core-data";
import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
import {
FocalPointPicker,
PanelBody,
SelectControl,
Button,
} from "@wordpress/components";
import "./editor.scss";
import FocusPointsControl from "./FocusPointControls";
// function getCurrentThematique(id) {
// const { record, isResolving } = useEntityRecord(
// "taxonomy",
// "thematiques",
// id
// );
// if (isResolving) {
// console.log(`isResolving`, isResolving);
// return "Loading...";
// }
// if (!record) {
// return "no post...";
// }
// return record;
// }
export default function Edit({ attributes, setAttributes }) {
let { focusPoints } = attributes;
// ### Load Taxonomies
const currentTaxonomiesID = useSelect((select) =>
select("core/editor").getCurrentPostAttribute("thematiques")
);
// ### Get current Thematique
const mainTaxonomy = useSelect(
(select) =>
select("core").getEntityRecord(
"taxonomy",
"thematiques",
currentTaxonomiesID[0] // or currentPost.thematiques[0] works as well
),
[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;
console.log("focusPoints");
console.log(focusPoints);
return (
<>
<FocusPointsControl
focusPoints={focusPoints}
coverUrl={coverUrl}
setAttributes={setAttributes}
/>
<section
{...useBlockProps({
className: `homegrade-blocks-illustration-thematique`,
})}
>
{!cover && (
<div>
Pas d'images lié à cette thématique. Vérifiez que la thématique
possède bien une image et qu'elle est bien une thématique parente.{" "}
</div>
)}
{cover && cover.source_url && (
<div>
<img src={cover.source_url} alt="" />
</div>
)}
</section>
</>
);
}

View File

@ -0,0 +1,25 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.illustration-thematique-adding-focus-point-modal {
.components-modal__content.has-scrolled-content:not(.hide-header)
.components-modal__header {
border-bottom-color: transparent;
display: none;
}
.components-modal__content {
max-width: 450px !important;
padding: 40px 100px;
margin: 0px auto 0 auto;
}
}
.focus-points-pannel {
button {
margin-right: 10px;
}
}

View File

@ -0,0 +1,8 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import metadata from "./block.json";
registerBlockType(metadata.name, {
edit: Edit,
});

View File

@ -0,0 +1,3 @@
<p <?php echo get_block_wrapper_attributes(); ?>>
<?php esc_html_e( 'Test hello from a dynamic block!', 'test' ); ?>
</p>

View File

@ -5,7 +5,7 @@
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-blocka {
.wp-block-create-block-test {
background-color: #21759b;
color: #fff;
padding: 2px;

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '50176ae9904961c41d54');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'c5529e2e38b9f9dbaf49');

View File

@ -105,9 +105,6 @@ __webpack_require__.r(__webpack_exports__);
// import "./nested-children";
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_6__.name, {

File diff suppressed because one or more lines are too long

View File

@ -1,10 +1,10 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "wpblocks-multiple/nested-children",
"name": "homegrade-content-blocks/nested-children",
"version": "0.1.0",
"title": "Nested Childrenes",
"category": "wpblock-blocks",
"title": "Nested Children",
"category": "homegrade-blocks",
"icon": {
"background": "#0414eb",
"foreground": "#fff",
@ -12,8 +12,7 @@
},
"description": "Children Nested. #ChildrenNested",
"supports": {
"html": false,
"reusable": false
"html": false
},
"textdomain": "nested-parent",
"editorScript": "file:./index.js",

Some files were not shown because too many files have changed in this diff Show More