handling image caption and description

blocks/text-image/build/block.json

@@ -23,6 +23,12 @@
     "imageId": {
       "type": "number"
     },
+    "imageCaption": {
+      "type": "string"
+    },
+    "imageDescription": {
+      "type": "string"
+    },
     "imageProportion": {
       "type": "string",
       "default": "original"

blocks/text-image/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '2266df3a975a48180baf');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '86470840525466393d70');

blocks/text-image/build/index.js

@@ -108,21 +108,25 @@ function ImagePanelBody({
   setAttributes
 }) {
   function setImageAttributes(image) {
+    console.log(image);
     setAttributes({
       imageId: image.id,
       imageAlt: image.alt,
-      imageUrl: image.url
+      imageUrl: image.url,
+      imageCaption: image.caption,
+      imageDescription: image.description
     });
   }
   function removeImageAttributes() {
     setAttributes({
       imageId: null,
       imageAlt: null,
-      imageUrl: null
+      imageUrl: null,
+      imageCaption: null,
+      imageDescription: null
     });
   }
   function onImageProportionChange(imageProportion) {
-    console.log(imageProportion);
     setAttributes({
       imageProportion
     });
@@ -210,16 +214,17 @@ function Edit({
     imageId,
     imageAlt,
     imageUrl,
+    imageCaption,
+    imageDescription,
     imageProportion,
     contentDisposition
   } = attributes;
   function changeContentDisposition(newContentDisposition) {
-    console.log(newContentDisposition);
     setAttributes({
       contentDisposition: newContentDisposition
     });
   }
-  console.log(typeof contentDisposition);
+  console.log(imageDescription, imageCaption);
   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, {
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Disposition", "homegrade"),
     className: "homegrade-panel-body"
@@ -265,7 +270,7 @@ function Edit({
     imageAlt: imageAlt,
     imageUrl: imageUrl,
     imageProportion: imageProportion
-  }))), contentDisposition === "right" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  }), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption))), contentDisposition === "right" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_3__["default"], {
     imageAlt: imageAlt,
@@ -277,7 +282,7 @@ function Edit({
     imageAlt: imageAlt,
     imageUrl: imageUrl,
     imageProportion: imageProportion
-  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  }), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.InnerBlocks, {
     template: [["core/paragraph", {
@@ -353,6 +358,8 @@ function save({
   let {
     imageAlt,
     imageUrl,
+    imageCaption,
+    imageDescription,
     imageProportion,
     contentDisposition
   } = attributes;
@@ -368,13 +375,13 @@ function save({
     imageAlt: imageAlt,
     imageUrl: imageUrl,
     imageProportion: imageProportion
-  }))), contentDisposition === "right" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  }), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption))), contentDisposition === "right" && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
     imageAlt: imageAlt,
     imageUrl: imageUrl,
     imageProportion: imageProportion
-  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+  }), imageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageDescription), imageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, imageCaption)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))));
 }
@@ -502,7 +509,7 @@ module.exports = window["wp"]["primitives"];
   \************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/text-image","version":"0.1.0","title":"Texte + Image","category":"homegrade-blocks","description":"Bloc de texte & image latérale","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"},"contentDisposition":{"type":"string","default":"left"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/text-image","version":"0.1.0","title":"Texte + Image","category":"homegrade-blocks","description":"Bloc de texte & image latérale","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageCaption":{"type":"string"},"imageDescription":{"type":"string"},"imageProportion":{"type":"string","default":"original"},"contentDisposition":{"type":"string","default":"left"}}}');
 
 /***/ })
 

blocks/text-image/src/block.json

@@ -23,6 +23,12 @@
 		"imageId": {
 			"type": "number"
 		},
+		"imageCaption": {
+			"type": "string"
+		},
+		"imageDescription": {
+			"type": "string"
+		},
 		"imageProportion": {
 			"type": "string",
 			"default": "original"

blocks/text-image/src/edit.js

@@ -19,15 +19,22 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from "@wordpress/components";
 export default function Edit({ attributes, setAttributes, ...props }) {
-	let { imageId, imageAlt, imageUrl, imageProportion, contentDisposition } =
+	let {
-		attributes;
+		imageId,
+		imageAlt,
+		imageUrl,
+		imageCaption,
+		imageDescription,
+		imageProportion,
+		contentDisposition,
+	} = attributes;
 
 	function changeContentDisposition(newContentDisposition) {
-		console.log(newContentDisposition);
 		setAttributes({ contentDisposition: newContentDisposition });
 	}
 
-	console.log(typeof contentDisposition);
+	console.log(imageDescription, imageCaption);
+
 	return (
 		<>
 			<InspectorControls>
@@ -101,6 +108,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 								imageUrl={imageUrl}
 								imageProportion={imageProportion}
 							/>
+							{imageDescription && <p>{imageDescription}</p>}
+							{imageCaption && <p>{imageCaption}</p>}
 						</div>
 					</>
 				)}
@@ -119,6 +128,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 								imageUrl={imageUrl}
 								imageProportion={imageProportion}
 							/>
+							{imageDescription && <p>{imageDescription}</p>}
+							{imageCaption && <p>{imageCaption}</p>}
 						</div>
 						<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
 							<InnerBlocks

blocks/text-image/src/save.js

@@ -1,7 +1,14 @@
 import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 import Image from "../../_components/Image";
 export default function save({ attributes }) {
-	let { imageAlt, imageUrl, imageProportion, contentDisposition } = attributes;
+	let {
+		imageAlt,
+		imageUrl,
+		imageCaption,
+		imageDescription,
+		imageProportion,
+		contentDisposition,
+	} = attributes;
 
 	return (
 		<div
@@ -21,6 +28,8 @@ export default function save({ attributes }) {
 							imageUrl={imageUrl}
 							imageProportion={imageProportion}
 						/>
+						{imageDescription && <p>{imageDescription}</p>}
+						{imageCaption && <p>{imageCaption}</p>}
 					</div>
 				</>
 			)}
@@ -32,6 +41,8 @@ export default function save({ attributes }) {
 							imageUrl={imageUrl}
 							imageProportion={imageProportion}
 						/>
+						{imageDescription && <p>{imageDescription}</p>}
+						{imageCaption && <p>{imageCaption}</p>}
 					</div>
 					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
 						<InnerBlocks.Content />