Custom types

Custom types allow you to define reusable objects which include multiple variable fields. They are defined in a theme in the /types directory as a json file, which can then be referred to in any block using the custom type key. Custom types return an object.

Example custom type defined in the /types directory

{
  "key": "my_custom_type",
  "name": "My custom type",
  "attributes": [
    {
      "name": "label",
      "type": "string"
    },
	{
      "name": "link",
      "type": "link"
    },
    {
      "name": "style",
      "type": "select",
      "options": [
        {
          "label": "primary",
          "value": "btn-primary"
        },
        {
          "label": "secondary",
          "value": "btn-secondary"
        }
      ]
    }
  ]
}

Example custom type used in block schema

---
my_variable:
    type: my_custom_type
---

<a class="{{ my_variable.style }}" href="{{ my_variable.link.url }}">{{ my_variable.label }}</a>

Setting defaults

Defaults can be set on custom types as a key-value pair. Any defaults set within the block schema will override the defaults set in the custom type json file.

syntax

---
my_variable:
    type: my_custom_type
    default:
        label: Click here
        style: btn-primary
---

<a class="{{ my_variable.style }}" href="{{ my_variable.link.url }}">{{ my_variable.label }}</a>

Arrays

You can also define arrays of custom types to build more complex UI’s, for example, to allow a Creator to add an array of buttons.

syntax

---
buttons:
    type: my_custom_type
    array: true
    default:
        - label: Click here
          style: btn-primary
        - label: Click here
          style: btn-secondary
---
{% for button in buttons %}
    <a class="{{ button.style }}" href="{{ button.link.url }}">{{ button.label }}</a>
{% endfor %}    