> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Panel Files and Code

## Article: Panel Files and Code

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/blocks-site-widgets/panel-files-and-code.md

## Article Content:

# Files and Code for Blocks Site Widget Panels

<blockquote classname="note">

**CLI Documentation Notice**

We've released a [new Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). Continue here if your project uses the Wix CLI for Apps. [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md). 
  
</blockquote>

<blockquote class="important">

**Important:** The Blocks-CLI integration only works with the [Wix CLI for Apps](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/about-the-wix-cli-for-apps.md). The new [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md), which is the recommended tool for new app projects, doesn’t support this integration.

</blockquote>

When you [add a Blocks site widget extension](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/blocks-site-widgets/add-a-blocks-site-widget-extension-in-the-cli.md) to your CLI project, the CLI generates the directory structure described in [Files and Code for Blocks Site Widgets](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/blocks-site-widgets/widget-files-and-code.md).

When you add [panels](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/about-panels-in-blocks.md) 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:

+ A `panel.json` file that contains the ID of your panel. Do not modify this file.
+ A [`panel.ts`](#panelts) file that contains the logic for your panel.

For example:

```tsx
.
└── <your-app-name>/
    └── src/
        └── site/
            └── widgets/
                └── blocks/
                    └── <your-widget-name>/
                        ├── panels/
                        │   └── <your-panel-name>/
                        │       ├── panel.json
                        │       └── panel.ts
                        ├── api.ts
                        ├── widget.json
                        └── widget.ts
```


## panel.ts

When you [add a Blocks site widget extension in the CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/blocks-site-widgets/add-a-blocks-site-widget-extension-in-the-cli.md), 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:

```tsx
import {definePanel} from '@wix/blocks';
import wixEditor from '@wix/editor'; //The Widget API enables you to get and set the properties and design presets of a site widget

export default definePanel(<your-panel-id>, ($w) => {
  $w.onReady(() => {
    // Initialize the panel element values according to your widget's properties.
    // Add event handlers for panel elements to update your widget's properties whenever a user interacts with the panel.
    console.log("Panel is ready");
  });
});
```

### definePanel()

`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

[`$w`](https://dev.wix.com/docs/velo/velo-only-apis/$w/introduction.md) 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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/panel-elements-in-blocks.md#panel-elements), which are designated only for panels.

##### $w.onReady()

[`$w.onReady()`](https://dev.wix.com/docs/velo/velo-only-apis/$w/on-ready.md) is called when all page elements have finished loading.

Place your panel initialization logic inside the `$w.onReady` function.

#### Wix Javascript SDK

In the panel’s code, use Wix's [JavaScript SDK](https://dev.wix.com/docs/sdk.md) to [access widget properties](https://dev.wix.com/docs/sdk/host-modules/editor/widget/introduction.md) and [retrieve environmental data from the editor](https://dev.wix.com/docs/sdk/host-modules/editor/info/introduction.md), as well as access and manage Wix business solutions.

Use [`getProp()`](https://dev.wix.com/docs/sdk/host-modules/editor/widget/get-prop.md) 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()`](https://dev.wix.com/docs/sdk/host-modules/editor/widget/set-prop.md) function. 

##### Example:

```ts
import { definePanel } from "@wix/blocks";
import { widget } from "@wix/editor";

export default definePanel("c8e41d4e-2c58-40a1-8cc9-ead2d496bfc8", ($w) => {
  // This function runs when the panel is ready
  $w.onReady(() => {
    console.log("Panel is ready");
  });

  // Add an event listener for changes to the toggle switch
  $w("#panelToggleSwitch1").onChange(async () => {
    // Get the current value of the "saleIndicator" property
    const prop = await widget.getProp("saleIndicator");
    // Toggle the value of the "saleIndicator" property
    if (prop === "Sale") {
      await widget.setProp("saleIndicator", "No Sale");
    } else {
      await widget.setProp("saleIndicator", "Sale");
    }
  });
});

```

<!-- 
Use [`getDesignPreset()`](invalid-url) and [`setDesignPreset()`](invalid-url) to get and set information on your widget’s current preset. 


See an example of how to [interact with widget design presets](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md#interact-with-widget-design-presets).

-->