What's new in WordPress 6.0 The latest blocks Style Switching, Template Editing Webfonts API, and More
Just a few hours away from the launch of WordPress 6.0 and like every year, we peeked inside the curtain to give our readers an idea of what's going coming with the next WordPress major version.
However, the next version will not be just this. According to Matias Ventura pointed out in the first draft of the roadmap for 6.0, the introduction of the site editor was the beginning of a major step, however it's a first step in the road to.
With WordPress 6.0 we can expect major improvements across a variety of areas within the CMS including speeds and usability like the following:
- Better information architecture and the ability to browse templates
- Improved template creation
- The new Navigation User Interface
- The brand new Browse Mode on the site Editor
- Alternative Global Styles
- An enhanced navigation block
- New design tools
- And much and more...
But wait, this isn't all. WordPress 6.0 also brings an impressive number of changes regarding new features, improvements along with bug fixings. There are more than 400 updates and 500 bug fixes for the editor. More than 189 tickets have been fixed with 91 brand new features as well as enhancements.
There's plenty to be discussed. Don't waste any time and learn about the latest capabilities of WordPress 6.0.
Webfonts API
A brand new Webfonts API offers a standard method of loading webfonts to WordPress that ensures performance as well as user security.
Since WordPress 6.0, you are able to register the new webfont within the theme.json file. theme.json.
Making use of theme.json is quite easy. The only thing you have to do is add another font family to the typography section. The following code provides an example for registration of 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 image below shows what happens in the editor.
The Webfont API is only able to register fonts that will render blocks in the present page, and is particularly helpful using webfonts that are identified as style variations. In addition to that it is also the case that the API increases the number of HTTP requests via an initial registration process for fonts before configuring them in accordance with different font families.
You can read more about the new API in the Webfonts API pull request as and in the status of Webfonts API for WordPress 6.0 Inclusion.
Global Styles Switching
Global Styles variants are one of the features that is most anticipated to be released to WordPress 6.0. Themes developers can now add diverse types of Global Styles with their themes and allow users to toggle between different styles in a single mouse click.
This is similar to having ready-to-use child themes having a set of pre-defined themes for each.
If you want to add a different style to the theme block you have chosen You will need to add another JSON file to the the style folder in the root directory of the theme.
Themes which support Global Styles variations show a brand new Explore Styles item on the Global Styles sidebar. This opens a tab in which users can find a list of the different styles that are available.
Select a Global Style from the list and it will be implemented across all your websites.
Below is an image of a custom style from the first example, using an alternative font 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)" Complete source code for the above-mentioned program can be found can be found on GitHub along with the gist.
Developers will gain a comprehensive description of Global Styles and Theme.json in Global Settings & Styles as well as Theme.json documentation articles.
Block Patterns Everywhere
In addition the WordPress 6.0 adds additional improvements to the block pattern.
Beginning, blocks are simpler to recognize when editing templates. With the quick inserter, you are able to use the inserter rapidly add blocks. Block patterns are displayed when you're able open it from the top of a template, i.e. that the block that you're planning to include in your template is a direct descendant of the template.
If the following requirements are fulfilled:
- Editing the block template
- The quick inserter can be found just below the root.
- It's a new block that's added to other blocks (i.e. it's not the initial or latest block on the page)
A new feature that is useful allows theme developers to incorporate recommended patterns within the theme.json. For a test look up the Patterns directory to find the patterns that you would like to suggest to people using the theme. then grab the pattern slug from the URL and include it in the theme.json in this manner: theme.json as is:
"patterns": [ "image-with-angled-overlay-shape-call-to-action-button-and-description", "hero-section-with-overlap-image" ],The users will see your suggestions for patterns in the block 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 patterns directory in the root directory of their theme.
It's pretty straightforward:
- Create a new patterns folder in your theme's rootfolder,
- create a block group with the block editor
- copy and copy and then paste your HTML into a brand new text file
- Use the heading in the next section as a prefix
- Then save the file as PHP within the pattern directory. Then save the file as PHP within your pattern directory.
It's that. There's a fresh block pattern which will be displayed on Block Inserter.
To get a fuller explanation of the development of block patterns, be sure to follow on the tracking issue of the tracker at GitHub.
Site Editing Features
The advancement of Full Site Editing continues to be a priority even after WordPress 5.9. WordPress 6.0 is a step ahead by improving aesthetics of themes, and offering a variety of templates that block theme templates. In addition, additional functions are in the pipeline.
Visual Theme Building
WordPress 6.0 will be the initial version of an upgraded block export feature for themes, which lets you download the theme as well as all changes and modifications.
If you're not using the tool to export block themes, you should. It's an effective site editing tool, which allows you to export your templates and styles as well as a full theme.
If you're satisfied with the modifications that you've made, within the editing interface on your site, go to the options sidebar , and then go to an tools section. There's an export button will allow you to download the current theme including the entire design as well as templates in a zip file.
You can then download your WordPress theme and upload it onto each WordPress website.
We tried the latest tools for exporting themes on the local WordPress installation, and found that the majority of the functions were as we you'd hoped for...
The exporter is in testing, and we're yet to see its immense potential. Consider the potential of developing your own themes through the editor interface on your site and then spread them across an unlimited number of installations. It doesn't matter if you're a professional designer...
There's a myriad of open questions to solve that we think there will be some improvements coming soon. If you're interested in and want to learn more details about Visual Theme Building (as we are) then you should follow the tracking system on GitHub.
More templates available in Block Themes
In earlier WordPress versions, there was a the option of limiting the number of template types available.
The day is now, WordPress 6.0 includes new templates that include Categories Author Tag as well as Date and Taxonomy.
This addition should streamline the process of editing your web page. If you're interested in testing the new feature, select an alternative template in the drop-down menu. Add the required blocks then save the modifications, and then look at the layout at the top of the page. Yes, it's simple like it is. Consider it in pair with the option of exporting themes that was previously mentioned and you'll be able to understand the features we can expect with regard to editing web pages within the next few months.
Enhancements to Usability and Interface
WordPress 6.0 introduces a number of improvements to the UI, many of which are designed to improve the order within the sidebar. Together, these improvements will greatly impact the overall experience of editing. This article will only cover a handful of them and you may refer to details in the Gutenberg release notes for the full list of 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 subject to many changes which improve the functionality of the component.
Select List to Expand View Your Selection
After you click on a block inside the editor it is highlighted instantly in the List View. In the event that the block has been located within a parent block that parent block will expand and shows the block within the block tree.
List View List View is collapsible by default
Before WordPress 6.0, whenever you click on the List View panel, it's open in default.
In the case that the blog post is composed of complicated structures that are nested and the block tree collapse on it is opened in List View List View makes the most sense.
In 6.0 it is now possible to use in 6.0 the List View is collapsed by default in the editors in all and allows the block tree easily understood in a glance.
Focus on the List View Button
If you click List View to start the List view panel the focus correct is returned back to the List view button. This is especially useful in the case of browsing the List View from your keyboard that results in a more smooth and fluid editing experience.
Multiple Block Belections as well as Drag and Drop
A further change in The List View allows you to select more blocks at the same time as well as drag them into a different position within The View.
Block Style Previews
In the past, prior to WordPress 6.0 Block style previews were made available within the block sidebar making the block sidebar a large part of Styles panel.
In 6.0 only the names of the styles that are available in the Styles panel. It is also possible to see previews of styles are shown in the sidebar when the name of the style is hovered over or receives focus.
This change reduces sidebar dimensions and will make the style name more easily identifiable.
The Paragraph section on Typography
In an effort to organize the sidebar of the block to make it easier for the user to navigate, the Cap control for the Paragraph block is moved to the sidebar. Cap control of the Paragraph block is relocated out of the area it was in to the section for Typography.
In this update, each control for fonts and typography is now placed under the same section that results in better user experience.
Colour and Border Setting moved in the Tools Panel
To help organize a messy settings sidebar, border settings and color settings controls were transferred into the ToolsPanel which can be folded and expanded in various configurations.
Are you interested in knowing how we increased our number of guests 1000 percent?
Join more than 20,000 other users to receive our newsletter every week. Insider WordPress advice!
The interface will make it easier to manage editing by adding various blocks. It will also provide greater consistency to the sidebar.
Post Publish Panel Categories Reminder
When you're in a hurry or frequently publish a large amount of blog entries it is easy to lose track of the tags or categories. If you find yourself in this circumstance, the tag reminder appearing in the Post publishing panel is very helpful.
This is to assist site admins and authors ensure that their posts have appropriate categories in place, using WordPress 6.0 a new option to define categories. The category panel appears in the Post Publish panel when a category isn't yet present in the content.
The below image compares the Post publishing panel of WordPress 5.9 in comparison to. 6.0.
Code Editor added to Site Editor
Additional Enhancements
Multi-select Now it's possible to choose the text you want to use from various blocks.
Block The Locking User Interface The new lock item within the More Settings dropdown displays an additional pop-up that allows you to stop users from moving, or disabling obstructions (or the entire set).
This can be particularly beneficial when editing templates as well as reusable blocks, where you can also restrict block editing.
Style Preservation When you alter blocks or design new buttons, several styles have been preserved.
Below is a picture of a List Block that has different styles.
If you transform this List Blocks into paragraphs, the new block would keep the same style as earlier List items.
Similar features are also made available to new buttons in the block of Buttons that now are the same in style that the buttons around them.
New Core Blocks
The blocks will be added into WordPress 6.0. Here are the blocks you'll see with the upcoming version.
Loop of Comments
As with the Query Loop block, the completely new Comment Query Loop block will show comments made by the users who post. It's a block with advanced features with a variety of inner blocks you can alter and configure with a different method.
As the image below shows that you can pick any of the blocks within the Comment Query Loop block to customize the appearance and style as you like. You can also create additional blocks, or to take out or move existing blocks ( Source code).
Read More
A brand new and flexible Read More block can be customized to suit your needs. certain aspects that are associated with the Read More button: borders and fonts, colors, corners, and more ( Source code).
It's a fantastic option because it permits the user to alter and even add an additional Read More link outside of the boundaries of this block. Excerpt block.
The query loop does not give any result.
The block which displays the absence of results Block is a container that allows you to include any block or text to show when the query has no outcomes. If you would like to insert the block No Results block to the query Loop simply select the query loop and then select the plus icon at the bottom right corner to open the quick inserter. Then, you can search for no results. The block is not found inside the Query Loop ( Source code).
Avatar and Post Author Biography
WordPress 6.0 adds brand new block types for splitting parts of your Author block into blocks and also to make them available for your own content.
The Post Author Biography block is a collection of author's description ( Source code).
The Avatar Block displays an avatar for a user. Users can choose between different site creators ( Source code).
The block can be used to show the avatar of an author outside of the context of the Author Info block or comments. It is possible to use the block on pages that is dedicated to all authors or on a page that includes comments posted by readers or users.
Enhancements to Blocks Already Built
WordPress 6.0 will also bring a variety of changes and improvements to blocks already in place, which could be a significant influence on how you edit. The Navigation block is changed by a variety of changes. However there are also changes to other blocks including the Query Loop as well as Featured Image. Social, Group and other icons.
Enhancements to the Navigation Block
The last couple of months The Navigation block received several upgrades and has a significantly easier-to-use interface.
The first is that a high-quality preview has been added to the Navigation Link block. When you add an URL that links to a publicly accessible resource Clicking the link button in the toolbar for the block shows an image of the resource.
A variety of other modifications can affect the overall editing experience.
If you're creating an additional menu, but there is only One Navigation Menu exists, then it will be defaulted to the menu that is only available. This change should accelerate the editing process even if you have only one menu for navigation.
Navigation Links already had a description field that allowed users to give a brief explanation of their navigation Links. Prior to WordPress release, themes couldn't utilize the feature.
With the latest WordPress version of WordPress, WordPress 6.0, a appears following the URL'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.
Search Loop Filters, Featured Images
It is now possible to view the loop of query Filters settings page now shows in-line fields for taxonomies that are custom. Users can filter the type of post using the specific or customized taxonomies that are registered to the chosen post form.
There is now the option to filter posts by multiple authors in the past, whereas in earlier versions you had to pick a single author from a dropdown.
In addition, you can now alter the Dimensions of the Featured Image inside an Query Loop block as well.
The Border Service and Typeography in Blocks of Reactive Groups
Group and Row blocks now can now be used with the typesetting. It allows users to apply the identical types of fonts and options to an entire set of blocks in the same step, thereby saving handful of clicks to creating groups of blocks that are nested.
The block that allows grouping was further enhanced and you are now able to group blocks in Stack in addition to Row by pressing a button.
Simply select the blocks that you want to group and then select any of three options from the toolbar for blocks: Group, Row, Stack.
Once you've put the blocks together after you've grouped them, a new tab on the sidebar settings displays groups with description of the variation and allows you to modify the group by a couple of mouse clicks.
WordPress 6.0 includes margin-related support for Group blocks and allows users to regulate top and bottom margins in separate.
Images used in the Cover Block
You can now make use of the featured image feature in your cover blocks like WordPress 6.0 the utilize featured image toggle has been added to the block's toolbar. With this feature, you are able to change between the current image and the image that will be featured in a single button.
Disable or show labels on social Icons
A minor but beneficial modification to the block for Social Icons block now enables users to modify the labeling of the icon links.
By enabling this feature it will display the default service name or design custom labels for your icons on your own.
Further Block Enhancements
The coming WordPress version includes a lot of changes to various blocks.
For example, now you can control the borders of columns Blocks (Gutenberg 12.7).
Another of the useful UX improvement allows you to embed internal hyperlinks with a few [[ keystroke.
It's now much easier to manage the image's area within Gallery blocks due to the brand new Block Spacing control.
These are only a few of the changes to be anticipated when installing WordPress 6.0. For a complete list of improvements, read the announcement note from Gutenberg.
Summary
We can now declare that we're currently in the middle of phase two of Gutenberg's development, the customization phase.
W3Techs
Let us stop for the moment. The list of changes and improvements in WordPress 6.0 won't be able to be covered in one article. are hoping that we've listed the functions that are likely to have greatest impact on how we work with WordPress day to day.
If you're interested, we'd ask you to conclude this article by offering a few ideas to readers!
Do share your views to your fellow members via the comment section in the following.
Save time, money and increase site performance through:
- Support is always available 24/7. support from WordPress hosting specialists, 24 hours a day.
- Cloudflare Enterprise integration.
- The global coverage of viewers is enhanced thanks to 29 data centers across the world.
- Optimization using our built-in application to track the performance.
This post was first seen on here