---
url: https://plugin.stripo.email/extensions/reference/api/BlockApi.md
---
# BlockApi

Interface providing API access for Block implementations in the Stripo Email Editor Extensions SDK.

```typescript
interface BlockApi extends BaseApi, BaseModifierApi
```

## Description

The `BlockApi` interface provides comprehensive access to editor functionalities for block implementations. It combines base API features (translation, configuration, state management) with document modification capabilities, enabling blocks to interact with and modify email templates while maintaining synchronization with the editor's collaborative features.

## Import

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

## Inheritance Hierarchy

```
BaseApi
  ↓
BlockApi ← BaseModifierApi
```

## Properties

None (all functionality provided through methods)

## Methods

### setViewOnly()

Sets the view-only state for the current block context.

```typescript
setViewOnly(viewOnly: boolean): void
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| viewOnly | `boolean` | If true, interactions might be restricted |

#### Usage Notes

* Controls whether the block can be dragged and dropped within the template
* Useful for singleton blocks or conditional editing

#### Example

```typescript
public onDocumentInit(): void {
    // Ensure only one instance can be edited
    const instances = this.api.getDocumentRoot()
        .querySelectorAll(`.${this.getUniqueBlockClassname()}`);

    if (instances.length > 1) {
        this.api.setViewOnly(true);
    }
}
```

***

### getHiddenElementState()

Gets the current device-specific hidden state for the provided node.

```typescript
getHiddenElementState(target: ImmutableHtmlNode): HideElementState
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| target | [ImmutableHtmlNode](../nodes/ImmutableHtmlNode) | The node to inspect |

#### Returns

[HideElementState](../types/HideElementState) - `'desktop'`, `'mobile'`, or `undefined`

#### Usage Notes

* The editor resolves the canonical node that owns the visibility configuration
* Use this method when custom controls need to stay synchronized with the built-in hide-element state
* `undefined` means the target is not hidden for a specific device mode

#### Example

```typescript
public onTemplateNodeUpdated(node: ImmutableHtmlNode): void {
    const hiddenState = this.api.getHiddenElementState(node);

    if (hiddenState === 'mobile') {
        this.api.sendEvent('extensions.block.hidden-on-mobile', {
            blockId: this.getId(),
        });
    }
}
```

## Inherited Methods from BaseApi

[BaseApi](./BaseApi.md) - Base API interface

## Inherited Methods from BaseModifierApi

[BaseModifierApi](./BaseModifierApi.md) - Document modification API