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 all of the UI elements, nodes, and events that make up a Wix site, including those of your panel. It also includes the $w(), onReady(), and at() functions.
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.