agm

I shared a version of this within Automattic, the company I work, and a colleague suggested that this would be helpful to have in the wider WordPress conversations so I thought I’d share here! This post won’t cover everything despite my best efforts but it will cover, at a high level, the basics of the context of this specific release, where we are (loosely) in the story of Gutenberg, and what opportunity each feature provides. It’ll start at the highest level before stepping progressively into more details. I’ve always loved having a sense of where I am in a moment in time, whether it’s with LGBTQ+ rights or software, so I hope this helps give you a sense of both the unique challenges and opportunities today as well as how to stay informed in the future.

Table of contents:

• High level snapshot
• Overview of releases
• Overview of full site editing
• WordPress 5.9+ potential features and opportunities

Offering a vignette 

Thanks to the work of the last year or so, WordPress has unlocked some magical things for folks to venture into from using a library of curated block patterns for faster and more beautiful content creation to being able to customize more parts of your site with blocks like your 404 page or your widgets. Beyond end user improvements, there are huge gains for themers/developers as you can read below from Anders Norén reflecting on his latest block theme:

“Block themes (as opposed to classic, non-FSE themes) are light by design. Tove contains a theme.json file that specifies supported settings and styles, HTML template files and template parts used by the Site Editor, a couple of stylesheets, placeholder image assets, a folder with block patterns, and a functions.php file to enqueue assets and register block patterns and styles. That’s Tove. Not a single line of JavaScript, and other than the functions.php file and a empty index.php file, no PHP either. Compare that to Eksell, my latest (and probably last?) free classic theme. Eksell has 1 700 lines of PHP in its functions.php and template-tags.php files, five PHP classes in five files, and over 1 000 lines of JavaScript (not counting the CSS variables ponyfill). And Eksell is still pretty compact compared to most themes. Even though Full Site Editing is still in an experimental stage with frequent breaking changes, Tove was a lot easier to build than Eksell. Thanks to the Site Editor, it’s also so much more flexible. There’s really no comparison on that point.”

High level snapshot

Gutenberg Project & the Gutenberg Plugin

Gutenberg is the code name for a multi-year project to update editing areas for the WordPress software. Currently, we’re in phase two of this overall four phase roadmap. The Gutenberg plugin is where early work to update the editor is shared. Each WordPress release comes bundled with various versions of the Gutenberg plugin, often leaving out more experimental features still in progress from the release. For example, you could access the block based Navigation Editor in the Gutenberg plugin at the time of WordPress 5.8 but not within WordPress 5.8 itself. This gives the project to have flexibility to continue developing in the open and get early feedback without the pressure of only shipping for WordPress releases. 

Read more about when it makes sense for folks to use the Gutenberg plugin and how it all fits together. 

Full Site Editing (aka FSE)

This refers to a collection of features that ultimately allows users to edit their entire website using blocks as the starting point. This feature set includes everything from block patterns to global styles to templates to block themes to design tools for blocks (and more). Think of it as an umbrella term and, when you can, try to get specific about what you’re talking about within this feature set, whether you’re giving feedback or writing tutorials.

Overview of releases

Gutenberg vs WordPress releases

Gutenberg plugin is released every two weeks whereas WordPress is every few months. You can find all release posts for Gutenberg by viewing this tag. Gutenberg is just focused on leveling up editing areas but that’s not all of WordPress! This is important to keep in mind as the the wider project does see various updates. For example, loads of work is being done around jQuery, PHP 8 readiness, auto-updates, improvements to the media library, and more.

Major WordPress release cadence

Since a release cycle usually lasts around four months, there’s a nice rhythm to the work the longer you’re in it that’s powerful to tap into to know when and how to do various things. While there’s a brief “How the Release Cycle Works” handbook page you can read, here’s what’s not mentioned there in the order that they usually happen in with links to examples from 5.8 and 5.9.

3-4 months before the release

• Early feature scope shared (example from 5.8 and from 5.9) as a way to look towards the next release and help folks plan. These are usually shared 4 months before the next release and are often broader in scope than the release will be. Keep in mind that these are inconsistently done as it’s sometimes too early to tell what the scope will be and it seems to be a new habit.
• Release specific planning roundup post that focus on very high level dates and more concrete features.
• Release specific development cycle landing page that shares an overview of the release process and what to expect.

1-2 months before the release

• Go/No Go date and follow up post usually happens about 2 months before the release and provides great clarity in terms of how we’re actually progressing on initial features for the upcoming release.

<1 month before the release

• Feature freeze marks the point where no more commits for new enhancements or feature requests are allowed for the rest of the release. This usually happens about a month before the release.
• Field Guide usually shared ~2 weeks before the release when the first release candidate ships.

Each of these, in increasing order, allow for more complex and reliable information to be shared. For example, the early feature scope and planning posts help give a sense of where we’d like to head but are extremely likely to change as the release gets closer. From there, the Go/No Go work sharpens the focus usually through making it clear what won’t fully make it into the release while still leaving question marks around what will for sure make it in. By the time Betas roll around, only bug fixes are allowed (no new features) marking the point where any on the edge features will get heavily tested in order to determine whether they should be removed or make it into the major release.

When we hit RCs, that’s when there is the most reliable information to work with and can begin to finalize resources like the Field Guide, the About page, and more. Remember that any work done here for features that get pulled from the release can be reused for future releases when it does make it!

Overview of the last few releases

To help get a sense of the 5.9 release, let’s look back in time at the last few releases so you can see how they each have built on top of each other leading to this exciting moment in WordPress release history:

5.6 Release:

This was a historic release led by all women and non binary people! It included a new default theme (Twenty Twenty-One), an expanded autoupdate tool for major WordPress releases, built in patterns for various default themes, steps towards PHP 8 support, and more. You can read more here or check out the About page design with end user friendly language.

5.7 Release:

This release included loads of UX enhancements from allowing drag and drop from the inserter into the post canvas, full height alignment for blocks to fill the entire viewport, block variations shown in the block inspector, enhancements to the usability and stability of reusable blocks, vertical alignments and width percentages for buttons block, and more. It also included an easy way to switch to HTTPS for more secure sites and a simpler default color palette. You can read more here or check out the About page design with end user friendly language.

5.8 Release:

The focus of this release was on bringing FSE related tools and features to extenders first to give them time and space to explore what their respective users might want. This included everything from launching theme blocks, the template editor (opt in), Query Loop block, duotone, the launch of the pattern directory to get curated block layouts to create content, theme.json, block based widgets editor (opt out via three methods), and more. You can read more here or check out the About page design with end user friendly language.

Overview of full site editing

What are the various milestones? 

If you would rather listen to me speak about each milestone and see quick visuals, please watch this 6 minute clip from YouTube (runs until 11:30).

Previously, this work was broken down into 7 milestones and has since been updated around more aspects of refinement in this overview issue. For now, here are brief descriptions of each milestone with a video further down that goes through each:

Milestone 1: Infrastructure and UI 

• This work has essentially been all about configuring the technical aspects of making full site editing function. 
• This includes everything from multi-entity saving (aka saving multiple parts of your site at once) to creating the flows to edit a template directly like the 404 template to the start of work around blocks specific for FSE like Site Title. 
• You can think of this as building the foundation for the experience.

Milestone 2: Browsing

• This is related to building functionality to allow you to navigate between pages, templates, parts, and the interface work around communicating what area is active, what entity is loaded, and more. 
• You can think of this as creating the GPS to know your location and how to get where you need to as you build your site. 

Milestone 3: Styling

• This milestone covers both the technical requirements to make styling possible across various levels and the UI for users to access what’s possible whether in individual blocks or Global Styles. 
• In general, there are three layers to this including styling for local blocks, theme defaults, and global modifications or what’s often referred to as Global Styles.
• You can think of Global Styles as having the option to edit all visual aspects of your site. 

Milestone 4: Theme Blocks

• Because full site editing opens up more aspects of the site to edit, new blocks needed to be created to allow for direct customization. 
• For example, included in this work is the Site Title block which allows you to directly edit your site title and updates automatically anywhere else it’s placed. 
• There are 20+ blocks that fall into this category and many were included in WordPress 5.8.

Milestone 5: Query loop block

• The Query loop block is ultimately meant to be a theme author tool to allow for an easy way to query post or pages and display them in various arrangements. 
• In general, end users won’t interact with this and will instead interact with a block variation of the query block like a Post Lists Block.
• You can think of it as an advanced power user tool that allows you to easily display content in different arrangements. 

Milestone 6: Navigation Block

• This milestone is dedicated to all things related to editing a site’s navigation menu, both in terms of structure and design. 
• This includes a simple menu with a few items to creating a complex mega menu with many sub-menu items, designs, and more. 

Milestone 7: Gradual Adoption

• Not everyone will want to or need to adopt these features all at once so this milestone is focused on building adoption pathways.
• Some examples of this include the template editor, enabling theme blocks in classic themes, the block widgets editor, and more.
• This is an important milestone to keep in mind as success is less about everyone using this system all at once and more about giving folks pathways to use what most helps them right now.

Outside of these milestones, there’s also loads of work needed to have these pieces fit together, including things like improving the placeholder content for various blocks, how to put these items together to easily create block themes, what access points you’ll have to various features, and more.

What are block themes, hybrid themes, etc?

You’ll see lots of theme names thrown around and it’s important to get a sense of each in order to understand the state of FSE:

• Classic theme: used to reference the way themes were built previously with PHP.
• Hybrid theme: a theme that has adopted, in some way, an FSE feature like the template editor.
• Universal theme: a theme that works both with the site editor and in the customizer (where folks are used to editing their site).
• Block theme: a theme built to work with full site editing features, with templates and template parts made of blocks rather than PHP and styling controlled by theme.json.

What do adoption pathways look like? 

Adoption often hinges in many ways on the theme someone uses and the blocks they allow on their site. As a result, adoption is often talked about in terms of themes adding in support for various features like the template editor or the block widgets editor or fully switching to a block theme/building a block theme. The result is something like the following:

• A classic theme + template editor support + theme blocks.
• A block theme w/no support for Global Styles (so all the styles are CSS).
• A block theme with full global styles support using theme.json.
• A universal theme that works both with the site editor and the customizer (for example, blockbase).
• A classic theme + block based widgets editor.
• A classic theme + block based widgets editor + block based navigation screen (still experimental).

To read more about adoption pathways, check out this post that shares an approach for how folks might practically start to adjust.

Where do we stand today?

Currently, if a user wanted to use features of full site editing, they would either need to use a block theme alongside the Gutenberg plugin or use a theme that has explicitly decided to support various features, like the template editor. It’s important to note here that block themes need to use the Gutenberg plugin alongside WordPress 5.8/5.8.1 in order to properly work. 

There’s a lot left to be figured out including improved theme switching flows, implementing responsive controls, refining site editor access flows, and more. For now, if you want to get a sense of a current run through:

For a peak at the future, you can check out where the Site Editor experience is headed, you can check out this this GitHub issue.

How does this compare to the usual WordPress experience we’ve known until today?

Here’s a quick video showing how to make changes in the Customizer and what currently isn’t possible that is possible with FSE features. As you’ll see, tons of basic changes are locked down requiring digging into code or CSS and there aren’t super easy ways to make visual changes out of the box:

WordPress 5.9 potential features

5.9 is set to bring to the forefront even more powerful features into the hands of users and will be seen by many as the first introduction of site editing into WordPress. In order to use these new features though, a user will need to opt into the experience by using a block theme or a hybrid theme that supports various features. Keep in mind that, in many cases, the features below help improve what’s possible with block themes more than anything else and that the power is in each altogether. For example, if both Global Styles and the rest of theme blocks (especially the navigation block) get released, this will allow for folks to use the full breadth of block themes without the Gutenberg plugin. It also means that having more dimension controls will help folks more readily create content whether that’s as a post or in editing an overall template.

Right now, it’s likely though that what we’ll see in 5.9 will be scaled back versions of features with more robust editions to come in the future. This is true of features from previous releases like the template editor that was shipped in 5.8 but that needs to be iterated upon going forward. With that backdrop in mind, here are very quick TLDRs of the value each potential feature brings.

The best place to check out what’s to come in 5.9 is in the Go/No Go post shared just a few weeks ago.

Navigation Block 

Have full control of your navigation (look, feel, placement) and do more if you want to thanks to the ability to add a wide range of blocks. Currently, the navigation block used in classic themes feels most uncertain right now (unlikely to land in 5.9) but it is slated for inclusion within block themes.

Template Part Focus Mode

This is a special view that just focuses on a single template part (like a header) and is available for any template part. This work both allows folks to focus on building a specific part of the site and will play a role in backwards compatibility when it comes to turning existing widget areas into block template parts.

Twenty Twenty-Two theme

For the first time, the default theme is built for full site editing without needing the Gutenberg plugin, with loads of custom patterns, and various styling options to switch through all within one theme. The default theme has been a statement of the latest and greatest as well as a vetted way to explore these same features so having it be block based first and foremost is a big deal! You can read more about the project here.

Gallery Block Refactor

Tools for individual images are now available for all images in a gallery, including being able to add alternative text for accessibility, cropping in line, and adding a link to each individual image. While this brings great improvements, it also is a breaking change for plugin or theme authors who built upon the Gallery Block functionality. You can read more about this change here.

Design tools

To quote the GitHub issue, “Design tools encompass all tools related to the appearance of blocks and ranges from colors, typography, alignments, and positioning, to filters like duotone, cropping, and background media.” This is a huge undertaking that seeks to both unlock new features to create the layouts one wants and to make the experience of this kind of customization more refined, intuitive, and delightful. For example, imagine that with ease you can add a columns block, customize the background of each column, and change the spacing between the columns to your liking all before adding in whatever content you’d like. You can read more about these tools in this GitHub overview issue.

Theme blocks

In WordPress 5.8, a set of theme blocks were released so the task now remains to release the rest and level up current experience with better placeholders and more customization options. For example, check out the latest changes to the Site Logo block placeholder which makes it way clearer how one should interact with this block.

List View improvements

List view is a powerful way to quickly navigate your content and make changes (drag/drop, delete, etc). Think of it as the ultimate tool to navigate block complexity, select/delete/drag&drop exactly what you need, and easily view all of the blocks that make up your content at once. Better yet, you can toggle it on/off as you need. While it was shared in WordPress 5.8, it’s not a well known feature and various improvements are slated for 5.9 including drag & drop, collapsing sections, and more. You can read more about list view here.

Pattern improvements & pattern directory

There are plans in the long run to integrate the pattern directory into the Inserter, including a potentially new experience for exploring patterns for 5.9 for now. For example, now the initial patterns shown when opening the Inserter highlight beautiful patterns directly from the pattern directory rather than showing an alphabetical list that felt lackluster. There are also plans to soon allow user submissions to the pattern directory so, if you have something to share with the WordPress world, stay tuned as it’ll be a great way to contribute.

Block themes

Assuming block themes can be used without using Gutenberg with the 5.9 release, this will officially mark the introduction of block themes into the ecosystem! This is a new era for theming in WordPress since Classic Themes have required a different philosophy than block themes, with more of a focus on internals/logic whereas block themes focus on design and aesthetics.

Site Editor

This is under active iteration with the latest designs shared here just a few days ago and work underway from development to implement this approach. If you’ve explored the Site Editor before this, I would expect a simplified experience for 5.9 compared to what’s been seen thus far. Ultimately, this work will provide a way for folks to directly customize their templates, template parts, and site wide styling. Want to change your 404 template? Now you can!

Global Styles UI 

This will be part of what’s exposed with the Site Editor but is worth mentioning on its own. It’ll allow you to control all visual aspects of your site, whether that’s having open access or creating a curated experience with predefined default options. This will enable folks to do things like easily change the font size of all paragraphs on their site or customize their default button block with a few clicks.