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

handling new block variations

Browse Source
This commit is contained in:
Antoine M 2024-08-14 15:11:13 +02:00
parent 5826fe83bd
commit e8b5ece106
11 changed files with 210 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
blocks/labelled-picture/build/block.json
View File

@ -15,9 +15,24 @@
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css", "style": "file:./style-index.css",
"attributes": { "attributes": {
"hasStickyLegend": {
"type": "boolean",
"default": "true"
},
"hasFixedHeight": {
"type": "boolean",
"default": "true"
},
"showTitle": {
"type": "boolean",
"default": "true"
},
"pictureUrl": { "pictureUrl": {
"type": "string" "type": "string"
}, },
"pictureTitle": {
"type": "string"
},
"pictureAlt": { "pictureAlt": {
"type": "string" "type": "string"
}, },

2
blocks/labelled-picture/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '49e83b88e7e47ccb671c'); <?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'c833423239386f358bf7');

6
blocks/labelled-picture/build/index.css
View File

@ -1,4 +1,4 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\ /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***! !*** css ./node_modules/.pnpm/css-loader@6.10.0_webpack@5.90.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.4.35_webpack@5.90.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.71.1_webpack@5.90.3/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/ \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

1
blocks/labelled-picture/build/index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tborder: 1px dotted #f00;\n}\n"],"names":[],"sourceRoot":""}

116
blocks/labelled-picture/build/index.js
View File

@ -12,8 +12,8 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit) /* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ }); /* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__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__ = __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_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss"); /* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
@ -36,9 +36,13 @@ function Edit({
noticeUI noticeUI
}) { }) {
const { const {
hasStickyLegend,
hasFixedHeight,
showTitle,
pictureUrl, pictureUrl,
pictureAlt, pictureAlt,
pictureId, pictureId,
pictureTitle,
pictureCaption pictureCaption
} = attributes; } = attributes;
function removePictureImg() { function removePictureImg() {
@ -50,10 +54,12 @@ function Edit({
}); });
} }
function updatePictureImg(image) { function updatePictureImg(image) {
console.log(image);
if (!image || !image.url) { if (!image || !image.url) {
removePictureImg(); removePictureImg();
} }
setAttributes({ setAttributes({
pictureTitle: image.title,
pictureUrl: image.url, pictureUrl: image.url,
pictureId: image.id, pictureId: image.id,
pictureAlt: image.alt, pictureAlt: image.alt,
@ -64,35 +70,71 @@ function Edit({
noticeOperations.removeAllNotices(); noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(message); noticeOperations.createErrorNotice(message);
} }
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_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { function handleHasStickyLegend(hasStickyLegend) {
setAttributes({
hasStickyLegend
});
}
function handleHasFixedHeight(hasFixedHeight) {
setAttributes({
hasFixedHeight
});
}
function handleShowTitle(showTitle) {
setAttributes({
showTitle
});
}
return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
title: "L\xE9gende",
className: "homegrade-blocks-components-image__panel-body "
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
label: "L\xE9gende Autocollante",
checked: hasStickyLegend,
onChange: handleHasStickyLegend,
help: "Coch\xE9, la l\xE9gende sera ajout\xE9 sur un bandeau au dessus de l'image"
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
label: "Hauteur de l'image Fixed",
checked: hasFixedHeight,
onChange: handleHasFixedHeight,
help: "Coch\xE9, la hauteur de l'image est fixe"
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
label: "Afficher le titre",
checked: showTitle,
onChange: handleShowTitle
})), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
title: "Source de l'image", title: "Source de l'image",
className: "homegrade-blocks-components-image__panel-body " className: "homegrade-blocks-components-image__panel-body "
}, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl, src: pictureUrl,
alt: pictureAlt alt: pictureAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "media-replace-container" className: "media-replace-container"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
mediaId: pictureId, mediaId: pictureId,
mediaUrl: pictureUrl, mediaUrl: pictureUrl,
allowedTypes: ["image"], allowedTypes: ["image"],
accept: "image/*", accept: "image/*",
onSelect: updatePictureImg, onSelect: updatePictureImg,
name: !pictureUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice") name: !pictureUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
}), pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, { }), pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
className: "custom-flow-button", className: "custom-flow-button",
variant: "primary", variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer", label: "Supprimer",
onClick: removePictureImg onClick: removePictureImg
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "Le texte de votre L\xE9gende est automatiquement attribu\xE9 depuis le champ \"L\xE9gende\" de votre image dans la gallerie des m\xE9dias")))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", { }))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "Le texte de votre L\xE9gende est automatiquement attribu\xE9 depuis le champ \"L\xE9gende\" de votre image dans la gallerie des m\xE9dias")))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", null, pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({ ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
className: `homegrade-blocks-labelled-picture` className: `homegrade-blocks-labelled-picture homegrade-blocks-labelled-picture--legend-${hasStickyLegend ? "sticky" : "normal"}
${hasFixedHeight ? "homegrade-blocks-labelled-picture--fixed-height" : ""}
${showTitle && pictureTitle ? "homegrade-blocks-labelled-picture--legend-has-title" : ""}`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl, src: pictureUrl,
alt: pictureAlt alt: pictureAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, pictureCaption)), !pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "figcaption-title"
}, pictureTitle), " ", pictureCaption)), !pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, {
disableMediaButtons: pictureUrl, disableMediaButtons: pictureUrl,
icon: "admin-appearance", icon: "admin-appearance",
onSelect: updatePictureImg, onSelect: updatePictureImg,
@ -115,8 +157,8 @@ function Edit({
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__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__ = __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 _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 _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
@ -131,15 +173,15 @@ __webpack_require__.r(__webpack_exports__);
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, { (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, {
icon: { icon: {
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", { src: (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
id: "Calque_2", id: "Calque_2",
"data-name": "Calque 2", "data-name": "Calque 2",
xmlns: "http://www.w3.org/2000/svg", xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 28 28" viewBox: "0 0 28 28"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", {
id: "Calque_1-2", id: "Calque_1-2",
"data-name": "Calque 1" "data-name": "Calque 1"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
class: "cls-1", class: "cls-1",
d: "m1.56,27.15c.68.53,1.52.85,2.44.85h12.29l-7.79-7.79-6.94,6.94Zm12.65-2.65l3.5,3.5h2.29c1.18,0,2.23-.52,2.96-1.33l-5.46-5.46-3.29,3.29Zm-.21-7.5c-.55,0-1,.45-1,1s.45,1,1,1,1-.45,1-1-.45-1-1-1Zm6-5H4c-2.21,0-4,1.79-4,4v8c0,.92.33,1.76.85,2.44l7.29-7.29c.2-.2.51-.2.71,0l4.65,4.65,3.65-3.65c.2-.2.51-.2.71,0l5.68,5.68c.29-.55.46-1.17.46-1.83v-8c0-2.21-1.79-4-4-4Zm-6,8c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2ZM26,0h-8c-1.1,0-2,.9-2,2v4c0,1.1.9,2,2,2h1v2.5c0,.2.12.38.31.46.06.03.13.04.19.04.13,0,.26-.05.35-.15l2.85-2.85h3.29c1.1,0,2-.9,2-2V2c0-1.1-.9-2-2-2Z" d: "m1.56,27.15c.68.53,1.52.85,2.44.85h12.29l-7.79-7.79-6.94,6.94Zm12.65-2.65l3.5,3.5h2.29c1.18,0,2.23-.52,2.96-1.33l-5.46-5.46-3.29,3.29Zm-.21-7.5c-.55,0-1,.45-1,1s.45,1,1,1,1-.45,1-1-.45-1-1-1Zm6-5H4c-2.21,0-4,1.79-4,4v8c0,.92.33,1.76.85,2.44l7.29-7.29c.2-.2.51-.2.71,0l4.65,4.65,3.65-3.65c.2-.2.51-.2.71,0l5.68,5.68c.29-.55.46-1.17.46-1.83v-8c0-2.21-1.79-4-4-4Zm-6,8c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2ZM26,0h-8c-1.1,0-2,.9-2,2v4c0,1.1.9,2,2,2h1v2.5c0,.2.12.38.31.46.06.03.13.04.19.04.13,0,.26-.05.35-.15l2.85-2.85h3.29c1.1,0,2-.9,2-2V2c0-1.1-.9-2-2-2Z"
}))), }))),
@ -161,8 +203,8 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save) /* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ }); /* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__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__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
@ -171,19 +213,25 @@ function save({
attributes attributes
}) { }) {
const { const {
hasFixedHeight,
hasStickyLegend,
showTitle,
pictureUrl, pictureUrl,
pictureAlt, pictureAlt,
pictureId, pictureTitle,
pictureCaption pictureCaption
} = attributes; } = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, pictureUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", { return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-labelled-picture` className: `homegrade-blocks-labelled-picture homegrade-blocks-labelled-picture--legend-${hasStickyLegend ? "sticky" : "normal"} ${hasFixedHeight ? "homegrade-blocks-labelled-picture--fixed-height" : ""}
${showTitle && pictureTitle ? "homegrade-blocks-labelled-picture--legend-has-title" : ""}`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: pictureUrl, src: pictureUrl,
alt: pictureAlt alt: pictureAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, pictureCaption))); }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
className: "figcaption-title"
}, pictureTitle), " ", pictureCaption)));
} }
/***/ }), /***/ }),
@ -243,6 +291,16 @@ const trash = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(
/***/ }), /***/ }),
/***/ "react":
/*!************************!*\
!*** external "React" ***!
\************************/
/***/ ((module) => {
module.exports = window["React"];
/***/ }),
/***/ "@wordpress/block-editor": /***/ "@wordpress/block-editor":
/*!*************************************!*\ /*!*************************************!*\
!*** external ["wp","blockEditor"] ***! !*** external ["wp","blockEditor"] ***!
@ -309,7 +367,7 @@ module.exports = window["wp"]["primitives"];
\************************/ \************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/labelled-picture","version":"0.1.0","title":"Image + Légende Autocollante","category":"homegrade-blocks","icon":"smiley","description":"Bloc image contenant une légende autocollante","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"pictureUrl":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}'); module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/labelled-picture","version":"0.1.0","title":"Image + Légende Autocollante","category":"homegrade-blocks","icon":"smiley","description":"Bloc image contenant une légende autocollante","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"hasStickyLegend":{"type":"boolean","default":"true"},"hasFixedHeight":{"type":"boolean","default":"true"},"showTitle":{"type":"boolean","default":"true"},"pictureUrl":{"type":"string"},"pictureTitle":{"type":"string"},"pictureAlt":{"type":"string"},"pictureId":{"type":"number"},"pictureCaption":{"type":"string"}}}');
/***/ }) /***/ })
@ -355,9 +413,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/ } /******/ }
/******/ var notFulfilled = Infinity; /******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) { /******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0]; /******/ var [chunkIds, fn, priority] = deferred[i];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var fulfilled = true; /******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) { /******/ 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])))) { /******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
@ -443,9 +499,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/ /******/
/******/ // install a JSONP callback for chunk loading /******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => { /******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var chunkIds = data[0]; /******/ var [chunkIds, moreModules, runtime] = data;
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ // add "moreModules" to the modules object, /******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback /******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0; /******/ var moduleId, chunkId, i = 0;
@ -468,7 +522,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/ return __webpack_require__.O(result); /******/ return __webpack_require__.O(result);
/******/ } /******/ }
/******/ /******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || []; /******/ var chunkLoadingGlobal = globalThis["webpackChunkmultiblocks"] = globalThis["webpackChunkmultiblocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); /******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); /******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })(); /******/ })();

2
blocks/labelled-picture/build/index.js.map
View File

File diff suppressed because one or more lines are too long

6
blocks/labelled-picture/build/style-index.css
View File

@ -1,4 +1,4 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\ /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! !*** css ./node_modules/.pnpm/css-loader@6.10.0_webpack@5.90.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.4.35_webpack@5.90.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.71.1_webpack@5.90.3/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************/ \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

1
blocks/labelled-picture/build/style-index.css.map
View File

@ -1 +0,0 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"sourceRoot":""}

15
blocks/labelled-picture/src/block.json
View File

@ -15,9 +15,24 @@
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css", "style": "file:./style-index.css",
"attributes": { "attributes": {
"hasStickyLegend": {
"type": "boolean",
"default": "true"
},
"hasFixedHeight": {
"type": "boolean",
"default": "true"
},
"showTitle": {
"type": "boolean",
"default": "true"
},
"pictureUrl": { "pictureUrl": {
"type": "string" "type": "string"
}, },
"pictureTitle": {
"type": "string"
},
"pictureAlt": { "pictureAlt": {
"type": "string" "type": "string"
}, },

68
blocks/labelled-picture/src/edit.js
View File

@ -10,11 +10,6 @@ import {
import { import {
Button, Button,
ToolbarGroup,
ToolbarButton,
Spinner,
withNotices,
FocalPointPicker,
PanelBody, PanelBody,
Tip, Tip,
ToggleControl, ToggleControl,
@ -30,7 +25,16 @@ export default function Edit({
noticeList, noticeList,
noticeUI, noticeUI,
}) { }) {
const { pictureUrl, pictureAlt, pictureId, pictureCaption } = attributes; const {
hasStickyLegend,
hasFixedHeight,
showTitle,
pictureUrl,
pictureAlt,
pictureId,
pictureTitle,
pictureCaption,
} = attributes;
function removePictureImg() { function removePictureImg() {
setAttributes({ setAttributes({
@ -42,10 +46,12 @@ export default function Edit({
} }
function updatePictureImg(image) { function updatePictureImg(image) {
console.log(image);
if (!image || !image.url) { if (!image || !image.url) {
removePictureImg(); removePictureImg();
} }
setAttributes({ setAttributes({
pictureTitle: image.title,
pictureUrl: image.url, pictureUrl: image.url,
pictureId: image.id, pictureId: image.id,
pictureAlt: image.alt, pictureAlt: image.alt,
@ -56,9 +62,42 @@ export default function Edit({
noticeOperations.removeAllNotices(); noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(message); noticeOperations.createErrorNotice(message);
} }
function handleHasStickyLegend(hasStickyLegend) {
setAttributes({ hasStickyLegend });
}
function handleHasFixedHeight(hasFixedHeight) {
setAttributes({ hasFixedHeight });
}
function handleShowTitle(showTitle) {
setAttributes({ showTitle });
}
return ( return (
<> <>
<InspectorControls> <InspectorControls>
<PanelBody
title="Légende"
className="homegrade-blocks-components-image__panel-body "
>
<ToggleControl
label="Légende Autocollante"
checked={hasStickyLegend}
onChange={handleHasStickyLegend}
help="Coché, la légende sera ajouté sur un bandeau au dessus de l'image"
/>
<ToggleControl
label="Hauteur de l'image Fixed"
checked={hasFixedHeight}
onChange={handleHasFixedHeight}
help="Coché, la hauteur de l'image est fixe"
/>
<ToggleControl
label="Afficher le titre"
checked={showTitle}
onChange={handleShowTitle}
/>
</PanelBody>
<PanelBody <PanelBody
title="Source de l'image" title="Source de l'image"
className="homegrade-blocks-components-image__panel-body " className="homegrade-blocks-components-image__panel-body "
@ -101,11 +140,24 @@ export default function Edit({
{pictureUrl && ( {pictureUrl && (
<figure <figure
{...useBlockProps({ {...useBlockProps({
className: `homegrade-blocks-labelled-picture`, className: `homegrade-blocks-labelled-picture homegrade-blocks-labelled-picture--legend-${
hasStickyLegend ? "sticky" : "normal"
}
${hasFixedHeight ? "homegrade-blocks-labelled-picture--fixed-height" : ""}
${
showTitle && pictureTitle
? "homegrade-blocks-labelled-picture--legend-has-title"
: ""
}`,
})} })}
> >
<img src={pictureUrl} alt={pictureAlt} /> <img src={pictureUrl} alt={pictureAlt} />
<figcaption>{pictureCaption}</figcaption> <figcaption>
{showTitle && pictureTitle && (
<span className="figcaption-title">{pictureTitle}</span>
)}{" "}
{pictureCaption}
</figcaption>
</figure> </figure>
)} )}

30
blocks/labelled-picture/src/save.js
View File

@ -1,18 +1,42 @@
import { useBlockProps } from "@wordpress/block-editor"; import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { pictureUrl, pictureAlt, pictureId, pictureCaption } = attributes; const {
hasFixedHeight,
hasStickyLegend,
showTitle,
pictureUrl,
pictureAlt,
pictureTitle,
pictureCaption,
} = attributes;
return ( return (
<> <>
{pictureUrl && ( {pictureUrl && (
<figure <figure
{...useBlockProps.save({ {...useBlockProps.save({
className: `homegrade-blocks-labelled-picture`, className: `homegrade-blocks-labelled-picture homegrade-blocks-labelled-picture--legend-${
hasStickyLegend ? "sticky" : "normal"
} ${
hasFixedHeight
? "homegrade-blocks-labelled-picture--fixed-height"
: ""
}
${
showTitle && pictureTitle
? "homegrade-blocks-labelled-picture--legend-has-title"
: ""
}`,
})} })}
> >
<img src={pictureUrl} alt={pictureAlt} /> <img src={pictureUrl} alt={pictureAlt} />
<figcaption>{pictureCaption}</figcaption> <figcaption>
{showTitle && pictureTitle && (
<span className="figcaption-title">{pictureTitle}</span>
)}{" "}
{pictureCaption}
</figcaption>
</figure> </figure>
)} )}
</> </>