Prebuilt block

"Prebuilt block" refers to custom blocks that developers create by combining basic blocks (such as text, image, button, etc.) into more complex, ready-to-use components. These blocks come with preconfigured parameters and styling to simplify the email creation process for end users.

What are prebuilt blocks?

Prebuilt blocks are developer-created components that:

• Combine multiple basic blocks into a single functional unit
• Have preconfigured parameters (text content, images, spacing, etc.)
• Provide users with ready-made design patterns
• Simplify the email creation process

For example, a developer might create a "text-image" prebuilt block by combining a text block and an image block with specific layout, spacing, and default content.

Creating prebuilt blocks

As a developer, you can create prebuilt blocks by:

1. Assembling basic blocks in the editor
2. Configuring all parameters (content, styling, layout)
3. Using the Edit Elements feature to save this configuration

Working with prebuilt block code

Once you've designed your prebuilt block, you can access its code to use it programmatically in your application.

Edit Elements

Copy element's code to payload

Using prebuilt blocks in categories configuration

After copying the element's code, you can add it to your editor's categories configuration:

const defaultCategories: ThemeConfigProps["categories"] = [
  {
    get label() {
      return t("Prebuilt blocks");
    },
    active: true,
    displayType: "grid",
    blocks: [
      {
        type: ElementType.STANDARD_SECTION,
        payload: {
          type: "standard-section",
          data: {},
          attributes: {
            "background-color": "#FFFFFF",
            "padding-top": "0px",
            "padding-bottom": "0px",
          },
          children: [
            {
              type: "standard-column",
              attributes: {
                width: "50%",
              },
              data: {},
              children: [
                {
                  name: "Text",
                  type: "standard-paragraph",
                  data: {},
                  attributes: {
                    align: "left",
                    color: "#000000",
                    "padding-top": "25px",
                    "padding-bottom": "25px",
                    "padding-left": "25px",
                    "padding-right": "25px",
                  },
                  children: [
                    {
                      type: "html-block-node",
                      children: [
                        {
                          text: "And of course, no Irish meal would be complete without a pint of Guinness or a dram of Irish whiskey to wash it down.",
                        },
                      ],
                      attributes: {},
                      data: {
                        tagName: "div",
                      },
                    },
                    {
                      type: "html-block-node",
                      children: [
                        {
                          text: "",
                        },
                      ],
                      attributes: {},
                      data: {
                        tagName: "div",
                      },
                    },
                    {
                      type: "html-block-node",
                      children: [
                        {
                          text: "View drink menu",
                          bold: true,
                        },
                      ],
                      attributes: {},
                      data: {
                        tagName: "div",
                      },
                    },
                  ],
                },
              ],
            },
            {
              type: "standard-column",
              attributes: {
                width: "50%",
              },
              data: {},
              children: [
                {
                  type: "standard-image",
                  data: {},
                  attributes: {
                    "padding-top": "25px",
                    "padding-bottom": "25px",
                    "padding-left": "25px",
                    "padding-right": "25px",
                    src: "https://cdn.shopify.com/s/files/1/0863/8971/9346/files/4jycp-w7sipaiyrhoqb8u_wz56b028pdf6ttdbyqdgr.png",
                  },
                  children: [
                    {
                      text: "",
                    },
                  ],
                },
              ],
            },
          ],
        },
      },
    ],
  },
  // ... other categories
];

export default function MyEditor() {
  const config = Retro.createConfig({
    categories: defaultCategories,
    // ... other config
  });

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

Important note about payload types

When implementing prebuilt blocks in your code, ensure that the type of payload is consistent with the external type. The structure of your block data must match the expected format for the block type you're creating.

Use cases for prebuilt blocks

• Standard header/footer combinations
• Product showcase sections with image and description
• Call-to-action sections with preconfigured buttons and text
• Multi-column layouts with predefined content areas
• Testimonial sections with image, quote, and attribution

By creating prebuilt blocks, developers can provide users with sophisticated components that maintain design consistency while simplifying the email creation process.