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
.
- Open Unlayer Dashboard.
- Go to your Project. If you don't have one, create a new one.
- Go to the Blocks menu on top.
- Click New Block
- 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);
});
Updated about 2 years ago