THE EDITOR IS CURRENTLY IN A BETA PHASE. ONLY USE IT LOCALLY OR ON A STAGING ENVIRONMENT.

Introduction

Starting from version 2.3.0, Blockstudio now includes a full code editor, capable of editing and creating blocks all within the WordPress admin area. The current feature set includes:

Editing blocks
Creating new blocks
Deleting blocks
Editing assets (CSS & JS)
Adding assets
Deleting assets
Live preview of blocks

Architecture

Just like many other popular online IDEs, Blockstudio is using the Monaco Editor for code editing. Since VS Code is powered by this very same editor, VSC users should feel right at home with it.

Besides that, the editor interface is making heavy use of Gutenberg components , ensuring similarities in look and behaviour to the WordPress admin area and Gutenberg itself.

Safety

Although there are checks in place that will prevent the saving of blocks in case the code creates a critical error on your site, it is advisable to either use the editor locally or on a staging environment.

Keep in mind that the Blockstudio editor is not much different from using an editor on your computer, as it directly modifies the actual files in your block directory.

Setup

The editor is deactivated by default. To enable it, simply use the blockstudio/editor/users filter with a list of user IDs for which the editor should be activated for.

// functions.php add_filter( 'blockstudio/editor/users', function () { return [ 1, 19 ]; } );

This will activate the editor (accessible in the WordPress admin menu) for users with the ID of 1 and 19.

Welcome screen

The welcome screen shows a list of all registered blocks created with Blockstudio in an ordered list. From here, users can either edit a block by clicking the associated row or search for a specific block via the search form.

Editor

By default the editor will display the code of the currently selected block.

Note that all toolbar settings are automatically saved as user meta, so all options are applied even when switching environments.

Displays a simplified version of the file browser from the welcome screen.

Displays the UI in fullscreen mode, hiding the rest of the WordPress admin.

Displays a minimap of the current file next to the editor.

Enlarges the font size of the editor.

Displays a preview of the current block.

Tabs

Switching between different files in a folder can be done using the tabs underneath the toolbar. If there are assets that can be added to the block, a button will be displayed at the end.

Clicking the folder icon next to the main block file will display a list of all blocks in the current folder. This is a handy way to access other blocks in the current folder or create new ones if the list view is disabled.

Preview

This feature currently only works with ACF Blocks.

The live-preview screen is undeniably the most interesting part of the Blockstudio editor, since it enables previewing the current block as changes are being made in the code. If code changes result in a critical error, a notice will appear and prevent the faulty code being saved to the file.

If you are using custom fields in your blocks, the preview will automatically show the data that has been defined in the $example variable .

Creating blocks

New blocks can be created by clicking the + icon in the file browser and dropdown when clicking the folder icon next to the main block file.

Deleting files

Files can be deleted via the three dot menu next to the Save button in the toolbar. Deleting a block will also delete all of its associated assets (style.css, script.js etc.) if it is the only block in a particular folder.

If the block is nested deep within a certain folder structure, empty parent folders will also be deleted. Let's imagine the following structure as an example:

blockstudio -- block.php -- block2.php -- component-block -- nested-folder -- index.php

When the nested-folder block is deleted, it will also delete index.php (file), nested-folder (folder) and component-block (folder), since there are no files left in this folder structure

Outlook

The introduction of the editor is an exciting development for Blockstudio users and WordPress developers working with Gutenberg. Now that there is an accompanying interface for block directories, importing custom blocks from the library directly into your theme will be possible in the near future. (3.0)

On top of that, more work will be put into removing the barriers for integrated block development within WordPress. Tailwind, SCSS and a neat solution for web components as blocks are on the cards, so stay tuned!