WebsitesCategory

Getting started with block-based themes in WordPress

5 min read
Courtney Robertson

When building a site with WordPress, one of the first things you'll do is decide upon a theme to use. That might include block-based themes, depending on the site needs. Whether you build the theme from scratch or you use a premade theme, you'll want to consider what functionality you and your clients need from the theme.

Where WordPress is going

screenshot from Matt's state of the word slide about WordPress 5.9 block-based theme features
Preview of WordPress 5.9 features from State of the Word 2021

You may have heard the terms block-based themes and full site editing. While these terms are used almost interchangeably, there are a few differences.

A block 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. - Developer Handbook

Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. - Developer Handbook

During the annual State of the Word address, WordPress co-founder Matt Mullenweg shared statistics about block themes. Last year, the themes directory grew from just 2 block-based themes to 28 themes. Largely, this reflects when functionality for block-based themes became available in WordPress 5.8. Beta features with the site editor and implementation for block themes launched, but WordPress 5.9 anticipates shipping the first default block theme.

There's no doubt that the future of WordPress features block-based themes. There is considerable opportunity to be an early block-based theme developer, creating themes on WordPress.org and available elsewhere. Likewise, the block theme marketplace is just reaching a point where you will have the support you need to implement block themes on your client website.

Types of WordPress themes

Using a block theme and customizing site content and custom functionality will not rely as heavily upon knowing how to build the entire theme with PHP. This can be a big win for low-code developers, as well as those eager to build with JavaScript and React.

There are 4 main types of themes in WordPress:

  1. Classic theme: a theme built the way we’ve been used to with PHP templates, functions.php, and more.
    Example: WordPress Default theme or a theme framework like Underscores
  2. Hybrid theme: a classic theme that adopts a feature(s) of FSE, like theme.json or the template editor.
    Example: Astra
  3. Universal theme: a theme that works with both the Customizer and the Site Editor.
    Example: Blockbase
  4. Block theme: a theme made for FSE using HTML templates and theme.json, allowing one to manage all parts of their site with blocks.
    Example: Twenty Twenty Two

Are block-based themes ready?

Screenshot of block-based themes in the WordPress themes directory with the filter for full site editing themes

Like many choices, it depends. If you are new to using block-based themes, check out our helpful guide on getting started with Full Site Editing.

Are you ready to develop your own theme from scratch? Yes, now is a good time to start using a block-based theme.

Do you want to use an off-the-shelf theme that is ready to go? Now is a good time to also do that, provided you don't mind if a few other websites have a similar look due to the limited number of block-based themes at this time.

Would you like a theme framework that gets you most of the way to having a block theme to deploy on clients' sites? It is also a good time for that as well. Blockbase is fairly unopinionated and works much like a theme framework. Like the classic method of using Underscores, Blockbase comes with much of the template hierarchy laid out but stops short of actually placing blocks into templates for a finished layout or implementing design styles.

Does the site maintainer use the Customizer to revise site content? At this point, proceed cautiously. Customizer is not being removed. However, it will only be visible in the administrator interface if either an active plugin uses it, or if the theme is created as a universal theme. Not all block-based themes will display the Customizer, as those same features can now be found in the Styles interface.

Want additional resources to learn how to build block themes? Check out Gutenberg Times List of WordPress Themes for Full-Site Editing and Resources.

Who should wait to try block-based themes?

You may not be ready for a full site redesign at this time. WordPress can continue to be upgraded without breaking any theme aspects, even if you aren't ready for a block-based theme. If you have created custom themes in the classic theme manner, and want to implement features of block themes, you can add the additional functionality of theme.json and the template editor. To add these customizations to your hybrid theme, see Adding Full Site Editing to classic themes. This path is a great way to roll out additional features without a full site redesign.

If you are comfortable with a page builder, like Beaver Builder, there is no need to shift at this time. We may even see further integration between page builders and block themes over the coming year.