handling new parameters

blocks/labelled-picture/build/block.json

@@ -19,6 +19,14 @@
       "type": "boolean",
       "default": "true"
     },
+    "legendLocation": {
+      "type": "string",
+      "default": "after"
+    },
+    "hasLightbox": {
+      "type": "boolean",
+      "default": "false"
+    },
     "hasRoundedShadow": {
       "type": "boolean",
       "default": "false"

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

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

blocks/labelled-picture/build/index.js

@@ -37,6 +37,8 @@ function Edit({
 }) {
   const {
     hasStickyLegend,
+    hasLightbox,
+    legendLocation,
     hasFixedHeight,
     hasRoundedShadow,
     showTitle,
@@ -91,8 +93,21 @@ function Edit({
       hasRoundedShadow
     });
   }
+  function handleLegendLocationChange(legendLocation) {
+    setAttributes({
+      legendLocation
+    });
+  }
+  function handleHasLightbox(hasLightbox) {
+    setAttributes({
+      hasLightbox
+    });
+  }
+  const renderCaption = () => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+    className: "figcaption-title"
+  }, pictureTitle), " ", pictureCaption);
   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",
+    title: "Param\xE8tres",
     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",
@@ -112,7 +127,23 @@ function Edit({
     label: "Rounded & Shadow",
     checked: hasRoundedShadow,
     onChange: handleHasRoundedShadow
-  })), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
+  }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
+    label: "Afficher une lightbox",
+    checked: hasLightbox,
+    onChange: handleHasLightbox
+  }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.__experimentalToggleGroupControl, {
+    label: "Emplacement de la l\xE9gende",
+    value: "before",
+    onChange: handleLegendLocationChange,
+    isBlock: true,
+    __nextHasNoMarginBottom: true
+  }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.__experimentalToggleGroupControlOption, {
+    value: "before",
+    label: "Avant l'Image"
+  }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.__experimentalToggleGroupControlOption, {
+    value: "after",
+    label: "Apr\xE8s l'image"
+  }))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
     title: "Source de l'image",
     className: "homegrade-blocks-components-image__panel-body "
   }, pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
@@ -140,12 +171,10 @@ function Edit({
 							${showTitle && pictureTitle ? "homegrade-blocks-labelled-picture--legend-has-title" : ""}
 						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}`
     })
-  }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+  }, legendLocation === "before" && renderCaption(), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: pictureUrl,
     alt: pictureAlt
-  }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+  }), legendLocation === "after" && renderCaption()), !pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, {
-    className: "figcaption-title"
-  }, pictureTitle), " ", pictureCaption)), !pictureUrl && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaPlaceholder, {
     disableMediaButtons: pictureUrl,
     icon: "admin-appearance",
     onSelect: updatePictureImg,
@@ -224,8 +253,10 @@ function save({
   attributes
 }) {
   const {
-    hasFixedHeight,
     hasStickyLegend,
+    hasLightbox,
+    legendLocation,
+    hasFixedHeight,
     hasRoundedShadow,
     showTitle,
     pictureUrl,
@@ -233,18 +264,22 @@ function save({
     pictureTitle,
     pictureCaption
   } = attributes;
+  const renderCaption = () => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+    className: "figcaption-title"
+  }, pictureTitle), " ", pictureCaption);
   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({
       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" : ""}
-						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""} singleLightbox-link`
+						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""} 
+						
+						${hasLightbox ? "singleLightbox-link" : ""} 
+						`
     })
-  }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+  }, legendLocation === "before" && renderCaption(), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: pictureUrl,
     alt: pictureAlt
-  }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, showTitle && pictureTitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+  }), legendLocation === "after" && renderCaption()));
-    className: "figcaption-title"
-  }, pictureTitle), " ", pictureCaption)));
 }
 
 /***/ }),
@@ -380,7 +415,7 @@ module.exports = window["wp"]["primitives"];
   \************************/
 /***/ ((module) => {
 
-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","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"},"hasRoundedShadow":{"type":"boolean","default":"false"},"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"}}}');
+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","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"},"legendLocation":{"type":"string","default":"after"},"hasLightbox":{"type":"boolean","default":"false"},"hasRoundedShadow":{"type":"boolean","default":"false"},"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"}}}');
 
 /***/ })
 

blocks/labelled-picture/src/block.json

@@ -19,6 +19,14 @@
 			"type": "boolean",
 			"default": "true"
 		},
+		"legendLocation": {
+			"type": "string",
+			"default": "after"
+		},
+		"hasLightbox": {
+			"type": "boolean",
+			"default": "false"
+		},
 		"hasRoundedShadow": {
 			"type": "boolean",
 			"default": "false"

blocks/labelled-picture/src/edit.js

@@ -27,6 +27,8 @@ export default function Edit({
 }) {
 	const {
 		hasStickyLegend,
+		hasLightbox,
+		legendLocation,
 		hasFixedHeight,
 		hasRoundedShadow,
 		showTitle,
@@ -76,12 +78,27 @@ export default function Edit({
 	function handleHasRoundedShadow(hasRoundedShadow) {
 		setAttributes({ hasRoundedShadow });
 	}
+	function handleLegendLocationChange(legendLocation) {
+		setAttributes({ legendLocation });
+	}
+	function handleHasLightbox(hasLightbox) {
+		setAttributes({ hasLightbox });
+	}
+
+	const renderCaption = () => (
+		<figcaption>
+			{showTitle && pictureTitle && (
+				<span className="figcaption-title">{pictureTitle}</span>
+			)}{" "}
+			{pictureCaption}
+		</figcaption>
+	);
 
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody
-					title="Légende"
+					title="Paramètres"
 					className="homegrade-blocks-components-image__panel-body "
 				>
 					<ToggleControl
@@ -106,6 +123,22 @@ export default function Edit({
 						checked={hasRoundedShadow}
 						onChange={handleHasRoundedShadow}
 					/>
+					<ToggleControl
+						label="Afficher une lightbox"
+						checked={hasLightbox}
+						onChange={handleHasLightbox}
+					/>
+
+					<ToggleGroupControl
+						label="Emplacement de la légende"
+						value="before"
+						onChange={handleLegendLocationChange}
+						isBlock
+						__nextHasNoMarginBottom
+					>
+						<ToggleGroupControlOption value="before" label="Avant l'Image" />
+						<ToggleGroupControlOption value="after" label="Après l'image" />
+					</ToggleGroupControl>
 				</PanelBody>
 				<PanelBody
 					title="Source de l'image"
@@ -161,13 +194,9 @@ export default function Edit({
 						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}`,
 						})}
 					>
+						{legendLocation === "before" && renderCaption()}
 						<img src={pictureUrl} alt={pictureAlt} />
-						<figcaption>
+						{legendLocation === "after" && renderCaption()}
-							{showTitle && pictureTitle && (
-								<span className="figcaption-title">{pictureTitle}</span>
-							)}{" "}
-							{pictureCaption}
-						</figcaption>
 					</figure>
 				)}
 

blocks/labelled-picture/src/save.js

@@ -2,8 +2,10 @@ import { useBlockProps } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
 	const {
-		hasFixedHeight,
 		hasStickyLegend,
+		hasLightbox,
+		legendLocation,
+		hasFixedHeight,
 		hasRoundedShadow,
 		showTitle,
 		pictureUrl,
@@ -12,6 +14,15 @@ export default function save({ attributes }) {
 		pictureCaption,
 	} = attributes;
 
+	const renderCaption = () => (
+		<figcaption>
+			{showTitle && pictureTitle && (
+				<span className="figcaption-title">{pictureTitle}</span>
+			)}{" "}
+			{pictureCaption}
+		</figcaption>
+	);
+
 	return (
 		<>
 			{pictureUrl && (
@@ -29,20 +40,15 @@ export default function save({ attributes }) {
 								? "homegrade-blocks-labelled-picture--legend-has-title"
 								: ""
 						}
-						${
+						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""} 
-							hasRoundedShadow
+						
-								? "homegrade-blocks-labelled-picture--rounded-shadow"
+						${hasLightbox ? "singleLightbox-link" : ""} 
-								: ""
+						`,
-						} singleLightbox-link`,
 					})}
 				>
+					{legendLocation === "before" && renderCaption()}
 					<img src={pictureUrl} alt={pictureAlt} />
-					<figcaption>
+					{legendLocation === "after" && renderCaption()}
-						{showTitle && pictureTitle && (
-							<span className="figcaption-title">{pictureTitle}</span>
-						)}{" "}
-						{pictureCaption}
-					</figcaption>
 				</figure>
 			)}
 		</>