handling picture caption

blocks/picture-banner/build/block.json

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

blocks/picture-banner/build/index.asset.php

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

blocks/picture-banner/build/index.css

@@ -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.
  *

blocks/picture-banner/build/index.js

@@ -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({
+      return removeCoverImg();
-        coverUrl: undefined,
-        coverId: undefined,
-        coverAlt: ""
-      });
-      return;
     }
     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"}');
 
 /***/ })
 

blocks/picture-banner/build/style-index.css

@@ -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;

blocks/picture-banner/build/style-index.css.map

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

blocks/picture-banner/src/block.json

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

blocks/picture-banner/src/edit.js

@@ -29,8 +29,15 @@ function Edit({
 	noticeUI,
 	...props
 }) {
-	const { coverUrl, coverId, coverAlt, heightFixed, imagePosition } =
+	const {
-		attributes;
+		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({
+			return removeCoverImg();
-				coverUrl: undefined,
-				coverId: undefined,
-				coverAlt: "",
-			});
-			return;
 		}
 		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>
 		</>
 	);
 }

blocks/picture-banner/src/save.js

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

blocks/picture-banner/src/style.scss

@@ -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;