itmar-block-packages 1.6.0 → 1.6.2

package/src/IconSelectControl.js

@@ -22,17 +22,22 @@ const helpTextCode = createElement(
   helpLink,
   __(
     "Select the icon from and enter Unicode (the upper right four digits of the selection dialog). ",
-    "block-collections"
+    "itmar-block-packages"
   )
 );
 
+const helpImageURL = createElement(
+  "span",
+  {},
+  __("Enter the URL for the image.", "itmar-block-packages")
+);
+
 const helpTextFamily = createElement(
   "span",
   {},
-  helpLink,
   __(
     "Please select the first class name shown in the HTML code field of the selection dialog. ",
-    "block-collections"
+    "itmar-block-packages"
   )
 );
 
@@ -49,6 +54,8 @@ const family_option = [
 
 export default ({ iconStyle, setPosition, onChange }) => {
   const {
+    icon_type,
+    icon_url,
     icon_name,
     icon_pos,
     icon_size,
@@ -59,29 +66,62 @@ export default ({ iconStyle, setPosition, onChange }) => {
 
   return (
     <>
-      <TextControl
-        label={__("icon name", "block-collections")}
-        help={helpTextCode}
-        labelPosition="top"
-        value={icon_name}
-        isPressEnterToChange
-        onChange={(newValue) => {
-          const newStyle = { ...iconStyle, icon_name: newValue };
-          onChange(newStyle);
-        }}
-      />
-
-      <ComboboxControl
-        label={__("Icon Family", "block-collections")}
-        help={helpTextFamily}
-        options={family_option}
-        value={icon_family ? icon_family : "Font Awesome 6 Free"}
-        onChange={(newValue) => {
-          const newStyle = { ...iconStyle, icon_family: newValue };
-          onChange(newStyle);
-        }}
-      />
+      <label className="components-base-control__label">
+        {__("Icon Types", "itmar-block-packages")}
+      </label>
+      <PanelRow className="itmar_position_row">
+        <RadioControl
+          selected={icon_type}
+          options={[
+            { label: __("Awesome", "itmar-block-packages"), value: "awesome" },
+            { label: __("Image", "itmar-block-packages"), value: "image" },
+            { label: __("Avatar", "itmar-block-packages"), value: "avatar" },
+          ]}
+          onChange={(newValue) => {
+            const newStyle = { ...iconStyle, icon_type: newValue };
+            onChange(newStyle);
+          }}
+        />
+      </PanelRow>
+      {icon_type === "awesome" && (
+        <>
+          <TextControl
+            label={__("icon name", "itmar-block-packages")}
+            help={helpTextCode}
+            labelPosition="top"
+            value={icon_name}
+            isPressEnterToChange
+            onChange={(newValue) => {
+              const newStyle = { ...iconStyle, icon_name: newValue };
+              onChange(newStyle);
+            }}
+          />
 
+          <ComboboxControl
+            label={__("Icon Family", "itmar-block-packages")}
+            help={helpTextFamily}
+            options={family_option}
+            value={icon_family ? icon_family : "Font Awesome 6 Free"}
+            onChange={(newValue) => {
+              const newStyle = { ...iconStyle, icon_family: newValue };
+              onChange(newStyle);
+            }}
+          />
+        </>
+      )}
+      {icon_type === "image" && (
+        <TextControl
+          label={__("icon url", "itmar-block-packages")}
+          help={helpImageURL}
+          labelPosition="top"
+          value={icon_url}
+          isPressEnterToChange
+          onChange={(newValue) => {
+            const newStyle = { ...iconStyle, icon_url: newValue };
+            onChange(newStyle);
+          }}
+        />
+      )}
       <PanelRow className="sizing_row">
         <UnitControl
           dragDirection="e"
@@ -89,7 +129,7 @@ export default ({ iconStyle, setPosition, onChange }) => {
             const newStyle = { ...iconStyle, icon_size: newValue };
             onChange(newStyle);
           }}
-          label={__("Size", "block-collections")}
+          label={__("Size", "itmar-block-packages")}
           value={icon_size}
           units={units}
         />
@@ -100,7 +140,7 @@ export default ({ iconStyle, setPosition, onChange }) => {
               const newStyle = { ...iconStyle, icon_space: newValue };
               onChange(newStyle);
             }}
-            label={__("spacing to end", "block-collections")}
+            label={__("spacing to end", "itmar-block-packages")}
             value={icon_space}
             units={units}
           />
@@ -124,14 +164,14 @@ export default ({ iconStyle, setPosition, onChange }) => {
       {setPosition && (
         <>
           <label className="components-base-control__label">
-            {__("Arrangement", "block-collections")}
+            {__("Arrangement", "itmar-block-packages")}
           </label>
           <PanelRow className="itmar_position_row">
             <RadioControl
               selected={icon_pos}
               options={[
-                { label: __("left", "block-collections"), value: "left" },
-                { label: __("right", "block-collections"), value: "right" },
+                { label: __("left", "itmar-block-packages"), value: "left" },
+                { label: __("right", "itmar-block-packages"), value: "right" },
               ]}
               onChange={(newValue) => {
                 const newStyle = { ...iconStyle, icon_pos: newValue };