Last time we looked at the Create Block package, but we didn’t dig into the real superpower underneath it: @wordpress/scripts: the WordPress+Webpack build process.
While the block editor has limited the amount of CSS and JavaScript you need to write for a basic website these days, it certainly hasn’t eliminated it. In fact, if you’re looking for work as a WordPress developer, you should be prepared to spend time building out even more custom styles, custom interactions, and custom blocks- because that’s where the high-value work is.
I’ve used a lot of build processes over the years – Stylus, LESS, SASS, Gulp, Grunt, Rollup, Webpack, custom node scripts, and more- to get my CSS and JavaScript workflow as optimized as possible. The good news is that the WordPress core team now ships a build process fine-tuned for working with the block editor.
WordPress Scripts is a Webpack-based build process for developers building custom blocks or extending the block editor. It has automatic block.json detection and will even handle dependencies and versioning for wp_enqueue_scripts. I use it for everything from custom fields and panels inside the editor to my frontend CSS files. And because it’s built with Webpack, advanced users can customize it even further.
Watch the full video to learn more about the commands available, how it streamlines dependencies and assets, and how to have one build process for everything. If you have any questions, add them in the YouTube comments. And feel free to share this video- and hopefully this whole series- with anyone you think would want it.
Leave a Reply