Creating a Block-based Theme Using Block Templates

This post outlines the steps I took to create a block-based theme version of Twenty Twenty. Thanks to Kjell Reigstad for helping develop the theme and write this post.

There’s been a lot of conversation around how theme development changes as Full Site Editing using Gutenberg becomes a reality. Block templates are an experimental feature of Gutenberg (as of 7.2.0), and using them to create block-based themes is in exploratory stages of development. 

A block-based theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, …), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.

Gutenberg Handbook

Before diving in, I’ll reiterate that much of how this works is subject to change. This spec is in a very early stage. I hope by writing this, your interest is piqued to learn more and contribute your own experiment to the WordPress theme experiments repository.

Step 1: Create the theme project

In its simplest state, a block based-theme’s structure should look something like this:

theme
|__ block-templates
    |__ index.html
|__ block-template-parts
    |__ header.html
    |__ footer.html
|__ functions.php
|__ index.php
|__ style.css

This is refreshingly simpler than most WordPress theme boilerplates. Here’s a quick overview what each file and directory does:

  • block-templates/: page templates that are composed of blocks. These follow the same template hierarchy as traditional themes.
    • index.html: the primary / fallback template to generate a post or page. (Analogous to index.php in traditional theme templates.)
  • block-template-parts/: the common collections of blocks to be used in block templates.
    • header.html: The global header, expressed in Gutenberg-generated HTML.
    • footer.html: The global footer, expressed in Gutenberg-generated HTML.
  • functions.php: This contains the usual theme setup and any other reusable functions.
  • index.php: This is actually just an empty file. You can technically remove it, but it’s a good habit to include an index file in every directory.
  • style.css: Contains your theme’s styles as usual.

Recreating Twenty Twenty as a block-based theme required adding a few extra stylesheets. Overall, I chose to add no extra page templates to keep the demo as understandable as possible.

Step 2: Create the block templates + block template parts

There were just two that needed to be totally rebuilt as blocks: the header and footer. The process for turning these areas into block templates was something along the lines of:

  1. Attempt to create the template parts in the block editor
    • This can be done in a draft post or page. If you’ve enabled the Full Site Editing experiment in the Gutenberg plugin, you’ll see a new admin panel area Appearance/Template Parts — an area where in the future I could create, store, and edit the block template parts in my theme.
  2. Style them as closely as possible using the editor
  3. Add block style variations + additional theme CSS to address any gaps that the core editor
    • Most of these styles were already present somewhere in the Twenty Twenty theme CSS, so I just needed to make minor modifications to assign them to the new blocks.

Step 3: Save those block templates + template parts as distinct files

When Full Site Editing is enabled via the Gutenberg > Experiments panel, Gutenberg will expect that your theme provides block templates, overriding the normal templating behavior:

Once I had my template parts designed and displaying properly, I would switch over to the Code Editor view, copy the markup generated, and paste the code into its respective file within my theme directory’s block-template-parts folder.

Step 4: Add theme starter content

In order for the theme to be populated with pages and content, I borrowed the official TwentyTwenty theme starter content. This step wasn’t 100% necessary, but a nice addition to have some content when someone activates the theme on a fresh WordPress site.

Demo

Here is the result: a site running the block-based Twenty Twenty.

Home page of the Twenty Twenty block based theme demo site.

Potential Block Improvements

Converting the header and footer to blocks helped me identify some functionality that would be nice to add to core blocks. Some of these are already in the works.

  • Navigation block
    • Control over how the menu is laid out and collapses in different viewports (#16829)
  • Columns Block
    • The ability control the padding and margins (#10730, #16660)
    • Adjusting the size of one column, the remaining columns don’t resize equally (#19515)

How is this better than what we have now?

The structural block-based theme changes are generally not obvious on the front end. The process of switching between the Code editor, a template file, and previewing the site to achieve the intended design was tedious. However, this is just an interim step before we’re hopefully able to create and edit our theme (and your entire site) via Gutenberg.

WordPress admin screen showing a block template part being edited.

The end benefit will become most apparent when the user can edit every piece of the page individually using Gutenberg. Being able to compose, manage, and reuse parts of your theme all within one visual interface is an exciting idea and one that’s close to reality.

The other exciting aspect of this process was that it required very little PHP — just a few block style variation declarations and standard theme support registration. Everything else is CSS and HTML generated by the editor. To me this feels like a step in the right direction, lowering the barriers to entry for folks that are new to theme development and WordPress.


I invite you to try it out; your comments and feedback are more than welcome. The source code for this theme is available on GitHub:

https://github.com/WordPress/theme-experiments/tree/master/twentytwenty-blocks

In that repository, you’ll find a handful of other block-based theme experiments: converted versions of Twenty Nineteen, the Gutenberg Starter Theme, and a theme called Parisienne. Each contains instructions for installation and activation.

By the way, the theme-experiments repository is open for PRs! I’d love to see more people creating and testing themes that use this method: that’s the only way it’ll grow and improve.

Feel free to ask questions in the comments or in the repository, and thanks for reading!

The Developer’s Guide to Supporting Your Themes

At this year’s WordCamp Europe, some members of the WordPress.org 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.

When

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

How

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 WordPress.org Slack channel about 10 minutes before the session begins.

Who

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 WordPress.org forums back in 2011 and was immediately hooked.

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

WordPress Themes and User Experience

Good user experience in WordPress themes can make the difference between frustrated or happy users. Yet, it’s often overlooked. A solid user experience can feel just right, creating sound expectations and delight. If you’re looking to boost your theming skills and learn more about themes and user experience, we recommend these three recent talks by members of the Automattic Theme Team:

Kirk Wight, A Call for Simplicity: As WordPress blazes into its second decade, theming, plugin development, and WordPress core itself are reaching troublesome levels of complexity and confusion, challenging the very essence of what has gotten WordPress to where it is in the first place. Pulling from diverse areas of culture and tech, we’ll tie together our need for simplicity, and issue a call to arms for the next ten years of WordPress.

Tammie Lister, Theme, Don’t Be My Everything: It’s time to stop putting everything including the kitchen sink into themes. A theme shouldn’t be a bloated monster with an options panel that stretches out the horizon. This talk is a call to action to stop making themes that do everything and start making themes that focus.

David Kennedy, Themes are for Users: In this talk, we’ll explore user research, theme setup, theme options and more. By the end, you’ll know what makes up a theme’s user experience, and how to set your users up for success.

And if you’re still getting started with theming, or even WordPress, wondering how you could ever contribute to WordPress and add value – you’re not alone. Check out Kathryn Presner’s The Techie Continuum, and start contributing to WordPress today!

Online Resources to Help You Learn All The Things

The web industry is always changing. Just when you get settled into a routine, the flow of technological innovations force you start a new one. Can you keep up? It never hurts to set aside some time for learning new skills and sharpening your current ones.

In this post, I’ll outline a few online resources that can help you continue your education in web design and development (or to get started, if you’re just joining us).

Continue reading “Online Resources to Help You Learn All The Things”

So You Want To Create WordPress Themes, Huh?

Update: It’s live! It’s happening! Go read How To Create a WordPress Theme and learn how to code up something awesome.


Does that title sound familiar? Over 2 years ago the now defunct WPDesigner.com published a series of posts under that banner, teaching beginners how to create WordPress Themes from scratch.

2 years ago is a long time online: Things have changed.

Starting next week, ThemeShaper will publish a series of daily lessons that will teach you how to create your very own modern WordPress Theme—from scratch—using the latest best practices.

And it won’t be just any old WordPress theme you’ll have in your hands. In a lot of ways it will surpass what’s been done with the popular Thematic Theme Framework. Except, it’ll be a little leaner, a little meaner, and it’ll be all yours.

Here’s the laundry list of features your finished theme will be able to boast of.

  • Search-engine optimization
  • Microformats
  • Localization support for translation
  • Robust dynamic body and post classes
  • Separated Comments and Trackbacks
  • Gravatar support
  • A valid, logical, semantic XHTML structure you can use to build ANY layout
  • Valid CSS
  • A strong typographical foundation
  • Smart default layouts (that we can adapt for later layout generation)
  • 2 widget areas, with NO hard-coded widgets, that “disappear” from the markup when they’re empty.
  • Styling for WordPress Image Classes
  • And pretty much all the typical WordPress stuff

When you’re done you’ll have a complete—and completely powerful—WordPress Theme that you can edit further or build on with a WordPress Child Theme. The choice is yours.

Are you ready?