When you add a Blocks site widget extension to your CLI project, the CLI generates the directory structure described in Files and Code for Blocks Site Widgets.
When you add panels to your widget in the Blocks editor and sync to the CLI, a panels directory is created inside your widget’s directory. panels contains subdirectories for each panel you added in Blocks. These subdirectories each contain the following files:
panel.json file that contains the ID of your panel. Do not modify this file.panel.ts file that contains the logic for your panel.For example:
When you add a Blocks site widget extension in the CLI, a panel.ts file is generated for each of the widget’s custom panels. These panel.ts files contain the code for their associated panels.
When the panel.ts file is generated, it looks like this:
definePanel() accepts a function that will execute when your panel is added to a site. This function accepts the $w namespace as a parameter, allowing you to work with it in your code:
$w contains everything you need in order to work with your panel's components. It allows you to select elements in your panel and interact with them. Each element type exposes properties and functions that you use to enhance the functionality of your panel.
Custom panels use specific elements, which are designated only for panels.
$w.onReady() is called when all page elements have finished loading.
Place your panel initialization logic inside the $w.onReady function.
In the panel’s code, use Wix's JavaScript SDK to access widget properties and retrieve environmental data from the editor, as well as access and manage Wix business solutions.
Use getProp() to get properties from your widget and use them to set initial values for your panel’s elements.
To apply changes made in the custom panel to the widget, use the setProp() function.