How We Built This: An Overview
This app was built on several areas of the Wix Blocks editor. Here is how we did it.
Widgets and Design | Widgets
The Widgets area is where you create the user interface of your widgets, using drag-and-drop Wix elements. In this area, we did the following:
- Created a widget.
- Added a 2 by 2 grid to the widget, to help keep the two main sections of this image neatly organized in both halves of the widget (1fr:1fr).
- Added an image to the left side of the grid.
- Created a stack and added the text elements to it. A stack not only groups the elements, but also allows adding a background.
- Added a circle badge and text.
You can see all the elements in the Layers
panel.
See how it looks
Widgets and Design | Design Presets
Design presets let you create various styles and layouts for the same widget. The widget structure, code and functionality stays the same across presets. In the Design Presets area, we created four design presets:
- Side by Side: The default preset, with the image next to the text.
- Side by Side (Style): This preset has inverted colors. The background color of the stack was set to color number 5, which in our case is black. This color is connected to site themes, so that on a black site, for example, it would actually seem white.
- Image Background (Layout): This preset has a different layout. The image is in the background, stretched on all four grid-cells, and the card is displayed over it.
- Card (Mobile): This preset has two vertical cards one over the other and was designed to look good in mobile view. We designed it since a grid does not fold well to a narrow vertical form. Because of this last preset, which is vertical, we also changed the minimum height of the widget (marked H) to 100. This way, if a user who installs this widget chooses to delete any of the elements, the height will shrink wrap the content, and the user will not see white spaces.
See how it looks
Widgets and Design | Widget Code
The widget code includes the business logic of a specific widget and can also contain widget API properties, events and functions. In this area, we did the following:
- Added a new widget API property named
elementsVisibility
(a list of text items). The property contains the elements we currently want to display.
- We wanted all elements to be shown by default, so we added them to the property's default data.
- Defined the
allElementsId
variable.
- Created a function named
renderElements
that goes over all the possible elements, checks if they appear in the elementsVisibility
property and collapses or expands them.
- Called the function on every refresh, or after changing the visibility property (by code or by custom panel).
See how it looks
Editor Experience | Panels Tab
The Editor Experience area controls how site builders who install your app can interact with it and edit it. In the Panels tab, we did the following:
- Created a custom panel to allow users to select the elements they want to show or remove from the widget (for example, the image or the note).
- Added a checkbox element representing the various elements.
- Added code to hide the elements when they are not checked, and show them when they are. If you can’t see the panel code, click the Open arrow at the bottom.
Note that Blocks also provides a default panel for adding and removing elements, but we wanted to add some extra functionality: our custom panel shows all the elements, all the time. The Blocks default panel, on the other hand, only shows the elements that were removed and allows the user to add them.
See how it looks
Editor Experience | Configuration Tab
The Configuration tab allows you to fine-tune what users can and cannot configure in your widget when it’s installed on their site. In this area, we did the following:
- Changed the display names of the Title, Subtitle and Note, so that users know what these elements are.
- Changed the display name of the widget.
- Marked the stack as unselectable, since it’s a layout element that’s only used by the app builder. We wouldn’t want users to touch it.
- Marked the badge text as non-deletable, since the badge is useless without it.
See how it looks
Installation Settings
Installation settings define how the app behaves during its first installation on a site. In this area, we did the following:
- Defined the widget as “not added automatically” to a site. This means that a user will see the widget in the site editor’s Add + panel, and must drag it to the canvas on their own.
- Defined only the first preset to appear in a site’s Add + panel. All the other presets will only appear in the Presets panel.
- Added preset images. Make sure to change these images to your own if you change the appearance of the app.
See how it looks