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

editor

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

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

editor

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

Toolbar

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

toolbar list button

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

toolbar list button

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

toolbar list button

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

toolbar list button

Enlarges the font size of the editor.

toolbar list button

Displays a preview of the current block.

Tabs

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.

tabs

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.

editor error

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.

new block

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!