Settings Panel

Overview

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, 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 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 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:

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 tutorial.