If you use WordPress, you’re probably already familiar with themes. These design elements form the basis of your website’s appearance and general styling. Since WordPress 5.9, you can also take advantage of WordPress block themes. However, you might be wondering how this new feature works.
With a WordPress block theme, your website’s entire design is made up of blocks. This layout includes both content and non-content areas on your site, such as headers and footers. Therefore, using a block theme lets you edit your site’s appearance without touching the Customizer or the theme’s files.
😎 In today’s guide, we’ll explore what a WordPress block theme is and show you some key examples. We’ll then explain how to use and edit a block theme to fit your design needs. Let’s get started!
What is a WordPress block theme?
A WordPress block theme is, perhaps unsurprisingly, a theme made up of blocks. Every part of your page is adjustable and movable, including non-content elements such as headers, footers, menus, logos, and titles.
Block themes are one part of WordPress Full Site Editing (FSE). This concept was brought into the core software with WordPress 5.9.
With FSE, you can access a new Site Editor that enables you to build block layouts and edit them to fit your needs. Additionally, you can use global styles to make sweeping design changes to your theme and overall website appearance.
👉 Overall, block themes and FSE can speed up your design process and help you customize your website on a granular level. You can design the site you want without dipping into your theme’s files or playing around with custom CSS.
Three examples of WordPress block themes
You can find WordPress block themes by using the Full Site Editing filter at WordPress.org:
Since block themes are still relatively new, there’s a limited number of choices. To help you make a more informed decision, here’s a quick overview of three of the best options!
1. Twenty Twenty-Two
Twenty Twenty-Two is the default WordPress block theme. It was released along with version 5.9 and developed by the WordPress.org team:
Twenty Twenty-Two is designed around a bird motif, meant to symbolize diversity, versatility, and the uniqueness of different websites. Additionally, since the theme was developed to launch with FSE, it’s optimized for block patterns and templates.
👉 Overall, Twenty Twenty-Two is a versatile option suitable for different kinds of sites. Whether you’re running a blog, portfolio, or eCommerce store, this theme can help you create a simple and customizable website. Best of all, it’s completely free.
2. Blockbase
If you’re looking for a minimalist WordPress block theme, you might consider using Blockbase. This theme comes from Automattic, the company behind WordPress.com and plugins such as Jetpack:
Blockbase has a very simple design. This setup enables you to build your website from a blank slate while familiarizing yourself with FSE features. Blockbase comes with fully customizable templates that you can tweak to fit your design needs.
👉 Additionally, Blockbase is defined as a “universal theme.” This means you can edit it with the Full Site Editor or the classic Customizer. Therefore, Blockbase can be an excellent option for transitioning between classic and block themes.
3. Tove
Tove is another free WordPress block theme that’s super easy to use. Although this theme is designed specifically for cafés and restaurants, you can adjust it to fit different business types:
Tove ships with more than 40 block patterns, including multiple header and footer variations. Therefore, you can put together posts and pages in as little time as possible. It also has a friendly and casual design to help you better connect with your customers.
👉 Moreover, Tove is a very lightweight theme. It doesn’t use any JavaScript and doesn’t load images on your site’s front end by default. As such, it can help you optimize your page loading times and improve your Core Web Vitals.
How to edit WordPress block themes in the Site Editor
There are a few different ways to edit a block theme and adjust its settings. Here are three of the most common scenarios.
1. Use global styles
Before FSE, you would usually adjust your theme’s appearance using the WordPress Customizer. Depending on your theme, you might have access to just a few or several design settings. Additionally, you might use custom CSS to customize your theme further.
However, with WordPress block themes, you can apply global style settings from the Site Editor. Here, you can easily tweak your theme’s appearance and apply all changes across your entire website. You can also isolate these adjustments to specific pages.
To get started with global styles, navigate to Appearance → Editor in your WordPress dashboard. You’ll now see the new Site Editor, which will open on your homepage by default:
Then, select the Styles icon from the top-right menu bar. You should now see a new settings menu where you can customize your theme’s typography, color palette, and layouts:
Note that you can also adjust the style settings for specific blocks. These customizations will be applied to all the same elements across your website. For example, you might edit your button, navigation, or social icon blocks.
When you’re happy with your changes, go ahead and save them. You can come back at any point to edit your theme’s global style settings.
2. Edit templates
WordPress block themes also come with in-built templates. These are custom layouts for specific pages, such as your Archive or 404 page. You might have access to additional pages depending on which block theme you choose.
To access and edit these templates from the Site Editor, click on the WordPress icon in the top-left corner. You can then select Templates to see the available layouts for your block theme:
Click on one of these templates to edit it. In our example, we’ll be adjusting the 404 page for our website:
Note that this template is made up of multiple blocks. If you select one of the elements, you can use the block settings to customize its appearance:
Note that you can add new blocks to your template and save your settings to apply your customizations. Additionally, you can create new templates by navigating back to the Templates menu and clicking on Add New:
You’ll just need to add blocks to your new page and configure its settings to choose where it displays. However, some themes might restrict the kinds of new templates you can create. As you can see in the image above, Twenty Twenty-Two will only let you make a Front Page template.
3. Adjust template parts
Apart from templates, you can also edit your WordPress block theme by adjusting its template parts. These are smaller elements that are used within your overall templates. In most cases, your template parts will be your theme’s header and footer areas.
To edit your theme’s template parts, open up the Site Editor and click on the WordPress icon. Now, select Template Parts and choose the element you want to adjust. In our example, we’ll be editing the theme’s Header:
You can now control the template part’s settings in the right panel, including its justification, orientation, color, and border. Any changes you make will apply to your header section across your entire website.
As with templates, you can also design new template parts. Simply navigate back to the Template Parts menu and select Add New in the top right corner:
For instance, you might design a new header, footer, or general template part for your theme. Just make sure to save your changes when you’re done.
Get started with WordPress block themes today
WordPress block themes have revolutionized the way you design and customize your website. Rather than relying on CSS, plugins, or in-built settings, you can simply use the Site Editor to apply global styles to your theme and create individual templates using blocks.
ℹ️ If you’re new to block themes, you might consider using Twenty Twenty-Two. This default block theme is easy to use and makes good use of Full Site Editing (FSE). Alternatively, you can browse the WordPress Theme Repository for other block theme options.
If you’re not sure about the concept of block themes, you can also find more traditional WordPress themes that still give you a lot of control over your site. For example, our Neve theme is a lightweight multipurpose theme that also makes it very easy to customize all parts of your site’s design using the Customizer. This includes helpful tweaks such as a drag-and-drop header and footer builder.
Do you have any questions about using WordPress block themes? Let us know in the comments section below!