Builder

Last modified:

This feature is currently in beta and is subject to change in minor releases.

Blockstudio Builder (current working name) is a set of bare blocks that enable you to build custom pages inside of the block editor using Tailwind CSS.

builder sidebar

Motivation

The motivation here is simple: keep the controls as close to just writing raw HTML as possible. With classes, data attributes, and choosing your own tag, you can build anything you want. Of course, the current controls are just a start; more will be added in the future.

WordPress 6.6 will introduce interesting features to the block editor, namely Partially Synced Patterns and the Block Bindings API. With these features, it will be possible to create reusable and dynamic blocks completely inside the block editor. The builder will move out of beta once these become available in WordPress core.

Available Blocks

  • Container: A container block that allows InnerBlocks.
  • Text: A text block that allows you to add Text using the RichText component.

How to use

The builder is compeltely opt-in. Enable it inside the blockstudio.json or via the settings/builder/enabled filter.

blockstudio.json

                {
  "builder": {
    "enabled": true
  }
}

      
Copy
functions.php

              add_filter('blockstudio/settings/builder/enabled', function() {
    return true;
  });

      
Copy

This will add the blocks to the block editor.

FAQ

What happens to custom blocks?

Custom blocks as you know them will still work as expected and continue to receive new features and bug fixes. The builder blocks are just an addition for those who want to build custom pages inside the block editor.

Why Tailwind?

Besides being very portable, Tailwind replaces the need for a full page builder UI, allowing you to see everything about the styling of an element (responsiveness, etc.) at a glance.

Roadmap

Besides adding additional blocks like images and input fields to complete the building suite, the following features are planned:

  • Paste external Tailwind structures directly into the builder
  • Export pages made with Builder blocks as static HTML