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

We are happy to announce the release of Blockstudio 5.1! This release includes a number of new features and improvements. Let's dive straight in.

Block transforms

Block transforms allow you to transform a block into another block or insert a block into the editor from content typed by the user.

From another block

block.json


            {
      "$schema": "https://app.blockstudio.dev/schema",
      "name": "blockstudio/transforms",
      "title": "Native Transforms",
      "icon": "star-filled",
      "description": "Native Blockstudio Transforms.",
      "blockstudio": {
        "transforms": {
          "from": [
            {
              "type": "block",
              "blocks": [
                "blockstudio/transforms-2",
                "blockstudio/transforms-3"
              ]
            }
          ]
        },
        "attributes": [
          {
            "id": "text",
            "type": "text",
            "label": "Text"
          }
        ]
      }
    }

      Copy

From user input

block.json


            {
      "blockstudio": {
        "transforms": {
          "from": [
            {
              "type": "enter",
              "regExp": "/^-{3,}$/"
            }
          ]
        }
      }
    }

      Copy

In the example above, the block will be inserted when the user types three or more dashes (-) and then presses Enter.

Check documentation

Updated select field

The select field has been updated to allow you to select multiple options. This has been highly requested by our users!

block.json


                    {
      "title": "Multiple select field",
      "blockstudio": {
        "attributes": [
          {
            "id": "select",
            "type": "select",
            "label": "Select",
            "multiple": true,
            "allowNull": "Select an option",
            "options": [
              {
                "value": "option-1",
                "label": "Option 1"
              },
              {
                "value": "option-2",
                "label": "Option 2"
              },
              {
                "value": "option-3",
                "label": "Option 3"
              },
              {
                "value": "option-4",
                "label": "Option 4"
              }
            ]
          }
        ]
      }
    }

      Copy

On top of that, when populating options using a query, data can now be searched and fetched using the search input.

Check documentation

Future of token field

As you might have already realised, the select field using the multiple option is now very similar to the token field, which also allows you to select multiple options.

With 5.1, the token field is quietly being deprecated. Notices will now show in the documentation and schema. If you rely on the token field, we recommend switching to the select field instead.

It will be completely removed in the next major update. (6.0)

Dynamic InnerBlocks template

The InnerBlocks template of a block can now be changed using the select or radio field by adding an innerBlocks key to the options object.

block.json


            {
      "$schema": "https://app.blockstudio.dev/schema",
      "name": "blockstudio/type-select-innerblocks",
      "title": "Native Select InnerBlocks",
      "category": "blockstudio-test-native",
      "icon": "star-filled",
      "description": "Native Blockstudio Select InnerBlocks block.",
      "blockstudio": {
        "attributes": [
          {
            "id": "layout",
            "type": "select",
            "label": "Layout",
            "options": [
              {
                "value": "1",
                "label": "One",
                "innerBlocks": [
                  {
                    "name": "core/heading",
                    "attributes": {
                      "content": "This is the heading of Layout 1.",
                      "level": 1
                    }
                  },
                  {
                    "name": "core/paragraph",
                    "attributes": {
                      "content": "This is the paragraph of Layout 1."
                    }
                  }
                ]
              },
              {
                "value": "2",
                "label": "Two",
                "innerBlocks": [
                  {
                    "name": "core/heading",
                    "attributes": {
                      "content": "This is the heading of Layout 2.",
                      "level": 1
                    }
                  },
                  {
                    "name": "core/paragraph",
                    "attributes": {
                      "content": "This is the paragraph of Layout 2."
                    }
                  }
                ]
              }
            ],
            "allowNull": "Select a layout"
          }
        ]
      }
    }

      Copy

Of course it is also possible to nest innerBlocks within innerBlocks, for a more complex layout using the core/columns block, check the documentation.

{index} for Repeater rows

The Repeater field now supports the {index} variable for the textMinimized string or any of the keys when used as an object. It will be replaced by the index of the row when used.

block.json


                    {
      "title": "Repeater field",
      "blockstudio": {
        "attributes": [
          {
            "id": "repeater",
            "type": "repeater",
            "label": "Repeater Minimized",
            "min": 1,
            "max": 2,
            "textMinimized": {
              "id": "text",
              "fallback": "Fallback value",
              "prefix": "Row {index}: "
            },
            "attributes": [
              {
                "id": "text",
                "type": "text",
                "label": "text"
              }
            ]
          }
        ]
      }
    }

      Copy

That's another wrap! Believe it or not; 5.2 is already around the corner, this time focusing on the code editor. Happy block building!