adding icon shadow handling

blocks/icon/build/block.json

@@ -26,6 +26,10 @@
     },
     "iconId": {
       "type": "number"
+    },
+    "hasShadow": {
+      "type": "boolean",
+      "default": false
     }
   }
 }

blocks/icon/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' => '1a85b2a8e2b15c8458a5');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '834f4191f3824517e91e');

blocks/icon/build/index.css

@@ -1,13 +1,9 @@
 /*!****************************************************************************************************************************************************************************************************************************************!*\
   !*** 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 ***!
   \****************************************************************************************************************************************************************************************************************************************/
-/**
+.homegrade-blocks-components-icon__panel-body .icon-preview {
- * The following styles get applied inside the editor only.
+  max-width: 80px;
- *
+  padding: 20px 0;
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-multiblocks {
-  border: 1px dotted #f00;
 }
 
 /*# sourceMappingURL=index.css.map*/

blocks/icon/build/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAMA;EACC;AAAD,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":["/**\n * The following styles get applied inside the editor only.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-create-block-multiblocks {\n\tborder: 1px dotted #f00;\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AACC;EACC;EACA;AAAF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-components-icon__panel-body {\n\t.icon-preview {\n\t\tmax-width: 80px;\n\t\tpadding: 20px 0;\n\t}\n}\n"],"names":[],"sourceRoot":""}

blocks/icon/build/index.js

@@ -203,6 +203,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 function Edit({
   attributes,
   setAttributes
@@ -210,7 +211,8 @@ function Edit({
   let {
     iconUrl,
     iconAlt,
-    iconId
+    iconId,
+    hasShadow
   } = attributes;
   function setIconAttributes(icon) {
     setAttributes({
@@ -226,15 +228,22 @@ function Edit({
       iconUrl: null
     });
   }
+  function onHasShadowChange() {
+    setAttributes({
+      hasShadow: !hasShadow
+    });
+  }
   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, {
-    className: "homegrade-blocks-components-image__panel-body",
+    className: "homegrade-blocks-components-image__panel-body homegrade-blocks-components-icon__panel-body",
-    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icon", "homegrade-blocks__texte-backoffice")
+    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice")
   }, iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    className: "icon-preview",
     src: iconUrl,
     alt: iconAlt
   }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "media-replace-container"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.MediaReplaceFlow, {
+    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Source", "homegrade-blocks__texte-backoffice"),
     mediaId: iconId,
     mediaUrl: iconUrl,
     allowedTypes: ["image"],
@@ -247,7 +256,11 @@ function Edit({
     icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
     label: "Supprimer",
     onClick: removeIconAttributes
-  }))))), !iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.MediaPlaceholder, {
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToggleControl, {
+    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ombre", "homegrade-blocks__texte-backoffice"),
+    checked: hasShadow,
+    onChange: onHasShadowChange
+  })))), !iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.MediaPlaceholder, {
     accept: "image/*",
     allowedTypes: ["image"],
     onSelect: setIconAttributes,
@@ -255,7 +268,7 @@ function Edit({
     handleUpload: true
   }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_6__.useBlockProps)({
-      className: `homegrade-blocks-icon`
+      className: `homegrade-blocks-icon ${hasShadow ? "homegrade-blocks-icon--has-shadow" : "homegrade-blocks-icon--no-shadow"} `
     })
   }, iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: iconUrl,
@@ -325,11 +338,11 @@ function save({
   let {
     iconUrl,
     iconAlt,
-    iconId
+    hasShadow
   } = attributes;
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `homegrade-blocks-icon`
+      className: `homegrade-blocks-icon ${hasShadow ? "homegrade-blocks-icon--has-shadow" : "homegrade-blocks-icon--no-shadow"} `
     })
   }, iconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: iconUrl,
@@ -460,7 +473,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/icon","version":"0.1.0","title":"Icone","category":"homegrade-blocks","icon":"smiley","description":"Pour insérer une icone personnalisée dans une zone de contenu","supports":{"html":false},"parent":["homegrade-content-blocks/column-card"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"iconUrl":{"type":"string"},"iconAlt":{"type":"string"},"iconId":{"type":"number"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/icon","version":"0.1.0","title":"Icone","category":"homegrade-blocks","icon":"smiley","description":"Pour insérer une icone personnalisée dans une zone de contenu","supports":{"html":false},"parent":["homegrade-content-blocks/column-card"],"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"iconUrl":{"type":"string"},"iconAlt":{"type":"string"},"iconId":{"type":"number"},"hasShadow":{"type":"boolean","default":false}}}');
 
 /***/ })
 

blocks/icon/build/style-index.css

@@ -1,16 +1,4 @@
 /*!***************************************************************************************************************************************************************************************************************************************!*\
   !*** 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.
- *
- * Replace them with your own styles or remove the file completely.
- */
-.wp-block-create-block-multiblocks {
-  background-color: #21759b;
-  color: #fff;
-  padding: 2px;
-}
 
-/*# sourceMappingURL=style-index.css.map*/

blocks/icon/build/style-index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD,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-create-block-multiblocks {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: 2px;\n}\n"],"names":[],"sourceRoot":""}

blocks/icon/src/block.json

@@ -26,6 +26,10 @@
 		},
 		"iconId": {
 			"type": "number"
+		},
+		"hasShadow": {
+			"type": "boolean",
+			"default": false
 		}
 	}
 }

blocks/icon/src/edit.js

@@ -12,9 +12,9 @@ import {
 } from "@wordpress/block-editor";
 import { PanelBody, Button } from "@wordpress/components";
 import { trash } from "@wordpress/icons";
-
+import { PanelRow, ToggleControl } from "@wordpress/components";
 export default function Edit({ attributes, setAttributes }) {
-	let { iconUrl, iconAlt, iconId } = attributes;
+	let { iconUrl, iconAlt, iconId, hasShadow } = attributes;
 	function setIconAttributes(icon) {
 		setAttributes({
 			iconId: icon.id,
@@ -31,16 +31,23 @@ export default function Edit({ attributes, setAttributes }) {
 		});
 	}
 
+	function onHasShadowChange() {
+		setAttributes({ hasShadow: !hasShadow });
+	}
+
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody
-					className="homegrade-blocks-components-image__panel-body"
+					className="homegrade-blocks-components-image__panel-body homegrade-blocks-components-icon__panel-body"
-					title={__("Icon", "homegrade-blocks__texte-backoffice")}
+					title={__("Icone", "homegrade-blocks__texte-backoffice")}
 				>
-					{iconUrl && <img src={iconUrl} alt={iconAlt} />}
+					{iconUrl && (
+						<img className="icon-preview" src={iconUrl} alt={iconAlt} />
+					)}
 					<div className="media-replace-container">
 						<MediaReplaceFlow
+							label={__("Source", "homegrade-blocks__texte-backoffice")}
 							mediaId={iconId}
 							mediaUrl={iconUrl}
 							allowedTypes={["image"]}
@@ -64,6 +71,14 @@ export default function Edit({ attributes, setAttributes }) {
 							</>
 						)}
 					</div>
+
+					<PanelRow>
+						<ToggleControl
+							label={__("Ombre", "homegrade-blocks__texte-backoffice")}
+							checked={hasShadow}
+							onChange={onHasShadowChange}
+						/>
+					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
 			{!iconUrl && (
@@ -77,7 +92,11 @@ export default function Edit({ attributes, setAttributes }) {
 			)}
 			<div
 				{...useBlockProps({
-					className: `homegrade-blocks-icon`,
+					className: `homegrade-blocks-icon ${
+						hasShadow
+							? "homegrade-blocks-icon--has-shadow"
+							: "homegrade-blocks-icon--no-shadow"
+					} `,
 				})}
 			>
 				{iconUrl && <img src={iconUrl} alt={iconAlt} />}

blocks/icon/src/editor.scss

@@ -1,9 +1,6 @@
-/**
+.homegrade-blocks-components-icon__panel-body {
- * The following styles get applied inside the editor only.
+	.icon-preview {
- *
+		max-width: 80px;
- * Replace them with your own styles or remove the file completely.
+		padding: 20px 0;
- */
+	}
-
-.wp-block-create-block-multiblocks {
-	border: 1px dotted #f00;
 }

blocks/icon/src/save.js

@@ -1,12 +1,16 @@
 import { useBlockProps } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
-	let { iconUrl, iconAlt, iconId } = attributes;
+	let { iconUrl, iconAlt, hasShadow } = attributes;
 
 	return (
 		<div
 			{...useBlockProps.save({
-				className: `homegrade-blocks-icon`,
+				className: `homegrade-blocks-icon ${
+					hasShadow
+						? "homegrade-blocks-icon--has-shadow"
+						: "homegrade-blocks-icon--no-shadow"
+				} `,
 			})}
 		>
 			{iconUrl && <img src={iconUrl} alt={iconAlt} />}

blocks/icon/src/style.scss

@@ -1,12 +0,0 @@
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-create-block-multiblocks {
-	background-color: #21759b;
-	color: #fff;
-	padding: 2px;
-}