What's new in WordPress 6.0 The new blocks, Style Switching, Template Editing Webfonts API, and More
Just a few hours away from the release of WordPress 6.0 and, as usual, we peeked inside the curtain to give our readers a preview of what's to come with the next WordPress major version.
However, the next version will not be just this. As Matias Ventura pointed out in the preliminary roadmap of 6.0, the introduction of the site editor marked the beginning of a major milestone, yet it's just a first step in the road to.
With WordPress 6.0 we can expect, to see significant enhancements in several areas of the CMS including usability and speed, such as the following:
- A better information architecture and template browsing experience
- Improved template creation
- The new Navigation User Interface
- The new Browse Mode for the site Editor
- Alternative Global Styles
- An enhanced Navigation block
- New design tools
- And much and more...
But wait, that's not all. WordPress 6.0 also brings an impressive number of changes in terms of features, enhancements, as well as bug fixes. These include more than 400 updates and 500 bug fixes in the editor. More than 189 tickets have been fixed, including 91 new features and enhancements.
There's plenty to be discussed. Let's not waste time further and discover the latest features in WordPress 6.0.
Webfonts API
A brand new Webfonts API offers a standard way to load webfonts into WordPress ensuring performance and user security.
Since WordPress 6.0, you are able to register a new webfont from within your theme.json.
Using the theme.json is quite easy. The only thing you have to do is to add an additional font family in the typography section. The following code provides an example of registration for webfonts:
"typography":
"fontFamilies": [
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
,
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
,
"fontFamily": "\"Inter\", sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [
"fontFamily": "Inter",
"fontWeight": "200 900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
]
]
The following image shows the result in the editor.
The Webfont API is only able to register fonts that are required to render blocks in the present page and that's particularly useful with webfonts identified in style variants. In addition to that, the API maximizes the amount of HTTP requests through the registration of fonts and then enqueuing them according to font families.
You can read more about the new API in the Webfonts API pull request as well as in the status of Webfonts API for WordPress 6.0 Inclusion.
Global Styles Switching
Global Styles variations are one of the most awaited features coming with WordPress 6.0. Themes creators can now include different sets of Global Styles with their themes, enabling users to switch between style variations with one click.
It's much like having ready-to-use child themes, with a predefined set of themes for each.
For adding a new style to the block theme you have chosen, you will add an alternative JSON file to a style folder in the root of your theme.
Themes that support Global Styles variations show a new Explore styles item in the Global Styles sidebar. It opens up a section in which users can find a list of the different styles available.
Choose an Global Style from the list and the styling is automatically implemented across all your websites.
The image below shows a custom style from the previous example, with an alternative font used for headings.
"version": 2,
"settings":
"color":
"duotone": [
"colors": [ "#143F6B", "#EFEFEF" ],
"slug": "foreground-and-background",
"name": "Foreground and background"
,
"colors": [ "#143F6B", "#FEB139" ],
"slug": "foreground-and-secondary",
"name": "Foreground and secondary"
,
"colors": [ "#143F6B", "#F6F54D" ],
"slug": "foreground-and-tertiary",
"name": "Foreground and tertiary"
,
"colors": [ "#F55353", "#EFEFEF" ],
"slug": "primary-and-background",
"name": "Primary and background"
,
"colors": [ "#F55353", "#FEB139" ],
"slug": "primary-and-secondary",
"name": "Primary and secondary"
,
"colors": [ "#F55353", "#F6F54D" ],
"slug": "primary-and-tertiary",
"name": "Primary and tertiary"
],
"palette": [
"slug": "foreground",
"color": "#143F6B",
"name": "Foreground"
,
"slug": "background",
"color": "#EFEFEF",
"name": "Background"
,
"slug": "primary",
"color": "#F55353",
"name": "Primary"
,
"slug": "secondary",
"color": "#FEB139",
"name": "Secondary"
,
"slug": "tertiary",
"color": "#F6F54D",
"name": "Tertiary"
]
,
"typography":
"fontFamilies": [
"fontFamily": "\"Inter\", sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [
"fontFamily": "Inter",
"fontWeight": "200 900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
]
]
,
"styles":
"blocks":
"core/post-title":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
,
"core/query-title":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)"
,
"elements":
"h1":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
,
"h2":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
,
"h3":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
,
"h4":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
,
"h5":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
,
"h6":
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
,
"typography":
"fontFamily": "var(--wp--preset--font-family--inter)"
The complete source code for the program above at GitHub as well as the gist.
Developers will be able to get a thorough overview of Global Styles and Theme.json in Global Settings & Styles and Theme.json documentation articles.
Block Patterns Everywhere
Additionally, WordPress 6.0 introduces further improvements in block pattern.
In the beginning, blocks are simpler to spot in template editing. The quick inserter now you can use the inserter to quickly add blocks. shows block patterns whenever you're able to open it from the top of a template, i.e. that the block you're planning to add to your template is an immediate descendant of the template.
This is when the below conditions are met:
- Editing the block template
- The quick inserter is located at the level of the root.
- You're adding a block within other blocks (i.e. it's not the first or latest block on the page)
A new feature that is useful allows theme developers to add the recommended patterns in the theme.json. To give it a try, search for the Patterns directory and find the patterns you want to recommend to users who use your theme. then grab the pattern slug from the URL and then add it to the theme.json in this manner: theme.json as follows:
"patterns": [
"image-with-angled-overlay-shape-call-to-action-button-and-description",
"hero-section-with-overlap-image"
],Users will find your suggested patterns within blocks inserter.
A powerful pattern-related feature coming in WordPress 6.0 is the implied pattern registration. Themes are now able to implicitly register patterns, by declaring them PHP files under a new pattern directory in the root of their theme.
It's pretty simple:
- Make a new patterns folder in your theme's root,
- build a block group in the block editor,
- copy and copy and paste your HTML in a new text file,
- Add the following heading as a prefix,
- Then save the file as PHP in your patterns directory. Save the file as PHP in your patterns.
It's that. You now have a new block pattern that will show up in the block inserter.
For a more comprehensive description of the development of block patterns, you can follow the tracker issue Tracking Issue on GitHub.
Site Editing Features
The development of Full Site Editing continues to be a priority even after WordPress 5.9. WordPress 6.0 is a step forward by enhancing the the visual design of themes and providing different templates that block theme templates. Plus, more new features are on the way.
Visual Theme Building
WordPress 6.0 is the first release of an upgraded block export feature for themes, which lets you download the theme and all the changes and modifications.
If you haven't used the block theme export tool, you should. It's a powerful site editing tool which lets you export your templates and styles as as a complete theme.
When you're happy with the changes you've made, in the interface for editing your website, open the Options sidebar and find the tools section. Here an export button lets you download the current theme including all of your design and templates in a zip file.
It is then possible to download your theme, and then upload it to every WordPress website.
We tested the improved themes exporter tool on the local WordPress installation, and we found that the majority of all functions as were hoping for...
The exporter is still under development, so we're able to see its immense potential. Consider the potential of creating your own themes using the editor interface on your site and then spread them across an unlimited number of installations. This is regardless of whether you're a designer...
There's still plenty of open issues to resolve that we think there will be some improvements coming soon. If you're interested in and wish to know more about Visual Theme Building (as we are), you can follow the tracker at GitHub.
A broader selection of templates in Block Themes
In previous WordPress versions, there was a the option of limiting the number of templates kinds offered.
Today, WordPress 6.0 includes the new types of templates, including Categories, Author Tag, Date and Taxonomy.
This addition should streamline the process of editing your website. If you want to test it, just pick a different template using the drop-down menu Add the required blocks, save your changes, then check the appearance at the top of the page. Yes, it's simple like it sounds. Consider it in pair with the feature of exporting themes that was previously mentioned and you'll be able to know the features we can expect when it comes to editing sites in the near future.
Interface and Usability Improvements
WordPress 6.0 introduces a number of changes to the UI, many of which are intended to make order on the sidebar. All together these changes should significantly impact your overall experience editing. We will mention only a handful of them and you may refer to for the Gutenberg release notes to see an extensive listing of the changes (see Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).
Liste View Improvements
List View List View is affected by many modifications that improve the usability of the component.
Expand List View of Selection
Once you have clicked on a block inside the editor, that block will be highlighted automatically within the List View. If the block is nestled in a parent block, that parent block expands and displays the block in the tree of blocks.
The List View is collapsible by default
Before WordPress 6.0, when you open the List View panel, it's opened by default.
In the event that a blog post consists of complex structures of nested blocks, having the block tree collapse on it is opened in List View List View makes perfect sense.
With 6.0, the List View is collapsed by default in the editors in all and makes the block tree easily understood in a glance.
Focus on the List View Button
If you click List View, when you open the List view panel, your focus will be correctly is returned back to the List view button. This is especially useful when you browse through the List View from your keyboard which results in a smoother and more fluid editing experience.
Multiple Block Belection as well as Drag & Drop
A further change in The List View allows you to select multiple blocks at the same time and drag and drop them to another position within the view.
Block Style Previews
Prior to WordPress 6.0, block style previews were made available within the block sidebar making up a significant area of Styles panel.
With 6.0 it is only the names of the style variations are displayed within the Styles panel. The previews of the styles are shown in the sidebar when the name of the style is hovered or receives focus.
This change reduces sidebar dimensions and should make style names easier to spot.
Paragraph Section on Typography
In an effort to organize the sidebar of the block, the Drop Cap control for the Paragraph block is moved from the section it was in to the Typography section.
With this change, every control for fonts and typography is currently placed under the same section which results in a greater consistency in the user experience.
Color and Border Settings moved Under the Tools Panel
In an effort to organize a messy settings sidebar, border settings as well as colors settings controls were transferred to the ToolsPanel which can be expanded and collapsed in several settings.
Are you interested in knowing what we did to increase our visitors by 1000%?
Join over 20,000 others to receive our newsletter every week with insider WordPress tips!
The new interface should simplify the editing process by introducing multiple blocks, and provide more uniformity to the sidebar.
Post Publish Panel Categories Reminder
If you're in a rush or frequently publish a large amount of blog entries, you can easily lose track of tags or categories. If you often see yourself in this kind of circumstance, the tag reminder appearing on the Post publishing panel very useful.
This is to assist site admins and authors ensure that their articles have the appropriate categories in place, with WordPress 6.0 a new suggestion: assign categories. A category panel is displayed in the Post Publish panel when a category is not yet included in the post.
The below image compares the Post publishing panel of WordPress 5.9 as compared to. 6.0.
Code Editor Added to the Site Editor
Further Improvements
Multi-select Now it's possible to choose text from several blocks.
Block The Locking UI New Lock item within the More Settings dropdown opens a popup where you can prevent users from moving or taking away blockages (or all of them).
This can be particularly beneficial in the editing of templates as well as reusable blocks, where you can also restrict block editing.
Style Retention If you change blocks or design new buttons, several styles have been preserved.
Below is an image of an List Block that has different designs.
If you convert this List blocks into paragraphs the new block would keep the same styles as the earlier list items.
Similar enhancements are also available for new buttons in a Buttons block, which now have the same style as surrounding buttons.
New Core Blocks
There are more blocks coming to WordPress 6.0. Here are the blocks you'll see with the upcoming version.
Loop of Comments
Similar to that of the Query Loop block a brand new Comment Query Loop block will display comments from post users. It's a block with advanced features with a variety of inner blocks you can alter and set up in a separate manner.
As the image below shows that you are able to select one of the blocks in the Comment Query Loop block to customize its look and appearance to your liking. It is also possible to add additional blocks or move or remove existing blocks ( Source code).
Read More
A brand new and flexible Read More block allows you to customize different aspects associated with this Read More button: borders and colors, corners, typography, and more ( Source code).
This is a great addition because it allows you to modify and add the Read More link outside of the scope of the Excerpt block.
The query loop does not return any results.
The block that shows no results Block is an block container that allows you to include any block or text to show when the query has no outcomes. If you want to add the block No Results block in the query Loop simply select the query Loop and click on the plus symbol at the bottom right corner to launch the fast inserter. You can then search for no results. The block cannot be found in within the Query Loop ( Source code).
Avatar and Post Author Biography
WordPress 6.0 adds brand new block types for splitting your Author block into components and to use them for your own content.
The Post Author Biography block contains the author's descriptions ( Source code).
The Avatar Block simply shows an avatar for a user. It allows users to select between different site creators ( Source code).
This block is particularly useful to display an author's avatar outside the context of the Author Info block or comments. It is possible to use it on a page dedicated to all authors, or on a page that displays comments from readers and users.
Enhancements to Blocks Already Built
WordPress 6.0 will also bring a variety of changes as well as enhancements to existing blocks, which could be a significant impact on the way you edit. The Navigation block is affected by several changes however, you'll also notice improvements in other blocks, including Query Loop, Featured Image, Group, and Social icons.
Navigation Block Improvements
The last couple of months The Navigation block received several improvements and now features a significantly easier-to-use interface.
The first is that a rich preview was added to the Navigation Link block. When you add an URL that points to a publicly accessible resource, clicking the link button in the toolbar for the block shows a preview image of that resource.
Certain other changes can impact the editing experience overall.
If you are adding a new menu and only One Navigation Menu exists, then it will default to the menu that is only accessible. This change should speed up the editing process even if you have only one navigation menu.
Navigation Links already had a description field where users can provide a short description of their navigation Links. But, prior to WordPress releases, theme couldn't use this feature.
In the latest version, WordPress 6.0, a appears after the link's title.
In Twenty Twenty-Two, the .wp-block-navigation-item__description element is hidden via CSS, but themes can add a display: block property to show the link description.
Query Loop Filters and Featured Images
The query Loop Filters settings page now shows in-line fields for taxonomies that are custom. This enables users to filter their current type of post using the one or more customized taxonomies registered for the selected post form.
It's now also possible to filter posts by multiple authors, while in previous versions you had to pick a single author from a dropdown.
Additionally, you may now set the Featured Image dimensions in a Query Loop block, too.
Border Support and Typography in Blocks of Responsive Groups
Group and Row blocks now are now compatible with the Typography setting. The change lets users apply the same fonts and typography options to an entire group of blocks in one go, saving a few clicks when it comes to creating a group of nested blocks.
The block for grouping has been further improved and you are now able to group blocks in Stack as well as Row with a single button.
Just select the blocks you would like to group then choose one of the three controls available on the block toolbar: Group, Row, Stack.
After you've grouped the blocks, a new tab in the sidebar settings displays Group variation descriptions which allow you to change the variation by a couple of mouse clicks.
WordPress 6.0 adds margin-related support for Group blocks which allows users to control bottom and top margins in separate.
Images featured in the Cover Block
Now you can make use of featured images in cover blocks like WordPress 6.0 a use featured image toggle was included in the toolbar of blocks. Because of this feature, you are able to change from the present image to the image that will be featured in a single button.
Display/Hide Labels on Social Icons
An unimportant but useful enhancement to the Social Icons block now enables users to change the icon link labels.
By enabling this feature it will show the default service name or create custom labels for the icons on your own.
Additional Block Enhancements
The forthcoming WordPress version comes with many improvements to many other blocks.
For example, now you have the ability to control the borders of Columns Blocks (Gutenberg 12.7).
Another of the useful UX enhancement lets you embed internal links using a simple [[ keystrike.
It's now simpler to manage the area around images within Gallery blocks thanks to the brand new Block Spacing control.
But these are just some of the changes to be expected when you install WordPress 6.0. For a complete list of improvements, read Gutenberg's announcement notes.
Summary
Like we said, we can now declare that we're currently in the middle of phase two of Gutenberg's development, the customization phase.
WordPress is the CMS used by 64.2 percent of all websites whose content management system we know. This is 43.0 percent of all websites. (Source W3Techs)
We'll stop here for now. Our list of the features and enhancements that are coming to WordPress 6.0 will not be able to be covered in just one post We hope that we've at least highlighted the features that are likely to have most impact on the method we utilize WordPress day to day.
Then we'd like you to finish this post with a few suggestions for our readers!
Do share your views to the community via the section of comments below.
Reduce time, money and improve site performance by:
- Help is available immediately 24/7 support from WordPress hosting experts, 24/7.
- Cloudflare Enterprise integration.
- The global reach of the audience is enhanced by 29 data centers across the globe.
- Optimization with our built-in Application to monitor performance.