BlockCompositionType

Enumeration defining the composition types for blocks in the Stripo Email Editor Extensions SDK.

enum BlockCompositionType {
    BLOCK = 'BLOCK',
    STRUCTURE = 'STRUCTURE',
    CONTAINER = 'CONTAINER'
}

Description

The BlockCompositionType enum categorizes blocks based on their structural role and nesting capabilities within email templates. It determines how blocks interact with each other, what they can contain, and where they can be placed in the template hierarchy.

Import

import { BlockCompositionType } from '@stripoinc/ui-editor-extensions';

Enum Values

BLOCK

Represents an atomic block that contains content.

BlockCompositionType.BLOCK = 'BLOCK'

Characteristics

• Content-focused - Contains actual email content (text, images, buttons, etc.)
• Can be inserted into - Containers
• Examples - Text blocks, image blocks, button blocks, video blocks, social icons

Usage Example

import {Block, BlockCompositionType} from '@stripoinc/ui-editor-extensions';

export class ButtonBlock extends Block {
    public getBlockCompositionType(): BlockCompositionType {
        return BlockCompositionType.BLOCK;
    }

    public getTemplate(): string {
        return `
            <td>
                <a href="#" style="display: inline-block; padding: 12px 24px;">
                    Click Me
                </a>
            </td>
        `;
    }

    // Additional block configuration methods...
}

---

CONTAINER

Represents a container that can hold atomic blocks.

BlockCompositionType.CONTAINER = 'CONTAINER'

Characteristics

• Holds atomic blocks - Can contain BLOCK type components
• Layout management - Manages arrangement of child blocks
• Can be inserted into - Structures
• Can be saved as module - If enabled via canBeSavedAsModule()
• Examples - Product cards, feature boxes, content sections

Usage Example

import {Block, BlockAttr, BlockCompositionType, BlockType} from '@stripoinc/ui-editor-extensions';

export class SimpleBlock extends Block {
    getBlockCompositionType() {
        return BlockCompositionType.CONTAINER;
    }

    getTemplate() {
        const {CONTAINER, BLOCK_TEXT, BLOCK_BUTTON} = BlockType;

        return `
            <${CONTAINER}>
                <${BLOCK_TEXT}>
                    <p>Lorem ipsum dolor sit amet</p>
                </${BLOCK_TEXT}>
                <${BLOCK_BUTTON} ${BlockAttr.BLOCK_BUTTON.href}="https://stripo.email">
                    Click me
                </${BLOCK_BUTTON}>
            </${CONTAINER}>
        `
    }

    // Additional block configuration methods...
}

---

STRUCTURE

Represents a structure that can hold containers with blocks inside them.

BlockCompositionType.STRUCTURE = 'STRUCTURE'

Characteristics

• Top-level organization - Holds containers which hold blocks
• Multi-column layouts - Manages complex structural arrangements
• Can be inserted into - Stripes (email sections)
• Can be saved as module - If enabled via canBeSavedAsModule()
• Examples - Multi-column layouts, product grids, newsletter sections

Usage Example

import {Block, BlockAttr, BlockCompositionType, BlockType} from '@stripoinc/ui-editor-extensions';

export class StructureBlock extends Block {
    getBlockCompositionType() {
        return BlockCompositionType.STRUCTURE;
    }

    getTemplate() {
        const {STRUCTURE, CONTAINER, BLOCK_TEXT, BLOCK_BUTTON} = BlockType;

        // Create a two-column structure:
        // - First column: 50% width containing a Text Block
        // - Second column: 50% width containing a Button Block
        return `
            <${STRUCTURE}>
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="50">
                    <${BLOCK_TEXT}>
                        <p>Lorem ipsum dolor sit amet</p>
                    </${BLOCK_TEXT}>
                </${CONTAINER}>
                
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="50">
                    <${BLOCK_BUTTON} ${BlockAttr.BLOCK_BUTTON.href}="https://stripo.email">
                        Click me
                    </${BLOCK_BUTTON}>
                </${CONTAINER}>
            </${STRUCTURE}>
        `
    }

    allowInnerBlocksSelection() {
        return true;  // Allow selection of blocks inside the structure
    }

    allowInnerBlocksDND() {
        return false;  // Disable drag and drop of blocks inside the structure
    }

    // Additional block configuration methods...
}

Template Hierarchy

The composition types follow a strict hierarchy in email templates:

Document
    └── Stripe (Email Section)
        └── Structure (BlockCompositionType.STRUCTURE)
            └── Container (BlockCompositionType.CONTAINER)
                └── Block (BlockCompositionType.BLOCK)