Custom Block Example

This example demonstrates how to create and use custom blocks in Easy Email Pro. Custom blocks allow you to extend the editor with your own components.

Overview

Custom blocks are composed of one or more basic blocks and can have:

• Custom UI rendering in edit mode
• Different rendering in production mode
• Support for dynamic data (mergetags)
• Custom configuration panels

Key Concepts

Unlike the advanced custom block guide which focuses on theory, this example shows practical implementation with complete code.

Example: Simple Custom Block

import { BlockManager, ElementType } from "easy-email-pro-core";
import { ConfigPanelsMap } from "easy-email-pro-theme";
import { EmailEditorProvider } from "easy-email-pro-editor";
import { Retro } from "easy-email-pro-theme";

// Define custom block type
const CustomBlockType = {
  SIMPLE_CUSTOM_BLOCK: "simple_custom_block",
};

// Create custom block definition
const SimpleCustomBlock = {
  name: "Simple Custom Block",
  type: CustomBlockType.SIMPLE_CUSTOM_BLOCK,
  create: (payload) => ({
    type: CustomBlockType.SIMPLE_CUSTOM_BLOCK,
    data: {},
    attributes: {
      title: "Default Title",
      ...payload?.attributes,
    },
    children: [],
  }),
  category: ElementCategory.CUSTOM,
  render: ({ node, mode }) => {
    if (mode === "testing") {
      // Edit mode rendering
      return (
        <div style={{ padding: "20px", border: "1px dashed #ccc" }}>
          <h3>{node.attributes.title}</h3>
          <p>Edit mode preview</p>
        </div>
      );
    }
    // Production mode rendering (MJML)
    return (
      <mj-section>
        <mj-column>
          <mj-text>{node.attributes.title}</mj-text>
        </mj-column>
      </mj-section>
    );
  },
};

// Register the block
BlockManager.registerBlocks([SimpleCustomBlock]);

// Create configuration panel
const CustomBlockPanel = ({ nodePath }) => {
  // Panel implementation
  return <div>Configuration Panel</div>;
};

ConfigPanelsMap[CustomBlockType.SIMPLE_CUSTOM_BLOCK] = CustomBlockPanel;

// Use in editor
export default function MyEditor() {
  const config = Retro.useCreateConfig({
    categories: [
      {
        label: "Custom",
        active: true,
        displayType: "grid",
        blocks: [
          {
            type: CustomBlockType.SIMPLE_CUSTOM_BLOCK,
            icon: <IconFont iconName="icon-custom" />,
          },
        ],
      },
    ],
  });

  return (
    <EmailEditorProvider {...config}>
      <Retro.Layout />
    </EmailEditorProvider>
  );
}

Features Demonstrated

• Block registration with BlockManager
• Custom render functions for edit and production modes
• Configuration panel integration
• Adding custom blocks to categories

Differences from Advanced Guide

This example focuses on:

• Complete working code
• Practical implementation patterns
• Integration with the editor
• Real-world use cases

For detailed explanations of concepts, see the Advanced Custom Block Guide.