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.
Take a look at
src/block.js. This is the core of your block. Try making changes to the
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.
How it works under the hood:
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
Any files you put in the
If you have any ideas for improving Gutenberg Block Kit, please open an issue on the GitHub repository.