As the era of block themes dawns, the WordPress theme directory could be reinvented. This is what Munir Kamal decided 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 the block themes that are officially hosted on WordPress.org.

The interface and experience are similar to the official theme directory, and for good reason. Kamal is pushing for changes on 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, so I created this as a concept / an experiment. Now that we are in the era of the next generation of WP (Block Themes) themes, the theme repository needs to be redesigned. Block themes are about colors, typography, block styles, patterns, and patterns. As a WP user, I want to see all of this topic related information when exploring topics in the directory. I have to choose without installing and testing multiple themes.

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

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 both in the editor and in the front-end. This level of standardization did not exist before the launch of WordPress 5.8 last year.

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

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

This would have been practically impossible in the past because WordPress didn’t have a way for themes to define something as simple as a color palette.

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

For years WordPress.org theme previews have been plagued by a sub-par demo system. Today, the live demo can show starter content if a theme provides it. However, there is no current FSE support for the feature. Gutenberg Hub displays the same live preview as shown in the official directory.

Kamal partially solved this problem by adding a “Content” button. Clicking on it allows users to see dozens of blocks in action.

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

Kamal intends to incorporate templates and theme designs into the preview in the future. These additions would make thematic demos more useful.

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

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

---

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