How to create and add a new block

To create a new block you need to make a folder with the name of the block. The folder with the block must include these files:

config.json – json array that describes the block
template.hbs – html marking for the block
preview.png – the thumbnail of the block

The next step is to add the block into the library. To add the block you need to open the file lib.json in your library and insert this code:

{
        "name": "block_text",
        "url": "block_text/"
}

name – the name of the block
url – the path to the block

As an illustration let’s create a simple text block, that will use three options (fields), they’re the id of the block, its title and the text. Below you can find the default settings.

File contents:

{
    "groups": "content",
    "template": "template.hbs",
    "settings": [{
        "name": "block_id",
        "label": "Block's id",
        "type": "text"
    }, 
    {
        "name": "header",
        "label": "Block's title",
        "type": "text"
    },
    {
        "name": "content",
        "label": "Сontent",
        "type": "textarea"
    }],
    "defaults": { 
      "block_id": "", 
      "header": "Qoob Page Builder", 
      "content": "<p>Qoob website builder offers a great number of tools and features with an intuitive interface for free.</p>" 
    }
}

The second step is to create a template file for a block. You can use the template maker handlebars or Underscore.

The file template.hbs contents

<div id={{block_id}} class="block-content">
    <h2>{{header}}</h2>
    <div class="content">{{{content}}}</div>
</div>