WordPress has been the leading content management system (CMS) by a large margin for many years.

Despite its dominance, the WordPress community constantly strives to improve it. Chances are that WordPress will continue being the top CMS for years.

Block themes are relatively new to the WordPress ecosystem and promise to bring substantial improvements to the way we build websites.

Undoubtedly, you will use WordPress block themes in the next few years! Although they are still in the early stages and may undergo transformations, the core concept of building sites with blocks remains intact.

This article serves as the best starting point to learn more about WordPress block themes and how to utilize them for your projects.

A Glance at WordPress Block Themes

You can’t talk about WordPress block themes without mentioning Gutenberg. As the visual editor is block-based, it’s natural to start using block themes.

A WordPress block theme is a theme that consists of blocks, as the name implies. Instead of relying on templates as standard themes do, the block alternatives focus on blocks for building layouts.

Each theme comes with a set of predefined blocks and templates, offering unlimited powers to website creators. 

A WordPress block theme is installed and activated in the same way as the standard WordPress themes. End-users won’t notice if you’re using a block theme or a standard one.

However, WordPress block themes have some key particularities that pique the interest of WordPress site administrators.

Key Advantages of WordPress Block Themes

Standard WordPress themes work seamlessly with the Gutenberg editor, so block themes are a nice addition, but aren’t strictly necessary.

Besides, users are accustomed to the standard themes and may need serious reasons to switch to block alternatives.

The following benefits will make everyone consider block themes for their future projects.

Enhanced Editing Options

You are limited to content creation and editing with standard WordPress themes. These themes allow you to create and edit posts and pages, while the rest of the site is customized through the theme’s options.

However, block themes take it a step further by empowering users to edit every pixel of the website, including blog posts, pages, archives, headers, footers, and sidebars.

The extensive library of available blocks enables you to effortlessly design unique layouts, and building a webpage becomes a matter of inserting and customizing blocks.

Forget about widgets, page builders, and third-party plugins; the building blocks now replace most of their functions.

Improved Performance

Speed is instrumental for any website. Users have high expectations, and satisfying their needs is crucial.

Block themes rely mostly on HTML, load styles only for rendered pages, and have fewer files. Combined, these factors make block themes load significantly faster than standard themes.

Better Creation Experience

WordPress Block themes prioritize user experience by providing intuitive controls for content management. The visual nature of blocks provides users with a real-time preview of how their content will appear on the front end.

With block themes, creating a good-looking page is more about patience and aesthetics than coding. Inserting and customizing blocks is a pretty intuitive process.

Blocks for Everything

Blocks can be used for everything, including the navigation menu and logo! The Gutenberg editor offers dozens of highly customizable blocks, and you can install plugins that come with additional blocks.

Moreover, each theme has its own set of blocks. In other words, there are blocks for every kind of layout component.

Cool WordPress Block Themes

Certainly, WordPress block themes have serious advantages and you are likely interested in adopting this new generation of themes.

However, it wouldn’t be a smart decision to immediately give up on your current theme just to embrace new trends. Testing the block themes and choosing one for your future project is the better choice. 

A few development agencies created interesting block themes. The simplest way to discover them is to visit the WordPress theme repository and check the “Block themes” section.

WordPress theme repository Block themes section.

The following WordPress block themes caught our attention.

Twenty Twenty-Three

Twenty Twenty-Three is the default WordPress theme released in version 5.9.

Twenty Twenty-Three is the default WordPress theme released along with version 5.9. It impresses with its simplicity—this theme fits every kind of project. It’s suitable to start learning how to design webpages with blocks. Other worth-mentioning features of Twenty Twenty-Three include: 

  • 10 editable templates.
  • Fluid typography.
  • Developed and sustained by the WordPress community.
  • Free of charge.

Blockbase

Blockbase is a simple, minimalist theme that supports both block and standard editing.

The Blockbase theme was released by Automattic, so a skilled team of developers crafted it. Blockbase is a simple, minimalist theme that supports both block and standard editing. It’s another good choice if you want to learn how to build WordPress websites with blocks.

Raft

Raft is a block theme suitable for portfolios, blogs, agencies, and small businesses.

Raft is the product of ThemeIsle, an agency that created many renowned standard themes, like Neve and Hestia.

Raft is a block theme suitable for a large variety of purposes, such as portfolios, blogs, agencies, and small businesses. Moreover, Raft supports WooCommerce so you can use it for e-commerce.  

theme.json file

The theme.json file is a crucial component within block themes in WordPress. It serves as a configuration file that allows developers and users to define various aspects of the theme’s behavior and appearance. You can edit this file and achieve the following:

  • Add custom CSS code.
  • Specify the default size of the content areas.
  • Define color schemes, gradients, margins, borders, and font sizes.

One of the major advantages of the theme.json file is its ability to streamline the customization process.

Instead of individually customizing each block’s settings, developers can modify the theme.json file to apply the desired changes across multiple blocks simultaneously.

It’s no exaggeration to consider this file the backbone of your website’s styling.

Most of the operations above are performed within style.css files of the standard themes and these require HTML, CSS, and PHP knowledge. Thanks to the theme.json file, WordPress users can do these operations in JSON (JavaScript Object Notation) format.

It’s a structured and understandable way to style a WordPress website. Thanks to this format, creating themes and editing websites is simpler and more intuitive. The following snippets are great examples of this. 

JSON format is simpler to learn than a coding language. The introductory JSON class of W3School is all you need to learn to master JSON if you are unfamiliar with it.

The introductory JSON class of W3School is all you need to learn to master JSON.

This will certainly be useful in the future so it’s recommended to learn more about JSON format. Additionally, check out the WordPress Developer Resources for more about the theme.json file!

Customize a WordPress Block Theme

Indeed, editing the theme.json file is relatively simple, but it isn’t the proper way to edit your website.

The real miracle happens in the Site Editor area. From the admin WordPress dashboard, follow these steps to start customizing your website:

  • Choose your WordPress block theme and install it the same way you would  a standard theme
  • Go to Appearance > Editor, where you’ll be prompted to a new screen.
  • From the left sidebar, choose one of the templates to customize (depending on your theme, the left sidebar may include a template, template parts, navigation, etc.).
Customize a WordPress Block Theme
  • After selecting the template, click on the “Edit“ icon to edit the template.
  • Click on the “+” button in the left upper area to display a menu featuring patterns, blocks, media, and reusable components.
Customize a WordPress Block Theme
  • Next, insert the blocks into the template. Ideally, for learning purposes, you may test all blocks. It isn’t rocket science to insert and customize the blocks but it will take time to familiarize yourself with each block’s settings. 
  • Let’s suppose that you need to insert an image. Select the Image block, and insert it into the template. Next, choose an image or upload it from your hard drive, Media Library, or URL. 
Customize a WordPress Block Theme

Customize the image by using the block options, but review the right sidebar for a large set of customization options for the block selected. The Image block has important styling and positioning options in the right sidebar.

Global Styles

It’s indeed fascinating to play with the settings of the blocks used on your website. However, customizing similar blocks on a large website can quickly become a real challenge.

For instance, if you need to use the Arial Narrow font for all heading blocks, manually checking and selecting Arial Narrow for each heading block would be impractical and time-consuming.

Thankfully, there’s a more efficient way to handle this. In your admin dashboard, while in editing mode, you can click on the Styles icon located on the upper left side.

Global Styles

This action will prompt a new screen where you can configure the appearance of specific blocks across the entire website. This way, you can apply the Arial Narrow font to all heading blocks in one go, saving you valuable time and effort.

Furthermore, each theme comes with specific styles, so you can choose one that best fits your website’s design and overall aesthetics.

Wrapping Up

WordPress block themes are a whole new approach to styling a website and it’s normal for beginners to have questions or run into issues.

This is an introductory article, and it’s impossible to cover all the aspects related to block themes and site editing.

However, WordPress block themes come with a solid list of benefits, and you will use one sooner or later. Better to be prepared ahead of this, isn’t it? 

Disclosure: We sometimes use affiliate links in our content. Some of the links in this post are “affiliate links.” It means if you click on the link and purchase the item, we will receive an affiliate commission. It helps our website keep on running and allows us to offset our writing team’s cost. Thanks for your support.

About the Author

Daniel Pintilie

Blogger and Internet marketer

Daniel is a blogger and Internet marketer ready to create valuable, actionable, and interesting content for your website. He is in love with WordPress and Internet Marketing. You can get in touch with him by visiting his portfolio – Daniel2Writing.com.

View All Articles