Sharing Approaches for FSE Feature Adoption

While conversation continues around the WordPress’ full site editing project and the collection of features it brings, I’m increasingly getting questions around adoption. When should we adopt features? Do we have to adopt features? What would be easiest to start with if I’m not ready to leap fully into the block theme world? This post is meant to start to address how one might think about approaching adoption with increasing levels of complexity and maturity partially inspired by this awesome post from Gutenberg Times and a recent hallway hangout on adopting FSE. Right now, the levels are based on a few factors including the stability of features, whether new concepts are introduced (ex: multi-entity saving, global styles), and what the value of the features are. I intentionally included some upcoming features to help future proof this post a bit as well and have marked them with the following label to make it easier to distinguish: 

  • [Future]: a feature that’s not currently available but in progress. 
  • [Theme Author]: For those who create themes. 
  • [Site Owner]: For those who manage sites. 

Level 1

Create your own block patterns [Theme Author] [Site Owner] 

To quote the user documentation, “Block patterns are a collection of predefined blocks that you can insert into posts and pages and then customize with your own content. Using a Block Pattern can reduce the time required to create content on your site, as well as being a great way to learn how different blocks can be combined to produce interesting effects.” 

While there’s a pattern directory that you can easily snag options from with a simple copy/paste until the directory is integrated into the Inserter, you can also register your own. Note that patterns can both be incorporated into a theme or just registered locally for a site and are excellent tools to have to create a tailored experience! For more information, here are some resources to dig into: 

Implement theme.json in classic themes [Theme Author] 

Theme.json is a new tool that allows you to configure the editor and manage styles, both adding (or removing) support for features and defining defaults. This allows you to do things like set a custom color palette for users to select from! You can read more about how this feature works in the Dev Note for 5.8 and in the developer documentation

While theme.json is mainly talked about in the context of block themes, you can also use it alongside a classic theme! To get started, check out my coworker’s post on “Using Theme.json in a Classic Theme”

Build with the Query Loop block [Theme Author] [Site Owner]

To quote the user documentation, “the Query Loop block is an advanced block that allows you to display posts based on specified parameters; like a PHP loop without the code. You can think of it as a more complex and powerful Latest Posts Block.”

There are numerous ways to customize this block, including rearranging the inner blocks, adding in new inner blocks (like Post Author), customizing the Featured Image block (including using Duotone filters), and more. To learn more about the block, here’s yet another YouTube video from yours truly that you might find helpful.

Level 2

Add support for the Block Widgets Editor [Theme Author] 

Launched in WordPress 5.8, the Block Widgets Editor brings the power and familiarity of blocks to widget areas. This means that if you add support for this new feature that any block you use in the post editor, you can now use in your widgets! This is an excellent stepping stone on the road to full site editing features as it brings blocks to a known experience without introducing drastically new ideas. Here are a few resources to help determine if this is something you’d like to explore:

You can also head to #feature-widgets-block-editor in Make Slack to share feedback, see the latest efforts, and (in some cases) get implementation questions answered.

Add support for the Block Navigation Editor [Theme Author] [Future]

In line with the Block Widgets Editor work, the Appearance > Menus section is also undergoing work to bring the block editor to the experience of creating Menus! This is very much in the early stages of development and is still behind an experimental flag within the Gutenberg Plugin, where development happens for the editing experience. For now, you can follow the work in the GitHub project board, this GitHub Overview issue, or in #feature-navigation-block-editor in Make Slack. 

Level 3

This level introduces some new concepts including multi-entity saving, making global changes, and having access to parts of the site that weren’t available previously without diving into code. 

Add support for the Template Editor and build with Theme blocks [Theme Author] [Site Owner] 

The Template Editor allows you to create, assign, and edit block templates to specific posts and pages without needing to touch code. Since this unlocks so many new possibilities, 20+ theme blocks were created to allow you to customize everything from your Site Title to your Post Excerpt (only some were released for 5.8). With this new feature, you’ll also get to see multi-entity saving in action and the impact of global changes. This is just a fancy way of saying that this experience relies on you needing to save multiple things at once and that edits to one template impact all pages/posts using it. These two concepts are new to the WordPress world so it’s worth thinking about how to set site users up for success. Here are some resources to get you started:

As a note for the future, you should include the Navigation block in your plans! This block will allow you to create menus, including being able to add the Search block, Site Logo block, and more. To follow along with the work there, check out this overview issue

Explore creating or using a Universal theme [Theme Author]

A Universal Theme is a Block theme that can use the Full Site Editor but can also be configured in a more classic way, allowing you to use the Customizer. While this is a temporary measure one can take on the way to Block themes, it can be a great way to ease users into the experience. I highly recommend checking out this previous ThemeShaper article, downloading it directly from the theme repo, and reviewing the work in progress site to learn more about BlockBase, which is intended to help get folks started.

Level 4

Create/use a Block theme [Theme Author] [Site Owner] 

It should be no surprise that the final step is to go all in and create a block theme or use one on your site. Keep in mind that, if you are a theme author, you could start slowly by replacing specific PHP templates with (ideally simpler) block based ones that folks could eventually edit. Either way, you’ll find this round up of Resources for Block Theme Development helpful to dive on in. As you go, keep in mind that it’s super helpful to read what folks learn as they adopt the block theme system so consider this encouragement to blog about your experience! Here’s a recent example from Fabian Kägy. If you do this, feel free to drop a link to your post in the FSE Outreach Program in #fse-outreach-experiment in Make Slack

Keep in mind that you might look at the above levels and have your own thoughts about where certain features should be listed. This is wonderful! Please share in the comments as this is all a work in progress and not set in stone. Bonus points if you want to share some resources I missed. 

If you’re particularly inspired, I would deeply encourage you to write your own post about how and why you plan to approach adoption. Share it in the comments below so I can learn from you too! I’d love for us all to continue the conversation. 


10 responses to “Sharing Approaches for FSE Feature Adoption”

Leave a Reply to WordPress Roundup, January/February 2022 – Tom Finley Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: