A Blocks App Workflow

Wix Blocks lets you create apps that you can reuse on as many Wix sites as you want, use on your clients' sites or publish in the Wix App Market.

Plan Your App

Here are some questions to start with, when you're planning your app:

• Does your app include site widgets? How many widgets? Note that you can use nested widgets. You can also easily create various design presets for the same widget, rather than duplicating it.
• What panels do you need for each widget? Note that you can build designated panels for various areas of your widget - no need for one large settings panel.
• Does your app use a database? If it does, consider adding a dashboard page for users to easily manage the data.
• Do you want to publish your app in the Wix App Market? If so, it's important to plan the app in a way that matches different pricing plans, such as free and premium.

Here is an example workflow for building your app. Of course, not all apps will use all features.

Create an app

Go to Custom Apps in your Wix Studio workspace and create a new app.

Add widgets

Widgets allow you to add a user interface (UI) to your app. When designing a widget, we recommend that you start with a ready-made composition, or add layout elements such as grids, flexboxes or repeaters.

Before building your widget, read our design guidelines, to make sure that it behaves responsively and blends well with Wix sites. Use our Figma kit if you want to create your design in Figma.

To add widgets: Go to the App Interface and click Create Extension. You'll see your widget under the Widgets tab.

Add design presets

Design presets save you lots of work if you want different layouts or styles for your widgets. Users can later choose between the presets when your app is installed on a site.

To add design presets: Go to the Design Presets section in the Widgets tab.

Add widget code

Every widget has its own widget code that holds its business logic. Every widget can also have its own Widget API with properties, events, and functions.

To add widget code: Open the code panel at the bottom of your widget. You can work directly in this panel, use the Wix IDE for Blocks or use the Blocks-CLI integration.

Configure the Editor Experience

The Editor Experience panel enables you to define the way your widget and its elements look and behave when they're installed on a site.

Make sure to go over our UX guidelines for Editor Experience so that your widgets and panels are easy to understand and useful.

In the Configuration tab, you can modify display names, set your widgets or elements as non-selectable, and configure widget and element action bars (floating panels).

To define configuration settings: go to the Editor Experience tab and click Configuration.

Build Custom Panels

Your Blocks widgets and their elements come with default panels for settings, design, presets and more. You can also build custom panels for your widgets and their elements.

To create custom panels: go to the Editor Experience tab and click Custom Panels.

Preview and test your widgets

Preview your widgets to test how they work. You can easily test how your widget looks on various site themes and with various widget API properties.

After previewing, make sure to test your app on a site. Some parts of your app, like Custom Panels, can only be tested in the editor.

• To preview your widgets: click the Preview icon.

• To test your app: click Test.

Add CMS database collections

Blocks makes it easy to add collections to your app. When your app is installed on a site, it can use the default data that you provided, or data from the site.

To add CMS collections: open the CMS tab.

Add a Dashboard page

The Blocks Dashboard pages are your app's back-office. They can be used to manage your database collections or other app settings. Unlike panels, which are used per-widget, Dashboard pages serve your entire app. When a user installs your app on a site, your Dashboard pages will be added to their site Dashboard, as separate pages.

To add a Dashboard page: click the Dashboard Interface icon, then click Add Dashboard Page.

Add code files to your app

Use Blocks to easily package and reuse code with backend modules, frontend files, and a configuration file. Code files apply to your entire app.

To add code files: go to the Code panel and click Public & Backend.

Configure your app Installation Settings

Installation settings let you determine how your app is first installed on a site. You can select which widgets to show, which design presets, what to do on mobile devices, etc.

To configure installation settings: click on the three dots next to the widget name in the Widgets panel. Then click Editor Experience > Installation Settings.

Prepare your app for pricing

If you plan to publish your app in the Wix App Market, consider its behavior across different pricing plans, such as free and premium. This includes different UI and logic. Learn more about pricing plans in Blocks.

To start publishing your app in the App Market: go to the WixBlocks icon and click App > Publish App.

Release a version of your app

Create a minor or major version for your app, depending on where you are in the development process.

To release a version: click Release and select your version type.

Install your app on a site

You can install your app on any site you own or collaborate with, as well as on your clients’ sites. You can also share it using an install link, or publish your app in the Wix App Market.