Blocks are the main pieces of content that are placed and rendered on the screen when viewing a route.
You can add blocks from the Block marketplace, Customise blocks, or create your own blocks from scratch.
Blocks consist of
HTML template
The html elements that are mounted onto the DOM
Javascript Code
The configuration and functionality that makes the block work
SCSS
The styles to be applied to instances of this block
Fields
Configuration of options that are displayed to the user when adding instances of this block into their interface.
The input of the user in these fields is stored on the data model for the instance of the block.
And are created according to the format of Vue JS components using the Options API documented here:
https://vuejs.org/api/options-state.html
The big idea of blocks, is to allow you to cut down on repeating yourself. When building an interface it's often helpful to create re-useable blocks and set fields on them so that they can be customised this saves you from having to write the same code and functionality more than once.
To add an instance of a block onto your interface, drag it from the 'Block Market' or 'My Blocks' sidebar in the builder onto your route. This will create a new instance of this block.
Each instance has it's own data model, and allows for customisation through the fields configured for the block.
When developing a block, The data input by the user when selecting an instance is available on the component's scope at this.data this means that if you create a field with a key of 'name' the value the user enters in that field will be available to the component at this.data.name
Blocks can be configured to have one or more slots, slots are areas inside your block that a user can add another block. Allowing for infinite nesting of blocks within each other.
If you've created a block that might be useful for others to use as well, you can publish your block to the block market. This allows you to publish development and milestone version, along with release notes, documentation and updates to how the block works. Other users can then use your block in their interfaces.
If you are using a block from the block market, you can select whether to use the `stable` or `development` version of the block. Once you publish your site, that specified version will be published and any changes to the block will not affect your published interface, ensuring that you can stay in control of which versions of a block are included in your interface.