Widget block

"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.

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.
• 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.