Skip to main content

Widget block(Block Studio)

"Widget block" is an advanced element that can aggregate and control the properties of basic elements, turning them into a cohesive entity while concealing the editing of sub-elements. Most importantly, there is no need to write any code; elements and configuration panels can be generated through drag-and-drop editing.

"Block Studio" is a visual block editor designed to generate widget elements (JSON). In fact, you can also directly edit the widget elements (JSON).

Use Cases:

  • Configure a complex template, but only need the user to fill in a few configuration items, such as a unified color and font size.
  • Configure some immutable blocks, such as the unsubscribe link cannot be modified, but allow modification of certain parts.
  • Configure some fixed blocks, such as setting a heading element, but the font-size can only choose a few options like large, medium, and small.
  • Different templates typically feature product components with varying styles. Although the styles differ, users can select products to change the necessary information. [Check out the example here]
  • All of the above can be achieved through custom blocks, but we want to implement it simply.

Live Video​

Let us explain the definition of the Widget block​

Here is a simple example of a widget element.

{
  "type": "section_widget",
  "title": "New widget",
  "data": {
    "name": "New widget",
    "description": "Your custom widget",
    "contentEditable": true,
    "config": [
      {
        "label": "Primary color",
        "name": "primary-color",
        "helpText": "",
        "type": "color",
        "description": "Primary color"
      },
      {
        "label": "Font Size",
        "name": "font-size",
        "helpText": "",
        "type": "pixel"
      }
    ],
    "input": {
      "background-color": "red",
      "primary-color": "#d3943c",
      "font-size": "18px"
    }
  },
  "attributes": {},
  "children": [
    {
      "type": "standard-section",
      "data": {},
      "attributes": {},
      "children": [
        {
          "type": "standard-column",
          "data": {},
          "attributes": {},
          "children": [
            {
              "type": "standard-image",
              "data": {},
              "attributes": {
                "src": "https://res.cloudinary.com/djnkpbshx/image/upload/v1696845725/easy-email-pro-test/bjnjpwmqdunbwhgs6jdf.jpg",
                "border-radius": "50px",
                "border-enabled": true,
                "border-style": "solid",
                "border-width": "5px",
                "border-color": "$var(primary-color)"
              },
              "children": [
                {
                  "text": ""
                }
              ]
            },
            {
              "type": "standard-button",
              "data": {
                "content": "Button"
              },
              "attributes": {
                "width": "100%",
                "background-color": "$var(primary-color)",
                "font-size": "$var(font-size)"
              },
              "children": [
                {
                  "text": "Click"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "name": "Image with text"
}
  • data:
    • contentEditable indicates whether the user can edit the text
    • config defines the user's configuration items, for example, what things the user can edit
    • input is the value of the user's configuration options
  • children: This part is the UI rendering structure, and the variables in it will take values through input.

For full code, check out our live demo

Defined custom field​

We have built in several commonly used fields, but they certainly cannot meet the needs of all users. So we allow users to customize the fields they need

Register custom field​

import { WidgetTypeOptions, AttributeField } from "easy-email-pro-theme";
WidgetTypeOptions.push({
  value: "product_picker",
  label: "Product Picker",
});

const OldFieldItem = AttributeField.FieldItem;
AttributeField.FieldItem = (props) => {
  if (props.type === "product_picker") {
    return <ProductPicker {...props} />;
  }
  return <OldFieldItem {...props} />;
};

For full code, check out our live demo