TL;DR
- WP Rig now builds 10X faster on average
- esbuild, Lightning CSS, and Gulp 5
- Linting and PHPCS checks moved to more specific scripts
- Now supports Typescript and JSX natively
- Comes with a React-based Settings page configurable with simple JSON file
- Min. PHP version bumped to 8. PHP Type checking added.
Backstory
For the last year, I have been getting deeper and deeper into all things JavaScript. Typescript, React, Node – you name it. As someone who already understands plugin and theme development for WordPress quite well, I wanted to look and go beyond. I’ve been maintaining WP Rig for a few years now and I had still yet to fully understand exactly how the build process worked and how to truly control it. My understanding of Node was relatively novice, and as someone who had already learned Angular, React, and Stencil.js, I still felt like there was a lot going on in the JS universe that I was still not well versed on.
On my quest to change this and improve, I found myself wondering if WP Rig was still “modern” and “progressive” by today’s standards. Issues had been annoying me. Why does it build so slow? Why are dependency issues so common? Do we have to constantly be annoyed by Stylelint, ESLint, and PHPCS errors even if we are using it to build a theme that we will never distribute? Can’t we just selectively run these checks outside of the early phases of iteration? Should we really be relying on Gulp and Gulp plugins to do literally everything in the build? Why can’t I write in Typescript? Shouldn’t we be able to build React functionality within the theme? My mind began to open to the possibility of something greater than what I had inherited.
Version 2.0 was released in 2019. That was a 5+ years ago! Disruptions in JavaScript seem to occur almost monthly these days. While I give enormous credit and gratitude to the previous developers that worked on WP Rig, there have been enormous strides in JS-based build tools since then. I realized, it is my responsibility to keep this thing fresh. So here we are, at the end of 2024, and WordPress themes of 2025 demand more. I realized, it was time to tear this thing apart a bit and start rebuilding from the ground up.
Architecture
Gulp: While I had my issues with Gulp, it has proven effective. Updates seemed slow. However, as fate has it, Gulp decided to release a new major version (Gulp 5) earlier this year. So, for now, I decided rewriting the entire framework without Gulp was a monumental task that might prove too much for a single ambitious developer. So, I started by simple upgrading Gulp to the latest version. That’s a start. I decided to continue to rely on it for orchestrating tasks (which is what it is good at) and managing the image optimization.
JavaScript
I wanted to see if I could find a better, faster and more modern foundation for managing the transpiling of our theme assets. After some broad research into various modern JS frameworks, I found myself inspired by tools like Vite, Astro, and Next.js just to name some. This led me to esbuild. I thought to myself, why not give esbuild a shot at transpiling our JS? I wanted Typescript and JSX and esbuild handles both natively. After some promising proof-of-concept attempts, I realized I was onto something.
CSS
While PostCSS was good, I thought to myself, what else is out there? Can we keep all the best things about our current CSS workflow in Rig and improve it? Turns out, we could. I then found Lightning CSS. With a bit of tinkering and filling some gaps with some custom Node scripting, once again – success! With an all new gulpfile.js, simplifying the build altogether, and stripping out now unnecessary packages, WP Rig was now building 10X faster!
Features
I started to have so many ideas about what I wanted out of WP Rig. How could we dramatically improve the theme authoring experience? We need to streamline workflows, maintain simplicity, and allow theme devs to focus on what themes do best – style.
Theme settings
Previous versions of WP Rig supported settings. However, I became obsessed with the idea of a React-based settings framework a few years back when I got into block development. Unfortunately, the Site Editor has yet to introduce a proper API to allow theme devs to build their theme settings into that UX. So, I decided to do the next best thing. WP Rig now has a React component based theme settings page that can be added/removed using our existing component system. There is now an Options component that facilitates this new system. An important consideration here was that I did not want to force theme authors to learn JSX, React, components…it’s too much for many as has been made obvious by the continued hesitation by many (mainly web agencies) to adopt Gutenberg and full site editing. So, I decided to take inspiration from the EZ_Customizer component and allow theme authors to build out their settings fields by managing a simple JSON file. The app reads the JSON file and uses it to build out the settings fields. This initial implementation is fairly simple currently, but it is effective and it is a good foundation to iterate on in future versions with more field types. Furthermore, the settings auto-save via the REST API. It feels good.
Utility Classes
Default styles now come with utility classes for things like CSS Grid and Flexbox. These utility classes will likely grow in the future, but it’s a decent start.
Fonts
All font considerations have been moved to a fonts controller. Although WordPress now has it’s own build-in font manager, we thought theme authors would like a more straight forward way of adding custom fonts to their themes, so, there is now a home for these considerations. We recommend packaging your fonts with your theme for better performance and less reliance on CDNs. This could also be a decent home for icon libraries you might want to package with your theme.
Recent improvements added in 2.3 worth mentioning
- Add Site Editor compatibility (Full Site Editing) to your theme using a single NPM command.
- Improved PHPCS, Stylelint, and ESLint handling and supports latest version of WP Coding Standards.
- Support for later versions of PHP 8.
Try it now!
If you are interested in helping us test V3 before we push this major release please pull the V3 branch from Github and submit issues as you find them. Thanks in advance for your help in this effort. If you have ideas for features you think should be added to WP Rig, please submit your feature requests here and feel free to tag me.
Possible future features
- Possibly replacing Gulp altogether in the distant future for something like Task.
- A WebP conversion process for image processing system.
- A more obvious cache busting system for scripts/styles