updating highlights to handle warning version

.gitignore

@@ -13,6 +13,8 @@ build/Release
 
 # Dependency directories
 node_modules/
+node_modules
+
 
 # Optional npm cache directory
 .npm

blocks/highlight/build/block.json

@@ -26,6 +26,10 @@
     "hasTitle": {
       "type": "boolean",
       "default": true
+    },
+    "variant": {
+      "type": "string",
+      "default": "classic"
     }
   }
 }

blocks/highlight/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '897bb52e9c98ac1d2b8a');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '154e94d58a029f32860c');

blocks/highlight/build/index.css

@@ -6,6 +6,12 @@
  *
  * Replace them with your own styles or remove the file completely.
  */
+.homegrade-blocks-highlight--classic .wp-block-button__link {
+  background-color: #df1e1e !important;
+}
+.homegrade-blocks-highlight--warning:after {
+  z-index: 0 !important;
+}
 .homegrade-blocks-highlight ul li {
   display: flex;
   padding: 10px 0;
@@ -21,4 +27,11 @@
   margin-right: 10px;
 }
 
+.homegrade-blocks-highlight__variant .components-toggle-group-control-option-base[aria-checked=true] {
+  background-color: #e04d42;
+}
+.homegrade-blocks-highlight__variant .components-toggle-group-control-option-base[aria-checked=true]:focus {
+  outline: none;
+}
+
 /*# sourceMappingURL=index.css.map*/

blocks/highlight/build/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAQE;EAEC;EACA;AAHH;AAKE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAHH,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.homegrade-blocks-highlight {\n\tul {\n\t\tli {\n\t\t\t// list-style: none !important;\n\t\t\tdisplay: flex;\n\t\t\tpadding: 10px 0;\n\t\t}\n\t\tli:before {\n\t\t\ttransform: translateY(6px);\n\t\t\tflex-shrink: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tcontent: \"\";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-right: 10px;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AAAA;;;;EAAA;AAQE;EACC;AAFH;AAME;EACC;AAJH;AASE;EAEC;EACA;AARH;AAUE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARH;;AAcC;EACC;AAXF;AAYE;EACC;AAVH,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.homegrade-blocks-highlight {\n\t&--classic {\n\t\t.wp-block-button__link {\n\t\t\tbackground-color: #df1e1e !important;\n\t\t}\n\t}\n\t&--warning {\n\t\t&:after {\n\t\t\tz-index: 0 !important;\n\t\t}\n\t}\n\n\tul {\n\t\tli {\n\t\t\t// list-style: none !important;\n\t\t\tdisplay: flex;\n\t\t\tpadding: 10px 0;\n\t\t}\n\t\tli:before {\n\t\t\ttransform: translateY(6px);\n\t\t\tflex-shrink: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tcontent: \"\";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-right: 10px;\n\t\t}\n\t}\n}\n\n.homegrade-blocks-highlight__variant {\n\t.components-toggle-group-control-option-base[aria-checked=\"true\"] {\n\t\tbackground-color: #e04d42;\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}

blocks/highlight/build/index.js

@@ -199,13 +199,9 @@ function Edit({
   const {
     title,
     iconName,
-    hasTitle
+    hasTitle,
+    variant
   } = attributes;
-  const handleIconChange = newIconName => {
-    setAttributes({
-      iconName: newIconName
-    });
-  };
   function getIconPicture() {
     switch (iconName) {
       case "key":
@@ -218,17 +214,15 @@ function Edit({
         return _img_icon_bulb_svg__WEBPACK_IMPORTED_MODULE_6__["default"];
     }
   }
-  function getDashiconSymbol() {
+  function onIconChange(newIconName) {
-    switch (iconName) {
+    setAttributes({
-      case "key":
+      iconName: newIconName
-        return "admin-network";
+    });
-      case "chain":
+  }
-        return "admin-links";
+  function onTitleChange(title) {
-      case "house":
+    setAttributes({
-        return "admin-home";
+      title
-      case "bulb":
+    });
-        return "lightbulb";
-    }
   }
   function onHasTitleChange() {
     setAttributes({
@@ -236,12 +230,30 @@ function Edit({
       title: undefined
     });
   }
+  function onVariantChange(variant) {
+    console.log(variant);
+    setAttributes({
+      variant
+    });
+  }
   let iconPicture = getIconPicture();
-  let iconDashiconSymbol = getDashiconSymbol();
+  console.log(variant);
   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_7__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.PanelBody, {
-    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Titre", "homegrade-blocks__texte-fonctionnel"),
+    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Variantes", "homegrade-blocks__texte-fonctionnel"),
     initialOpen: true
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToggleControl, {
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalToggleGroupControl, {
+    className: "homegrade-blocks-highlight__variant",
+    isBlock: true,
+    onChange: onVariantChange,
+    value: variant
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalToggleGroupControlOption, {
+    variant: "primary",
+    label: "Classique",
+    value: "classic"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalToggleGroupControlOption, {
+    label: "Warning",
+    value: "warning"
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToggleControl, {
     label: "Afficher le titre",
     checked: hasTitle,
     onChange: onHasTitleChange
@@ -249,25 +261,25 @@ function Edit({
     title: "Clé",
     icon: "admin-network",
     isActive: iconName === "key",
-    onClick: () => handleIconChange("key")
+    onClick: () => onIconChange("key")
   }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToolbarButton, {
     title: "Lien",
     icon: "admin-links",
     isActive: iconName === "chain",
-    onClick: () => handleIconChange("chain")
+    onClick: () => onIconChange("chain")
   }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToolbarButton, {
     title: "Homegrade",
     icon: "admin-home",
     isActive: iconName === "house",
-    onClick: () => handleIconChange("house")
+    onClick: () => onIconChange("house")
   }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToolbarButton, {
     title: "Inspiration",
     icon: "lightbulb",
     isActive: iconName === "bulb",
-    onClick: () => handleIconChange("bulb")
+    onClick: () => onIconChange("bulb")
   })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.useBlockProps)({
-      className: `homegrade-blocks-highlight`
+      className: `homegrade-blocks-highlight ${variant ? `homegrade-blocks-highlight--${variant}` : ""}`
     })
   }, hasTitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-highlight__titling"
@@ -278,9 +290,7 @@ function Edit({
     alt: ""
   })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_7__.RichText, {
     className: "homegrade-blocks-highlight__block-title",
-    onChange: value => setAttributes({
+    onChange: onTitleChange,
-      title: value
-    }),
     value: title,
     placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Insérez un titre", "homegrade-blocks__texte-fonctionnel"),
     tagName: "h3",
@@ -364,13 +374,13 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function save({
-  attributes,
+  attributes
-  setAttributes
 }) {
   const {
     title,
     iconName,
-    hasTitle
+    hasTitle,
+    variant
   } = attributes;
   function getIconPicture() {
     switch (iconName) {
@@ -387,7 +397,7 @@ function save({
   let iconPicture = getIconPicture();
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `homegrade-blocks-highlight`
+      className: `homegrade-blocks-highlight ${variant ? `homegrade-blocks-highlight--${variant}` : ""}`
     })
   }, hasTitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
     className: "homegrade-blocks-highlight__titling"
@@ -506,7 +516,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/highlight","version":"0.1.0","title":"Mise en avant","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations importantes","supports":{"html":false},"textdomain":"homegrade-blocks__texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string","source":"html","selector":"h3"},"iconName":{"type":"string","default":"key"},"hasTitle":{"type":"boolean","default":true}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/highlight","version":"0.1.0","title":"Mise en avant","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations importantes","supports":{"html":false},"textdomain":"homegrade-blocks__texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string","source":"html","selector":"h3"},"iconName":{"type":"string","default":"key"},"hasTitle":{"type":"boolean","default":true},"variant":{"type":"string","default":"classic"}}}');
 
 /***/ })
 

blocks/highlight/src/block.json

@@ -26,6 +26,10 @@
 		"hasTitle": {
 			"type": "boolean",
 			"default": true
+		},
+		"variant": {
+			"type": "string",
+			"default": "classic"
 		}
 	}
 }

blocks/highlight/src/edit.js

@@ -12,13 +12,17 @@ import {
 	InspectorControls,
 } from "@wordpress/block-editor";
 
-import { ToolbarButton, ToggleControl, PanelBody } from "@wordpress/components";
+import {
+	ToolbarButton,
+	ToggleControl,
+	PanelBody,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from "@wordpress/components";
 
 export default function Edit({ attributes, setAttributes }) {
-	const { title, iconName, hasTitle } = attributes;
+	const { title, iconName, hasTitle, variant } = attributes;
-	const handleIconChange = (newIconName) => {
+
-		setAttributes({ iconName: newIconName });
-	};
 	function getIconPicture() {
 		switch (iconName) {
 			case "key":
@@ -34,20 +38,12 @@ export default function Edit({ attributes, setAttributes }) {
 				return bulbIcon;
 		}
 	}
-	function getDashiconSymbol() {
-		switch (iconName) {
-			case "key":
-				return "admin-network";
 
-			case "chain":
+	function onIconChange(newIconName) {
-				return "admin-links";
+		setAttributes({ iconName: newIconName });
-
+	}
-			case "house":
+	function onTitleChange(title) {
-				return "admin-home";
+		setAttributes({ title });
-
-			case "bulb":
-				return "lightbulb";
-		}
 	}
 	function onHasTitleChange() {
 		setAttributes({
@@ -55,17 +51,32 @@ export default function Edit({ attributes, setAttributes }) {
 			title: undefined,
 		});
 	}
-
+	function onVariantChange(variant) {
+		console.log(variant);
+		setAttributes({ variant });
+	}
 	let iconPicture = getIconPicture();
-	let iconDashiconSymbol = getDashiconSymbol();
+	console.log(variant);
-
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody
-					title={__("Titre", "homegrade-blocks__texte-fonctionnel")}
+					title={__("Variantes", "homegrade-blocks__texte-fonctionnel")}
 					initialOpen={true}
 				>
+					<ToggleGroupControl
+						className="homegrade-blocks-highlight__variant"
+						isBlock
+						onChange={onVariantChange}
+						value={variant}
+					>
+						<ToggleGroupControlOption
+							variant="primary"
+							label="Classique"
+							value="classic"
+						/>
+						<ToggleGroupControlOption label="Warning" value="warning" />
+					</ToggleGroupControl>
 					<ToggleControl
 						label="Afficher le titre"
 						checked={hasTitle}
@@ -78,30 +89,32 @@ export default function Edit({ attributes, setAttributes }) {
 					title={"Clé"}
 					icon={"admin-network"}
 					isActive={iconName === "key"}
-					onClick={() => handleIconChange("key")}
+					onClick={() => onIconChange("key")}
 				/>
 				<ToolbarButton
 					title={"Lien"}
 					icon={"admin-links"}
 					isActive={iconName === "chain"}
-					onClick={() => handleIconChange("chain")}
+					onClick={() => onIconChange("chain")}
 				/>
 				<ToolbarButton
 					title={"Homegrade"}
 					icon={"admin-home"}
 					isActive={iconName === "house"}
-					onClick={() => handleIconChange("house")}
+					onClick={() => onIconChange("house")}
 				/>
 				<ToolbarButton
 					title={"Inspiration"}
 					icon={"lightbulb"}
 					isActive={iconName === "bulb"}
-					onClick={() => handleIconChange("bulb")}
+					onClick={() => onIconChange("bulb")}
 				/>
 			</BlockControls>
 			<section
 				{...useBlockProps({
-					className: `homegrade-blocks-highlight`,
+					className: `homegrade-blocks-highlight ${
+						variant ? `homegrade-blocks-highlight--${variant}` : ""
+					}`,
 				})}
 			>
 				{hasTitle && (
@@ -111,7 +124,7 @@ export default function Edit({ attributes, setAttributes }) {
 						</div>
 						<RichText
 							className="homegrade-blocks-highlight__block-title"
-							onChange={(value) => setAttributes({ title: value })}
+							onChange={onTitleChange}
 							value={title}
 							placeholder={__(
 								"Insérez un titre",

blocks/highlight/src/editor.scss

@@ -5,6 +5,17 @@
  */
 
 .homegrade-blocks-highlight {
+	&--classic {
+		.wp-block-button__link {
+			background-color: #df1e1e !important;
+		}
+	}
+	&--warning {
+		&:after {
+			z-index: 0 !important;
+		}
+	}
+
 	ul {
 		li {
 			// list-style: none !important;
@@ -23,3 +34,12 @@
 		}
 	}
 }
+
+.homegrade-blocks-highlight__variant {
+	.components-toggle-group-control-option-base[aria-checked="true"] {
+		background-color: #e04d42;
+		&:focus {
+			outline: none;
+		}
+	}
+}

blocks/highlight/src/save.js

@@ -6,8 +6,8 @@ import chainIcon from "./img/icon_block_chain.svg";
 import houseIcon from "./img/icon_house.svg";
 import bulbIcon from "./img/icon_bulb.svg";
 
-export default function save({ attributes, setAttributes }) {
+export default function save({ attributes }) {
-	const { title, iconName, hasTitle } = attributes;
+	const { title, iconName, hasTitle, variant } = attributes;
 	function getIconPicture() {
 		switch (iconName) {
 			case "key":
@@ -28,7 +28,9 @@ export default function save({ attributes, setAttributes }) {
 	return (
 		<section
 			{...useBlockProps.save({
-				className: `homegrade-blocks-highlight`,
+				className: `homegrade-blocks-highlight ${
+					variant ? `homegrade-blocks-highlight--${variant}` : ""
+				}`,
 			})}
 		>
 			{hasTitle && (