Wix Blocks: Designing Custom Panels for Your Widget's Action Bar Buttons

7 min read
Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.
Blocks enables you to create custom panels for the action bars in your widget and its elements. When a site creator clicks an action button (for example, the Settings button), a custom panel opens, instead of the default panel. 

When you create custom panels, you give site creators more options for working with your widget, adding to its usability, and helping them to customize it more easily on their site.

Creating your panel has three main stages:
2. Add code to your panel to make it work.
  • Connect your panel: define which panels goes with which action button in the Configuration tab.
  • User experience guidelines: use our UX guidelines to make your panels clear and effective. 

Creating your panel

There are two ways to create a panel.

Adding elements to your panel

Your panel is built of panel elements, such as buttons, dividers, input fields and more. 
Click + Add Element and select which elements you want to add to your panel. You can add the same element as many times as you need. Then, you can customize the label text and style, and set defaults and values. 

Customizing your panel

You have several customization options for the elements in your panel. You can change label text, add tool tips, set defaults and values. You do this by using the action bar connected to each element.

Settings options

Click on an element. Select Settings or the settings icon icon to customize your panel. Here are some of the options:

Multiple choice elements

If you choose to add an element that has multiple options, like check boxes, radio buttons or dropdown lists, you can configure them by using the manage choices button in the action bar that appears when you select the element.
After you have designed your panel you need to add code to make it work. Then you can add it to an action button and test it to see if it works. Learn more about coding your panel

Renaming, duplicating, or deleting your Panel

  1. Hover over your panel name in the My Panels section of the Panels pane on the bottom left. 
  2. Click the More Actions  icon when it appears. 
  3. Select rename, duplicate or delete. 
rename duplicate delete panel

Connecting your panel to an action button

After creating your panel, you must connect it to a button in the action bar of a widget or an element.  
  1. Click the Configuration tab.
  2. Select the proper widget from the Widgets panel. 
  3. Hover over the button to which you want to connect your panel, in the Edit Action Bar menu that appears. For example, if it is a settings panel, select the settings button. If it's a design panel, select the design button. You can also add a new button, name it and connect it to a panel.
  4. Click Action Button Settings
select your panel
action button settings
5.  Select your panel from the My Panels section. 
Now that you have designed your panel you need to add code to it to make it work. Learn more
Connect your panel through the Configuration tab
Note that designing and coding the panels happens in the Panels tab. Choosing which panels go with which buttons happens in the Configuration tab. If you are not familiar with the Configuration tab, learn more about configuring your widget's action bar

Did this help?