Starter Themes with a new build workflow

them.es Avatar

We’ve received feedback from our community that the now retired build workflow (using Gulp and/or webpack to generate the CSS/JS assets) included several package vulnerabilities that have not been fixed for quite a while and obviously have become unmaintained by the creators.

One could argue that this should not be problematic, as these dependencies only affect the local development system – and as long as the build process still works, there’s no need to change a running system.
But using obsolete and unsupported software can be dangerous and can break things “overnight”. Not to mention potential security risks that may arise in the web development stack.

So it was necessary to find a new simple, modern and future-proof build process for SASS-CSS compilation and JS-bundling
Fortunately the research did not take too long. The @wordpress/scripts package from the awesome Gutenberg community already comes with a proven and tested webpack configuration specific to WordPress development, which made it a perfect candidate to try out.

After some trial-and-error, the new build workflow worked pretty well and that’s why we decided to roll it out to all our Starter Themes (Full Site Editing, Bootstrap and Material Design) and include this new setup exclusively, meaning that Gulp (including its internal dependencies) is not needed anymore.

Start the development process:
$ npm run watch
Build and minify the assets:
$ npm run build

👆 Breaking change: Theme build directories have been moved from /assets/css and /assets/js to /build which aligns with the @wordpress configuration. If you want to include the new workflow in an existing theme, please have a look at the source code in the Github repositories of the Starter Theme and adjust the paths of the JS/CSS assets in functions.php accordingly. On the other hand, if you want to keep the old workflow, feel free to keep it as long as it works on your side.


Leave a Reply