WordPress 5.8 was released on July 20. This is the second release of the year and it is chock-full of new features. The most notable update involves the continued roll-out for Full Site Editing within the Gutenberg editor.
Some major highlights include: tons of new theme blocks like the Query Loop Block, the ability to create templates directory in the editor, expanding the block editor for use in the widgets screen, new global settings configuration for theme developers, and lots more. Let’s take a deeper look at these updates and how they will radically transform theme building for the future.
Block Editor Updates
The shift towards Full Site Editing gives more power to Gutenberg for editing and managing content and templates outside of the theme. This update bundled eight Gutenberg plugin releases into core; further development continues in the plugin including new blocks and experimental features.
First, we should define the difference between Classic Themes and Block Themes:
- Classic Themes – Standard theme with php-based templates.
- Block Themes – New block-based theme with templates created entirely using blocks. Block themes are not new for this release but now there is greater support and an interface for managing and creating templates. Take a look at some of the block themes available for testing with the Gutenberg plugin enabled.
Now that we understand the difference, let’s break down the updates and delve into configuring and using these new features.
Theme Blocks
With the ability to create templates within the block editor, there are a lot of new blocks introduced in this release to fill out a page. These theme blocks are:
- Site Logo
- Site Tagline
- Site Title
- Query Loop – The Query Loop block contains two nested blocks: Query and Post Template. This is the most powerful block addition in this set — combining the power of the WordPress Loop and block patterns together to add dynamic content. It offers several settings — configure the loop by post type; order; sticky posts; filter by a category, author, or keyword; set items per page, offset, max page to show.
- Post Title
- Post Content
- Post Date
- Post Excerpt
- Post Featured Image
- Post Categories
- Post Tags
- Login/out
Template Editing Mode
Now we can create post/page templates within the block editor aided by our new assortment of theme blocks.
Classic themes need to opt-in to use this feature whereas block themes have this by default. You can enable the feature through theme support with add_theme_support( ‘block-templates’ ) or including a theme.json config file (see below).
This new feature circumvents the need for a child theme in many ways. We can create new custom templates right in the editor for just about any use case: a 404 page, archives, a jailed landing page, or customized layouts for various posts and pages. For classic themes it will prioritize the use of the new template over the normal PHP template in the hierarchy. For optimal support, a block theme is preferred, as that also opens up the use of creating and including template parts for things like header and footer. Default and custom templates are added to a theme within a directory named block-templates and template parts within a directory named block-template-parts — these are all built using static HTML and block markup — no more PHP.
These templates are created as a new custom post type named wp_template and as such can be exported and imported across sites like any other post type. A new taxonomy is also created, named wp_theme, and assigned the active theme when the template is created — this means switching themes is not really a viable option. With the Gutenberg plugin enabled, the templates can be accessed and managed from the Appearance menu in the admin.
Note: This feature is still very new and will likely receive many more updates and changes in coming releases.
Theme.json
The theme.json file provides a new and centralized way of configuring global and block specific settings and styles for theme developers. It seeks to replace add_theme_support calls and the need to enqueue editor styles. This file lives in the root of the theme directory.
Here is a shortlist of things that can be defined in the config:
- Default colors, gradients, and font sizes
- Default widths and available alignments such as wide and full
- Defaults and presets for individual blocks
The engine will read the file and take care of creating and enqueuing the corresponding styles to both the editor and the front-end. Classes and CSS Custom Properties will be generated with the declared presets.
Manage Widgets with Blocks
Another major update included opening up the block editor for use in widget areas. This allows a lot more flexibility as now we don’t need to build separate widgets to work here but can include any available block allowed on posts and pages. This is also fully supported in the Customizer for real-time editing and visibility.
They have added a new block called Legacy Widget for backwards compatibility. This includes legacy widgets built with the Widgets API like “Navigation Menu”. Two new navigation blocks are currently being developed and are available with the Gutenberg plugin enabled. Some widgets will present an option to convert to a block like the Text Widget which has a compatible block and is not an option to use in the Legacy Widget block. It’s unclear at this time how long the Legacy Widget block will be available but this will allow plugin authors time to convert existing widgets into blocks.
This new functionality is enabled by default but there are some options to revert back to the old widgets interface if desired. This can be done in the theme with remove_theme_support( ‘widgets-block-editor’ ), the filter use_widgets_block_editor, or by adding the Classic Widgets plugin.
Block Improvements
Block-styles loading enhancements
In an effort to maximize performance, styles are now only rendered for blocks that exist on a page and small styles are now added inline. Previously, all block styles were compiled into a single stylesheet. Learn more about utilization for classic and block themes.
Persistent List View
The persistent list view is an improvement over the current toolbar item to help navigate complex layouts and nested blocks within widgets, posts, and pages that remain open and accessible as you work.
Group Block HTML Setting
The group block now includes a setting to change the HTML element from a div to: header, main, section, article, aside, or footer. This makes block templating more semantic and accessible.
Embed PDFs with the File Block
PDFs can now be embedded using the file block for easy viewing.
Duotone color presets for the image block
A new color preset has been introduced called Duotone (fully configurable in theme.json) to add a two-tone color filter overlay on images for an interesting new effect.
Introducing the block patterns directory
A new block patterns directory has been added to WordPress.org. To use a pattern, you copy the markup using the toolbar button, paste it into the block editor wherever you want to insert it, and start editing.
Normalizing the block toolbar
In an effort to standardize the block toolbar they have updated it into three groupings: meta, block-level, inline. Additionally there is now an easy button to navigate back to the parent block from a nested block.
Other Notable Updates
Dropped support for IE11 in the admin
Support for Internet Explorer 11 has been officially dropped. Less than 1% of all internet users are still using this browser and it no longer requires active support.
WebP image support
WebP is a modern image format developed by Google and on average are 30% smaller than their JPEG or PNG equivalents. This image file type can now be added to the media library. It does now, however, support automatic image conversion to WebP format.
Site Health Extendability
Developers can now extend the Site Health area to custom interfaces and tabs to highlight issues and areas of concern.
“Update URI” plugin header
The “Update URI” is a new document header to avoid conflicts and accidental updates between third-party plugins and those in the WordPress.org Plugin Directory of similar name.
For even more updates check out the WordPress 5.8 Field Guide.
Subscribe via RSS
