Saved Blocks

The Saved Blocks feature in Topol is a major time-saver for teams and individuals who build emails regularly. It allows you to save any section or content block (like headers, footers, CTAs, product sections, etc.) and reuse it across multiple templates without having to recreate it from scratch every time.

Enabling Saved Blocks Feature

Users can save their structures by clicking "Save as Block" button while the structure they want to save is selected.

To enable this feature, set savedBlocks to an empty array.

savedBlocks: [],

To disable it, set savedBlocks to null.

savedBlocks: null,

You can also hide saved blocks by setting savedBlocks to false.

savedBlocks: false,

Each saved block within the savedBlocks array is an object and has the following structure:

{
  id: 1, // ID of the block, if not set it uses the Array Index
  name: 'My saved block 001', // You can set a name or an image
  img: 'http://...', // The editor shows only name or image, not both, if both set it will show the image
  definition: 'json' // JSON of this saved block
},

Advanced Configuration

There are three actions you need to implement to make saved blocks work:

• onBlockSave
• onBlockEdit
• onBlockRemove

All of them needs to be implemented in the callbacks object.

Example:

callbacks: {
  onBlockSave(json) {
    const name = window.prompt('Enter block name:')
    if (name !== null) {
      console.log('saving block', json)
    }
  },

  onBlockRemove(id) {
    if (window.confirm('Are you sure?')) {
      console.log('removing block', id)
    }
  },

  onBlockEdit(id) {
    const name = window.prompt('Block name:', 'My block 001')
    if (name !== null) {
      console.log('saving edited block', id)
    }
  }
}

Since it's your responsibility to handle those actions, you also need to update the list of saved blocks once they are updated. To do this, you can use the TopolPlugin.setSavedBlocks([savedBlocks]) function.

This function takes an array of all saved blocks you want to display in the editor.

TopolPlugin.setSavedBlocks([
  {
    id: 1, // ID of the block, if not set it uses the Array Index
    name: "My saved block 001", // You can set a name or an image
    img: "http://...", // The editor shows only name or image, not both, if both set it will show the image
    definition: "json" // JSON of this saved block
  },
]);