logo

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
  • Creating new files
  • Editing files
  • Renaming files
  • Deleting files
  • Creating new blocks
  • Deleting blocks
  • Importing data
  • Exporting data
  • 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 settings/users/ids setting with a list of user IDs for which the editor should be activated for.

blockstudio.json 

                {
  "users": {
    "ids": [1,19]
  }
}

      
Copy
functions.php 

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

      
Copy

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

Alternatively, you can also use the settings/users/roles setting to enable the editor for a specific role.

blockstudio.json 

                {
  "users": {
    "roles": ["administrator","editor"]
  }
}

      
Copy
functions.php 

              add_filter('blockstudio/settings/users/roles', function() {
    return ["administrator","editor"];
  });

      
Copy

This will activate the editor for all users with the role of administrator and editor.

Preview assets

By default, all assets will be enqueued to the editor. If you need to add additional assets, you can do so using the settings/editor/assets setting.

blockstudio.json 

                {
  "editor": {
    "assets": ["my-stylesheet"]
  }
}

      
Copy
functions.php 

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

      
Copy

Assets that were registered using wp_enqueue_scripts, admin_enqueue_scripts or enqueue_block_editor_assets can be added.

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

block.json 

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

      
Copy

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!