Blockstudio 5.4 ‹ Blog

Oh boy, this one is a doozy. Blockstudio 5.4 features a new killer feature that'll extend (😏) its capabilities far beyond creating custom blocks. Let's dive in right in!

Block extensions

It is now possible to extend any block with custom attributes. Every field type, feature and setting that you already know and love from creating custom blocks is now available for extending existing core, third-party or blocks made with Blockstudio.

A configuration to extend all core blocks with a custom color field looks like this:

core.json


            {
      "$schema": "https://app.blockstudio.dev/schema/extend",
      "name": "core/*",
      "blockstudio": {
        "extend": true,
        "attributes": [
          {
            "id": "customColor",
            "type": "select",
            "label": "Custom color",
            "options": [
              {
                "value": "#f00",
                "label": "Red"
              },
              {
                "value": "#00f",
                "label": "Blue"
              }
            ],
            "set": [
              {
                "attribute": "style",
                "value": "color: {attributes.customColor}"
              }
            ]
          }
        ]
      }
    }

      Copy

Yes, it really is that simple. Fore more information, check out the docs.

Code field

The new code field type allows you to add a simple code editor to your blocks. It is based on CodeMirror.

block.json


                      {
    "name": "blockstudio/code",
    "title": "Code",
    "description": "Code field",
    "blockstudio": {
      "attributes": [
        {
          "id": "code",
          "type": "code",
          "label": "Code",
          "default": "console.log('Hi!');",
          "language": "javascript",
          "lineNumbers": true
        }
      ]
    }
  }

      Copy

Nested tabs

Tabs can be now nested. Top-level tabs will always take the full width of the sidebar, while nested tabs will behave in the same style as other fields.

block.json


                      {
    "name": "blockstudio/nested-tabs",
    "title": "Tabs",
    "description": "Block with nested tabs",
    "blockstudio": {
      "attributes": [
        {
          "type": "tabs",
          "tabs": [
            {
              "title": "Tab 1",
              "attributes": [
                {
                  "type": "tabs",
                  "tabs": [
                    {
                      "title": "CSS",
                      "attributes": [
                        {
                          "id": "codeCss",
                          "type": "code",
                          "label": "Code"
                        }
                      ]
                    },
                    {
                      "title": "JS",
                      "attributes": [
                        {
                          "id": "codeJS",
                          "type": "code",
                          "label": "Code",
                          "language": "javascript"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "title": "Tab 2",
              "attributes": [
                {
                  "id": "text",
                  "type": "text",
                  "label": "Text"
                }
              ]
            }
          ]
        }
      ]
    }
  }

      Copy

That wraps up this release! Don't forget to check the changelog for more updates and bug fixes. 🚀