---
url: https://plugin.stripo.email/extensions/components/settings-panel.md
---
# Settings Panel

## Overview

::: image-wrap
![](/img/extensions/stripo_extensions_components.png)
:::

The Settings Panel component is the central hub for block configuration in the Stripo Email Editor. It provides a structured interface where users can modify block properties, adjust styling, and configure behavior. Through the [SettingsPanelRegistry](/extensions/reference/settings-panel/SettingsPanelRegistry), developers can customize which controls appear for specific blocks, organize controls into logical tabs, and create intuitive configuration experiences that match their business requirements.

## Purpose and Core Concepts

### What is a Settings Panel?

The Settings Panel in the Stripo Extensions SDK is a customizable configuration interface that:

* Is displayed when users select blocks in the editor
* Organizes controls into logical tabs (Settings, Styles, Data, etc.)
* Can be customized per block type — both built-in and custom
* Maintains consistency across the editor while allowing deep customization
* Adapts to different block types automatically

### Settings Panel Registry

The [SettingsPanelRegistry](/extensions/reference/settings-panel/SettingsPanelRegistry) is the central mechanism for customizing settings panels:

* Define which controls appear for specific blocks
* Organize controls into tabs with custom labels
* Add, remove, or reorder controls
* Extend built-in blocks with custom controls
* Create completely custom settings interfaces

### Settings Panel Tabs

Controls are organized into tabs using [SettingsPanelTab](/extensions/reference/settings-panel/SettingsPanelTab) instances:

* Each tab has a unique identifier and label
* Controls within tabs are ordered sequentially
* Standard tabs (Settings, Styles, Data) provide consistency
* Custom tabs can be created for specialized workflows

## Key Features and Capabilities

### 1. Per-Block Customization

Settings panels can be tailored to specific block types:

* Different controls for text blocks vs. image blocks
* Custom configurations for extension blocks
* Complete control over built-in block settings

### 2. Tab Organization

Controls are organized into intuitive tab groups:

* Standard tabs (`SettingsTab.SETTINGS`, `SettingsTab.STYLES`, `SettingsTab.DATA`)
* Custom tabs with localized labels

### 3. Dynamic Control Management

Fine-grained control over which controls appear:

* Add custom controls to existing tabs
* Remove unwanted built-in controls
* Reorder controls within tabs
* Conditional control visibility based on state

### 4. Localization Support

Full internationalization capabilities:

* Translate tab labels using the `api.translate()` method
* Support for all editor languages
* Fallback to default labels when translations are missing

## Creating Custom Settings Panels

### Basic Configuration

To customize a settings panel:

1. Create a class that extends `SettingsPanelRegistry`.
2. Implement the `registerBlockControls()` method in your class:
   * Use the block ID as the key in the `controls` map.
   * Add one or more `SettingsPanelTab` objects to define the tabs you want.
   * For each `SettingsPanelTab`, specify a tab identifier (name) and an ordered list of control IDs to include in that tab.
3. Register your registry with the `ExtensionBuilder`.

Minimal configuration for a custom block:

```javascript
import {SettingsPanelRegistry, SettingsPanelTab, SettingsTab, ExtensionBuilder} from '@stripoinc/ui-editor-extensions';

class CustomBlockSettingsRegistry extends SettingsPanelRegistry {
    registerBlockControls(controls) {
        // Add settings for your custom block
        controls['my-custom-block'] = [
            new SettingsPanelTab(
                SettingsTab.SETTINGS,
                [
                    'background-color-control',
                    'padding-control'
                ])
        ];
    }
}

export default new ExtensionBuilder()
    .withSettingsPanelRegistry(CustomBlockSettingsRegistry)
    .build();
```

**Note:** If all controls within a Settings Panel Tab are hidden, the tab itself will automatically be hidden as well.

For a comprehensive guide to configuration scenarios and advanced use cases, refer to the [Configure the Settings Panel](/extensions/tutorials/how-to/settings-panel) tutorial.