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:
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().
function getCurrentViewport(): Promise<Viewport>;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
}
}
*/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.
function getScopedWixEditor(Selector: string): Promise<object>;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").
import wixEditor from "wix-editor";
// ...
wixEditor
.getScopedWixEditor("#nestedWidget1 #nestedWidget2") ////nestedWidget2 is inside nestedWidget1
.then((nestedWidget) => {
nestedWidget.removeElement("#title1"); //removes title1 from nestedWidget2
});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().
function isRemoved(selector: string): Promise<void>;An element selector.
import wixEditor from "wix-editor";
// ...
wixEditor.isRemoved("#title").then((isRemoved) => {
// Your code that uses the 'isRemoved' value goes here
});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().
function listRemovedElements(): Promise<Array<string>>;import wixEditor from "wix-editor";
// ...
wixEditor.listRemovedElements().then((allRemovedElements) => {
// Code to execute with the allRemovedElements array
});
// For example, allRemovedElements can be: ["#title", "#button1"]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.
function openDashboardPanel(options: DashboardOptions): Promise<void>;Relative URL for the Dashboard page.
import wixEditor from "wix-editor";
// ...
wixEditor.openDashboardPanel({ url: "blog" }).then(() => {
// Code to execute after opening the dashboard panel
});Removes a widget element from the stage.
The removeElement() function returns a Promise that is resolved when the element is removed. You can only remove elements that are part of the widget with which the panel is associated.
The element selector is a string with the hash symbol (#) followed by the ID of the item you want to select (for example, "#myElement"). To use this function on an inner (nested) widget, use getScopedWixEditor().
function removeElement(selector: string): Promise<void>;An element selector.
// In this example, we use a toggle switch to remove or restore an element in our widget.
import wixEditor from "wix-editor";
$w.onReady(async function () {
$w("#toggleSwitch").onClick(async (event) => {
if (event.target.value) {
await wixEditor.removeElement("#title");
} else {
await wixEditor.restoreElement("#title");
}
});
});Restores (shows) a widget element on the stage.
The restoreElement() function returns a Promise that is resolved when the element is restored. You can only restore elements that are part of the widget with which the panel is associated.
The element selector is a string with the hash symbol (#) followed by the ID of the item you want to select (for example, "#myElement"). To use this function on an inner (nested) widget, use getScopedWixEditor().
function restoreElement(selector: string): Promise<void>;An element selector.
import wixEditor from "wix-editor";
// ...
wixEditor.restoreElement("#title");