Wix Blocks: A Blocks App Workflow
7 min read
Wix Blocks is currently open to a limited number of users.
Wix Blocks enables you to create apps that you can use again and again on as many Wix sites as you like. Or, you publish your app in the Wix App Market and reach millions of users!
Plan Your App
Create an App
When you choose to create an app, Wix Blocks opens automatically in a new window. You can return to your website to import the app once you have built it.
Choose Your App Type
Widgets allow you to add UI to your app.
- Go to the Widgets and Design panel in the App Structure menu.
- Click + Add Widget to add your first widget.
Design elements are the basic building blocks of your widget: text elements, buttons, images, user input fields and more. Wix Blocks is a responsive workspace to create apps that automatically adjust to the screen or device being viewed to deliver the best user experience.
The Blocks Add Elements panel gives you lots of options for adding design elements (also known as UI elements) to your widget.
Learn more about adding elements to your app.
Add Properties and Events to Elements
Properties allow you to customize your widget's elements. For example, whether or not an element is hidden when the widget is loaded. Event handlers allow you to determine the interactivity of elements. For example, what happens when a button is clicked. You can do this by selecting your element and clicking the Properties and Events icon at the bottom.
Connect Widget Elements to Site Themes
Add Velo Code to Your Widget
You can add Velo code to your widget in a similar way that you can add it to Wix websites (learn more about Velo by Wix). To add code to your widget, open the Design tab and use the code editor at the bottom.
Define Your Widget API
The Widget API allows you to add properties, events and functions to your entire widget. Any property, event or function that you add is then accessible to site creators working with the widget on the Wix Editor or Editor X. Properties will appear in your widget's default Settings panel in the editor.
For example, in our counter widget tutorial, we define a `step` property that controls the counter's increments (such as 1,2,3,4 or 2,4,6,8).
To add properties, events and functions to your widget API, click the Widget Public API icon at the bottom.
Learn more about defining your widget API.
Learn more about using your widget API when editing a site.
Preview and Test Your Widget
Configure Your Widget and Create Custom Panels
The Configuration tab enables you to define the way your widget and its elements look and behave when they're installed on a site. You can modify the display names, add and remove buttons to the action bars and change button settings. You can also determine whether elements can be selected, duplicated, or deleted.
Learn more about configuring your widget.
The Panels tab allows you to create custom panels that open when a site creator edits your widget in their Editor, instead of any of the widget's default panels (such as Settings or Design).
Build Design Presets
You can create more than one layout and style for your widget by using design presets. When you create design presets your widget keeps the same elements and functionality, but you can change colors, layout, and so on.
You can find Design Presets in the Widgets and Design panel. If you are working in the Design tab, click the App Structure icon and select the Widgets and Design icon.
Learn more about design presets in Blocks.
Add Widgets to Your App
Add more widgets to your app by opening the App Structure , selecting Widgets and Design and clicking + Add Widget.
Make sure you are in the Design tab.
Add Code Files to Your App
To add code files to your app, go to the Public & Backend panel in App Structure menu. Then, select which type of code you would like to add.
Learn more about code files in Blocks.