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

handling picture caption
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-03-18 08:55:06 +01:00
parent b8401b051e
commit 0e355be895
11 changed files with 103 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
blocks/picture-banner/build/block.json
View File

@ -31,6 +31,14 @@
"selector": "img",
"attribute": "src"
},
"coverCaption": {
"type": "string",
"default": ""
},
"coverDescription": {
"type": "string",
"default": ""
},
"heightFixed": {
"type": "boolean",
"default": true

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

@ -1 +1 @@
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'e5c70dab6e7945fcfd62');
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '42abcb6ba0556a0f4814');

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

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

35
blocks/picture-banner/build/index.js
View File

@ -42,6 +42,8 @@ function Edit({
coverUrl,
coverId,
coverAlt,
coverCaption,
coverDescription,
heightFixed,
imagePosition
} = attributes;
@ -54,22 +56,21 @@ function Edit({
setAttributes({
coverUrl: undefined,
coverId: undefined,
coverAlt: ""
coverAlt: "",
coverCaption: "",
coverDescription: ""
});
}
function updateCoverImage(image) {
if (!image || !image.url) {
setAttributes({
coverUrl: undefined,
coverId: undefined,
coverAlt: ""
});
return;
return removeCoverImg();
}
setAttributes({
coverUrl: image.url,
coverId: image.id,
coverAlt: image.alt
coverAlt: image.alt,
coverCaption: image.caption,
coverDescription: image.description
});
}
function onHeightFixedChange(heightFixed) {
@ -154,7 +155,7 @@ function Edit({
icon: "trash",
title: "Supprimer l'image",
onClick: removeCoverImg
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-content-blocks-picture-banner ${(0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl) ? "is-loading" : ""} ${heightFixed ? "fixed-height" : ""} `
})
@ -164,7 +165,9 @@ function Edit({
style: {
objectPosition: `${imagePosition.x * 100}% ${imagePosition.y * 100}%`
}
}), (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl) && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Spinner, null)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.MediaPlaceholder, {
}), coverCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", {
className: "homegrade-content-blocks-picture-banner__caption"
}, coverCaption), (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl) && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Spinner, null)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.MediaPlaceholder, {
disableMediaButtons: coverUrl,
icon: "admin-appearance",
onSelect: updateCoverImage,
@ -229,21 +232,25 @@ function save({
coverUrl,
coverId,
coverAlt,
coverCaption,
coverDescription,
heightFixed,
imagePosition
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-content-blocks-picture-banner ${heightFixed ? "fixed-height" : ""}`
})
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
}, 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)("img", {
src: coverUrl,
alt: coverAlt,
style: {
objectPosition: `${imagePosition.x * 100}% ${imagePosition.y * 100}%`
},
className: `wp-image-${coverId}`
}));
}), coverCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", {
className: "homegrade-content-blocks-picture-banner__caption"
}, coverCaption)));
}
/***/ }),
@ -338,7 +345,7 @@ module.exports = window["wp"]["i18n"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/picture-banner","version":"0.1.0","title":"Image Bannière","category":"homegrade-blocks","icon":{"background":"#fff","foreground":"#DF1E1E","src":"cover-image"},"description":"Une image de heading utilisable dans les fiches questions pour illustrer un propos. La hauteur et la position de l\'image sont réglable","supports":{"html":false},"attributes":{"coverId":{"type":"number"},"coverAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"coverUrl":{"type":"string","source":"attribute","selector":"img","attribute":"src"},"heightFixed":{"type":"boolean","default":true},"imagePosition":{"type":"object","default":{"x":0.2,"y":0.4}}},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css"}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/picture-banner","version":"0.1.0","title":"Image Bannière","category":"homegrade-blocks","icon":{"background":"#fff","foreground":"#DF1E1E","src":"cover-image"},"description":"Une image de heading utilisable dans les fiches questions pour illustrer un propos. La hauteur et la position de l\'image sont réglable","supports":{"html":false},"attributes":{"coverId":{"type":"number"},"coverAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"coverUrl":{"type":"string","source":"attribute","selector":"img","attribute":"src"},"coverCaption":{"type":"string","default":""},"coverDescription":{"type":"string","default":""},"heightFixed":{"type":"boolean","default":true},"imagePosition":{"type":"object","default":{"x":0.2,"y":0.4}}},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css"}');
/***/ })

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

File diff suppressed because one or more lines are too long

11
blocks/picture-banner/build/style-index.css
View File

@ -1,6 +1,6 @@
/*!***************************************************************************************************************************************************************************************************************************************!*\
!*** 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/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.
@ -10,11 +10,14 @@
.wp-block-homegrade-content-blocks-picture-banner {
margin-bottom: 20px;
overflow: hidden;
border-radius: 22px;
}
.wp-block-homegrade-content-blocks-picture-banner img {
border-radius: 22px;
width: 100%;
}
.wp-block-homegrade-content-blocks-picture-banner figcaption {
padding: 2px 10px;
}
.wp-block-homegrade-content-blocks-picture-banner.fixed-height img {
height: 200px;
-o-object-fit: cover;

2
blocks/picture-banner/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD;AACC;EACC;AACF;AAEE;EACC;EACA;KAAA;EACA;KAAA;AAAH,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-homegrade-content-blocks-picture-banner {\n\tmargin-bottom: 20px;\n\toverflow: hidden;\n\tborder-radius: 22px;\n\timg {\n\t\twidth: 100%;\n\t}\n\t&.fixed-height {\n\t\timg {\n\t\t\theight: 200px;\n\t\t\tobject-fit: cover;\n\t\t\tobject-position: center;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;AAAD;AACC;EACC;EACA;AACF;AACC;EACC;AACF;AAEE;EACC;EACA;KAAA;EACA;KAAA;AAAH,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-homegrade-content-blocks-picture-banner {\n\tmargin-bottom: 20px;\n\toverflow: hidden;\n\timg {\n\t\tborder-radius: 22px;\n\t\twidth: 100%;\n\t}\n\tfigcaption {\n\t\tpadding: 2px 10px;\n\t}\n\t&.fixed-height {\n\t\timg {\n\t\t\theight: 200px;\n\t\t\tobject-fit: cover;\n\t\t\tobject-position: center;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}

8
blocks/picture-banner/src/block.json
View File

@ -31,6 +31,14 @@
"selector": "img",
"attribute": "src"
},
"coverCaption": {
"type": "string",
"default": ""
},
"coverDescription": {
"type": "string",
"default": ""
},
"heightFixed": {
"type": "boolean",
"default": true

32
blocks/picture-banner/src/edit.js
View File

@ -29,8 +29,15 @@ function Edit({
noticeUI,
...props
}) {
const { coverUrl, coverId, coverAlt, heightFixed, imagePosition } =
attributes;
const {
coverUrl,
coverId,
coverAlt,
coverCaption,
coverDescription,
heightFixed,
imagePosition,
} = attributes;
const [blobUrl, setBlobUrl] = useState();
function onUploadError(message) {
@ -42,22 +49,21 @@ function Edit({
coverUrl: undefined,
coverId: undefined,
coverAlt: "",
coverCaption: "",
coverDescription: "",
});
}
function updateCoverImage(image) {
if (!image || !image.url) {
setAttributes({
coverUrl: undefined,
coverId: undefined,
coverAlt: "",
});
return;
return removeCoverImg();
}
setAttributes({
coverUrl: image.url,
coverId: image.id,
coverAlt: image.alt,
coverCaption: image.caption,
coverDescription: image.description,
});
}
@ -152,7 +158,7 @@ function Edit({
)}
</BlockControls>
<div
<figure
{...useBlockProps({
className: `homegrade-content-blocks-picture-banner ${
isBlobURL(coverUrl) ? "is-loading" : ""
@ -170,7 +176,11 @@ function Edit({
}%`,
}}
/>
{coverCaption && (
<figcaption className="homegrade-content-blocks-picture-banner__caption">
{coverCaption}
</figcaption>
)}
{isBlobURL(coverUrl) && <Spinner />}
</>
)}
@ -184,7 +194,7 @@ function Edit({
allowedTypes={["image"]} // Onlibrary Allow only images
notices={noticeUI} // En cas d'erreur d'upload
/>
</div>
</figure>
</>
);
}

42
blocks/picture-banner/src/save.js
View File

@ -1,9 +1,16 @@
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { coverUrl, coverId, coverAlt, heightFixed, imagePosition } =
attributes;
const {
coverUrl,
coverId,
coverAlt,
coverCaption,
coverDescription,
heightFixed,
imagePosition,
} = attributes;
return (
<div
<figure
{...useBlockProps.save({
className: `homegrade-content-blocks-picture-banner ${
heightFixed ? "fixed-height" : ""
@ -11,17 +18,24 @@ export default function save({ attributes }) {
})}
>
{coverUrl && (
<img
src={coverUrl}
alt={coverAlt}
style={{
objectPosition: `${imagePosition.x * 100}% ${
imagePosition.y * 100
}%`,
}}
className={`wp-image-${coverId}`}
/>
<>
<img
src={coverUrl}
alt={coverAlt}
style={{
objectPosition: `${imagePosition.x * 100}% ${
imagePosition.y * 100
}%`,
}}
className={`wp-image-${coverId}`}
/>
{coverCaption && (
<figcaption className="homegrade-content-blocks-picture-banner__caption">
{coverCaption}
</figcaption>
)}
</>
)}
</div>
</figure>
);
}

5
blocks/picture-banner/src/style.scss
View File

@ -8,10 +8,13 @@
.wp-block-homegrade-content-blocks-picture-banner {
margin-bottom: 20px;
overflow: hidden;
border-radius: 22px;
img {
border-radius: 22px;
width: 100%;
}
figcaption {
padding: 2px 10px;
}
&.fixed-height {
img {
height: 200px;