Introduction

Important: This module is available only in Wix Blocks. Wix Blocks is an editor for building Wix apps.

The Editor API is used within the code of panels built with the Blocks Panel Builder. It enables your panel to interact with the Wix editors by removing or restoring widget elements, opening Dashboard panels, and more. To use the Editor API, import wixEditor from the wix-editor module:

Copy
import wixEditor from "wix-editor";
Did this help?

getCurrentViewport( )

Gets the viewport currently selected in the Editor.

The getCurrentViewport() function returns a Promise that resolves to an object containing details about the currently selected viewport. To use this function on an inner (nested) widget, use getScopedWixEditor().

Method Declaration
Copy
function getCurrentViewport(): Promise<Viewport>;
Request
This method does not take any parameters
Returns
Return Type:Promise<Viewport>
Get the current viewport
JavaScript
import wixEditor from "wix-editor";

// ...

wixEditor.getCurrentViewport().then((viewport) => {
  // Your code that uses the 'viewport' value goes here
});

/* For example, `viewport` can be: 
  {
    type: "DESKTOP",
    range: {
      minWidth: 1001,
      maxWidth: undefined
    }
  }
*/
Did this help?

getScopedWixEditor( )

Gets the wix-editor module scoped of an inner (nested) widget.

The getScopedWixEditor() function lets you use wix-editor functions on inner (nested) widgets. It receives a selector of an inner widget and returns a promise that resolves with an object representing the scope of the inner widget.

Method Declaration
Copy
function getScopedWixEditor(Selector: string): Promise<object>;
Method Parameters
SelectorstringRequired

A string of one or more nested widget selectors, which can include a few levels of nesting from outer to inner, separated by spaces. For example: ("#nestedWidget1"), or ("#nestedWidget1 #nestedWidget2").

Returns
Return Type:Promise<object>
Removes an element in an inner (nested) widget
JavaScript
import wixEditor from "wix-editor";

// ...

wixEditor
  .getScopedWixEditor("#nestedWidget1 #nestedWidget2") ////nestedWidget2 is inside nestedWidget1
  .then((nestedWidget) => {
    nestedWidget.removeElement("#title1"); //removes title1 from nestedWidget2
  });
Did this help?

isRemoved( )

Checks if an element is removed from the widget.

The isRemoved() function returns a Promise that resolves to true if the element is removed.

The element selector is a string with the hash symbol (#) followed by the ID of the item you want to select (e.g. "#myElement"). To use this function on an inner (nested) widget, use getScopedWixEditor().

Method Declaration
Copy
function isRemoved(selector: string): Promise<void>;
Method Parameters
selectorstringRequired

An element selector.

Check if an element is removed
JavaScript
import wixEditor from "wix-editor";

// ...

wixEditor.isRemoved("#title").then((isRemoved) => {
  // Your code that uses the 'isRemoved' value goes here
});
Did this help?

listRemovedElements( )

Gets a list of all removed widget elements.

The listRemovedElements() function returns a Promise that resolves to a list of selectors of removed elements that are part of the widget with which the panel is associated, for example: [‘title’, ‘description’]. To use this function on an inner (nested) widget, use getScopedWixEditor().

Method Declaration
Copy
function listRemovedElements(): Promise<Array<string>>;
Request
This method does not take any parameters
Returns
Return Type:Promise<Array<string>>
Get all the removed elements
JavaScript
import wixEditor from "wix-editor";

// ...

wixEditor.listRemovedElements().then((allRemovedElements) => {
  // Code to execute with the allRemovedElements array
});

// For example, allRemovedElements can be: ["#title", "#button1"]
Did this help?

openDashboardPanel( )

Opens the Dashboard for the current site.

The openDashboardPanel() function returns a Promise that resolves when the Dashboard is open. The url parameter specifies the page to open within the Dashboard.

Method Declaration
Copy
function openDashboardPanel(options: DashboardOptions): Promise<void>;
Method Parameters
optionsDashboardOptionsRequired

Relative URL for the Dashboard page.

Open a dashboard panel
JavaScript
import wixEditor from "wix-editor";

// ...

wixEditor.openDashboardPanel({ url: "blog" }).then(() => {
  // Code to execute after opening the dashboard panel
});
Did this help?