Custom Blocks

What is a Custom Block?

Custom blocks are pre-built design blocks that can help your users design content faster by reusing existing blocks.

Block Category

All blocks are organized under a category. This helps users find different blocks easily. For example: Headers, Footers, Features, etc.

Block Tags

Each block can have comma-separated tags which are searchable and make it easier for users to filter and find different blocks.

Creating a Custom Block

There are 2 ways to create and load custom blocks.

GUI Block Builder

This is the quickest way to create tons of custom blocks. They are stored on our servers, and automatically loaded when you initialize the editor with the correct projectId.

1. Open Unlayer Dashboard.
2. Go to your Project. If you don't have one, create a new one.
3. Go to the Blocks menu on top.
4. Click New Block
5. Fill the form and click Create Block

JavaScript API

If you want to save and load blocks from your own servers, you can load them up using the following API. Here's a code sample.

Load Blocks

// Load the blocks from your database
let blocks = [
  { /* Block JSON Object */ },
  { /* Block JSON Object */ },
  { /* Block JSON Object */ }
];

unlayer.registerProvider('blocks', function (params, done) {
  console.log('blocks provider', params);
  done(blocks);
});

Reload Provider

If you added or removed blocks, you can reload the provider so it reflects in the editor.

unlayer.reloadProvider('blocks');

Events

You can catch events when a block is added, modified or removed by the end-user.

unlayer.registerCallback('block:added', function (newBlock, done) {
  console.log('block:added', newBlock);
  
  // Save the block to your database here
  // and pass the object to done callback.
  // Each block should have it's own unique id

  done(block);
});

unlayer.registerCallback('block:modified', function (existingBlock, done) {
  console.log('block:modified', existingBlock);
  
  // Update the block in your database here
  // and pass the updated object to done callback.
  
  done(block);
});

unlayer.registerCallback('block:removed', function (existingBlock, done) {
  console.log('block:removed', existingBlock);

  // Delete the block from your database here.
  
  done(block);
});