---
url: https://plugin.stripo.email/extensions/reference/blocks/BlocksPanel.md
---
# BlocksPanel

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

```typescript
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

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

## Properties

### api

```typescript
api: BlocksPanelApi
```

#### Type

[BlocksPanelApi](../api/BlocksPanelApi.md)

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.

```typescript
getBlockItemHtml(block: BlockItem): string | undefined
```

#### Parameters

| Parameter | Type                                       | Description |
|-----------|--------------------------------------------|-------------|
| block | [BlockItem](../types/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

```typescript
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.

```typescript
isBlockHintVisible(block: BlockItem): boolean
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| block | [BlockItem](../types/BlockItem) | The block item to check hint visibility for |

#### Returns

`boolean` - `true` if hint should be visible, `false` otherwise

#### Example

```typescript
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.

```typescript
getBlockHint(block: BlockItem): BlockHint | undefined
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| block | [BlockItem](../types/BlockItem) | The block item to get hint for |

#### Returns

`BlockHint | undefined` - Custom hint or `undefined` for default

#### Example

```typescript
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.

```typescript
getBlocksPanelHeaderHtml(): string | undefined
```

#### Returns

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

#### Example

```typescript
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>
    `;
}
```

***

### isPanelPlacementChangeEnabled()

::::tip Version Availability
This method is available starting from v3.6.0
::::

Determines whether a draggable handle should be displayed in the modules panel.

```typescript
isPanelPlacementChangeEnabled(): boolean
```

#### Returns

`boolean` - `true` to enable panel placement changes, `false` to hide the drag handle

#### Example

```typescript
public isPanelPlacementChangeEnabled(): boolean {
    return false;
}
```

***

### getModulesPanelCollapsedHtml()

Generates HTML for the modules panel in collapsed state.

```typescript
getModulesPanelCollapsedHtml(): string | undefined
```

#### Returns

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

#### Example

```typescript
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.

```typescript
isModulesPanelCollapsedHintVisible(): boolean
```

#### Returns

`boolean` - `true` to show hint, `false` to hide

#### Example

```typescript
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.

```typescript
getHintDelay(): number | undefined
```

#### Returns

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

#### Example

```typescript
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.

```typescript
getModulesPanelHint(): BlockHint | undefined
```

#### Returns

`BlockHint | undefined` - Custom hint or `undefined` for default

#### Example

```typescript
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.

```typescript
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

```typescript
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;
    }
}
```