What a better way to start the new year than with a new Blockstudio release? 🎉 This one is packed with new features and improvements, so let's dive right in!
Overrides
It is now possible to override or extend metadata, attributes, assets and rendering templates of a block. This feature is super useful to customize existing block libraries without touching the original code.
{
"name": "blockstudio/my-block",
"title": "My overridden block title",
"blockstudio": {
"override": true
}
}
Copy
When using Twig, the rendering template can be extended on a granular basis by
using the block tag.
<h1>Images:</h1>
{% for image in a.images %}
<div class="content">
{% block image %}
<img src="{{ image.url }}" class="image" />
{% endblock %}
</div>
{% endfor %}
Copy
Instead of replacing the whole template, we can use Twigs extends feature to override certain parts of the template while keeping the rest intact.
{% extends 'index.twig' %}
{% block image %}
<figure>
<img src="{{ image.url }}" class="image" />
<figcaption>{{ image.caption }}</figcaption>
</figure>
{% endblock %}
Copy
New fields
Message
The message field lets you display a message to the user. On top of a static text, it is also possible to use the current block and attribute data in the message.
{
"name": "blockstudio/message",
"title": "Message",
"description": "Message field",
"blockstudio": {
"attributes": [
{
"id": "message",
"type": "message",
"value": "The block title is <strong>{block.title}</strong> and the value of text is <strong>{attributes.text}</strong>"
},
{
"id": "text",
"type": "text",
"label": "Text",
"default": "Text value"
}
]
}
}
Copy
Unit
The unit field lets you display a value with a unit.
{
"name": "blockstudio/unit",
"title": "Unit",
"description": "Unit field",
"blockstudio": {
"attributes": [
{
"id": "unit",
"type": "unit",
"label": "Unit",
"default": "1rem",
"units": [
{
"value": "px",
"label": "px",
"default": 0
},
{
"value": "%",
"label": "%",
"default": 10
},
{
"value": "em",
"label": "em",
"default": 0
}
]
}
]
}
}
Copy
Fetch in Select
The select field now supports fetching options from an external source.
{
"name": "blockstudio/fetch",
"title": "Fetch",
"description": "Fetch field",
"blockstudio": {
"attributes": [
{
"id": "select",
"type": "select",
"label": "Select",
"multiple": true,
"populate": {
"type": "fetch",
"arguments": {
"urlSearch": "https://fabrikat.io/streamline/wp-json/wp/v2/posts?search="
},
"returnFormat": {
"value": "id",
"label": "title.rendered"
}
}
}
]
}
}
Copy
And that's it for this release! As always, there are other improvements and bug fixes under the hood, so make sure to check the changelog. 🚀