Blockstudio 5.3 – Blog – Blockstudio | The block framework for WordPress

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.

block.json


            {
      "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.

index.twig


            <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.

index.twig


            {% extends 'index.twig' %}

    {% block image %}
      <figure>
        <img src="{{ image.url }}" class="image" />
        <figcaption>{{ image.caption }}</figcaption>
      </figure>
    {% endblock %}

      Copy

Check documentation

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.

block.json


                      {
    "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.

block.json


                      {
    "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.

block.json


                      {
    "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. 🚀