Context:

After a few projects at Helio Interactive, the Chicago based WordPress Studio where I am currently Lead Engineer, I felt that I had gained a good enough feel of their workflow and systems to make my own contribution. Our workflow included cannibalizing page templates to get a head start on projects. Meanwhile, many client projects were converging in similar design patterns. I felt this was the perfect place to do some streamlining… I love streamlining.

The Gutenberg editor was source of inspiration, but as it was still in flux with the release date uncertain. Using WordPress’ template-part system as well as ACF’s powerful group field functionality, I created a modular system of blocks that would compartmentalize each feature we added to a project. This gave each client a customized website without our team having to start from a blank starter theme each time.

With the ability to store fields as version controlled .json files instead of post data, we could collaborate without risk of losing progress.

It was important to integrate with the team’s current way of doing work.  The modular nature of the framework meant everyone could build blocks in any way they were comfortable. Bootstrap classes were available to be used in the blocks markup or via @extend in SCSS, and more powerful flexbox based options were a peek away in newer blocks or available via mixins.

When a new project called for exotic functionality we’d already built, we no longer needed to reverse engineer our own work to find the relevant code. Instead it was neatly packaged in the relevant block files. The framework allowed us to take time away from re-creating functionality and invest it in what made each project unique instead.

Highlights:

The best part of building this framework was the feeling that I was providing my team not only with a valuable tool, but an opportunity to shift the way we thought about the building of websites. With it we took the first step to prepare our workflow for the future. It also meant that I did not have to type “.col-md-6” a million times this year.