What Are Block Themes? What You Need To Know Before WordPress 5.9

WordPress 5.9 is set to launch on January 25, and many users will be in for a surprise. The upcoming release will be the most monumental shift in how the platform works since the introduction of the block-based content editor in 5.0. Block themes, global styles, and the site editor will kick-start a new future for WordPress.

For the average WP Tavern reader, this is not news. We have covered block themes here for over a year. For those out of the loop, there is a lot to catch up on within the next two weeks.

One of the complaints with the launch of the block editor in 2018 was that users could only opt-out of using it by installing Classic Editor or a related plugin. This is not the case for the new features in 5.9. Users can keep on using their current setup without any changes at all. Accessing the site editor and global styles is an opt-in process. It requires the activation of a block theme.

The upcoming changes will affect two primary groups of users. The first are those who prefer to run the latest default WordPress theme. The second will be those ready to try out the new system.

Currently, there are 35 block themes in the directory on WordPress.org, with more in the review queue. That limits the available options for now.

Three-row grid of three columns.  Each shows a WordPress theme screenshot and its name.
Block themes from WordPress.org.

After WordPress 5.9 launches and developers become more familiar with building on the new system, I expect that we will see a noticeable uptick in block themes in the coming months.

Note: this post focuses on user-facing changes. If you are a developer who wants to get started with block theme design, read Marcus Kazmierczak’s overview of building block themes for WordPress 5.9.

Twenty Twenty-Two

About page design with a logo, title, and menu at the top.  Following that is a large intro section and a picture of a bird.
Twenty Twenty-Two theme about page template.

The latest default WordPress theme, Twenty Twenty-Two, will launch alongside version 5.9. While I have a few nit-picks about it, it might just be my all-time favorite default theme ever created.

WordPress 5.9 RC 2 was released earlier today. Now is as good a time as any to give it a test run. Twenty Twenty-Two is already bundled with this version.

As is often the case with default themes, it is likely to become the de facto standard in which developers build their own projects. It uses all the latest features and is one of the most up-to-date themes out there. This makes it the ideal starting point for users who want to test the new system.

The theme is merely one component of a broader system. For users, it can be something they set and forget. Or, they can take it to the next level and customize their front end until their heart is content.

Site Editor and Global Styles

Block themes are different than many traditional themes. In the classic era, users activated a theme and customized whatever options the developer made available. It was a rigid system that often did not give users much flexibility unless they knew how to write code.

Users can access a boatload of new features after activating a block theme. This is done via the site editor, located under the Appearance > Editor admin screen. Users can modify their theme templates directly on the canvas and customize their design through the global styles panel.

WordPress site editor open to the home template.  The global styles panel is open on the right with options for typography, colors, and layout.
Site editor with global styles panel open (right).

The first experience with the site editor can be overwhelming. Some might prefer diving right in, while others take a different approach. Regardless of how you learn, I recommend going through the Simple Site Design with Full Site Editing course from Learn WordPress. The Training team has created a 15-lesson plan that walks you through everything you need to know. They also have a six-minute workshop on using global styles.

Using the site editor can be fun, but it can also be frustrating. This is essentially a “version 1.0” of the feature. It will not meet everyone’s needs with its launch in two weeks. It will take some time to mature and for theme authors to build on top of it.

I spent over a decade building themes professionally. One of the most common questions I got was, “How do I change the post meta area?” Users would want to remove the author, move the category list, and do numerous other things. No amount of theme options covered every scenario. I often resorted to walking non-coders through making changes to their theme templates.

Except in the most complex cases, this problem no longer exists. Through the site editor, users can choose what appears.

Inserting a custom byline area in the Query Loop block in the WordPress site editor.  Below the post title, appears the author name, date, and comments link.
Custom post byline/meta.

I wish we had such a system a decade ago. It would have saved me hours of support work.

Of course, this is a simple example of what is possible with the site editor. Everything from changing bits of a template to creating an entire custom color palette is mere mouse-clicks away from reality.

However, the possibilities are not boundless. There are limitations that users will undoubtedly run into as they get more and more advanced with design ideas. Contributors have taken massive strides to get this first version ready for WordPress 5.9. And, there will be more to come.

Customizer, Widgets, and Nav Menus

The most shocking thing for those who have been out of the loop will likely be the disappearance of the customizer, widgets, and nav menus admin screens. These components are replaced by the site editor when using a block theme.

There are some known issues related to the customizer, such as no custom CSS option, live previews, or site icon setting. I covered this in more detail in a previous post.

Nav menus are now handled via the Navigation block:

Navigation block selected and open in the WordPress site editor.
Selecting a nav menu.

It could take some getting used to. While I am a fan of the block system, I, admittedly, still prefer managing menus via the classic screen. However, I am starting to come around. The contributors who have been working on the block have made the experience far better than it was just a few months ago.

As for dynamic sidebars and widgets, they are gone, at least in the traditional sense. Everything is a block now. Theme authors can create columns or containers that look like sidebars of the past, but they are all managed via the site editor. And, users can stick any block they want anywhere.

18

18 responses to “What Are Block Themes? What You Need To Know Before WordPress 5.9”

  1. “I wish we had such a system a decade ago. ”

    Man, that’s so relatable.

    However, now that we are jumping in to new era of WordPress development, block based full site editing experience will be proven to be the best method for building websites with WordPress.

    Feeling so much excited about 5.9!

  2. Thanks for the heads up about 5.9. Looks like it honestly should be called 6.0 or 0.9. I have close to 400 lines of Additional CSS in Customizer and no desire to be a beta tester. So prudents requires that I move on. Easy Updates Manager should keep me safe until I decide on a new course. Sad that WP did not do this the right way and fork the product. It sure was great while it lasted.

    • As Justin mentions, you can keep your current “classic” theme and nothing will change. Most of the sites I run will be sticking with the “classic” interface simply because I’m the only one that edits everything, and I feel more comfortable coding, etc.

      • Based on the quality of previous work, should I rely on a promise that “nothing will change”? Unnecessary changes are getting too close to functions I rely on, potentially creating situations where I have to drop everything to rescue my severly broken-by-update website. WP has become a ticking time bomb. I have pity for Vinny with 48 websites to manage. I’m sure there are many in this situation.

  3. So…. hypothetically (not really/ kinda serious) speaking of course, someone came up with a very good scenario and use case:
    Let’s say a site changes their CSS for hyperlinks on a semi-regular basis. For pride month, they make CSS underlines in a rainbow, for March all hyperlinks are turned green, for Christmas time hyperlinks are changed to a cool redgreen gradient, they like minor/small CSS changes for other events, and other times hyperlinks are a simpler blue text & blue underline.
    Now, each of these is accomplished via the Custom CSS Customizer option – yes, like you mentioned before in the previous article ;-)
    So, switching to a FSE theme, then throwing the menu back together real quick, and pushing it live – everything will pretty much be the same standard one column site, right?
    But how would an end-user add those examples aforementioned above, or any other CSS changes, within the new FSE themes?

  4. Hi, I’m from Brazil and I follow the details with great enthusiasm.
    I confess that I love new changes and at first it’s all very confusing, but then we get used to it and everything is perfect.
    I have a first problem, the navigation block I can’t make it work in AMP on mobile with the hamburger button. Has anyone already made it?
    Big hugs and keep up this amazing work.

  5. I gave Twenty Twenty-two with FSE a test and it reminds me of what I don’t like about Elementor and Divi. I found it difficult to just jump in and get started because there are so many buttons and switches. I’m afraid content and design are mingled to the point of confusion. Maybe that’s just me? I know tutorials will have their place and ready-made sites will help but I find myself longing for something simpler for myself and my customers. Just a bit concerned.

  6. Well, I shouldn’t be all negative…

    The block patterns in Twenty Twenty-Two are a joy. And looking at the theme’s code, I’m thrilled… because FSE theming is so much simpler. There’s really not much PHP at all in that theme! Now that I can get excited about. The new way of theming is for designers, not designers who accidentally became developers [because they had to]. Very refreshing.

    This is just going to take some time to adapt to. It’s truly a whole new way of doing things. WordPress product makers and end-users are both entering new territory.

  7. Been using WP since 2006. Still using Classic editor and Classic widgets with GeneratePress and a child theme. A little CSS and a little tweak here and there and I’m happy. Outrageous scores and times on all performance measurements sites too. Long time since I did my first site in 1994 with notepad. ☺️

Newsletter

Subscribe Via Email

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