Phoenix, a Block-Based WordPress Theme With a Sidebar

Earlier today, the Phoenix theme was merged into the WordPress Theme Experiments repository on GitHub. Like all themes in the repo, it is not meant for use on a live site. It is a project to test new ideas for the upcoming Full Site Editing (FSE) system.

Imran Sayed of Codeytek Academy created the theme and is hosting a live demo. Those who want to give it a test drive can grab the code from GitHub.

Until now, every block-based theme I have seen has been missing a left or right sidebar. I am a fan of the open-canvas format that focuses on content, hiding the often-frivolous widgets that only detract from the important bits. However, sidebars are sometimes useful and even necessary.

When I refer to a “sidebar,” I am not talking about the dynamic sidebar system of widgets that we have all come to love or hate since WordPress 2.2. That system no longer exists in the world of FSE. The site editor merely has a concept of templates and template parts, which are containers for blocks. It is up to the theme author to give some default structure, even building template parts that work like sidebars.

A sidebar in the Phoenix theme literally means a block area on the side of the page.

It is such a simple idea, one that is nearly as old as blogs. It hardly seems something worth getting excited about, but I have been waiting a while to see a block-based theme with a sidebar. The feature further legitimatizes the path that WordPress is heading down. The greater theme development community needs to see these simple architectural ideas put into action. They need to see someone saying, “Hey, here’s how you do this simple thing you’ve been doing for a decade in this new system.”

Phoenix only adds a sidebar on the front page, but this is a start.

The theme is also more ambitious than some previous attempts by mixing static and dynamic features on the front page. Phoenix includes a header area with the standard site title and a nav menu. Below that, it adds a static hero section that users can customize.

Phoenix WordPress theme header area on front page.  Includes a hero area with image next to text.
Front page hero section.

It then uses the Columns block to split the content and sidebar. On the left, the theme uses the Query block to list the latest posts. On the right, it adds a sidebar template part.

Content area next to sidebar in the Phoenix WordPress theme.
Latest blog posts section next to sidebar.

The footer design is also bold in comparison to some other block-based themes so far. It has a full-width Cover block, which is followed by a group of columns, which is basically what a footer sidebar is.

Phoenix theme footer with full-width Cover block followed by columns.
Large footer area with columns.

Again, these are basic concepts that theme authors have been doing for ages. The idea behind many of these experimental themes is to start testing how to make them a reality using blocks. By the time the site editor lands in WordPress, theme authors can build upon these initial techniques and create more complex layouts.

This is especially the case with front-page design. If there is one area that has created roadblock upon roadblock when developing traditional themes, it has been the front page. Whether through custom options pages, the theme customizer, widgets, or a host of other solutions, nothing has stuck for well over a decade now. While the single post template is arguably the most important view on a WordPress website, it is the front page design that draws in the average user. It is also one of the biggest points of failure after users install a theme. That carefully-crafted front page in the demo looks nothing like what the users see on their own sites.

Phoenix is a step in the right direction because it shows how to mix these basic elements. Because it is a block-based theme, end-users have instant visual feedback in the site editor if they want to customize it.

The next step is for more themers to get involved in the Theme Experiments project. Start exploring more complex ideas and layouts. Use this moment to share knowledge and build upon the work that so few others are doing right now.

Phoenix is by no means a perfect theme. The front end and the site editor are not a one-to-one match at this point. Everything that looks wrong with it in the editor highlights just how far we have left to go.

I am carefully maintaining hope while being a realist about where FSE will be in 2021. This is a year for exploration. Perhaps we will have a few breakout themes that push the envelope toward the end of the year, but it all starts with experimental projects like Phoenix.


One response to “Phoenix, a Block-Based WordPress Theme With a Sidebar”


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.