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!
- New Site Building Blocks And Patterns
- Reusable Blocks Improvements
- New Template Editor
- Block-Based Themes
- Block Customization Enhancements And Global Styles
- Blocks In Widget Areas
- Under The Hood Changes In WordPress 5.8
- What Does This Mean For Developers?
- 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.
The All-in-One WordPress Website Builder
Drag & drop to build your website in minutes and keep optimizing it with 10Web.
The All-in-One WordPress Website Builder
Drag & drop to build your website in minutes and keep optimizing it with 10Web.
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
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.
Say you’re a cinephile and you always believed that the internet lacks quality reviews on Quentin Tarantino or any other director you adore. What do you do? Create your own blog and put your ideas down! Well, it’s easier said than done. The first thing you’ll do is go to Google to find an answer to the question of “how to create a website” and you’ll certainly come across WordPress and the multiple hosting options it has. And here’s when we come to your rescue with our ultimate WordPress hosting comparison that will tell you everything you need to know about website hosts! That way you’ll know which one works best for your Tarantino blog. But you might wonder, What is WordPress and WordPress hosting? WordPress is a website builder that allows you to create blogs, portfolios, eCommerce stores, and business websites — pretty much everything that comes to your…
Do you find it hard to navigate through WordPress hosting costs? Don’t worry, we are here to break it down for you. Let us first start by asking, “How much does a WordPress website cost?” While WordPress itself is an open source software and won’t cost you a dime, there are other additional costs that apply, when you plan on running a website. On one hand, you have to expect expenditure for a domain name ($14.99/year) and a WordPress hosting service ($3.95 – $120/month). On the other hand, there are optional features that you might not take into consideration now, but will become a necessity later on, such as Website design (website builder, template, plugins), Additional security measures, Optimization services. If you’re undecided about what your requirements are, don’t worry. We’ve prepared a list of WordPress hosting must-haves that will make this decision easier for you. Of course, we don’t…
The choice of the right WordPress hosting for agencies and developers can prove to be a mammoth task. It has a direct impact on whether your business will make it or break it. Agencies usually operate for several clients, which isn’t much different from developers who usually tend to have several projects going on at the same time. That’s why professionalism and reliability are inescapable requirements for running a successful business and maintaining a long-lasting relationship with clients. And it all starts by exploring the world of WordPress hosting for agencies and developers. Not only do you have to have a 360-degree view that covers your needs from every thinkable angle. You also have to have a future-oriented vision to make sure that your hosting can be adjusted to future evolution and changes. Basically, choosing the right hosting is easier said than done. But, don’t worry, we have compiled a…
How to secure your WordPress site is an essential question, especially in the times of GDPR. Every website owner has the responsibility to guarantee that his or her website visitors have a secure browsing experience without having to worry about the protection of their personal information. In the age of cyber technology, hacker attacks have evolved and matured with the digital market, meaning that you will meet them in different shapes and forms. That’s why it’s imperative for each and every website owner to be well prepared to tackle security issues in an efficient and preventive manner. Keep in mind that a cybersecurity attack not only threatens your site’s visitors but also the functionality as well as the integrity of your site and by default your revenues. The good news is that if you follow the instructions of this article regarding how to secure your WordPress site, you’ll find that…