Blockstudio 5.0 is now available! 🎉
This release is a major update to the plugin and sets the groundwork for even more features and improvements in the future.
Breaking changes
As with any major release, there are some breaking changes.
ACF & MB integrations
If you've been here from the start, you'll remember that Blockstudio (BS) originally started out as a framework for Advanced Custom Fields (ACF). At the time, ACF was the only real way to create blocks using PHP. We took notice of that feature and BS 1.0 was introduced to ease and regulate the development of custom blocks. Not long after, support for Metabox (MB) was added.
Back then, there was no block.json, so templates looked something like that:
<?php // cta.php /* Title: Call to Action Description: Call to action element. Category: blockstudio Icon: lightbulb Mode: preview SupportsMode: false SupportsAlign: false */ ?> <p>Buy my product!</p>Copy
Block data was stored in the file header, while the template was defined underneath.
With Version 2.4.0 of BS, native blocks were introduced, marking the beginning of creating custom blocks including fields without the need for an additional plugin like ACF or Metabox. These integrations were still supported, albeit not actively being marketed on the website anymore.
With ACF and MB bringing their own nuances to Blocks, it was always hard to keep complete feature parity between those solutions. Add native blocks to the mix and things get even more complicated regarding documentation, user expectations, and marketing. On top of that, many support requests from users were traditionally pointing out limitations that originated from either misunderstanding the feature set of ACF/MB or bugs in those solutions which were separate from BS.
With the release of version 5.0, these legacy integrations have now been removed altogether from the plugin.
$c variable
The $c variable inside block templates has been used for a pretty niche
feature so far: content areas when rendering blocks with the bs_render_block
function.
<div> <h1><?php echo $a['title']; ?></h1> <p><?php echo $a['subtitle']; ?></p> <?php echo $c; ?> </div>Copy
echo bs_block([ 'id' => 'blockstudio/cta', 'data' => [ 'title' => 'My title', 'subtitle' => 'My subtitle', ], 'content' => bs_block([ 'id' => 'blockstudio/cta', 'data' => [ 'text' => 'Button Text', ], ]) ]);Copy
See documentation for more information.
The $c variable is now used to return the context data of the block when using
InnerBlocks. Now, all core block features are available using those three
variables:
$a- block attributes$b- block attributes coming from the editor (align etc.)$c- block context data
If you still want to use content areas, simple use the $content variable
instead.
New features
Unlimited assets
There is no more limit on the number of block assets. Every file ending with
.js or .css will be automatically enqueued. Of course, all different types
like *-inline.css or *-editor.js are still supported.
Global assets
Assets starting with a global- suffix will now be enqueued even if the block
is not available on the page.
init.php
You can now add an init.php file to your block. This file will be loaded on
the init hook. It can be used to register custom post types, taxonomies or
setup any other functionality for your blocks.
Populate from function
Custom functions can now be used to populate data for options fields. (select, radio, checkbox)
{ "blockstudio": { "attributes": [ { "id": "postTypes", "type": "checkbox", "label": "Post types", "populate": { "type": "function", "function": "get_post_types" } } ] } }Copy
Tabs field
The tabs field is a new field type that allows you to group fields into tabs.
{ "name": "blockstudio/tabs", "title": "Tabs", "description": "Block with tabs", "blockstudio": { "attributes": [ { "type": "tabs", "tabs": [ { "title": "Tab 1", "attributes": [ { "type": "group", "title": "Group", "attributes": [ { "id": "text", "type": "text", "label": "Text" }, { "id": "text2", "type": "text", "label": "Text 2" } ] } ] }, { "title": "Tab 2", "attributes": [ { "type": "group", "title": "Group", "attributes": [ { "id": "text3", "type": "text", "label": "Text 3" } ] } ] } ] } ] } }Copy
Radio as a button group
The radio field type can now be displayed as a button group.
{ "name": "blockstudio/button-group", "title": "Button group", "description": "Radio field as button group", "blockstudio": { "attributes": [ { "id": "radio", "type": "radio", "display":"buttonGroup", "label": "Radio", "options": [ { "value": 1, "label": "One" }, { "value": 2, "label": "Two" }, { "value": 3, "label": "Three" } ] } ] } }Copy
Custom styles in a group
It is now possible to add custom styles to a group field. This can be used to display fields next to each other, or do any other type of styling.
{ "name": "blockstudio/group", "title": "Group", "description": "Group with horizontal fields", "blockstudio": { "attributes": [ { "id": "group", "type": "group", "style": { "grid-template-columns": "1fr 1fr" }, "attributes": [ { "id": "text1", "type": "text", "label": "Text", "switch": false }, { "id": "text2", "type": "text", "label": "Text", "switch": false } ] } ] } }Copy
Editor improvements
The editor has been improved in many ways. The file list and context menu have been redesigned to function more like a traditional IDE. It is now possible to create any type of file in any location with it, removing previous limitations of only creating and displaying files which are part of the block.
Other
Enhancements
- add alert dialog when deleting repeater row
- add loading screen in editor
- better error handling in editor
- don't register styles if blockstudio/assets filter disables enqueueing
- editor will now create new blocks in the selected folder
- move license page to admin dashboard
- send single request when processing SCSS in editor
- show folders first in editor
- update all included icon packs
- use CSS grid for Gutenberg sidebar layouts
Fixes
- ES modules potentially not parsing correctly in editor
- InnerBlocks and RichText not working inside a div with useBlockProps
- RichText not working when InnerBlocks present in block
- assets not loading inside customizer
- autocompletions showing duplicate entries in editor
- blocks crashing in widgets block editor
- content resetting in editor when cutting content and switching tabs
- context not working in Twig templates
- correct editor permission when using editor/users/roles filter
- don't render component specific attributes on frontend
- editor assets not loading correctly
- icon field persisting icon value when empty after deleting repeater row
- potential preview errors in editor when code value is empty
Features
- UI routing in admin dashboard
- ability to disable toggling fields
- ability to duplicate repeater rows
- blockstudio/init hook
- text align in WYSIWYG field
🔮 And that's a wrap! We hope you enjoy this release. Happy block building!