Q: First FSE WordPress Theme Now Live

Screenshot packaged with the Q WordPress theme.
Q WordPress theme screenshot.

Themes Team representative Ari Stathopoulos is now officially the first theme author to have a theme in the directory that supports full-site editing (FSE). With a slimmed-down beta release of FSE shipping in WordPress 5.6 this December, someone had to be the first to take the plunge. It made sense for someone intimately familiar with theme development and the directory guidelines to step up.

In many ways, it is a huge responsibility that Stathopoulos has taken on. Until one of the default Twenty* themes handles FSE, the Q theme will likely be one of the primary examples that other theme authors will follow as they begin learning how to build block-based themes.

Earlier this month, I used Q to test FSE and determine how much it had advanced. It is at least months away from being ready for use in production. The beta release in 5.6 is more or less just to get more people testing.

Stathopoulos has no plans to make Q much more than a bare-bones starter or experimental theme. It is almost a playground to see what is possible.

“Q was born out of necessity,” he said. “I couldn’t work on full-site editing or global styles without having a base theme for them, so for a while, I had it in a GitHub repository. I decided to release it to the WordPress.org repository because I think I might not be the only one with those issues. Downloading a theme in the dashboard is easier than cloning a repository for most people.”

Existing block-based themes are few and far between. Automattic and some of its employees have some experimental projects, but none of those are in the official directory for anyone to test. Stathopoulos wanted a base theme that was unopinionated in terms of design that would allow him to work on FSE, test pull requests, and experiment with various ideas.

“It has some ideas for things that ultimately I’d like to see implemented in FSE, and it’s a playground,” he said. “For example, the addition of a skip-link for accessibility in the theme, an implementation for responsive/adaptive typography, and conditional loading of block styles only when they are used/needed. These are things that I hope will be part of WordPress Core at some point, and the Q theme explores ideas on how to implement them.”

He began work on the theme over a year ago and continues working on it as a side project. He said Yoast, his employer, fully supports the idea of creating things that are beneficial for other theme designers and WordPress core.

Developing an FSE-Capable Theme

Using the Q theme in the site editor beta from the Gutenberg plugin.
Editing the Q theme single post template in the site editor.

End-users must install the Gutenberg plugin and activate the experimental FSE feature to use the theme or any similar theme. Currently, FSE is missing many key features that make it viable for most real-world projects. However, theme developers who plan to work with WordPress over the next several years will need to begin testing and experimenting. Q makes for a good starting point to simply get a feel for what themes will look like.

“The biggest issue was — and still is — keeping up with Gutenberg development,” said Stathopoulos. “Many things are currently fluid, and they happen at a very high pace. The reason I created the theme was because other themes I was testing, as part of my contribution to the Themes Team, were not properly maintained or updated. I wanted to create a starter theme that can be used as a starting point for others as well.”

One of the biggest questions still hanging in the air is what the timeline will look like for publicly-available, block-based themes. Will 2021 be the year they take over? That is unlikely given the feature’s current state. However, there will be a point where developers are no longer building classic or traditional themes.

“I think we’re going to see a lot more FSE themes in 2021,” said Stathopoulos. “It might take a couple of years before they become the standard, but after the release of WordPress 5.6, I hope there will be a lot more development and focus on FSE and global styles. Whether we see more FSE themes or not depends on when some things get merged in WordPress core.”

He pointed out some critical missing features from Gutenberg at the moment. The big one is that the Query block, which is the block that displays posts on the front end, does not inherit its options from the global query. Essentially, this means that, regardless of what URL a visitor is on, it displays the latest posts.

“Once these things are addressed, and blockers for theme builders get resolved, I expect we’ll see an explosion of good FSE themes being built,” he said.

Stathopoulos is most excited about the prospect of seeing more design standards come to core. Currently, there is no consistency between themes. Theme authors can use any markup they want. Switching themes affects a site’s structure, SEO, accessibility, speed, and many other things.

“My advice to theme developers who want to start tinkering would be to start with something simple,” he said. “It’s tempting to add extremely opinionated styles, for buttons for example, but more and more things get added every day to the editor like a border-radius setting for buttons. Theme authors should avoid the trap of designing an FSE theme having in mind what the editor currently does. Instead, theme authors should strive to build something having in mind a vision of what the editor will eventually become.”

The Future of Theme Reviews

Because Stathopoulos is a representative of the Themes Team, he also has some insight into the shift in the coming years for guidelines and what steps authors might need to take. While it is too early for the team to begin making decisions, its members are already thinking about forthcoming changes.

“Change is always difficult, especially when it’s for something this big,” said Stathopoulos. “It will be a bumpy ride, and it will take time. WordPress theming is a huge industry. For a while, ‘classic’ (for lack of a better word) themes will continue to be a viable solution for theme developers who didn’t have time to catch up. But not forever.”

Some may look back at previous major shifts and worry about what the future theme directory guidelines may ask. In 2015, the team required all theme options to use the customizer. This was after a three-year wait for theme authors to organically make the switch. Given that FSE will be a much larger departure from norms and dislike of the Gutenberg project from segments of the development community, it could be a rough transition.

“At some point, FSE themes will become the industry standard and what the users want,” said Stathopoulos. “Personally, I hope no one will want to upload a classic theme in the w.org repository in 2025 when the industry has moved on. It would be like uploading today a theme that is using tables and iframes for layouts.”

He said that sufficient time would be given for the eventual transition. However, the team will likely prioritize FSE-based themes. They are cognizant of how much of a shift this will be and will plan accordingly when the time comes.

11

11 responses to “Q: First FSE WordPress Theme Now Live”

  1. Aren’t the “Demo Sites” that are available for use by the buyers of Generate Press Premium “Block Based Themes”?

    Demo content is not the same as a theme. Full-Site-Editing lets everything be build using the editor – including the site’s header, footer, and everything in between. I haven’t checked what GeneratePress does, but FSE is an approach that is native to WordPress and will be available in core soon.
    Everything is a block…
    Block-based themes have a completely different structure compared to normal themes. Templates are not PHP files but HTML files. For more information on Block Based themes you can refer to this doc https://developer.wordpress.org/block-editor/tutorials/block-based-themes/

    • Can we use all the plugins with it?

      I haven’t tested all the plugins, nobody has. So there really is no way to answer that question…
      If a plugin is compatible with the block editor then it should work. However, keep in mind that Full-Site-Editing in the WordPress editor is still experimental so there are still a lot of things that won’t work as expected. But that is the whole purpose of the theme: To help identify the issues in the editor and the overall FSE experience so we can fix them.

  2. “It’s tempting to add extremely opinionated styles, for buttons for example…”

    These plain canvas-like themes have until now been a choice for those who prefer it (those who like to design their own thing), but this article makes it sound like these types of themes should be the only choice in the future of WP.

    This is worrisome to me as a non-designer who looks for themes specifically based on things like attractive button styles.

    FSE sounds bad for people like me, who aren’t artistic, can’t coordinate colors, and want themes to do the artistic stuff.

    • That was quote from the theme author and is his opinion on things. Others will definitely have different opinions. As for me, I do not think themes should all be blank canvasses similar to this theme.

      I understand what you are worried about and think it is a valid concern. However, I also think you will be pleasantly surprised as FSE eventually comes together and more theme authors begin to build themes.

      Sticking with the button example (and I think Ari will agree with me), is that he’s primarily talking default button styles in themes. He’s not saying that all themes should be a blank canvas. Themes will have a lot of flexibility to add in custom block styles, color palettes, gradients, patterns. And, a good theme designer will provide end-users with a wide range of options to choose from that still look good. It’s not about making the user do the designing. It’s more about letting the user choose from a list of predesigned options. So, you would get the option to choose from the theme’s colors and styles for your button. A theme might also provide various patterns that have customized buttons in them.

      There’s a lot to look forward to, and because the process of building a theme will actually be simplified, WordPress will really be providing a designer’s playground. Personally, I look forward to an explosion of artistry.

  3. Thanks for the interesting article! After reading it, two questions arose in my mind:

    Does this mean that we’ll not be able to use PHP so much like we do now? I mean that every template is currently based on PHP, while FSE blocks are HTML based.

    When I look at the example in the Codex (the link Ari shared), I see a functions.php (only used to set up theme), I see a index.php (just a fallback), some .html template parts (no PHP here?) and an Experimental-theme.json (also no PHP here?).

    Will this mean that files like single.php, archive.php and home.php will become redundant? Or is my understanding of FSE themes incorrect?

    Second, what will this mean for the customizer? Where is the customizer in FSE themes and how will it function?
    Will it be possible to link values of customizer fields to the JSON file with the global styles?
    And what about things like get_theme_mod() for placing values of text controls inside templates?
    Or are those things currently being worked on?

    And perhaps a question for Ari, since he’s a (former?) Kirki developer: will Kirki play a big role in things like creating the global styles in the JSON file? I would imagine sth like Kirki generating the JSON file in a similar way like how we now add customizer fields?

    Thanks! Ralph

  4. I am currently in the process of rebuilding a WordPress website from scratch. I was looking into Elementor Pro + Hello theme (child theme) as a basis.

    I then stumbled into a site that explained Gutenberg vs. Elementor, then read about FSE and now I’m sold.

    I need to get my site into production in two months.

    I know what elements I need and how to implement them using Elementor Pro. With Gutenberg, I am a bit more at loss.

    However, I wouldn’t wanna invest now into something that will be redundant in a year.

    My question is what I should do now if I want to build my site on a foundation that is as future proof as possible?

    • It depends on the complexity of the site. FSE is still months away from readiness, and I would not currently recommend it beyond the most basic of sites in production.

      If you are familiar with Elementor, that is likely going to be your best bet if you need to build more complex layouts and cannot do so via code. And, Elementor could very well still be the best thing for your situation in a year’s time too.

      So, it really depends on the site’s needs and your skill level. Two months is not a lot of time to learn something new and build a new site with.

Newsletter

Subscribe Via Email

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