Skip to main content

blocks + presets

Use blocks to repeat sub-elements inside a widget (for example: feature cards, FAQs, CTAs), and add presets to offer ready-made examples for the editor.

Schema​

{
  "name": "****",
  "description": "****",
  "blocks": {
    "blockType1": {
      "name": "****",
      "settings": {
        "keynameA": { "type": "string", "label": "****", "default": "****" },
        "keynameB": { "type": "string", "label": "****", "default": "****" },
        "keynameC": { "type": "media", "label": "****", "default": "" },
        "keynameD": { "type": "string", "label": "****", "default": "****" }
        // Here, the keys can be any name you want like keyname1 or others
      }
    }
  },
  "presets": [
    {
      "category": "homepage", // This property sets this preset to be added by default to the homepage group, as shown in the image below
      "name": "****",
      "blocks": [
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } },
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } },
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } },
        { "block": "blockType1", "name": "****", "settings": { "keynameA": "****", "keynameB": "****", "keynameC": "", "keynameD": "****" } }
      ]
    }
  ]
}

Nunjucks example​

<section>
  {# Example compatible with the output JSON below. Change the keys as per your actual layout! #}
  <div class="grid">
    {% for block in widget.blocks %}
      <article>
        {% if block.settings.keynameC %}
          <img src="{{ block.settings.keynameC | assets }}" alt="">
        {% endif %}
        <h3>{{ block.settings.keynameA }}</h3>
        <p>{{ block.settings.keynameB }}</p>
        {% if block.settings.keynameD %}
          <span>{{ block.settings.keynameD }}</span>
        {% endif %}
      </article>
    {% endfor %}
  </div>
</section>

If you set "category": "homepage" inside presets, the widget will appear by default in the homepage group in the builder.

Example output (as JSON)​

{
  "blocks": [
    {
      "type": "blockType1",
      "settings": {
        "keynameA": "Fast",
        "keynameB": "Quick shipping",
        "keynameC": "",
        "keynameD": ""
      }
    },
    {
      "type": "blockType1",
      "settings": {
        "keynameA": "Support",
        "keynameB": "We are here",
        "keynameC": "",
        "keynameD": ""
      }
    },
    {
      "type": "blockType1",
      "settings": {
        "keynameA": "Quality",
        "keynameB": "Top rated",
        "keynameC": "",
        "keynameD": ""
      }
    }
  ]
}

blocks preset in builder

This is how presets appear in the builder.