{!logoUrl && (
diff --git a/blocks/highlight/src/editor.scss b/blocks/highlight/src/editor.scss
index 7088dbe..573b711 100644
--- a/blocks/highlight/src/editor.scss
+++ b/blocks/highlight/src/editor.scss
@@ -64,3 +64,13 @@
// margin-top: 10px;
}
}
+
+.homegrade-blocks-highlight__icon-position {
+ margin: 20px 0;
+ legend {
+ font-size: 15px !important;
+ // font-weight: 400 !important;
+ text-transform: none !important;
+ color: #585858;
+ }
+}
diff --git a/blocks/highlight/src/img/icon_acoustic.svg b/blocks/highlight/src/img/icon_acoustic.svg
new file mode 100644
index 0000000..697c696
--- /dev/null
+++ b/blocks/highlight/src/img/icon_acoustic.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/blocks/highlight/src/img/icon_documentation.svg b/blocks/highlight/src/img/icon_documentation.svg
new file mode 100644
index 0000000..804dc3a
--- /dev/null
+++ b/blocks/highlight/src/img/icon_documentation.svg
@@ -0,0 +1,8 @@
+
+
\ No newline at end of file
diff --git a/blocks/highlight/src/img/icon_info.svg b/blocks/highlight/src/img/icon_info.svg
new file mode 100644
index 0000000..da552fb
--- /dev/null
+++ b/blocks/highlight/src/img/icon_info.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/blocks/highlight/src/img/icon_notification.svg b/blocks/highlight/src/img/icon_notification.svg
new file mode 100644
index 0000000..3e3883d
--- /dev/null
+++ b/blocks/highlight/src/img/icon_notification.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/blocks/highlight/src/img/icon_search.svg b/blocks/highlight/src/img/icon_search.svg
new file mode 100644
index 0000000..fd2f37e
--- /dev/null
+++ b/blocks/highlight/src/img/icon_search.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/blocks/highlight/src/img/icon_tip.svg b/blocks/highlight/src/img/icon_tip.svg
new file mode 100644
index 0000000..da03dd1
--- /dev/null
+++ b/blocks/highlight/src/img/icon_tip.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/blocks/highlight/src/img/icon_warning.svg b/blocks/highlight/src/img/icon_warning.svg
new file mode 100644
index 0000000..0e1f9c8
--- /dev/null
+++ b/blocks/highlight/src/img/icon_warning.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/blocks/highlight/src/index.js b/blocks/highlight/src/index.js
index c7ed3dc..a16b7da 100644
--- a/blocks/highlight/src/index.js
+++ b/blocks/highlight/src/index.js
@@ -5,6 +5,7 @@ import "./style.scss";
import Edit from "./edit";
import save from "./save";
import metadata from "./block.json";
+import deprecated from "./deprecated";
registerBlockType(metadata.name, {
icon: {
@@ -17,4 +18,5 @@ registerBlockType(metadata.name, {
},
edit: Edit,
save,
+ deprecated,
});
diff --git a/blocks/highlight/src/save.js b/blocks/highlight/src/save.js
index b84a038..9e1d0e4 100644
--- a/blocks/highlight/src/save.js
+++ b/blocks/highlight/src/save.js
@@ -5,17 +5,25 @@ import keyIcon from "./img/icon_feather_key.svg";
import chainIcon from "./img/icon_block_chain.svg";
import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";
+import warningIcon from "./img/icon_warning.svg";
+import acousticIcon from "./img/icon_acoustic.svg";
+import documentationIcon from "./img/icon_documentation.svg";
+import notificationIcon from "./img/icon_notification.svg";
+import searchIcon from "./img/icon_search.svg";
+import infoIcon from "./img/icon_info.svg";
+import tipIcon from "./img/icon_tip.svg";
export default function save({ attributes }) {
const {
title,
iconName,
hasTitle,
- hasTitleIcon,
+ hasIcon,
variant,
hasLogo,
logoAlt,
logoUrl,
+ iconPosition,
} = attributes;
function getIconPicture() {
switch (iconName) {
@@ -30,6 +38,25 @@ export default function save({ attributes }) {
case "bulb":
return bulbIcon;
+
+ case "warning":
+ return warningIcon;
+
+ case "acoustic":
+ return acousticIcon;
+
+ case "documentation":
+ return documentationIcon;
+
+ case "notification":
+ return notificationIcon;
+
+ case "search":
+ return searchIcon;
+ case "info":
+ return infoIcon;
+ case "tip":
+ return tipIcon;
}
}
let iconPicture = getIconPicture();
@@ -45,12 +72,10 @@ export default function save({ attributes }) {
{hasTitle && (
- {hasTitleIcon && (
+ {hasIcon && iconPosition === "top" && (
@@ -64,6 +89,12 @@ export default function save({ attributes }) {
)}
+ {hasIcon && iconPosition === "side" && !hasTitle && (
+
+

+
+ )}
+
diff --git a/blocks/highlight/src/style.scss b/blocks/highlight/src/style.scss
index 25a1b7a..c4722e8 100644
--- a/blocks/highlight/src/style.scss
+++ b/blocks/highlight/src/style.scss
@@ -9,25 +9,25 @@
&__block-title {
margin: 0 !important;
}
- &__titling {
- .icon {
- background-color: black;
- border-radius: 50%;
- aspect-ratio: 1/1;
- width: 40px;
- height: 40px;
- padding: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
+ .icon {
+ background-color: black;
+ border-radius: 50%;
+ aspect-ratio: 1/1;
+ width: 40px;
+ height: 40px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- img {
- width: 30px;
- max-width: 80%;
- max-height: 100%;
- height: auto;
- }
+ img {
+ width: 30px;
+ max-width: 80%;
+ max-height: 100%;
+ height: auto;
}
+ }
+ &__titling {
h3 {
padding-left: 10px;
}