Custom types
Custom types allow you to define reusable objects with multiple variable fields.
Custom types allow you to define reusable objects that include multiple variable fields. They are defined as JSON files in the theme's types directory and can be referenced in any block schema using the custom type's key.
Returns: An object with properties matching the custom type's attributes.
Example
Given a custom type defined at types/button.json:
{
"key": "button",
"name": "Button",
"attributes": [
{
"name": "label",
"type": "string"
},
{
"name": "link",
"type": "link"
},
{
"name": "style",
"type": "select",
"options": [
{ "label": "Primary", "value": "btn-primary" },
{ "label": "Secondary", "value": "btn-secondary" }
]
}
]
}You can use it in a block schema:
---
attributes:
cta_button:
type: button
---<a class="{{ cta_button.style }}" href="{{ cta_button.link.url }}">
{{ cta_button.label }}
</a>Setting defaults
Defaults are set as key-value pairs matching the custom type's attribute names. Defaults in the block schema override any defaults defined in the custom type JSON file.
---
attributes:
cta_button:
type: button
default:
label: Get started
style: btn-primary
---Arrays
Custom types can be used as arrays to build repeatable UI components, such as a list of buttons or a set of feature cards:
---
attributes:
buttons:
type: button
label: Buttons
array: true
default:
- label: Primary action
style: btn-primary
- label: Secondary action
style: btn-secondary
---{% for button in buttons %}
<a class="{{ button.style }}" href="{{ button.link.url }}">
{{ button.label }}
</a>
{% endfor %}For more information on defining and managing custom types, see custom types.