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
{
"$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
{
"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.
Updated select field
The select field has been updated to allow you to select multiple options.
This has been highly requested by our users!
{
"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.
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.
{
"$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.
{
"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!