In early 2018, WordPress was at the cusp of launching Gutenberg, its brand new block-based editor. At this point few (if any) WordPress themes had been created specifically with this new software in mind.
A frequent concern in the WordPress community was “If every WordPress site is all made of the same blocks, won’t they all look the same?”
With this in mind, I teamed up with my friend and colleague Allan Cole to build a theme that leveraged the block editor, but didn’t look like the block editor at all.
Getting Started
To get started, I built a sketch file that included all of the default Gutenberg blocks at the time:
This gave me a birds-eye-view of the blocks that were available for customization. I took these blocks and created a simple page layout — a homepage for a band.
From there, I began adjusting font styles, colors, and spacing to make the blocks into something unique.
Iteration and Expansion
From there, I created more page layouts that used the same visual aesthetic. I also built out prototypes for mobile and desktop to see how they felt in context.
Systematizing
From here, I extracted the customized blocks into a separate file, and began to standardize them. I made sure that each H2 was the same, that the colors and spacing were all consistent, etc.
The blocks format naturally led to a sort of atomic design-style design system. For example, the H2 block became its own atom, which in turn became part of a Cover block molecule, and so forth.
Implementation + Launch
While I was working through that previous step, Allan began development. We eventually joined forces and built out the rest of the theme together. An atomic-style design system fit very well into theme development. We built out the system of atoms and molecules to leverage Sass variables, and then expanded it out to the full page layouts.
We launched the theme in May 2018, and gave a talk about our experience building the Music theme at WordCamp Boston in the summer of 2018. Music was one of the first themes to be truly built for Gutenberg, and our work on it paved the way for Allan and I to lead WordPress’ default Twenty Nineteen theme together.
Today, the theme is available on GitHub. (Though… it’s likely a little buggy since it was built so long before Gutenberg’s launch. ?)
More Details
- Designing Themes with Gutenberg Blocks and Sketch on ThemeShaper
- Designing a Gutenberg-Powered Theme on ThemeShaper
- How We Made Our First Gutenberg-Powered Theme on WordPress.tv