Blocks

Block is the smallest part of the library.

The file structure of a block

Name Type Requirement Description
config.json file required The main config file of a block. When you add a block to the library, you should point to this file.
preview.png file optional The preview image for a block. It is shown in groups.
template.hbs file optional The main template. You can use any template engine with a special adapter.
assets directory optional Directory with assets: images, scripts and CSS files.

The structure of config.json file

Parameter Type Default Requirement Description
groups String|Array optional Your block will be shown in these groups
template String  template.hbs optional The file with an HTML template
settings Array optional These settings are needed for configuring an HTML template
defaults Object optional Default values for settings
assets Array optional The list of assets to add

Settings’ parameters

Name Type Requirement Description
name String required The name of the settings
label String required The name of the settings for translation
type String required A field type. Can be a text area, text, etc.

The settings can have other parameters regarding the type of the field.

Default parameter

The “Default” parameter is an object used for setting default values to the settings and is described in the “settings’ parameter” section.

The example of config.json for an HTML block

{
    "groups": "demo",
    "template": "template.hbs",
    "settings": [{
        "name": "title",
        "label": "Title",
        "type": "text"
    }, {
        "name": "text",
        "label": "Content",
        "type": "textarea"
    }],
    "defaults": {
        "title": "Attention!",
        "text": "It's demo block."
    }

The example of config.json for a media block

{
    "assets": [{
        "type": "icon",
        "pack": "glyphicon",
        "classes": "glyphicon glyphicon-asterisk",
        "tags": "asterisk"
    }, {
        "type": "icon",
        "pack": "glyphicon",
        "classes": "glyphicon glyphicon-plus",
        "tags": "plus"
    }, {
        "type": "icon",
        "pack": "glyphicon",
        "classes": "glyphicon glyphicon-euro",
        "tags": "euro"
    }, {
        "type": "icon",
        "pack": "glyphicon",
        "classes": "glyphicon glyphicon-minus",
        "tags": "minus dash"
    }, {
        "type": "icon",
        "pack": "glyphicon",
        "classes": "glyphicon glyphicon-cloud",
        "tags": "cloud"
    }, {
        "type": "icon",
        "pack": "glyphicon",
        "classes": "glyphicon glyphicon-envelope",
        "tags": "envelope mail"
    }, {
        "type": "icon",
        "pack": "glyphicon",
        "classes": "glyphicon glyphicon-pencil",
        "tags": "pencil"
    }]
}