Skip to main content

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.