The block framework for WordPress.
Blockstudio gives you the ultimate developer experience for creating custom, production-ready PHP blocks using a filesystem based approach. Native fields, built-in code editor, inline assets, scoped styles, Twig support and much more.
File system based
Create blocks using files.
All block.json files within the blockstudio directory are parsed and registered as custom blocks. Other assets like styles and scripts will automatically enqueued when the block is being used.
Metadata for the block. The Blockstudio schema extends the WordPress block.json schema with additional properties.
The template (PHP or Twig) which will be rendered on the frontend and inside the editor. Field and block data can be accessed using the $a and $b variables respectively.
Script file that will be enqueued on the frontend only. Useful for sending information to Google Tag Manager.
Style file which will be enqueued in the editor and on your frontend if the block is used.
Scoped inline styles which will be rendered inside a style tag in the editor and on your frontend if the block is used.
Available asset types:
Editor + Frontend
Editor + Frontend (in a style tag)
Editor + Frontend (read more)
Editor + Frontend
Editor + Frontend (in a script tag)
Custom fields without extra plugins.
Blockstudio comes with a set of field types that can be attached to blocks. Gutenberg components are used to display the controls for those fields, assuring that updates to the editor will also benefit the experience of using Blockstudio.
Fields are declared directly inside the block.json file, allowing for easy transport and duplication of already existing blocks. Want to beef up the developer experience? Use the Blockstudio schema to get help like descriptions, autocomplete and validation straight to your IDE. No documentation needed.
Available field types:
More field types (query, repeater etc.) are actively being developed.
Style encapsulation made easy.
Never worry about overlapping styles or class names ever again. With scoped styles you can keep your CSS structure simple, move quicker and iterate faster.
The world of blocks at your fingertips.
The brand new Blockstudio editor is the next evolution in block development. It further reduces the barrier of editing blocks and brings a loved and well known code interface (Visual Code Studio via Monaco) to the WordPress admin.
What others are saying:
Finding the balance between using native Gutenberg blocks and still achieving high level, advanced and complex layouts which clients can edit can be a challenge. Blockstudio lowers the barrier to entry for creating Gutenberg blocks by making use of ACF and Metabox functions in an easy to use system. It's as simple as creating a folder, adding a PHP file and defining your block. The possibilities are limitless.
I've been using Blockstudio to build custom Gutenberg blocks for a few months, on both my personal site alongside several client projects. It makes creating blocks incredibly easy and really cuts out on dev time. I love that it works alongside ACF and Metabox as we use both, depending on project requirements. As Gutenberg grows, we're pivoting more towards blocks and away from custom themes and builders - Blockstudio is the enabler for that transition.