Editor - General

Last modified:

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

  • Creating a custom plugin if no block source has been found
  • Editing blocks
  • Creating new blocks
  • Deleting blocks
  • Editing assets
  • 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.


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

        

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

Preview assets

By default, all block assets will be enqueued for the block preview. Often times additional styles are needed (for example a global stylesheet), to make sure that the block is displayed correctly. You can use the following filter to add a registered script handle to all blocks in the editor:


                add_filter("blockstudio/editor/assets", function () {
      return ["stylesheet-handle"];
    });

        

Similarly, it is also possible to add additional styles for just a single block using the following configuration inside the block.json:


                {
      "apiVersion": 2,
      "name": "blockstudio/native",
      "title": "Native Block",
      "category": "text",
      "icon": "star-filled",
      "description": "Native Blockstudio block.",
      "keywords": [
        "block",
        "native"
      ],
      "version": "1.0.0",
      "textdomain": "blockstudio",
      "blockstudio": {
        "editor": {
          "assets": ["stylesheet-handle"]
        }
      }
    }

        

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.

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!