Vite Plugin: Gutenberg Blocks
Part of southcoastweb's contribution to Free and Open Source Software (FOSS)
To read more about southcoastweb and our open-source software, go to our Open-Source page.
Gutenberg block development is still something of a work-in-progress for WordPress. Until recently, it required some major workarounds to develop more than one block to the plugin (we’re told it’s better now) and the tech-stack powering the whole enterprise is pretty ancient. In short, it feels like a strange no-man’s-land between a proper development experience and cycling with stabilisers on.
We thought we’d give a Vite-powered development process a go with Gutenberg, and while there are a few limitations (no Hot Module Reloading), it’s still a superior experience. For good measure, we even made a create-block script that makes adding new Gutenberg blocks to your plugin a breeze. Add in automatic block loading, and we’re quite happy with what we’ve got here.
- Create a new folder in your
wp-content/pluginsfolder to house your new block library
npm init -yinside your new plugin folder
- Install this package inside your new plugin folder (i.e.
npm install -D vite-plugin-gutenberg-blocks
npx initin your plugin folder to create a
developmentfolder and a
npm installto install the required node dependencies
- Now you can run
npm run createto start off the block creation script. Answer the questions and a new block will be created in your
developmentfolder. You can add as many blocks as you like and they will be automatically loaded by WordPress once you…
require_once 'register-blocks.php';in your plugins entry PHP file.
development folder you can now
npm run dev and
npm run prod to develop your Gutenberg blocks library with Vite.
- Automatic configuration of Vite
- Copies and creates required assets
- Externalised PostCSS stylesheet processing
- Supports PostCSS, SCSS and CSS stylesheets (.css or .scss)
- Watch mode for developing your block library
- Support for PHP-rendered blocks
Speaking of the last one there…
Dynamic Blocks (PHP-rendered)
Your average Gutenberg block is really just a fancy React mini-app that allows users to save HTML output into their post via the editor. When the output is delivered to the frontend, it’s generally just static HTML with some settings from Gutenberg’s editor. This works fine for elements like buttons, forms, galleries et al., but it’s not so good for things that require dynamic content, like posts or other pieces of live data.
We won’t go through the actual process of setting this up beyond what’s related to this package:
In your blocks
block.json file, add either
"render": "file:./template.php" or
"render": "file:./render.php" to the JSON (the plugin will only look for one of these two filenames).
Create the PHP file in your block’s
development folder. It will be automatically copied to your block’s build folder along with the other build files.
As previously mentioned, this plugin doesn’t currently support Vite’s HMR (Hot Module Reloading) mode, so you’ll have to manually reload the page whenever you make a change to your code. Wait until watch mode has finished rebuilding the block in response to your changes though.
Watchers run independently on each block, so once you start watch mode, a change to one block will only rebuild that one block, giving you a very quick development process.
What do you think?
Any thoughts/suggestions about this package can be posted on our GitHub repo.