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:
{ "$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.
{ "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.
{ "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 all the updates and bug fixes in this version. 🚀