WordPress Block Themes – The Complete Guide

wordpress-block-themes

WordPress is twenty years old and signs are that it will stay here for many years. This age is unbelievable in the world of software. It’s like a creature from the prehistoric ages living nowadays. WordPress dominance is based on the perpetual care of users to keep it updated. For instance, there is a complex four-step plan to modernize WordPress. We are currently in the second phase of this plan—full site editing through content blocks.

Block themes are the result of the second phase of the plan, and you will adopt them sooner or later. You’d better stay ahead of the competitors and learn more about block themes and how to use them now.

A Primer Into Block Themes

block themes

It would be wrong to consider block themes just a fad and ignore them! Conversely, you may use classic WordPress themes for many years from now on. Altogether, block themes are the future, thanks to a more user-friendly manner of building websites.

A block theme is a WordPress theme entirely composed of blocks. You may insert, customize, and delete blocks throughout the website: pages, posts, headers, footers, or sidebars. Essentially, creating a website comes down to dropping blocks on a canvas.

You don’t need to write a single line of code to create a highly-complex WordPress website. On top of that, block themes are faster than their classic counterparts. 

Block themes are in their early stages and, clearly, there is room for improvement.

Classic vs. Block Themes

It’s good to know the differences between classic and block themes. As a site visitor, you won’t realize if a website uses a block or a classic theme. But there are pretty big differences under the hood. Here are the main aspects that differentiate block themes.

Less PHP, More HTML

WordPress themes and plugins are based on PHP scripts to perform actions. Displaying the latest five posts, adding a new user, or inserting a widget, all falls down to writing PHP code. Block themes rely on HTML and use PHP files only as a fallback. Instead of using PHP conditionals, the block settings allow different results.

No More Widgets

Those who have been in the WordPress space for the latest years certainly used widgets. Block themes replace the widgets with blocks. Every widget functionality can be achieved with blocks, too. People who have used widgets for many years may be hesitant to replace them. However, new users appreciate the unified method of building layouts. 

Navigation Menu

While the navigational menu remains equally important in the block and classic themes, it does have a regular block to create menus. Don’t worry, you have a large set of options to customize your site menu.

Customizer is at its Dawn

customizer in block theme

As a webmaster, you spend a lot of time in the Customizer section, fine-tuning your website. It’s a major change to give up the Customizer, but it’s useless for block themes. To some extent, Site Editor is the new Customizer, but it’s simpler and faster to use. 

Site Editor

Did the above features pique your interest? Getting your hands dirty with block themes is simple. Install your favorite WordPress block theme. Choose one of our recommendations if you don’t have any favorites. Install and activate the theme, and go to Appearance > Editor(Beta) from your admin dashboard.

Appearance > Editor(Beta) from your admin dashboard

Depending on your theme, you have a few templates to customize. For instance, the WordPress default theme Twenty Twenty-Three has the following templates:

  • Search
  • Single
  • Blank
  • Index
  • Archive
  • 404
  • Blog
  • Home
  • Page.

Your theme might have slightly different templates, but the names are usually self-explanatory. Now, go to one of these templates and start the customization process. From here, you insert patterns and blocks on the template.

patterns in block themes

The patterns are site components like buttons, headers, columns, or text. Practically, these are groups of blocks with a functional purpose. The blocks are simple design constructions typical of WordPress websites.

blocks in wordpress theme

Paragraph, Heading, Table, Gallery, Image, Buttons, Custom HTML, Tag Cloud, or Search are some of the most common blocks. Drag them on your layout, customize them, and your page is ready to shine. 

Global Styles

The low-entry barrier of block themes comes with an unexpected drawback. Anyone can create a website. But are these websites in line with the rules of good design?

For instance, inexperienced website crafters lack consistency. As a result, there’s a high chance that adding different blocks on a canvas will result in an inconsistent layout. Thankfully, global styles resolve this problem and help users create good-looking and consistent layouts.

Go to your WordPress admin dashboard and access the Editor (Appearance > Editor). In your upper right corner, you will see the icon for global styles next to the Save button and Settings icon.

admin dashboard -> Appearance -> Editor

You may select the theme styles and set up the colors, fonts, and layouts. The global styles ensure consistency, but these are overwritten by the block settings. For instance, you choose Roboto font for H2 headings in the global styles. Yet, you may easily change the font for any heading you want by inserting a heading block and setting up a new font.

In the same section, you can customize the blocks. Click on the drop-down button “Blocks” and select the block to customize. Next, you may style the block, come back to the list of blocks and select another block, and so on.

Site Editor is still in the early stages and may have bugs or miss some useful functionalities. Currently, WordPress developers test the waters with building block themes. There are many hot debates, controversies, and incertitudes in this respect. What is acceptable and reliable today might be useless tomorrow. However, you should bear in mind that WordPress block themes are the future! Hence, you’d better start preparing for the future before your competitors do.

10 Cool WordPress Block Themes for Your Next Website

Sooner or later, you will certainly use WordPress block themes for your websites. Keep in mind that these are in the beta version, so there is serious room for improvement. It’s possible to face more bugs than usual, but that’s the norm for early adopters. Creating websites through blocks is in the very early stages. Things are quickly improving thanks to an active community willing to improve WordPress. 

Site Editor is the newest term to describe the process of creating WordPress websites with blocks. It’s okay if you are more familiar with Full Site Editing—the terms are synonyms.

Altogether, Site Editor is the preferred choice for WordPress enthusiasts because it’s more suggestive for casual users. Install a block theme to explore Site Editor. Not sure which block theme to choose from? Here are ten excellent WordPress block themes to take for a spin!

Twenty Twenty-Two

Twenty-Twenty-Two-WordPress-block-theme

Twenty-Twenty-Two is the first official WordPress block theme and it has been installed over one million times. It was launched simultaneously with WordPress 5.9 and is a pretty simple theme. Use it confidently for your websites. It’s the ideal theme to learn how to design websites with blocks. Twent

Twenty-Two is the best solution if you are new to Site Editor due to its simplicity. The theme loads blazingly fast thanks to the simple design and block format. So it has a competitive edge over the standard WordPress themes.

Blockbase

Blockbase-block-theme

Automattic, the company behind WordPress.com, WooCommerce, Jetpack, and Tumblr, knows a thing or two about WordPress. Any theme released by Automattic should be on your radar. Blockbase is Automattic’s concept of a block-based theme.

Similarly to Twenty Twenty-Two, this theme comes with basic functionality. Minimalist enthusiasts appreciate its design. Yet, you have plenty of blocks at your disposal to add elements to the layout.

The theme comes with basic templates such as Index, Page, Single, Footer Only, Footer and Header, Search, Archive, and 404. In addition, it has a few simple template parts such as the footer, header, header centered, post-meta, or post-meta-icons. 

Wabi

Wabi-minimalist-block-themes

Wabi is a theme for storytellers that want to convey an authentic message. It’s a solution for blogging and magazine news that focuses on quality and expressiveness. Use it for artistic rather than commercial purposes.

Start building your website by checking out the Wabi templates. Next, customize them to match your style. Don’t forget to look at the template parts and eventually, insert them into your site’s pages. Add blocks into the layout and test all their settings to find the desired results. It’s a simple and pleasant job, but it does take time and patience.

Blockpress

Blockpress-WordPress-theme

Blockpress is one of the most complex WordPress block themes. Despite that, even less-experienced users will enjoy using it. The theme works for a large set of purposes—from blogging to e-commerce.

According to the theme’s developers, Blockpress uses conditional asset loading that substantially reduces the styling file size. In layman’s terms, the theme loads strictly what you ask for. In this context, the theme loads blazingly fast despite its complexity.

Another Blockpress advantage is the global control over typography and the dynamic options like enabling a preloader or progress bar on posts. 

Catch FSE

Catch-FSE-theme

This is another block-based WordPress theme that fits a vast variety of purposes. It impresses with the extended number of templates. In addition to the standard templates like Index, Archive, Page, Single, and 404, it comes with a few stand-apart items like:

  • Archive Product
  • Blog Page (Sidebar on Left)
  • Blog Page (Sidebar on Right)
  • Single Page (No Sidebar Full Width)
  • Single Page (Sidebar on Right)
  • Single Post (No Sidebar Full Width)
  • Single Post (Sidebar on Right)
  • Single Product.

You have all you need to create an outstanding website, but you may also purchase the FSE Pro plugin to extend the theme’s functionality.  

Ona

Ona-WordPress-block-theme

Ona is available for free download on both the WordPress repository and the developers’ website, DeoThemes. The premium version of the theme, Ona Pro, comes with WooCommerce support and a couple of extra templates and patterns. Altogether, even the free version has excellent templates and patterns to design a good-looking website.

Create your website either with a template or by starting from scratch and adding blocks. Those with a premium subscription get access to professional templates suitable for multiple purposes, including Coffee Shop, Fashion, Online Store, Health, Magazine, and Agency. It proves that Ona is a genuine multipurpose WordPress block theme.

BlockMag 

BlockMag-WordPress

You have to do everything possible to increase the loading speed if you run a blog or magazine news. The competition is harsh in this industry and readers have high expectations. Usually, WordPress block themes are faster but include fewer features. This is not the case for BlockMag which is simultaneously feature-rich and fast-loading. The theme also has a premium version which has more templates and patterns.

You will be impressed by the number and quality of the templates. Building your website is an enjoyable activity with BlockMag because you have full control over each pixel of each web page.

Frost

Frost-block-Theme

Frost is a block theme managed by WPEngine—one of the most famous WordPress hosting companies. Hence, the code quality and reliability of the theme are out of the question, so freely download and use it for your project. Check out the patterns and style guide sections of the Frost website if you are totally new to this theme. They showcase how to use Frost simply and concisely. The patterns look great, and you have all the needed ingredients for a quality website.

GeneratePress

GeneratePress wordpress block theme

GeneratePress distinguishes itself by being compatible with page builders like Beaver Builder and Elementor. Moreover, it’s one of the most feature-rich WordPress block themes on the market.

Consider using the free version of the theme to test its potential. Purchase the premium version if you are satisfied with the free one, but want more templates. The site library includes dozens of professionally designed templates that fall under the business, e-commerce, and blog categories.

While it’s not a reason per se to use this theme, it’s remarkable that the free version from the WordPress repository has 500,000 active installs and a perfect rating—5 out of 5 stars.

Bricksy

Bricsky WordPress block theme

If you want your website to express positivity and happiness, you should go for Bricksy. It’s a simple block theme that works for projects focused on visuals. Wedding, travel, and personal development are just a few areas suitable for Bricksy.

Thanks to its block structure, customizing the theme is a matter of simply dragging and dropping items on the canvas. Like the majority of WordPress block themes, it has a pro version with extended functionality.

Over to You

Site Editor is in the early stages and will certainly be improved over time. The same is true for WordPress block themes—they will be bettered in time. However, the above themes look promising and deserve your attention. Being an early adopter isn’t easy, but it may give you a precious advantage against your competitors. Therefore, pay attention to block themes and eventually use them in your projects.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *