Skip to content

SettingsPanelRegistry ​

Registry for customizing block settings panels with controls and tabs.

typescript
class SettingsPanelRegistry

Description ​

SettingsPanelRegistry allows you to customize the settings panels that appear when users select blocks in the email editor. You can organize controls into tabs, add custom controls to existing blocks, or completely restructure the settings interface for specific block types. This is essential for providing intuitive configuration options for your custom blocks and enhancing the editing experience for built-in blocks.

The registry works with SettingsPanelTab instances to define the structure and content of settings panels.

Import ​

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

Properties ​

api ​

Provides access to settings panel-specific editor functionalities.

typescript
public api!: SettingsPanelApi

Type ​

SettingsPanelApi

Usage Notes ​

  • Automatically injected by the editor
  • Provides methods for panel manipulation
  • Available after registry initialization

Abstract Methods ​

registerBlockControls() ​

Registers custom control configurations for specific block types.

typescript
public registerBlockControls(
  blockControlsMap: Record<string, SettingsPanelTab[]>
): void

Parameters ​

NameTypeDescription
blockControlsMapRecord<string, SettingsPanelTab[]>Map of block IDs to their settings panel tabs

Usage Notes ​

  • Block IDs should match those from Block.getId() or built-in block types
  • Each block can have multiple tabs
  • Tabs are displayed in the order they appear in the array