Premade blocks

Premade blocks allow users to quickly insert predefined sections, such as headers or footers, into their emails. You can configure custom premade blocks by using the premadeBlocks array within the TOPOL_OPTIONS object. You can then define one or multiple premade blocks as objects within this array.

In this example, the premadeBlocks array contains one premade block as an object:

premadeBlocks: [
{
  img: "https://placehold.co/600x400?text=Premade+Block", // Image URL, recommended width > 330px
  name: "Clean Header", // Used if no Image URL is provided
  definition: [
      {
        tagName: "mj-section",
        attributes: {
          padding: "20px 0",
          "background-color": "	#FFA500",
          },
        children: [
          {
            tagName: "mj-column",
            attributes: {
              width: "100%",
              "vertical-align": "middle",
            },
            children: [
              {
                tagName: "mj-image",
                  attributes: {
                    src: "https://placehold.co/600x400?text=Image",
                    href: "https://yourwebsite.com",
                    alt: "Logo",
                    align: "center",
                    padding: "10px 0",
                    width: "220px",
                  },
              },
              {
                tagName: "mj-text",
                attributes: {
                  align: "center",
                  color: "#ffffff",
                  "font-size": "30px",
                  "font-family": "Helvetica, Arial, sans-serif",
                  "font-weight": "bold",
                  padding: "10px 25px",
                },
                content: "This is your premade block",
              },
            ],
          },
        ],
      },
    ],
  },
],

Advanced options

By default, our Plugin includes a selection of premade block examples. You can either replace these examples with your own premade blocks or add your blocks alongside the existing examples. This behavior is controlled using the override option, which is a boolean:

• If true, the editor will remove the default examples and display only your custom premade blocks.

• If false, the editor will retain the default examples and append your custom blocks to the list.

To configure this option, update the premadeBlocks option to the following structure:

premadeBlocks: {
  blocks: PremadeBlocks[], // array of your premade blocks as objects
  override: boolean // false if omitted
}

If you use this structure but do not specify the override option, it will automatically default to false.

If you prefer not to use premade blocks at all, you can disable the feature entirely by setting premadeBlocks to false:

premadeBlocks: false,