Exploring the Top WordPress Block Themes of 2022

  • Themes

WordPress 5.9 wasn’t just a step toward advancements; instead, it was a leap. We were introduced to full site editing, block themes, and the use of block editor outside the content areas. These features were a needed refresh for WordPress to fend off the challenges from third-party visual builders.

The block theme library has been expanding and growing, with more refinements being made to full site editing. So. what is a WordPress block theme, how does it differ from a classic theme, and what makes it unique? That is exactly what we will look at, along with the most widely used block themes available in the repository.

WordPress Block Themes

In WordPress, we have Classic themes and block themes. Classic themes are built with PHP files and Block themes are built with blocks and HTML files. Further, they can be classified as parent themes and child themes. Every theme has its own features and underlying structure that works in a perfect symphony. Block themes, as the name suggests, it is blocks. These themes are made up of individual blocks. The blocks are present in the header, footer, and so on. Earlier the blocks were limited to posts and pages, to the content areas. But with full site editing and block themes, they are present sitewide. This type of theme was introduced with WordPress 5.9 and has been steadily growing.

Block themes when compared to classic themes are a step ahead in terms of how easy it is to make the needed changes. These themes can be edited with the help of the new Site Editor and no need to play around with the theme’s file, or customizer, and no need to code to bring the necessary changes.

The Inner Workings of Block Themes

There are quite a few differences between a classic theme and a block theme and they are:

File Structure

The file structure of block themes is different from the classic themes. The minimum file structure needed to create a block theme is as follows:

the file structure of a block theme

For a classic theme the recommended file structure is as follows:

Note: One can also load a classic theme, with just the index.php and style.css file.

The Presence of New Folders

The templates and parts folders are specific to block themes. You need to place all HTML template files inside the templates folder. Template part files are optional. If they are included, they must be placed inside a folder called parts. Block themes have an extra file named index.html which is located inside a folder called templates. Without the presence of index.html inside the templates folder, the theme will not load properly.

the file structure of Twenty Twenty-Two block theme
  The file structure of Twenty Twenty-Two, which is a block theme.

The next big difference is that block themes use HTML and not PHP for the template files. Inside the template files, we will see a combination of HTML and block markup.

A look at the page.html inside the Twenty Twenty-Two theme will show us the HTML and markup combination.

HTML markup in a WordPress block theme file

The block themes as we have mentioned have a couple of new folders. They are parts and templates. The parts folder includes the items that can be reused. They are headers, footers and can also include sidebars. The templates folder on the other hand includes files that determine the layouts of different pages. Pages like 404, home, and so on.

Theme.json File

The theme.json file is unique to block themes and probably the most important file. With a single file, users are now able to make changes site wide which include changes to the font, the font size, the color, the color palette, and many more.  If needed you can also determine specific styling for particular blocks.

theme.json file of a block theme

The theme.json file can be put to effect by using the Global Styles that are a part of full site editing.

Advantages of Block Themes Over Classic Themes

Now, why might one prefer block themes over a classic theme? The following advantages may help you choose a block theme over a classic theme.

  • With block themes, customization is a breeze. The users can use the site editor to edit the entire website effortlessly, all from one screen.
SIte editor in block theme

Unlike in classic themes, you don’t have to switch between the customizer and the theme’s files to bring the required changes.

This is really helpful for beginners, as they can make the changes without knowing how to code. They can use the blocks, and premade block patterns to create beautiful layouts in a short time frame. This in turn improves the workflow, as you have more control and can also stay organized.

  • The block themes ensure better loading performance than classic themes. This is achieved by loading styles only for the rendered blocks used on a page. In block themes, the blocks get analyzed before the <head> to offer a better loading state which is not the case in Classic themes.
  • In block themes, you can control the styling of the entire website with a single file, which is the theme.json file. With this, you can control the styles across the whole website and users can take advantage of it from the global styles option. This includes the typography, the colors, and so on.
  • For classic themes stylesheets need to be manually enqueued for both the front-end and editor screen. But the same is not required in the case of Block themes.

The Widely Used WordPress Block Themes

Now that we have covered what exactly is a WordPress block theme and its advantages, it’s time to look at the most downloaded ones in the repository. At the time of this writing, we have 188 block themes in the repository.  The current leading contributor is Automattic, followed by jegstudio with 11 block themes, and on the third, we have a tie between Gutenfiy Dev and UXL themes with 10 full site editing themes.

Presently, five block themes are tagged as “Accessibility-Ready.” They are Jace developed by Carolina Nymark, W3CSSPress by Matteo Marchiori, Marenda by xideathemes, and Twenty Twenty-Two and Twenty Twenty-Three by WordPress.org.

1. Twenty Twenty-Two

Twenty Twenty-Two block theme

Twenty Twenty-Two from WordPress itself leads the pack. With over, a 1+million installs it’s the most widely used full site editing theme out there. This is the default theme for WordPress 5.9 and draws its inspiration from nature and birds. The theme focuses on versatility and subtle styles. The theme includes dozens of block patterns and everything including the layout, typography, colors can be customized from top to bottom. 

Twenty Twenty-Two is also the first bunded block theme tagged as “Accessibility-Ready” when WordPress 6.1 was released.

2. Twenty Twenty-Three

Twenty Twenty-Three theme is the all-new default theme that ships out with WordPress 6.1. The theme comes with 10 style variations and uses the Twenty Twenty-Two theme as the foundation. The theme already has over 2000,000+ active installs. The theme is also Accessibility Ready, supports RTL language, and is also translation ready.

3. Zeever

Zeever block theme

Zeever by jegstudio is another popular block theme. With 4000+ active installs, this is a dark-themed template that is both modern and responsive and is fully compatible with the Gutenverse plugin which is also from the same team. By combining with the Gutenverse plugin you get over 45+ blocks, a template library, and more features. The theme requires PHP version 7.0 or higher and of course WordPress version 5.9 or higher. The template comes with both the core and gutenverse version and also includes block patterns for both core and gutenverse.

4. Zoologist

Zoologist block theme

Zoologist is created by Automattic and focuses on being more of a blogging theme. The theme is a child theme of Blockbase. With over 3000+ active installs, the theme makes use of elegant color palettes combined with sans-serif typography.

5. Wabi

Wabi block theme

Wabi by Rich Tabor is the most user-loved full site editing theme out there. With over 500+ active installs, this theme is perfectly suited for writers and publishers as it combines a simplistic design with elegant typography, a dynamic accent color system, and multiple style variants (light, dark and dynamic color schemes). The theme also includes 15 patterns. Rich Tabor is also the co-founder of CoBlocks, ThemeBeans (a premier WordPress theme shop), and Iceberg (a markdown editor for Gutenberg). 

There is also another block theme from the creator known as Wei.

6. Extendable

Extendable block theme

Extendable by Extendify is a theme that lets you stand out with its distinct, dynamic block theme design. The theme includes multiple style variations and has active installs of over 1000. The theme requires WordPress version 6.0 and higher with PHP version 5.6 and higher.

7. Aino

Aino from ElmaStudio is an FSE theme that provides over 40 block patterns. The pattern library is growing periodically. The theme opens door to more customization if combined with the AinoBlock plugin for the easy creation of visually stunning page layouts. The theme is also fully WooCommerce compatible.

8. Blockpress

Blockpress block theme

Blockpress by MotionBlocks focuses on providing a balance between flexibility and performance. The theme has over 12 query loop templates, a dark color scheme, predefined layouts for pages and posts, a style switcher, no dependencies, smart loaders, and many more. The theme only uses around 2kb of style assets and everything else is generated on the go, which depends on the blocks used on the page. The theme is also WooCommerce compatible. The theme does require you to be on WordPress version 6.0 or higher.

9. Tove

Tove block theme

Tove from Anders Norén adds a bit of color and vibrance and is a multi-purpose block theme. The main focus of the theme is for owners of restaurants and cafes, but thanks to full site editing making the theme adapt to different purposes is an easy task. The theme comes with over 40 block patterns, which include six different header designs and seven different footer designs. The theme is extremely lightweight at only 200 kilobytes. The author does have many themes in the repository and some of the other noteworthy themes are Björk, Beaumont, and Poe.

10. Ona

Ona block theme

Ona by deothemes is minimal and comes with several pre-defined block patterns. The theme is suitable for users seeking a fast and optimized website and the theme also focuses on core web vitals performance and includes several pre-defined block patterns. The theme has over 1000+ active installs.

11. Bricksy

Bricksy a WordPress block theme

Bricksy is a fast, lightweight, responsive modern block theme from Anariel Design. The theme effortlessly combines modern layouts with design elements that are visually unmatched and has 9 color variations. The theme includes many block patterns and provides a responsive and mobile-friendly design. The theme also supports WooCommerce.

12. Elyn

Elyn a WordPress block theme

Elyn from Unisonthemes comes with a clean and minimal avatar with many available patterns. By combining full site editing and block patterns, the users can make the theme adapt to their specific needs in an instant. The theme supports threaded comments and is also translation ready.

13. Charta

Charta by ThemeZee is an experimental block theme in terms of its layout. The theme combines two column layout with a sidebar on the right. The theme is clean and at the same time manages to be modern. The theme is SEO-friendly, GDPR compliant, fully responsive, and translation ready.

14. Catch FSE

Catch FSE  a WordPress block theme

A full site editing theme from Catch Themes, Catch FSE is a responsive theme with a minimal design. The theme is built by keeping Twenty Twenty-Two as the foundation. The theme provides 15 block patterns, 15 FSE templates, and 9 template parts to play around with. The theme is also Gravatar ready, supports threaded comments, and also uses WordPress standard codes.

15. Avant-Garde

Avant-Garde a WordPress block theme

Avant-Garde created by Brian Gardner is an experimental block theme that offers well-made design patterns. The theme comes with 14 patterns and thanks to full site editing customizing the theme is not a hard task at all. There are two more block themes from the author and they are Bright Mode and Design Mode.

16. Aeonium

Aeonium a WordPress block theme

Aeonium developed by uxl themes is a highly responsive dark theme. The theme requires WordPress version 6 and above and packs in six style variations/ color palettes and has over 600+ active installs.

17. Gutenify Business Dark

Gutenify Business Dark a WordPress block theme

Gutenify Business Dark from Gutenfiy Dev is just one of the many block themes they provide. This is a multipurpose highly responsive block theme with over 600+ active installs, the theme when combined with Gutenify plugin, you will be presented with multiple template kit, create customized templates, and also offers advanced features. The theme is translation and eCommerce ready.

18. Kelsey

Kelsey a WordPress block theme

Kelsey is yet another multipurpose WordPress block theme developed by WEN Themes. This is a dark theme that comes with 8 block patterns, 9 templates, and 5 template parts. All the blocks are fully customizable and responsive. The theme has over 500+ active installations. The theme is suitable for a wide variety of categories be it business, portfolio, and so on.

19. eStory

eStory a WordPress block theme

eStory is purely a blogging theme developed by ThemeGrill. The theme can also be used for other categories but its primary focus is on the blog niche. The theme has over 10 block patterns, is SEO optimized, is lightweight, and also the theme is translation and RTL ready.

Wrapping Up

WordPress block themes along with full site editing are growing and expanding at a steady rate. Surely, there is a long way to go, as more and more users are yet to explore the capabilities of block themes along with full site editing. 

What are block themes in WordPress?

Unlike classic themes, block themes are made up of blocks. The blocks initially limited to the content area are now available sitewide.

What are block patterns in WordPress?

Block patterns in WordPress refer to layouts that are premade by combining various blocks together. By using block patterns, users can create visually appealing layouts in the shortest possible time.

How do I edit a block theme in WordPress?

Editing a block theme is different from a classic theme. With block themes, you can make use of the new site editor and other features that come with full site editing. You no longer need to move from the customizer to the theme’s files to make the necessary changes.

The WP Week Newsletter

A weekly newsletter covering updates from the WordPress ecosystem that are relevant and helpful for WordPress agencies, developers, and enthusiasts

Leave your comment

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