BlocksPanel

Base class for customizing blocks panel in the Stripo Email Editor Extensions SDK.

class BlocksPanel

Description

The BlocksPanel class enables you to customize the appearance and behavior of the blocks panel in the Stripo editor. By overriding its methods, you can define how each block is displayed, modify block hints, headers, and control the overall look and feel of the panel to better fit your extension's requirements.

Import

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

Properties

api

api: BlocksPanelApi

Type

BlocksPanelApi

The API instance providing access to editor configuration, translations, and other core functionality.

Methods

getBlockItemHtml()

Generates HTML representation for a block item. Override to customize block appearance.

getBlockItemHtml(block: BlockItem): string | undefined

Parameters

Parameter	Type	Description
block	BlockItem	The block item to generate HTML for

Returns

string | undefined - Custom HTML string or undefined to use default representation

Usage Notes

• Return custom HTML to override default block appearance
• Return undefined to use the editor's default block rendering
• Consider accessibility when creating custom HTML

Example

public getBlockItemHtml(block: BlockItem): string | undefined {
    return `
        <div class="block-thumb" ${block.disabled || block.name === 'custom-product' ? 'disabled' : ''}>
            <ue-icon src="${block.iconSrc}" class="icon-button"></ue-icon>
            <span class="block-thumb-label word-break">${block.title}</span>
        </div>
    `;
}

---

isBlockHintVisible()

Determines whether a hint (tooltip) should be displayed for the block.

isBlockHintVisible(block: BlockItem): boolean

Parameters

Parameter	Type	Description
block	BlockItem	The block item to check hint visibility for

Returns

boolean - true if hint should be visible, false otherwise

Example

public isBlockHintVisible(block: BlockItem): boolean {
    // Hide hints for image block
    if (block.name === BlockType.BLOCK_IMAGE) {
        return false;
    }
    // Show hints for other blocks
    return true;
}

---

getBlockHint()

Defines the hint content for a block item.

getBlockHint(block: BlockItem): BlockHint | undefined

Parameters

Parameter	Type	Description
block	BlockItem	The block item to get hint for

Returns

BlockHint | undefined - Custom hint or undefined for default

Example

public getBlockHint(block: BlockItem): BlockHint | undefined {
    if (block.name === BlockType.BLOCK_TEXT) {
        return {
            title: this.api.translate('blocks.text.hint.title'),
            description: this.api.translate('blocks.text.hint.description')
        };
    }
    // Default hint for standard blocks
    return {
        title: block.title,
        description: block.description
    };
}

---

getBlocksPanelHeaderHtml()

Generates HTML for the blocks panel header.

getBlocksPanelHeaderHtml(): string | undefined

Returns

string | undefined - Custom header HTML or undefined for no header

Example

public getBlocksPanelHeaderHtml(): string | undefined {
    const config = this.api.getEditorConfig();
    const brandName = config.brand?.name || 'Blocks';

    return `
        <div class="blocks-panel-title">
            <h3>${brandName} Library</h3>
        </div>
    `;
}

---

getModulesPanelCollapsedHtml()

Generates HTML for the modules panel in collapsed state.

getModulesPanelCollapsedHtml(): string | undefined

Returns

string | undefined - Custom collapsed panel HTML or undefined for default

Example

public getModulesPanelCollapsedHtml(): string | undefined {
    return `
        <div class="modules-panel-collapsed">
            <span class="icon">📦</span>
            <span class="text">${this.api.translate('modules.title')}</span>
        </div>
    `;
}

---

isModulesPanelCollapsedHintVisible()

Determines whether a hint (tooltip) should be displayed for the collapsed modules panel.

isModulesPanelCollapsedHintVisible(): boolean

Returns

boolean - true to show hint, false to hide

Example

public isModulesPanelCollapsedHintVisible(): boolean {
    // Hide hints for the collapsed modules panel
    const config = this.api.getEditorConfig();
    if (config.hideModulesHints) {
        return false;
    }
    return true;
}

---

getHintDelay()

Gets custom delay for showing hints.

getHintDelay(): number | undefined

Returns

number | undefined - Delay in milliseconds or undefined for default (1000ms)

Example

public getHintDelay(): number | undefined {
    // Show hints faster for new users
    const config = this.api.getEditorConfig();
    if (config.user?.isNew) {
        return 200; // 200ms for new users
    }
    return 1000; // 1 second for experienced users
}

---

getModulesPanelHint()

Gets hint text for modules panel.

getModulesPanelHint(): BlockHint | undefined

Returns

BlockHint | undefined - Custom hint or undefined for default

Example

public getModulesPanelHint(): BlockHint {
    return {
        title: this.api.translate('Modules and structures'),
        description: this.api.translate('Click to open the modules and structures panel.'),
    };
}

---

getModulesTabIconName()

Gets the icon name for the modules tab. Override to customize tab icons.

getModulesTabIconName(modulesTab: {key: string; label: Record<string, string>}): string | undefined

Parameters

Parameter	Type	Description
modulesTab	{key: string; label: Record<string, string>}	The modules tab configuration containing key and localized labels

Returns

string | undefined - Icon name for the tab or undefined to use default icon or text

Usage Notes

• Return a custom icon name to override the default tab appearance
• Return undefined to use the default icon or text label
• Icon names should correspond to available icons in the editor's icon set

Example

public getModulesTabIconName(modulesTab: {key: string; label: Record<string, string>}): string | undefined {
    // Custom icons for different module tabs
    switch (modulesTab.key) {
        case 'general':
            return 'general-modules';
        case 'email':
            return 'email-modules';
        default:
            return undefined;
    }
}