handling hasRoundedShadow attribute

blocks/labelled-picture/build/block.json

@@ -19,6 +19,10 @@
       "type": "boolean",
       "default": "true"
     },
+    "hasRoundedShadow": {
+      "type": "boolean",
+      "default": "false"
+    },
     "hasFixedHeight": {
       "type": "boolean",
       "default": "true"

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' => '37f4daef8c6929a4d497');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '6de2664ba6b7abf8bd92');

blocks/labelled-picture/build/index.js

@@ -38,6 +38,7 @@ function Edit({
   const {
     hasStickyLegend,
     hasFixedHeight,
+    hasRoundedShadow,
     showTitle,
     pictureUrl,
     pictureAlt,
@@ -85,6 +86,11 @@ function Edit({
       showTitle
     });
   }
+  function handleHasRoundedShadow(hasRoundedShadow) {
+    setAttributes({
+      hasRoundedShadow
+    });
+  }
   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 "
@@ -102,6 +108,10 @@ function Edit({
     label: "Afficher le titre",
     checked: showTitle,
     onChange: handleShowTitle
+  }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
+    label: "Rounded & Shadow",
+    checked: hasRoundedShadow,
+    onChange: handleHasRoundedShadow
   })), (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 "
@@ -127,7 +137,8 @@ function Edit({
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
       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" : ""}`
+							${showTitle && pictureTitle ? "homegrade-blocks-labelled-picture--legend-has-title" : ""}
+						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}`
     })
   }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: pictureUrl,
@@ -215,6 +226,7 @@ function save({
   const {
     hasFixedHeight,
     hasStickyLegend,
+    hasRoundedShadow,
     showTitle,
     pictureUrl,
     pictureAlt,
@@ -224,7 +236,8 @@ function save({
   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" : ""}`
+						${showTitle && pictureTitle ? "homegrade-blocks-labelled-picture--legend-has-title" : ""}
+						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""} singleLightbox-link`
     })
   }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: pictureUrl,
@@ -367,7 +380,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"},"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"},"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,10 @@
 			"type": "boolean",
 			"default": "true"
 		},
+		"hasRoundedShadow": {
+			"type": "boolean",
+			"default": "false"
+		},
 		"hasFixedHeight": {
 			"type": "boolean",
 			"default": "true"

blocks/labelled-picture/src/edit.js

@@ -28,6 +28,7 @@ export default function Edit({
 	const {
 		hasStickyLegend,
 		hasFixedHeight,
+		hasRoundedShadow,
 		showTitle,
 		pictureUrl,
 		pictureAlt,
@@ -72,6 +73,9 @@ export default function Edit({
 	function handleShowTitle(showTitle) {
 		setAttributes({ showTitle });
 	}
+	function handleHasRoundedShadow(hasRoundedShadow) {
+		setAttributes({ hasRoundedShadow });
+	}
 
 	return (
 		<>
@@ -97,6 +101,11 @@ export default function Edit({
 						checked={showTitle}
 						onChange={handleShowTitle}
 					/>
+					<ToggleControl
+						label="Rounded & Shadow"
+						checked={hasRoundedShadow}
+						onChange={handleHasRoundedShadow}
+					/>
 				</PanelBody>
 				<PanelBody
 					title="Source de l'image"
@@ -148,7 +157,8 @@ export default function Edit({
 								showTitle && pictureTitle
 									? "homegrade-blocks-labelled-picture--legend-has-title"
 									: ""
-							}`,
+							}
+						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}`,
 						})}
 					>
 						<img src={pictureUrl} alt={pictureAlt} />

blocks/labelled-picture/src/save.js

@@ -4,6 +4,7 @@ export default function save({ attributes }) {
 	const {
 		hasFixedHeight,
 		hasStickyLegend,
+		hasRoundedShadow,
 		showTitle,
 		pictureUrl,
 		pictureAlt,
@@ -27,7 +28,12 @@ export default function save({ attributes }) {
 							showTitle && pictureTitle
 								? "homegrade-blocks-labelled-picture--legend-has-title"
 								: ""
-						}`,
+						}
+						${
+							hasRoundedShadow
+								? "homegrade-blocks-labelled-picture--rounded-shadow"
+								: ""
+						} singleLightbox-link`,
 					})}
 				>
 					<img src={pictureUrl} alt={pictureAlt} />