Gutenberg Hub Launches Block-Based WordPress Theme Directory – WP Tavern

At the dawn of the era of block themes, the WordPress theme directory could be reinvented. That’s what Munir Kamal set out to do ahead of the launch of WordPress 5.9 later this month. He announced a directory of alternative themes on the Gutenberg Hub website earlier today. It lists all block themes officially hosted on WordPress.org.

Directory of Gutenberg Hub themes.

The interface and experience is similar to the official theme directory and for good reason. Kamal is pushing for changes at WordPress.org.

“I noticed the lack of information provided by the official theme directory,” he said. “I want to start a discussion around this to fix it, and so I created this as a concept/experiment. Now that it is the era of the new generation of WP themes (Block Themes), the theme directory needs to be redesigned. Block themes are for colors, typography, block styles, patterns, and patterns. As a WP user, I want to see all of this theme-related information when I explore themes in the directory. I have to choose without installing and testing several themes.

The uniquely themed pages of this reinvented directory include more data than the official directory. Instead of just a screenshot and description, each page displays the theme’s color palette, provides sample typography and information, and previews multiple content blocks.

Screenshot of the Octane WordPress theme page on Gutenberg Hub.  Includes theme description, screenshot, colors, and typography sections.
Octane topic page.

One thing that makes modern themes unique is their inclusion theme.json to file. This file allows theme authors to save settings and add styles that work in both the editor and the front-end. This level of standardization did not exist until WordPress 5.8 was released last year.

It also allows developers like Kamal to create new tools on top of it. When almost all data related to a theme is in a standard format, it is easy to extract and experiment with.

For example, because there is a specific key in the theme.json file for the colors, anyone can grab them and display them via code. The Gutenberg Hub directory displays them as a palette next to each theme. Users can even click to copy them.

Gutenberg Hub theme directory homepage.  The mouse cursor hovers over a specific color in a theme's palette.  Its hexadecimal code appears in a tooltip.
Copy of a theme color.

This would have been next to impossible in the past because WordPress didn’t allow themes to define something as simple as a color scheme.

The directory also automatically generates social images for each of the themes. The following for Mebae and Pacer show both their description, fonts, colors and screenshot.

For years, WordPress.org theme previews have been plagued with a substandard demo system. Today, the live demo can display starter content if a theme offers it. However, there is no current FSE support for the feature. Gutenberg Hub displays the same live preview as displayed in the official directory.

Kamal partially solved this problem by adding a “Content” button. By clicking on it, users can see dozens of blocks in action.

Tove theme preview/demo with fake content.  Content displays 1-6 headings, a horizontal ruler, and a paragraph.
Tove theme content preview.

This gives a general preview of what the theme looks like, but the preview experience is still lacking. A handful of featured images would add a bit of visual punch to the home/blog and archive pages.

Kamal plans to integrate templates and theme templates into the preview in the future. These additions would make themed demos more useful.

He does not intend to stop there. “Other plans include providing super useful search and filter functionality that makes it easy to narrow down the result to a user’s closest needs,” he said. “And maybe a comparison tool that a user can use to compare two themes side by side with handy things to decide between the two, rather than reviews, downloads, etc.”

The work Kamal has done so far looks promising. There are still a lot of things that could be improved if we had a whole community effort behind this. With the launch of block theme functionality with WordPress 5.9, there’s no reason to stick with the old theme preview system when so much more is possible.


If I had one more wish for Gutenberg Hub or WordPress.org, it would be for all child themes to be listed on their parent theme’s page. But, I’ll take this revamped directory first.

Comments are closed.