New Blocks, Style Switching, Template Editing, Webfonts API, and Much More

WordPress 6.0 Arturo is here and, as usual, we peeked behind the curtains to give our readers a preview of what’s new with the latest WordPress major release.

Let’s say right away that, if WordPress 5.9 brought us to the heart of Phase 2 of Gutenberg, WordPress 6.0 aims to consolidate the customization tools already available.

But the new version isn’t just that. As Matias Ventura pointed out in the Preliminary Roadmap for 6.0, the introduction of the site editor marked a big milestone but also just a first step in the journey.

WordPress 6.0 brings significant improvements in several areas of the CMS, from usability to performance, including the following:

• Improved information architecture and template browsing experience
• Improved template creation
• New hooks
• Webfonts API
• A new Browse Mode for the site editor
• Alternative Global Styles
• An enhanced Navigation block
• New design tools
• Improved performance
• And much more…

But wait, that’s not all. WordPress 6.0 brings an impressive number of changes, with 251 Trac tickets, including 97 features and enhancements and 131 bug fixes.

Yep, there’s a lot to talk about. So let’s not delay any longer and find out what’s new in WordPress with 6.0.

Webfonts API

A new Webfonts API now provides a standardized way to load webfonts into WordPress ensuring performance and user privacy.

As of WordPress 6.0, you can only register a new webfont from your theme.json.

Using the theme.json is quite straightforward. All you need to do is to add a new font family to the typography section. The following code provides an example of webfont registration:

{
	"settings": {
		"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 code above adds the Inter font family to the default set of fontFamilies available in Twenty Twenty-Two. If you want to try it yourself, download the Inter webfont from Google Fonts to the ./assets/fonts folder, then add the code above to the settings.typography section of Twenty Twenty-Two’s theme.json. Once you’re done, save the file and get back to the site editing interface.

The following image shows the result in the editor.

The Webfonts API only registers fonts that are required to render blocks on the current page and that’s particularly useful with webfonts defined in style variations. In addition, the API optimizes the number of HTTP requests by registering and enqueueing fonts by font family.

You can read more about the new API in the Webfonts API pull request, in Status of Webfonts API for WordPress 6.0 Inclusion, and in Global Styles variations in WordPress 6.0.

Global Styles Switching

Global styles variations are one of the most awaited features coming with WordPress 6.0. Theme authors can now bundle multiple sets of Global Styles with their themes, enabling users to switch between style variations with a single click.

It’s much like having ready-to-use child themes, with a predefined set of styles for each one.

To add a style variation to your block theme, you will add an alternative JSON file into a styles folder located in your theme’s root.

Theme supporting Global Styles variations show a new Browse styles item in the Global Styles sidebar. This brings to a panel where theme users find a list of the available styles.

Pick a Global Style from the list and the styling is automatically applied to your entire website.

The new feature allows theme developers to create an unlimited number of style variations and perfectly pairs with the new Webfonts API.

The following image shows a custom style from the previous example, with a different font applied to headings.

If you want to try it yourself, add a styles folder to your block theme’s root, create a new JSON file with a meaningful name, open it in your favorite code editor and add the following code:

{
	"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)"
		}
	}
}

You can find the full code used in the example above on GitHub and gist.

Developers will find in-depth overviews of Global Styles and Theme.json in Global Settings & Styles and Theme.json documentation articles.

You can also check the latest version of Twenty Twenty-Two, which now features three new style variations.

Block Patterns Everywhere

One thing is for sure, block patterns play a central role in the current phase of WordPress development. First introduced with WordPress 5.5, block patterns have been regularly improved over time.

Additionally, starting with WordPress 5.9, patterns featured in the Patterns directory made their way into our WordPress websites, being dynamically retrieved from the Patterns Directory and loaded in the block inserter.

And now anyone can become a pattern developer, thanks to a brand new online tool. The Pattern Creator allows you to build, edit, and submit your best block patterns to the Pattern Directory. All you need to get started is a WordPress.org account.

And WordPress 6.0 introduces further improvements to block patterns.

First, block patterns are easier to find in template editing. Now the quick inserter only shows block patterns when you access it at the top level of a template, i.e. when the block you’re going to add to your template is the direct descendant of the document.

That’s when the following conditions meet:

• You are editing a block template
• The quick inserter is at the root level
• You’re adding a block between other blocks (i.e. neither the first nor the latest block on the page)

Another useful feature now enables theme developers to add recommended patterns to the theme.json. To give it a try, search the Patterns Directory, find the patterns you want to recommend to your theme’s users, then grab the pattern slug from the URL and add it to your 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 recommended patterns in the block inserter.

A powerful pattern-related feature coming with WordPress 6.0 is the implicit pattern registration. Themes can now implicitly register patterns by declaring them as PHP files under a new /patterns directory at the root of the theme.

The process is pretty straightforward:

1. create a new patterns folder in your theme’s root,
2. build a block group in the block editor,
3. copy and paste your HTML in a new text file,
4. prepend the following heading,
5. and save the file as PHP in your patterns folder.

<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

And that’s it. You now have a new block pattern to show up in the block inserter.

Page Creation Patterns are another block pattern-related feature introduced with WordPress 6.0. Now, when you create a new page, the page creation screen displays a modal providing a set of block patterns you can choose from to create your page.

The modal is only shown when at least one pattern declares support for the core/post-content block types.

Out of the box, WordPress 6.0 doesn’t include any of these patterns, so the modal won’t appear unless you add support to an existing pattern. But adding the modal to the page creation screen is pretty straightforward.

If you registered a block pattern for your theme as shown in the example above, you can add support for pattern modal using the Block Types property as shown in the example pattern below:

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Save this code in a PHP file in the /patterns directory of your theme. Then, in your WordPress dashboard create a new page. You should see a new modal as shown in the following image:

For a closer view at page creation patterns, see also Page creation patterns in WordPress 6.0.

For a more comprehensive overview of the block pattern development, see also New features for working with patterns and themes in WordPress 6.0 and the Tracking Issue on GitHub.

Site Editing Features

Full Site Editing development has not ended with WordPress 5.9. WordPress 6.0 moves things a step further by improving visual theme-building functionalities and delivering new template options for block themes. And more features are on the way.

Visual Theme Building

WordPress 6.0 introduces an improved block theme export tool, which allows you to download the current theme with all your changes and customizations.

If you haven’t used the block theme export tool so far, it’s a powerful site editing tool allowing you to export your styles and templates as a whole theme.

When you’re happy with your changes, from the site editor’s interface, open the Options sidebar and find the Tools section. Here an Export button allows you to download the current theme with all your style and template customizations in a zip file.

You can then export your theme and install it on any WordPress website.

We tested the improved theme export tool on a local WordPress installation, and found that almost everything works as we expected… ?

Anyway, the export tool is still under development, and today we can only glimpse its tremendous potential. Think about the possibility to create your themes from the editing interface of your website and distribute them on an arbitrary number of installations. And that’s whether or not you’re a developer…

There are still a lot of open issues to be fixed, which makes us think we’ll see several improvements soon. If you’re curious and want to learn more about Visual Theme Building (as we are), you can follow the Tracking Issue on GitHub.

More Template Options in Block Themes

In previous WordPress versions, we had a limited number of template types available.

Now, WordPress 6.0 introduces several new template types, including Author, Category, Date, Tag, and Taxonomy.

This addition should streamline your site editing workflow. To give it a try, just pick a new template from the drop-down list, add the necessary blocks, save your changes, and check how it looks on the front end. Yep, it’s easy like that. Now, consider that in pair with the theme export feature mentioned above and you’d better understand what we may expect with site editing soon.

Interface and Usability Improvements

WordPress 6.0 introduces a number of changes to the UI, many of which are intended to make order in the sidebar. All together these changes should have a considerable impact on the overall editing experience. Here we will only mention just a few of them, but you can check the Gutenberg release notes for a more comprehensive list of changes (see Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).

List View Improvements

The List View is affected by a considerable number of changes improving component’s usability.

Expand List View on selection

When you click on a block in the editor, now the block is automatically highlighted in the List View. If the block is nested in a parent block, the parent block expands showing the item in the block tree.

List View Collapsed by Default

Before WordPress 6.0, when you open the List View panel, it’s expanded by default.

But since a post often consists of complex structures of nested blocks, having the block tree collapse when opening the List View makes perfect sense.

With 6.0, the List View is collapsed by default in all editors, making the block tree much more understandable at a glance.

Focus on the List View Button

When you open the List view panel, focus now correctly returns to the List View button. This is particularly useful when you browse the List View from your keyboard, and results in a smoother and more seamless editing experience.

Multiple Block Selection and Drag & Drop

Another change to the List View allows you to select multiple blocks at the same level and drag & drop them to another position within the list.

Block Style Previews

Before WordPress 6.0, block style previews were placed in the block sidebar, taking up a considerable portion of the Styles panel.

With 6.0, only the names of the style variations appear in the Styles panel, while the style previews display outside the sidebar when the style name is hovered or receives focus.

This change reduces sidebar dimensions and should make style names more evident.

Paragraph Typography Section

Aiming to make order in the block sidebar, the Drop Cap control for the Paragraph block has been moved from its section to the Typography section.

With this change, all typography settings controls are now placed under the same section, leading to a more consistent user experience.

Border and Color Settings Moved Under the Tools Panel

Aiming to make order in a messy settings sidebar, border settings and color settings controls have been moved into the ToolsPanel and can be expanded and collapsed in several contexts.

This change should streamline the editing experience with several blocks and bring more consistency to the sidebar.

Post Publish Panel Category Reminder

When you’re in a hurry or regularly publish a good number of blog posts, you can easily forget about tags or categories. If you often see yourself in such a situation, you’ll find the tag reminder appearing in the Post publish panel extremely useful.

Now, to help site admins and authors make sure their posts have the necessary categories assigned, with WordPress 6.0 a new Suggestion: Assign a category panel appears in the Post Publish panel when a category has not been already added to the post.

The image below compares the Post publish panel in WordPress 5.9 vs. 6.0.

Code Editor Added to the Site Editor

Starting with WordPress 6.0, the Code Editor is now available within the Site Editor, too. As with the Post Editor, you’ll find the Code Editor under the Options menu.

Block Locking UI

A new Lock item in the More Settings dropdown opens a popup where you can prevent users from moving or removing blocks (or both).

This is particularly useful in template editing and reusable blocks, where you can also restrict block editing.

The new feature can be programmatically disabled using the new canLockBlocks setting.

The following code enables the block locking feature only for users with Editor role or above:

add_filter(
	'block_editor_settings_all',
	function( $settings, $context ) {

		$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
		return $settings;
	},
	10,
	2
);

Developers can also hide the Block Locking UI on specific block types using the lock property:

{
	"apiVersion": 2,
	"supports": {
		"lock": false
	}
}

You can read more about block locking in Block Locking Settings in WordPress 6.0.

Multi-select

It’s now possible to select text across multiple blocks.

Style Retention

When you transform blocks or create new buttons, several styles are now maintained.

The image below shows a List block with different styles.

When you transform the List block into paragraphs, the new blocks would retain the same styles as the previous list items.

The same enhancement applies to new buttons added to a Buttons block, which now inherit styling from the adjacent buttons.

New Core Blocks

The number of core blocks is constantly increasing. If you’re wondering what are the core blocks currently available, now there is a Handbook page providing a full list of core blocks included in the Gutenberg plugin. For each block, Name, Category, Supports, and Attributes are provided, as well as a useful link to the source code that block developers will love.

And more blocks are coming with WordPress 6.0. Find here the blocks you may expect with the upcoming version.

Comments Query Loop

Similar to the Query Loop block, a new Comment Query Loop block displays post comments. It’s an advanced block that includes several inner blocks that you can edit and configure separately.

As the image below shows, you can select any of the blocks contained in the Comment Query Loop block to customize its appearance as you like. You can also add more blocks or move or remove existing blocks (Source code).

Read More

A new and customizable Read More block allows you to customize different aspects of the Read More button: borders, colors, corners, typography, and more (Source code).

This is a great addition because it allows you to add and customize the Read More link outside of the context of the Excerpt block.

No Results in Query Loop

The No Results block is a block container in which you can add any text or block to show when the query has no results. To add the No Results block to a Query Loop, just select the Query Loop and click on the plus icon at the bottom right corner to launch the quick inserter. Then search for No Results. The block is not available outside the Query Loop (Source code).

Avatar and Post Author Biography

WordPress 6.0 also introduces new block types to split the Author block into its components and use them separately in your content.

The Post Author Biography block provides the authors’ description (Source code).

The Avatar block simply shows a user’s avatar allowing you to choose between site authors (Source code).

This block is particularly useful for showing an author’s avatar outside the context of the Author Info block or comments. For example, you could use it on a page dedicated to all authors, or on a page showing reviews from your users/readers.

Improvements to Existing Blocks

WordPress 6.0 also introduces several changes and enhancements to existing blocks that will potentially have a strong impact on your editing workflow. The Navigation block will be affected by several changes, but you’ll also see improvements in other blocks, including Query Loop, Featured Image, Group, and Social Icons.

Navigation Block Improvements

Over the past few months, the Navigation block received several improvements and now features a significantly easier-to-use interface.

First, a rich preview has been added to the Navigation Link block. When you add a link pointing to a publicly accessible resource, clicking on the link button in the block toolbar shows up a preview image of that resource.

A few additional changes affect the overall editing experience.

Now, when you add a new menu and only one Navigation Menu exists, then it defaults to the only available menu. This change should speed up your editing workflow if you only have a single Navigation Menu.

Navigation Links already had a description field where users can enter a text describing their navigation links. However, in previous WordPress versions, themes couldn’t support this feature.

Now, with WordPress 6.0, a <span class="wp-block-navigation-item__description"> appears after the link’s label.

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 section now shows input fields for custom taxonomies. This enables users to filter the current post type by one or more custom taxonomies registered for the selected post type.

It’s now also possible to filter posts by multiple authors, while in previous versions you were only allowed to select a single author from a dropdown.

In addition, you can now set the Featured Image dimensions inside a Query Loop block, too.

Typography and Border Support in Responsive Group Blocks

Group and Row blocks now support Typography settings. This change allows users to apply the same typography settings to a whole group of blocks at once, saving a few clicks when it comes to formatting a group containing several nested blocks.

The Group block has been further improved and now you can easily group blocks in Stack or Row with a single click.

Just select the blocks you want to group and pick one of the three controls available in the block toolbar: Group, Row, Stack.

Once you have grouped blocks, a new panel in the settings sidebar shows Group variation descriptions enabling you to switch variation with a few clicks.

WordPress 6.0 also introduces margin support for Group blocks, enabling users to control top and bottom margins separately.

Featured Image in the Cover Block

Now you can use Featured Images in Cover blocks as with WordPress 6.0 a Use featured image toggle has been added to the block toolbar. Thanks to this new control you can switch from the current image to the featured image with a single click.

Show/Hide Labels in Social Icons

A small but usefud enhancement to the Social Icons block now enables users to toggle on/of icon link labels.

When enabling this option, you can display the default service name or set custom labels for your icons separately.

Additional Block Enhancements

The upcoming WordPress version also brings a great number of enhancements to many other blocks.

For example, now you can control the borders of Columns blocks (Gutenberg 12.7).

Another useful UX improvements allows you to insert internal links using a simple [[ keyboard trigger.

It’s now easier to control the space around images in a Gallery block thanks to the new Block spacing control.

Changes for Developers and Performance Improvements

WordPress 6.0 also adds many features for developers.

The new release also gives a boost to performance, with a few additions to the WordPress Caching API, performance improvements to taxonomy term queries, and further performance improvements to single sites with large user counts.

This ends our roundup of the new features and changes you’ll see once updated your WordPress websites to 6.0.

But these are just a few of the improvements coming with WordPress 6.0. For a complete list, check out Gutenberg’s release notes and the WordPress 6.0 Field Guide.

Summary

As mentioned above, we can now say that we’re in the middle of phase two of Gutenberg’s development, the Customization Phase.

Full Site Editing is now part of the WordPress core and 6.0 and the following versions will bring further improvements to what we already have and can use right now.

All this will have a huge impact on the WordPress ecosystem and the web as a whole, also considering that, at the time of writing,

WordPress is used by 64.2% of all the websites whose content management system we know. This is 43.0% of all websites. (Source W3Techs)

We’ll stop here for now. Our list of features and improvements coming with WordPress 6.0 can’t be exhausted in a single post, but hopefully, we’ve at least highlighted the additions that will have the biggest impact on the way we’re using WordPress day to day.

Now we’d like to conclude this article with some questions for our readers!

Please, share your thoughts with the community in the comments section below. ?