Designing Themes with Gutenberg Blocks and Sketch

Follow Kjell Reigstad’s process as he explores designing a block-driven theme with Sketch, for the Gutenberg era.

There’s been an exciting discussion happening around the changes that Gutenberg will bring to themes. At Automattic, we’ve begun to prepare for Gutenberg by reevaluating our theme design and development processes.

As part of that work, I did some thinking about how I might start designing a block-driven theme today and what sorts of resources I’d want to have. The most important thing that came to mind was a way to access and customize all of the core Gutenberg blocks with a few clicks. This would allow me to quickly test and iterate on block design without having to dig into code. I do a good deal of my design work in Sketch, so I began to search for a way to make this possible there.

Luckily, there are already a few Gutenberg-related Sketch files in the wild. The Gutenberg Contributors page on GitHub and the Design Principles & Vision page on are great places to start. These are mostly aimed at the Gutenberg editing interface, however, and didn’t quite accomplish what I was looking for, so I ended up building a new file instead:


This new Sketch file contains symbols for all of the default Gutenberg blocks (with the exception of all the embeds, since those aren’t very customizable). With this set of symbols, it’s possible to quickly build a layout composed entirely of Gutenberg blocks using Sketch:

It’s actually pretty fun to use! In a way, it’s Gutenberg — but for Sketch. 😄
From here, it’s easy to start customizing styles:

I took this method for a spin and tried to mock up a theme for an imagined restaurant. To get started, I built out the page structure using default Gutenberg blocks:

From there, I started doing some light customizing. I cut myself off after a while, but the end result looked fairly decent:

I find this pretty cool. It’s an example of what a block-driven theme might look like with just a little bit of CSS customization.

From here, I could easily keep going and put together a complete, modular design system for this theme by customizing the rest of the Gutenberg blocks. I could view the blocks all at once on the Symbols page, and quickly build out a wide variety of layout options to make sure my styles held up to intense layout customization.

I almost ended there, but I decided to confront a lingering concern I’ve had about Gutenberg: I’ve feared that if we lean too much on Gutenberg for theme layout, we’ll end up with lots of very similar, “blocky” themes. The restaurant site I designed above looks fine, but it’s also clearly made of blocks. I wondered if it’d be possible to create something more experimental using this same Sketch file as a base.

So I took another stab at a pretend site design (this time for a band named Superserious), and forced myself to break out of the blocks a little more. Again, I began with a pure-Gutenberg layout:

But this time, I was much more aggressive in my customization and aimed for a more tailored mobile experience with bold typography:

This was a fun exercise, and it helped allay my fears a bit. That first Cover Image has all the usual pieces, but they’re styled in a very opinionated way. The rest of the blocks are fairly standard, but they still stand out because they exist within a heavily stylized, off-balance frame. The overall effect is drastically different from the theme in the previous exercise.

This process was very useful for me, and I’d love to see if it’s useful for the rest of the community as well. You can download and contribute to the Sketch files here:

The repository includes a basic Sketch file with just the symbols, plus all the text hierarchy styles (H1, H2, etc). I also created a library file in case that’s preferable for anyone. We hope to update these files periodically, and would love to hear feedback from others who use them.

In the meantime, we’ll keep experimenting with ways to design themes in this new Gutenberg-based future.

Styling Themes for Gutenberg

What we learned by developing three themes with Gutenberg in mind.

At the Automattic Theme Team meetup in December, we focused on several Gutenberg-related projects. The first one we’re sharing is a set of Gutenberg-friendly themes based on Underscores.

The project’s goal was to help us think about our themes differently, dig into adding theme support for Gutenberg, and as a byproduct, do some testing of Gutenberg itself.

Six team members participated in this project, and it resulted in three themes which are still in progress, and currently available on GitHub.

What is Gutenberg?

Gutenberg is the new block-based content editor currently being developed in GitHub for WordPress 5.0. Until it’s merged into core, it’s available as a plugin.

It’s really going to change the WordPress publishing experience! From the Gutenberg page:

The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives. These content blocks transform how users, developers, and hosts interact with WordPress to make building rich web content easier and more intuitive, democratizing publishing — and work — for everyone, regardless of technical ability.

The Themes

The three themes we developed during the meetup are called Fashion Blog, Handicraft, and Ohana. We decided to try to make these themes CSS-only to help keep the focus on Gutenberg itself and let us build on the recent work the team’s been doing with Style Packs. This turned out to be an ambitious restriction — a little more on that later — but it made for an interesting design challenge.

Fashion Blog, Handicraft and Ohana are currently available on GitHub; you can learn more about each theme there and check out exactly how they were set up. The themes are still works in progress and have some rough edges. The end goal is to get them ready for

The Process

Over the course of a few days, we researched and decided on an audience for each theme, designed and built them, and added Gutenberg support.

We opted to use a one-column design for all three themes, to best accommodate the “full” and “wide” block alignment options in Gutenberg.

Though it can vary from theme to theme, this is how Handicraft styles Gutenberg’s wide alignment (on the left) and Fashion Blog styles the full alignment (on the right).

Adding Gutenberg Support

You don’t actually have to do anything to use Gutenberg with a theme, but by declaring theme support you can add two optional features: the “wide” alignments (full width and wide width), and custom colors for the block-color palettes.

The following example, when included in the setup function in functions.php, will add both:

* Add support for Gutenberg.
* @link
add_theme_support( 'gutenberg', array(

    // Theme supports wide images, galleries and videos.
    'wide-images' => true,

    // Make specific theme colors available in the editor.
    'colors' => array(

) );

Whether or not you include custom colors in your theme, Gutenberg will always include a color picker with the palette, for further customization.

Gutenberg’s default color palette, shown while editing the Button block.

Styling the Themes

In general, the default blocks don’t need styling — Gutenberg already includes styles that match each block’s functionality. For example, the Gallery block already has the styles needed to split your galleries into different columns, and the Cover Image block will place the text and image added on top of each other, without the theme’s help.

If any of the styles don’t fully suit your theme’s design, you can adjust them as needed. One thing we noticed while we were developing these themes was Gutenberg’s distinct pill-shaped button style, which might not work with every theme.

On the flip side, themes are fully responsible for figuring out how the “wide” and “full” alignment styles should be handled, if they support them. This makes sense, since support is optional, and exactly how they should look can vary depending on a theme’s individual style.

At the time of writing, the Gutenberg theme styles these two alignments by setting max-widths for specific HTML elements, with a wider max width when either the .widealign or .fullalign classes are used.

In our three themes, we approached it a bit differently, setting a max-width for the page content, and instead using CSS to stretch those wider elements outside of it. We used vw and stretched the wider elements based on the screen size:

@media (min-width: 750px) {

    .alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: auto;
        max-width: 1000%;

    .alignwide {
        margin-left: calc(25% - 25vw);
        margin-right: calc(25% - 25vw);
        width: auto;
        max-width: 1000%;


This approach works, but because vw includes the width of the vertical scrollbar as part of the whole screen width, you can get a little horizontal scrolling. One fix is adding overflow: hidden to one of the page-width elements further up the HTML tree.

If you didn’t want these elements’ widths to be based on screen size, you could also set a specific max-width. There’s no one “right” way to approach these styles, and I’m sure more and more examples will come out of the woodwork as more themes add styles for Gutenberg. For example, Justin Tadlock has shared his method using different calc values, and Joen Asmussen has blogged about his approach of applying max-widths to all child elements that aren’t wide or full width.

In our themes, we also kept any block-specific styles separate in their own stylesheet.

Adding Editor Styles

To make the editing experience more what-you-see-is-what-you-get, you can add Gutenberg editor styles using enqueue_block_editor_assets. It’s similar to how editor styles can be enqueued for the current TinyMCE editor. This makes sure what a user sees when building their pages best matches how the content will actually look with your theme when published.

Here’s an example of enqueuing an editor-specific stylesheet:

* Enqueue editor styles for Gutenberg

function theme_slug_editor_styles() {
    wp_enqueue_style( 'theme-slug-editor-style', get_template_directory_uri() . '/assets/stylesheets/editor-style.css' );
add_action( 'enqueue_block_editor_assets', 'theme_slug_editor_styles' );

Like with the TinyMCE editor, you can also include fonts. So for example, if your theme is enqueuing fonts from Google, you can include them in the Gutenberg editor, too:

* Enqueue editor styles for Gutenberg

function theme_slug_editor_styles() {
    wp_enqueue_style( 'theme-slug-editor-style', get_template_directory_uri() . '/assets/stylesheets/editor-style.css' );
    wp_enqueue_style( 'theme-slug-fonts', theme_slug_fonts_url(), array(), null );
add_action( 'enqueue_block_editor_assets', 'theme_slug_editor_styles' );

Unlike the TinyMCE editor, Gutenberg’s editor styles include the post title:

An example of Ohana’s editor styles.

The editor styles need to be pretty specific to make sure they’re not applied to other elements of the page outside of the editor — Rich Tabor has a good post here about his experience with this behavior. Gutenberg includes specific classes around different elements in the editor, so you can prefix selectors more generally with the class .editor-post-visual-editor, or use more specific classes to target individual blocks — for example, styles for .editor-block-list__block[data-type="core/heading"] h1 would only be applied to h1s inside of a Heading block.

What We Learned

Overall, this project was a great way to ramp up quickly on some Gutenberg-theming basics, and get our feet wet. Some specific things we learned from this process include:

  • The Gutenberg default block styles are numerous and can be a bit opinionated. This is good, in that you can rely on Gutenberg to do a lot of the heavy lifting, but there are some styles that would need to be updated to match individual theme styles.
  • It can be tricky to set up the wide and full-width styles; as more themes add styles for Gutenberg, it’ll be interesting to see all the different ways themes handle this.
  • Setting up the block styles for the back-end editing experience was more involved than any of us had anticipated. It’s very much like adding editor styles to the current TinyMCE editor, but some Gutenberg blocks have very specific classes that needed to be overridden.

We also learned a couple non-Gutenberg related things:

  • From a project-planning perspective, we could have spent more time narrowing down the kinds of themes we wanted to build — and the actual designs — prior to the meetup. This would have left more time to focus on the Gutenberg part of each theme.
  • In the end, it wasn’t possible to complete the project without making edits to these themes in addition to CSS. On top of the PHP changes needed to support Gutenberg’s optional features, we needed to make edits for common — like adding social menus, and more Content Options support — and for the designs themselves, like enqueuing Google fonts.

Next Steps

Our goal is to get these themes launched on To get there, they still need some functionality, like the annotations for’s custom fonts and colors, WooCommerce support, and styles for widgets.

We hope that sharing this process is helpful for your own Gutenberg journey as themers. We’d love to hear about your adventures.


Lodestar Launches

Lodestar is now launched on Designed by Mel Choyce and developed by Laurel Fulford, Lodestar is a precursor to Twenty Seventeen, and you’ll see echoes of that default theme throughout, starting with its multi-panel front-page layout. A filterable portfolio section is available through Jetpack, along with a stylish testimonials page.

Mel shares a bit about Lodestar’s origins:

Lodestar started as a restaurant theme named “Porterhouse.” I designed it before we had a good solution for multi-panel homepages, so it was tabled. Once we had a couple solid multi-panel homepage themes, I redesigned it as a more generic business theme.

Explore the Lodestar demo, study the setup guide, or download and give it a try.

Lodestar screensnshot

Studying TextBook

We’re pleased to announce the launch of TextBook in the directory. Created by Allan Cole, TextBook helps schools, colleges, and other non-profit organizations to distribute and archive information in an easy way. Supported by Jetpack, it includes a Featured Content area for highlighting key posts or pages, a social menu, and Testimonials, ideal for showcasing quotes from alumni, staff, and students.

When designing TextBook, Allan researched some of the challenges facing schools when creating their sites, and noticed that many educational sites had little access to good photography. TextBook minimizes that problem:

One of the main goals for TextBook is how it’s designed to look great when you only have a limited amount of content. Even if images are smaller, or low quality, it doesn’t take away from the design.

Check out the TextBook demo, peek at the setup guide, or download and take it for a spin.

TextBook screenshot

The Promise of Gutenberg: Themes as More Design, Less Baggage

Gutenberg promises the vision you have takes shape in the editor, instead of something you can’t see. Why’s that so powerful?

It happened again.

I sat with a potential WordPress themer, who wanted to know how to get started the right way with theme development. He’s a user experience professional by day, looking to up his coding skills.

He pointed to the WordPress editor, and said something like, “I understand HTML and CSS, but I’m not sure how to make something beyond putting it in there.”

We’ve all been there. Having that vision of what you want your site to look like, and not knowing how to get there. Gutenberg promises the vision you have takes shape in the editor, instead of some PHP file or a special plugin that isn’t truly native to WordPress. That’s powerful! It shifts much of the customization control from the themer to the person using the theme.

Today, if you’re trying to get into WordPress development, you might start by tweaking an existing theme. Then making a child theme. Then diving into a custom theme. My user-experience professional friend did just that. He’s already customized a theme and made a child theme. But the whole world of specialized WordPress theme knowledge can intimidate even professional web workers. Imagine how it feels to new users of WordPress who have never built a website before?

But with Gutenberg, people – professionals and beginners alike – can begin building what they want. Now, Gutenberg will no doubt need its own specialized knowledge. But at its heart, it will transform what a theme means to WordPress. They can become more about pure design, powered by the simplicity of CSS.

You might be saying, “But you can already use CSS now to change a theme’s design.” That’s true, but much of a theme’s structure gets determined by and locked away in template files. Hard to change unless you start learning how to “theme.” But with much of that structure and markup becoming blocks that can be added to a theme, it becomes easier for people who aren’t themers to see different possibilities.

Say goodbye to lots of custom widgets and theme options. Oh, and to limiting page templates. The future of WordPress themes can become more about empowering users to work on their vision instead of always having to learn how to “theme.” It starts in the editor and not with the theme.

Photo by Dmitri Popov.

Themes are Mission Control

When we think of space flight, we often think of the thing that gets us there: the shuttle, module or rockets that take us out of this world.

However, in the early days of space flight programs at NASA, one man realized how important control from the ground would be to quickly evolving missions. Christopher Kraft pioneered the creation of Mission Control, the place where dozens of engineers, scientists and staff on the ground assist the astronauts in carrying out their mission from thousands of miles away.

About the Flight Director, the person in charge of Mission Control, Kraft said:

[T]he guy on the ground ultimately controls the mission. There’s no question about that in my mind or in the astronauts’ minds. They are going to do what he says.

The notion of Mission Control makes a good metaphor for a WordPress theme. Themes sit at the center of the WordPress experience. They run the show. WordPress is the ship and rockets that get us there. Without a theme, the mission won’t be successful. Sure, at its core, WordPress is publishing software, but many more people interact with the front end of a site than its back end.

So how do we start thinking of themes as an experience, rather than part of the experience?

Design how the pieces fit together. Most themers see the parts of a theme experience as separate. I did too, until recently. When I say separate, I mean as different parts of one flow. We often create the theme and the documentation with little thought as to how customers get from the theme to the help text when they need it. We also don’t spend time on onboarding or setup with customers. All that matters though, and it can help get a customer to success and make them feel like a success. We need to pay more attention to how those parts connect for a better experience.

Be consistent. Themes in WordPress have this great strength because they can do nearly anything. Their biggest weakness? They can do nearly anything. This means how a theme behaves can vary widely from one to the next. We’ve tried to address this in projects like Underscores and the TUX (Themes User Experience) list, but you can never do enough. I’d like to see themes only vary greatly from the norm if it accomplishes an important design goal for the customer.

Mind the internals. Recently, we had our support team at share why themes frustrate our customers. So much of the frustrations boil down to what a customer might not have control over in a typical theme. Things like how an image is cropped or how WordPress Core handles some default data. Experimenting with how these types of things work for your customers can mean they’re happier in the end.

If you make these items a bigger part of your theme design process, you’ll have more control over your theme’s experience. And your customer’s missions will have a greater chance of success.

Photo courtesy of NASA.

Balancing Options vs. Overload

On, one thing we’ve been focusing on is making themes that just work. It’s a bit of a balancing act; it’s very tempting to allow customers to control every aspect of their theme, because it seems like the simplest way to give them what they want.

That idea may sound great to customers, but having panels of options in the Customizer and an armload of documentation to figure them out is daunting. You can change things, but you’re also faced with making dozens of small, similar decisions about various aspects of your site, and deciphering the purpose of various controls.

It is true that in WordPress themes, some options are necessary. When designing and building a theme, it’s important to distinguish what options fit the actual intent of the design, and what options are being added for the sake of adding them.

You can often figure out which is which by tracking common pain points.

One way to do this is through support requests. On, we have a dedicated, talented team of Happiness Engineers who interact with customers every day. As Gary Murray wrote in a recent post, support teams are an important link between our work and our customers, and an invaluable wealth of information.

For themes, the support requests often involve how to set up a theme or use different options (which is why making themes that just work from the get-go is important). But other requests have to do with customizing a theme in specific ways. Some are unique to a customer’s specific goals; others come up again and again from different customers, either in the same theme or across several different themes.

In the Ixion theme, we recently added an option to control the opacity of the overlay used on front page photos, after several customers asked about changing or removing it.

Ixion with its two new options.

One purpose of the dark overlay is to ensure the text on top is legible against the photo. But if you’re starting with a photo that’s already pretty dark, the overlay isn’t needed and can make it hard to distinguish details in the photo. We were able to add this option while maintaining the original appearance, so customers who weren’t troubled by the opacity didn’t know the change happened.

Another feature that came from frequent customer requests was Content Options. A brainchild of Thomas Guillot, Content Options are a way for customers to make small visual changes on their site, like hiding the date, author name, or featured images. Rather than adding the options to individual themes, it’s a feature available in Jetpack and that themes can support. That way, the options are available in several themes and implemented exactly the same way.

Both additions were guided by the goal of keeping things simple, balanced with following actual customer requests.

When looking at adding options to a theme, there are a few things that can help to keep things simpler:

First, aim to make a theme that just works on activation. If the design’s not possible without multiple options, rethink it. If options are necessary to get the theme to work well with different kinds of content, find a way to make the theme more forgiving instead. Make the theme do as much work as it can by itself.

In a similar vein, make the theme make the decision. You could allow customers to switch a sidebar position, or make the header sticky, but unless it’s a very common request it’s best left out. Chances are, one option looks best and makes the most sense for the theme you’re building — use that one.

Use existing WordPress functionality rather than custom options. I don’t mean stretch the options beyond their original intent, just don’t reinvent the wheel. For example, look to use the custom header image or featured images in the theme before adding another image upload option to the Customizer.

When adding options, rethink your approach to customization. Alright, you’ve discovered your customers can’t live without being able to change their header’s layout. Rather than having separate controls to move each individual item — logo, header image, menu, social links, site title — is there another way to approach this? Aim for simpler, more opinionated controls to limit the decisions customers have to make. Basically, make your options smart.

Last but never least, user test, talk to your customers, and work directly with them when you can. They’ll help guide you to that point where your themes can help them feel empowered, but not overwhelmed.

Photo by Patryk Grądys on Unsplash.

The Next Chapter for Themes

Every few months I read a post about how the WordPress theme business has shrunk. The authors always reach a similar conclusion. Sales have dwindled. Competition has increased. Putting food on the table, finding a niche and standing out is near impossible.

It may not be so impossible though. With a new editing interface on the horizon, the theme landscape will change in a big way. That editing interface, and eventually better site customization, means we (those who create themes) will all have a chance to redefine what a theme is and means to people who use WordPress. It will be new, fertile ground to discover – the next chapter for themes. We just can’t make the same mistakes we’ve made before.

A long time ago, especially in Internet years, you could sell a collection of well-designed WordPress themes and make a living. These became known in the WordPress space as premium themes. What made them “premium” was loosely defined. They often sported a unique look or carried interesting features. As a consumer, premium themes always seemed more special to me. They took risks. That runs against what we say on the Theme Team at, where we do nothing but create WordPress themes: The only difference between a free theme and a premium one is the price.

As more and more theme shops sprang up, the feature race began. Many themes became as complex as WordPress itself. Designers and developers had less time to experiment because we spent more time glancing over our shoulders. What’s the next trend? What’s this other theme shop doing?

To correct for the complexity, the larger theme ecosystem became obsessed with standards. Like making sure a theme did things the WordPress way or always met “best practices.” The web industry as a whole also continues to obsess over and rely on build tools and frameworks, sometimes to a fault. They should solve technical hurdles for us. But do they? Sometimes they do at the expense of our customers. Make no mistake, I’m not arguing against best practices or tools. We do the same thing. However, the status quo, even if it means well, can blind you to what’s important.

What’s important, you ask? Our customers. Doing the invisible things that make their experience its best. Focusing on accessibility, performance and security. Making sure the the small screens look just as good as the large screens. Gutenberg, the project name for the new editing interface, will make one theme become many. A customer using a theme will be able to bend it many different ways – turning the focal point of the theme from its capabilities to its design.

Customers want their sites to look just right. They don’t want to learn a theme. So when the new age of themes begins, promise me you’ll focus on what they want. You won’t get distracted by the many different ways to extend this new editor or become mired in all the ways to prevent the abuse of customizing it.

This matters. Your customers need you. And you’ll stand out and put more food on your table.

Photo courtesy of Hermann.

The Developer’s Guide to Supporting Your Themes

At this year’s WordCamp Europe, some members of the support team brainstormed how we might be able to share support skills and strategies with the broader WordPress community. We decided to offer some workshops to share support knowledge, and the first one –  by yours truly – has been announced. Details are below.

Hope to see you there!

Update: The recording, slides, and notes are available.

The Developer’s Guide to Supporting Your Themes

Providing support for your themes offers tremendous opportunities to educate WordPress users, from explaining how to make a child theme to offering simple CSS customizations. It also presents challenges, like figuring out how to help people who aren’t tech-savvy or need support beyond the scope of what you can provide. While many developers dread doing support, with some concrete strategies and techniques in hand, helping users doesn’t have to be a chore – and can even be fun! This session looks at how to make your themes’ users happy while feeling a sense of satisfaction from your own support efforts – a winning combination in the world of theme development.


Wednesday, August 23, 2017, 16:00 UTC. It will last for an hour and include Q&A.


The session will be run via videoconference and will be recorded and posted later for those who can’t make it. Please download the free Zoom app ahead of time. You can run Zoom on most desktop and mobile devices.

A link to the Zoom teleconference will be provided in the #forums Slack channel about 10 minutes before the session begins.


In her role as Theme Whisperer on the Theme Team at Automattic, Kathryn Presner provides support for hundreds of themes. She began helping people as a volunteer in the forums back in 2011 and was immediately hooked.

Featured image by Pixel Fantasy (CC BY-NC-ND 2.0)

The Future of Underscores and A New Committer

The title may strike you as a bit ominous, but fear not. Underscores, our popular starter theme for WordPress theme development, isn’t going anywhere. As we continue to push for consistency in themes and imagine what they might become with Gutenberg, we’re bringing our attention back to Underscores. 🚀

For the last year and a half, we’ve experimented with a new starter-theme generator called Components. It was a way to make a few different theme “types” comprised of different components. The starter themes born from it brought with them more code and styles, and gave theme authors a bigger head start in their work. The generator we built to piece the different components together got complex quickly, though. We created a plugin to test builds locally and struggled with a seamless way to make many starter themes from one code base.

We learned a lot, though. We worked on Components at two team meetups, made almost 900 commits to the project and launched dozens of themes with it. However, we hit a point where we realized we had over-engineered parts of the project. The original idea is still solid: make starter themes do more by crafting them out of building blocks. But we didn’t hit the mark, so we’re retiring Components, and looking to bring some of what we learned there to Underscores.

In the last year, we’ve gotten a lot of questions from the community about Underscores and whether we had abandoned it. No way! It’s a stable project, and we enjoyed working on something new, away from it. It gave us better perspective and more ideas for the future of Underscores.

We also know that involvement from the community is vital. It’s been a while since we added our first contributor external to Automattic. To that end, we’ve given long-time Underscores contributor Ulrich Pogson commit access. He’s also a contributor to WordPress, most frequently as a member of the Theme Review Team. We’re excited to have his expertise and passion for world-class themes as part of the project. Please join me in welcoming Ulrich! 🎉

It’s always hard to let go of a project, in this case, Components. But it shouldn’t be, when you walk away with more knowledge than before. It has us excited and reinvigorated about Underscores and its role in the future of theming. And we’re glad Ulrich will help us along the way!