To enable saving blocks with custom metadata (like user ID, name, etc.), follow the steps below.
1. Pass User Credentials in unlayer.init()
Ensure you provide user-related details in the Unlayer builder initialization. This enables user-specific saved blocks:
unlayer.init({
id: 'editor',
projectId: 123456, // Replace with your actual Unlayer project ID
displayMode: 'email',
user: {
id: 'user-001',
name: 'Jane Doe',
email: '[email protected]'
}
});
2. Register a Callback to Track Custom Blocks
Paste the following code after the unlayer.init() call to track and customize blocks when they're added:
var id = 1;
var blocks = [];
unlayer.registerCallback("block:added", function (newBlock, done) {
console.log("block:added", newBlock);
var block = Object.assign(newBlock, {
id: id++ // Add a custom ID or metadata
});
blocks.push(block);
done(block);
});
3. Create a Block in the Builder
Use the builder to create your custom block using the drag-and-drop interface.
4. Save the Block
Click the Save Block icon in the builder. Once saved, the block’s JSON (including your custom column like id) will be logged to the browser console:
Notes
This setup allows storing additional metadata like
userIdor custom block IDs.You can use this JSON for backend storage or for user-specific templates.
For more on user-saved blocks, refer to the User Saved Blocks documentation.