A couple months ago, I created a Sketch document to assist with the design of block-driven themes. I posted about that here on Themeshaper, and provided a couple short examples of how it could be used in a theme design workflow.
Since then, Allan Cole and I have been working to make one of those examples — a site for an imagined band named Superserious — into a working example of a Gutenberg-powered WordPress theme. We named the theme “Music.”
Allan and I set out to experiment, learn, and create a resource for the community. We’ve documented our experience designing and building this theme, and will be publishing our notes in a series of posts here on Themeshaper.
To kick things off, we’re releasing Music on GitHub today. We’d love for you to give it a spin, tinker with it, and explore how it works with Gutenberg. Here are a few things to look out for:
Design
Our design goal for the theme has been to show that it’s possible (and encouraged!) to make a Gutenberg theme that doesn’t necessarily look like Gutenberg. We wanted to create something bold and a little experimental; a theme with somewhat aggressive, non-standard styles.
Gutenberg gives users unprecedented control over their site design, opening the door for variety and experimentation. Our favorite example of this is our cover image blocks. They look great out of the gate, but users can adjust the image, alignment, and color to achieve a wide range of looks:
Development
You’ll be happy to hear that the overall theme development process wasn’t all that different with Gutenberg. Common patterns like headers, footers, and loops work just as you’d expect in a Gutenberg-powered theme.
In many areas, Gutenberg makes things easier for both users and developers. For instance, full-width header images used to require a custom-built customizer or theme option solution, but now they’re essentially built in. This was important to keep in mind while building the theme, and was a very positive change for development.
Creating stylesheets for blocks was pretty straightforward. Expanding on the built-in stylesheets in _s, we added a blocks.scss file to the SASS directory and placed all of our block-specific styles and overrides there. This kept everything nice and organized and is likely to appear in _s in the future.
Since Gutenberg is output by the_content(), we learned to take special care with any wrapper divs that might clip or obstruct the expected behavior of Gutenberg blocks. We’ll talk more about that in a follow up post.
Block Styles
We’re truly excited about the custom editor styles that ship with Music. These styles are a breakthrough: they give users a much clearer sense of what their visitors will see on the front end.
Best of all (for theme developers at least), the editor styles were a breeze to integrate! We built all of these in over the course of just a few hours.
Like most of the work we do, the Music theme is open source. You can find it on GitHub:
https://github.com/automattic/musictheme/
If you’d just like to see the front end, feel free to click around our demo site here:
https://musictheme.mystagingwebsite.com/
In many ways, designing and building this theme was similar to the way we’ve made themes in the past — but we did carve out a few new practices along the way. Allan and I will be sharing them with you in upcoming posts. In the meantime, we encourage you to download, install, and experiment with Music yourself!
Read part two of this series: Designing a Gutenberg-Powered Theme: Music
ThemeShaper 
8 responses
Very interesting and inspirational!
I see you use a trick to hide the actual post title and use a Gutenberg blog to show the hero area. Do you think there’s a way to connect the content of the hero content with post title and other post attributes like post date, author?
This was a bit of a struggle for us early on — we’d have loved for Gutenberg to handle that stuff out of the box. For now at least, Gutenberg can only touch what’s inside of
entry_content(). We think this might change in the Customization phase of Gutenberg though.For now, we just used a custom page template that hides the post headers. This was definitely more of the experimental parts of the theme… it isn’t an ideal solution, and is mostly meant to give you a sense of what might happen someday when Gutenberg expands to have more control over the whole page. For that reason, the “Hide Page Header” template not the default, and is also not required to achieve the look you see in the Block Styles video above — the actual Tour page in our demo just uses a standard page header, styled to match the cover image block.
Thanks for your reply. The connection between Gutenberg blocks and the WordPress data is crucial if we want to control the page layout in the frontend. Without that, everything is just inside the post content, which makes it’s quite limited.
I see some page builders like Elementor and Beaver Builder have resolved this problem by creating an add-on for their main plugin to allow users to customize the website layout using the builder. It might be something to consider in Gutenberg, too.
Anyway, what you did is awesome and I see a bright future for theme authors. Now the imagination and CSS skill are the only limit!
This is incredible work. I feel like I’m seeing the future of WordPress Themes roll out.
This is awesome!
> to make a Gutenberg theme that doesn’t necessarily look like Gutenberg.
Can you explain a bit more about this? What’s a Gutenberg theme that does look like Gutenberg?
> Can you explain a bit more about this? What’s a Gutenberg theme that does look like Gutenberg?
Sure! What I mean is just that the theme adopts styles that vary greatly from the default. Our cover image block is the best example of this: it works just like cover block, but it looks drastically different from the default Gutenberg cover image block.
This is good work!
Music- wow thats cool name for a theme and thanks for updating on your development process of this beautiful theme.