Today we are launching Gutenberg Block Kit on Glitch. We are hoping this experiment will help anyone with an idea for a Gutenberg block to quickly prototype and build their block.

When you click the Remix button on the Gutenberg Block Kit project, you get a full JavaScript development environment right in your browser. Nothing to install, just edit and see your changes in the live preview.

After you click the Remix button, you’ll be taken to your own copy of the project. You can see a live preview of the block by clicking the “Show” button at the top. As you make changes to the block, the watcher will re-build the JavaScript and update the preview window.

Take a look at src/block.js. This is the core of your block. Try making changes to the edit and save methods. You can make CSS changes in src/editor.scss (for styles that should be in the editor) and src/style.scss (for styles on the published page).

When you are happy with your block, or you want to start developing in your own WordPress environment, you can download your block as a WordPress plugin. Click the “Download Block Plugin for WordPress” link on the preview page. The ZIP file can be uploaded to a WordPress site and used immediately.

If you want to learn more about how to develop Gutenberg blocks, take a look at the Block Editor Handbook. There you can learn more about how Gutenberg blocks work and follow along with the block tutorial.

We are using ParcelJS to watch for changes to the source files, which transpiles, bundles, and serves your code. See server.js:7 which tells Parcel to watch src/index.html as an entry point.

Gutenberg is made up of a number of packages, exposed on the window.wp object. Normally WordPress ensures that these are available, however the constraints of Glitch prevent us from running a full WordPress development environment. Instead, we bundle the Gutenberg packages offline and upload them to Glitch’s CDN. The CDN serves the packages up as a static asset. You can see how it’s built in gutenberg.js.

Any files you put in the plugin/ directory will be added to the ZIP file for your plugin. After you download it, you can continue working on your plugin locally See the JavaScript Build Setup guide for more about what you need on your local machine to continue developing.

If you have any ideas for improving Gutenberg Block Kit, please open an issue on the GitHub repository.