Now that WordPress has React-powered editor with code decoupled from WordPress, we do not need WordPress as a dependency when developing block plugins. This can speed up block development. In this article, I will show you how to use Codesandbox to develop blocks.

The proposed block block library should allow for WordPress plugins with only JavaScript, CSS and a block.json file. The structure of this template is only 1 PHP file -- the assets.php file generated by wordpress-scripts -- away from being a complete plugin.

Quick Steps To Start Block Development

I created a CodeSandbox template to start block development. You can use this template to start developing your blocks. I started by cut and pasting the code in the "playground" story of the Gutenberg repo's Storybook.. This minimal implimentation of Gutenberg has the setting sidebar and the main editor area. You can insert the block from this sandbox and the core blocks. The sidebar is on the top, I didn't add extra CSS for that. It's a little odd at first, but I think it will help me focus on settings and block seperately. I might change that.

This is now my two step process for starting development of a block:

1. Click the "New Sandbox" option and then choose to create from a template.
2. Search templates for "WordPress Block" and choose my template.

You can then open the src/block directory and start working on your block there. I added an block.json file, which sets block attributes, index.js that collects the object of settings you would pass to registerBlockType in your plugin and a componet for the Edit callback, as well as it's tests.

The block is registered for you in the Editor component.

In the Editor component, I commented out this code, beacuse it can make things run very slow if you add a lot of blocks:

  useEffect(() => {
    let previewHtml = serialize(blocks);
    console.log(previewHtml);
  }, [blocks]);

What that does is, every time blocks are updated, it converts them to HTML and echos it. That's cool and useful for testing. Also you could build a live preview with it. Have fun.

Then What

Codesandbox projects can be linked to a git repository. At some point you should start making commits. Once a block is ready, you can add a main plugin file and use the build command of wordpress-scripts. You have a WordPress plugin now!

Have Fun

Follow Me On DEV and Twitter.

Use this button to start your own blocks: