WordPress 5.8: Moving Towards Full Site Editing

WordPress 5.8 is now out and it’s brought a whole host of exciting new changes — most notably the long-awaited and touted full site editing features.

To be more specific, WordPress 5.8 “Tatum” (named after legendary jazz pianist Art Tatum) was released on July 20, 2021 as an official WordPress update available to all users. This update significantly expands the role of the block editor and makes it possible to edit almost every part of your WordPress website.

Now that WordPress 5.8 is released, you’ll be able to make templates, take advantage of new blocks and block patterns, enjoy an improved experience of working with reusable blocks, and be able to use new customization options to style your site.

In this post, we’ll explain these new features more in-depth, and share what you can do as a developer with this new release. Let’s begin!

1. New Site Building Blocks And Patterns
2. Reusable Blocks Improvements
3. New Template Editor
4. Block-Based Themes
5. Block Customization Enhancements And Global Styles
6. Blocks In Widget Areas
7. Under The Hood Changes In WordPress 5.8
8. What Does This Mean For Developers?
9. Final Thoughts

New Site Building Blocks And Patterns

WordPress 5.8 moves us even closer to full site editing. For starters, new blocks and block patterns were included in this release. They include blocks for Page Lists, Site Title, Logo, and Tagline.

A new block pattern directory makes it possible to find block patterns that you can install, similar to how you can use the plugin and theme directory to install themes and plugins.

The editor also includes block pattern suggestions, based on the block you’re working with.

On top of that, the new Query Loop block allows you to display a list of posts in various ways across your site and comes with its own set of block patterns.

If you’re a developer, you can also use the Query Loop block in themes and plugins. In fact, many popular plugins already offer advanced query loop functionality to allow for more display and customization options for what the query loop displays. For example, the PostX – Gutenberg Blocks for Post Grid offers a plethora of layouts, including sliders, grids, carousels, and more for the Query Loop block.

Keep in mind that you’re not limited to using this block to display your blog posts. As seen in the screenshot above, you can use it to filter items such as pages, custom post types, or posts having specific categories, tags, or custom taxonomies added by plugins such as products.

Reusable Blocks Improvements

Reusable blocks allow you to style and configure a certain block and then reuse it with the same settings across your site. In the WordPress 5.8 version, you’re prompted to name the reusable block at the time of creation. Reusable blocks also support revision history, making it easier to revert changes.

New Template Editor

With the new feature allowing you to create and edit templates, you’ll be able to create reusable templates that your clients can use on every page and post. This includes elements that didn’t have block capabilities before.

This new template editor is also the place where all the style options can be modified, including colors, fonts, and individual designs. All of these styling options and the ability to edit templates are found on the backend of your WordPress website, and the interface is similar to the post/page editor.

It’s worth mentioning that by default, the template editor is disabled for themes. However, you can enable it by adding the following line to the functions.php file:

add_theme_support( ‘block-templates’ );

If the theme is not block-based (see below), an option to create and use templates will appear for posts only. In the sidebar of the single post edit screen, the following will appear:

The screen for editing templates is similar to the post editor.

By default, blocks come with their own styles to enable basic support, without the need to make any changes. However, if relying on the default style is not desired, theme developers can customize these styles or override them.

Block-Based Themes

As you might have guessed from the name, block-based themes are themes developed with the block editor in mind. They also include specific styles for various blocks.

The beauty of block-based themes is that they will make it possible to edit every part of your website, going beyond page and post layouts. With a block-based theme, you’ll have the ability to edit the header and footer, for example. These features are still in beta and are not part of the WordPress core experience just yet. You need to install the Gutenberg plugin to gain access to features of block themes (activate “Blockbase” theme).

Up until now, templates were written in PHP. With the move towards full site editing, block themes define default templates and template parts, which are static HTML files, not PHP files. A full template includes content area and various template parts like footer.html or header.html. Other templates can reuse these template parts.

However, since template parts like header and footer are static HTML files, editing them would mean having to overwrite them. That is why there is a possibility to create and edit templates and template parts as custom post types.

In the Appearance menu, there are two new sections: Templates (for content part) and Template Parts. These sections will allow you to choose your template, edit templates that already exist in the theme, or create new templates.

If you want to edit a full site, you’ll need to click on the Site Editor (“Edit site” link in the admin bar), which is the alternate version of Post Editor, designed specifically for editing full site templates.

You’ll then be able to use the dropdown menu at the top of the page to switch between and edit the templates and template parts.

Default template parts are located in the theme structure as Block Templates and Block Template Parts folders in the files. Newly saved template parts are in the submenu Template Parts under the Appearance menu.


It’s worth mentioning that once a template or a template part is used in a post, that content is serialized and stored in the database as post content of a custom post type. As of yet, it’s not clear how user-edited templates will behave if a user decides to activate a new theme that contains a template of the same name.

While testing the template editor and global styles, it’s interesting to note that the Customize option typically found under the Appearance tab no longer offers any styling options in case of non-block themes. The only options are to configure menus, homepage settings, site identity, and additional CSS.

That aside, using block-based themes means you won’t have to switch between the post editor and the Live Customizer. Instead, everything will be managed in a singular place. This will not only streamline site editing and customization, but will also make it easier for your clients to work with the site. As mentioned earlier, you can still open the Customizer from the Appearance menu, however, it will contain no styling options.

At the time of this writing, there aren’t many block-based themes in the official repository. A great example of a block-based theme is TT1 Blocks. However, that doesn’t mean that themes that aren’t block-based will stop working overnight. They will continue to work and many users may continue to rely on the Classic Editor or a page builder plugin like Elementor to manage and add content to their website.

But it is clear that the world of blocks is the future direction of WordPress, which means you should start looking into creating your own block-based themes. With that in mind, a question arises: do page builder plugins still have a place in a block-based world?

Page builder plugins like Elementor or Beaver Builder make it easy for non-technical users to easily build a website—even one with complex page layouts, without having to learn code. These page builders also offer the ability to go beyond page editing and allow users to edit the header, footer, and sidebar area.

Even though full site editing does make the block editor very competitive with page builder plugins, the latter is still popular with a loyal user base. This makes it unlikely that users will abandon ship immediately, especially considering that there might be a steep learning curve and adjustment period with the new block editor. It will also take some time and a few major releases of WordPress to improve the user experience of full site editor and to make it more intuitive, easy to navigate through, and comparable to the user experience of popular page builder plugins.

In addition to that, themes will now use a theme.json file to control and configure the styling options, including layout configuration, block supports, color palettes, and more. As mentioned earlier, these styles are only accessible in the editor mode and not on the front-end.

Similarly, any plugins that have style-related logic should use the API to retrieve the theme.json files. For example, if a plugin offers the ability to use a dark theme, it should use the theme.json file to set the option to display the text in light colors.

This change aims to solve one of the biggest problems many theme authors face. That is, how to deal with conflicts that arise when taking into account the core, theme, and user styles as well as all the possible block styles. The theme.json file mitigates the problem by reducing the amount of CSS that the browser has to output. It solves specificity wars, and provides current style info in the user interface controls for users. Think of this as the first step towards having a place where core, user, and theme style settings can be consolidated.

Now is the best time to dive into the theme specification document to see more examples and understand in-depth what this file will encompass.

Block Customization Enhancements And Global Styles

Up until now, if you wanted to make changes to your theme’s styles, you had to use the Live Customizer. And if you’re a developer, you had to make use of the Live Customizer to make styling changes possible for your customers.

Since the introduction of Gutenberg, WordPress users had to switch between the Live Customizer and the post editor to make style changes. That’s because blocks had their own styles that were available only through the post editor. However, as you can see from the screenshot above, there is no way of knowing whether these styles apply to the individual page alone or if they’re applied globally throughout the site.

With the new version of WordPress, the style editing will happen in one place — the WordPress editor. Moreover, existing blocks will include new design tools and enhancements such as more color and typography choices, spacing options, drag and drop feature for Cover backgrounds, and more.

These changes will allow you to embed PDFs within the File block and you’ll also have more options for block transformations.

Moving forward, if you’re developing custom themes for your clients, you’ll need to accommodate for these changes and ensure they can edit the styles in the same place.

Blocks In Widget Areas

You can now use any block in your theme’s widget areas using the new Widgets screen and updated Customizer. This allows users to add even more content to their widget areas. This new editor is enabled by default in WordPress 5.8, however, you can disable it to give your clients more time to adjust to the changes.

There are several ways to disable it:

• Include remove_theme_support( ‘widgets-block-editor’ ) in your themes or the theme your client is using
• You can use the new use_widgets_block_editor filter to remove the new widgets editor
• Install and activate the Classic Widgets plugin

Existing widgets will continue to work, but will be accessible through a new block called Legacy Widget block. If you’re developing custom plugins, you’ll want to remember two things:

• Always use the widget-added event to bind event handlers
• Allow users to migrate from widgets to blocks by taking advantage of block transforms and have your plugin’s widgets appear as their own block

Under The Hood Changes In WordPress 5.8

Beyond the changes shared above, there are a few smaller developer-oriented changes that you will find in WordPress 5.8. These include but are not limited to:

• WordPress dropping support for Internet Explorer 11
• More consistency over the output of the wp_get_document_title()
• Support for WebP image format
• Use of the new image_editor_output_format filter hook to change the file format used for image sub sizes

For more information, you can refer to the official blog post from WordPress detailing the changes.

What Does This Mean For Developers?

If you’re a WordPress developer, you’ll probably want to dig into the developer-specific changes first and familiarize yourself with the new functions and filter hooks.

However, that doesn’t mean you should ignore other changes. More specifically, you’ll want to look under the hood and understand all the intricacies of how full site editing works. This includes:

• Familiarizing yourself with the new configuration file necessary for creating both classic and block-based themes
• Making a note of all the new filter hooks and functions and exploring WordPress Codex to understand how they work and how to use them in themes, blocks, and plugins
• Exploring new template files to understand what WordPress looks for first in terms of template hierarchy
• Creating templates that you know your clients use on a regular basis
• Familiarizing yourself with WordPress API and the Block Patterns API so you can create custom block patterns that can be used in themes and plugins
• Setting up a dedicated staging environment or a local installation so you can test out all the changes before pushing them live to your clients’ sites
• Bookmarking the Block Editor Handbook so you can refer to it as needed moving forward
• Helping your clients transition into the full site editing experience by recording training sessions and tutorials
• Staying informed about the current state of affairs and planned future changes by attending bi-monthly Block-Based Themes meetings on Slack (#themereview channel) and monitoring discussions on core updates on make.wordpress.org/core

 

Final Thoughts

With the long-awaited launch of WordPress 5.8 now here, make sure to beta test everything. This will allow you to effectively update your clients’ sites and prepare for any changes that may require more attention. A staging site or a local WordPress installation is the perfect way to test out the new features.

We hope this article gave you a glimpse of what you can expect to find in the newly released WordPress 5.8. Use the tips shared here to make the update a smooth process and experience for both you and your clients. As WordPress continues to add new features and improve existing ones, it is imperative to understand the direction it’s headed in order to stay ahead—and afloat.