Configure the Settings Panel

What is a Settings Panel?

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

• Displays 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

Examples

Add New Control

Insert a custom control into a specific position within a tab.

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

class ExtendedButtonSettings extends SettingsPanelRegistry {
    registerBlockControls(controls) {
        // Insert the custom control 'my-analytics-control' into the Styles tab 
        // of the Button block at position 1 (second position, after the first control)
        controls[BlockType.BLOCK_BUTTON]
            .find(tab => tab.getTabId() === SettingsTab.STYLES)
            .addControl('my-analytics-control', 1);
    }
}

Remove Existing Control

Remove a control from a block's settings panel.

class SimplifiedTextSettings extends SettingsPanelRegistry {
    registerBlockControls(controls) {
        // Remove 'Right to Left Text Direction' control from Text block settings
        controls[BlockType.BLOCK_TEXT]
            .find(tab => tab.getTabId() === SettingsTab.SETTINGS)
            .deleteControl(TextControls.DIRECTION);
    }
}

Reorder Controls

This example demonstrates:

• Reordering the 'Button Text' and 'Alignment on Desktop' controls
• Moving the 'Padding' control from the 'Settings' tab to the 'Styles' tab

class ReorderedButtonSettings extends SettingsPanelRegistry {
    registerBlockControls(controls) {
        const buttonPanel = controls[BlockType.BLOCK_BUTTON];
        const settingsTab = buttonPanel.find(tab => tab.getTabId() === SettingsTab.SETTINGS);
        const stylesTab = buttonPanel.find(tab => tab.getTabId() === SettingsTab.STYLES);

        // Reorder the 'Alignment on Desktop' control to position 1
        settingsTab.deleteControl(ButtonControls.ALIGNMENT);
        settingsTab.addControl(ButtonControls.ALIGNMENT, 1);

        // Move the 'Padding' control to the 'Styles' tab
        settingsTab.deleteControl(ButtonControls.INTERNAL_INDENTS);
        stylesTab.addControl(ButtonControls.INTERNAL_INDENTS, 0);
    }
}

Multiple Tabs

Organize controls into multiple tabs to improve the user experience:

class ProductBlockSettings extends SettingsPanelRegistry {
    registerBlockControls(controls) {
        controls['product-block'] = [
            new SettingsPanelTab(
                SettingsTab.SETTINGS,
                [
                    'display-mode-control'
                ]),

            new SettingsPanelTab(
                'card',
                [
                    'price-format-control',
                    'currency-control',
                ])
                .withLabel(this.api.translate('Product Card'))
        ];
    }
}

Custom Tab Labels

The default tabs (SettingsTab.SETTINGS, SettingsTab.STYLES, and SettingsTab.DATA) include built-in localized labels.
For custom tabs, use the withLabel() method to provide a translation key, ensuring proper localization across all supported languages:

class CustomRegistry extends SettingsPanelRegistry {
    registerBlockControls(controls) {
        controls['banner-block'] = [
            new SettingsPanelTab(
                'branding',
                ['logo-control', 'color-scheme-control'])
                .withLabel(this.api.translate('Brand Settings'))
        ];
    }
}

// In your extension builder
new ExtensionBuilder()
    .withLocalization({
        'en': {
            'Brand Settings': 'Brand Settings'
        },
        'es': {
            'Brand Settings': 'Configuración de Marca'
        },
        'fr': {
            'Brand Settings': 'Paramètres de Marque'
        }
    })
    .withSettingsPanelRegistry(CustomRegistry)
    .build();