What’s New in WordPress 6.1: JPEG to WebP Conversion, Fluid Typography, Improved Template System, and Much More!

WordPress 6.1 has been scheduled for release on November 1, 2022, and will be the third major release of the year, following WordPress 6.0 Arturo, released on May 24, and WordPress 5.9 Josephine, released on January 25.

As it always happens, new WordPress releases bring new features, improvements, and bug fixes from the latest versions of the Gutenberg plugin into the core. And WordPress 6.1 will be no exception, as 11 versions of the Gutenberg plugin will be merged into the core, from 13.1 to 14.1.

These are the main dates of the release schedule:

• Beta 1 & Feature Freeze: September 20, 2022 – From this date on, core contributors will focus on testing and fixing bugs
• Release Candidate 1: October 4, 2022 – Publish the Field Guide with Dev Notes
• Dry Run: October 24, 2022
• WordPress 6.1 General Release: November 1, 2022

At the time of this writing, the dev notes and field guide have not been published yet, but we can already take a peek behind the curtains and try to understand what we can expect with the next major release of WordPress.

Matias Ventura gives us some insights in the Roadmap to 6.1, where he says that the goal of 6.1 is to refine the experiences introduced with 5.9 and 6.0 and fix some things as we approach phase 3 of the Gutenberg roadmap.

Want to get a peek behind the curtain at what to expect with WordPress 6.1? Keep reading... Click to Tweet

1. Template Editor Improvements: One of the main new features is the Template Editor. WordPress 6.1 should introduce the ability to browse, visualize, and edit the structure of the site.

2. Template Patterns: The goal is to give block patterns a central role in template and page creation, adapting them to custom post types and block types, enhancing locking functionality, improving saved pattern management, etc.

3. Global Styles and Blocks & Design Tools: WordPress 6.1 will allow managing webfonts, implement responsive typography, and expand the toolset available to blocks.

That said, let’s take a closer look at some of the most powerful features coming with WordPress 6.1:

Automatic Image Conversion to WebP Format

First introduced in WordPress with 5.8, WebP is a modern image format that provides superior lossless and lossy compression for images on the web.

But even though you could upload your WebP images to WordPress using the Media Library, WordPress does not support automatic image conversion to WebP format. To enable that feature on your website, you’d use a third-party WebP WordPress plugin.

Now, starting with WordPress 6.1, image sub-sizes should be automatically created in alternative file formats. In addition, WordPress 6.1 introduces three new filters to enable developers to control the mime type of sub-sizes generated and used by WordPress on the front end.

And, with 6.1, WordPress will generate and use WebP sub sizes when available by default.

When a user uploads a JPEG image, WordPress can automatically generate both WebP and JPEG sub sizes. WordPress will then be able to serve WebP images on the front end. JPEG images will be used in contexts where WebP is not yet supported (e.g., email).

This is the default behavior. Developers will be able to override the default settings and determine which image format to use through filters.

When new mime types are generated, only those images whose sizes are smaller than their respective originals are retained. By default, additional mime types are generated only for default image sizes and for custom sizes when you have opted for support.

This change also introduces three new filters providing full control over secondary mime type output:

• wp_image_sizes_with_additional_mime_type_support allows developers to control the image mime type on a per-size basis
• wp_upload_image_mime_transforms allows developers to control the image mime type for a given input and even to override the original mime type
• wp_content_image_mimes can be used to control the mime type output order for content images. When rendering images on the page, the first mime type available will be used.

This change should bring an average file size reduction of 30%.

Before the 6.1 final release, you can test the new feature with the Performance Lab plugin from the WordPress Performance Group.

However, the change appears controversial, and many contributors continue to report issues. Specifically, it was noted that:

Resources for generating images when you upload an image will increase dramatically, however resources to serve an image will be lowered. Since image uploading is very rare compared to image serving, the extra effort to compress and store images should be worth it.

And:

Actually that dramatic increase of resources usage when uploading an image is a very bad side effect here. It means a lot of uploads will fail, and leave the users stranded. It also will increase support requests for both WordPress and the hosting companies dramatically. Don’t think this is acceptable. Because of this, even if image multi-mime support is needed in WordPress, the current approach doesn’t seem like a good solution.

So, at the time of writing, it is still unclear whether the use of the WebP format in image sub sizes will be enabled by default or the site admin will have to opt-in to serve the WebP format on the front end of their website. In the meanwhile, JPEG to WEBP automatic conversion has been temporarily disabled. For a meaningful summary of the ongoing discussion, check out Sara Gooding’s article on WP Tavern.

Fluid Typography

WordPress 6.1 adds support for Fluid Typography via calc/clamp CSS functions.

The expression Fluid typography describes the capacity of text to adapt to the viewport width, smoothly scaling from a minimum to maximum width.

It’s something different from what you can achieve with media queries, as media queries allow themes to resize text depending on specific viewport sizes but do nothing between different values.

Some themes already support fluid typography. Twenty Twenty-Two, for example, uses the CSS clamp() function for several font sizes. For example:

"settings": {
	...
	"custom": {
		"spacing": {
			"small": "max(1.25rem, 5vw)",
			"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
			"large": "clamp(4rem, 10vw, 8rem)",
			"outer": "var(--wp--custom--spacing--small, 1.25rem)"
		},
		"typography": {
			"font-size": {
				"huge": "clamp(2.25rem, 4vw, 2.75rem)",
				"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
				"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
			}
		}
	}
}

As you can see in the code above, fluid font size values are used for every single font size.

Now, starting with WordPress 6.1, themes are enabled to automatically generate fluid font sizes by declaring the new typography.fluid property as follows:

"styles": {
	....
	"typography": {
		"fluid": true,
		"fontSizes": [
			{
				"size": "2rem",
				"fluid": {
					"min": "2rem",
					"max": "2.5rem"
				},
				"slug": "medium",
				"name": "Medium"
			}
		]
}

Using typography.fluid and typography.fontSizes[].fluid, the value of every font size is automatically calculated using the following formula:

--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});

For example:

--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});

Note that at the time of this writing, Fluid Typography is an experimental feature. You can dive into the technical details in Block supports: add fluid typography.

Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi

— Brian Gardner (@bgardner) August 8, 2022

See also How to add Fluid Typography to WordPress Block Themes by Rich Tabor and Fluid typography with Gutenberg by Carolina Nymark.

New and Improved Block Types

With so many Gutenberg versions merged into the core, WordPress 6.1 is going to bring a brand new Table of Contents Block and tons of changes and improvements to existing block types.

New Table of Contents Block

First introduced with Gutenberg 13.3, a new Table Of Contents block is now available as an experimental block. Once added to your post or page, the Table Of Contents block will detect any Heading blocks added to the content and display them as anchor links in an ordered list.

Hot off the presses... this is everything you can expect to see in WordPress 6.1 (coming November 2022! ), from new and improved block types, fluid typography, and more! Click to Tweet

Added Border Support for the Columns block

The Columns block now leverages the new BorderBoxControl component that enables WordPress users to specify customized borders for columns, also setting completely different styles for each border (see also Column: Add border support to column blocks pull request).

Individual borders can also be set in the theme.json file as follows:

"core/column": {
	"border": {
		"top": {
			"color": "#CA2315",
			"style": "dashed",
			"width": "6px"
		},
		"right": {
			"color": "#FCB900",
			"style": "solid",
			"width": "6px"
		}
	}
}

Developers can read more about the new control in Component Reference – BorderBoxControl.

Border Controls for Image Blocks

Gutenberg 13.8 introduced support for all border controls for the Image block. The change will be added to the core with WordPress 6.1, opening the door for new and great opportunities for web creatives.

Comments Block Improvements

WordPress 6.1 also brings us an improved Comments Block. Starting with the next version of WordPress, users will be able to use more advanced editing features on the Comments block.

In the image below, you can see the Comments block settings sidebar and the changes applied to the Comments Title.

Post Terms Block Variations for Custom Taxonomy Terms

The Post Terms block has been enhanced with a new custom taxonomy variation. You can now register a new custom taxonomy, say “Actors in a Movie” post type, and you’ll be able to add a list of taxonomy terms to the current post or custom post type.

The image below shows a list of actors in a Movie post type.

A New Parents Filter for the Query Block

A new Parents filter is now available for the Query Block to display hierarchical posts and pages having the same parent.

Font Family Controls in the Heading Block

The Heading block now supports Font Family controls.

Horizontal and Vertical Spacing in Gallery Block

Starting with WordPress 6.1, a new axial spacing control allows you to set different horizontal and vertical gaps for images in the Gallery block.

This change results in greater flexibility when creating the layout of image galleries.

Featured Images in Cover Block

Featured images still get a lot of attention, and in WordPress 6.1, the scope of their usage is further extended. Starting with 6.1, the featured image can be selected directly from the Cover block placeholder, as shown in the following images.

This change should help to create a more consistent user experience making it clearer for the user what they are customizing.

Also, a Featured Image toggle has been added to media replace flow.

Appearance Tools for Post Navigation Links

The appearanceTools setting property allows you to opt-in to several settings that are disabled by default.

Since WordPress 6.1, for themes supporting the appearanceTools setting property, you can customize link color and font family in Post Navigation Link.

You can read more about the appearanceTools property in our introduction to the Twenty Twenty-Two theme.

Lock Inside Container Block With One Click

A new toggle now enables users to lock blocks in a container of blocks with a single click. This applies to Group, Cover, and Column blocks.

Additional Features and Improvements to The Block Editor

Although it is a consolidation version, WordPress 6.1 will bring so many changes and improvements that it would be impossible to list them all in one article. In addition to the new Table of Contents block and the changes listed above, we’ll see:

Template Part Variations in the Block Inserter

Template part variations are now available in the block inserter, making it easier to add template parts to your website.

This change makes the editing process more straightforward and faster, allowing users to quickly view variations of a template part all at once with just a few clicks.

Visualize Margin and Padding

A small but useful improvement is the highlighting of the margins and padding while the user is adjusting them. This should make it much clearer how much space is being added inside or outside the elements.

Improvements to the Settings Sidebar

WordPress 6.1 will also showcase several interface improvements to the Settings sidebar.

The post settings sidebar has been slightly redesigned. Now the fields for post format, slug, template, and authors are aligned and have the same width. In addition, the post scheduler has been simplified to make the experience more understandable. The template section has also been moved into a popover to save space and clean up the interface.

In addition, the template panel has been replaced by a template link. When clicked, the template link displays Default template in a popover.

Fluid typography, JPEG to WebP conversion, improved block types... WordPress 6.1 has a lot of exciting updates in store! Learn more in this guide Click to Tweet

Publish Popover Design Updates

The datetime picker in the Publish popover has been redesigned and now uses “existing WordPress components and Emotion styling.”

More technical insights are available in Design updates to the Publish popover (DateTimePicker).

Time to Read in the Info Panel

The Information panel available in the top toolbar has been improved and now displays Time to read in addition to Words, Characters, Headings, Paragraphs, and Blocks.

The estimated reading time is calculated on an average of 189 words per minute. Read more in @wordpress/editor: Add estimated time to read to table of contents in editor.

New and Improved Building Tools

WordPress 6.1 will also extend the functionality of the Site Builder. Block Patterns will be available in more places and a wider choice of template types will improve the editing experience in the template editor.

Creation Patterns for Post Types

WordPress 6.0 introduced Page Creation Patterns, which are a way to provide a selection of patterns each time a user creates a new page. This way, you don’t have to build the page from scratch but can pick a pattern from a modal and fill in the content, and you are ready to go.

To enable this feature, at least one block pattern should declare support for the core/post-content block types.

Now, starting with WordPress 6.1, this feature extends to all post types. All you need to do is include core/post-content in your pattern’s blockTypes and set the relevant postTypes.

Now let’s find out how to take advantage of this new feature with a practical example. Assume that you have a Movie post type.

First, you need to register a block pattern as discussed here.

Or you can go the easy way and use the implicit pattern registration (for simplicity in this example, we’ll use implicit pattern registration).

Create a PHP file for your block pattern in a /patterns directory in your theme’s folder (for this example, we used Twenty Twenty-Two). Then add the following heading:

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

And that’s it. Now, each time you create a new Movie post type, a Choose a pattern modal appears on the screen.

If you want the modal to show up on multiple post types, just add the corresponding slugs separated by commas:

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

For a closer view of creation patterns, see Ability to use creation patterns for other post types besides page.

More Template Types in the Site Editor

With WordPress 6.0, only a limited number of templates can be created in the Site Editor:

Starting with WordPress 6.1, it will be possible to create a different template for each individual post type.

And you can also add and edit templates for core and custom taxonomies, even for single categories or tags.

If you register custom post types or a custom taxonomy, they will be automatically listed in the template selection box of the Site Editor.

But not only that. Once selected the template post type, a modal prompts the user whether to create a template for all posts of that type or to create a new template for a specific post of the selected post type.

Then a new modal provides a list of the posts available for that post type.

Changes for Developers

WordPress 6.1 also adds a new API and several improvements for developers.

New Preferences Persistence API

WordPress 6.1 introduces a brand new preferences persistence API that saves editor preferences in the WordPress database instead of local storage.

This way, user preferences can be stored across all browsers and devices.

For this purpose, the previous persistence system in the @wordpress/data package has been deprecated, and a new preferences-persistence package has been introduced. The new package saves data to user meta via the Rest API. The data will also be saved in the local storage as a fallback in case the user goes offline or a request is interrupted (see also pull #39795).

Support for Button Styles in theme.json

With WordPress 6.1, you can add button styles to your themes using theme.json. This allows theme developers to add consistency to buttons across blocks. An example is the search block, but also third-party blocks will benefit from this change.

To make it possible, a new wp-element-button class will be added to button elements to share the same style.

You can test this change by adding the following code to your theme.json in a development environment:

{
	"styles": {
		"elements": {
			"button": {
				"color": {
					"background": "blue"
				}
			}
		}
	}
}

Search Block Variations Now Support Query Vars

WordPress 6.1 will support Search block variations based on query vars. This means that you’ll be able to provide your users with search boxes to be used to granularly search any type of content.

In the following example, we’re registering a block variation for a movies post type. The example is based on Carolina Nymar’s tutorial about Block variations.

In your (child) theme’s functions file, add the following code:

function movies_editor_assets() {
	wp_enqueue_script(
		'movies-block-variations',
		get_template_directory_uri() . '/assets/block-variations.js',
		array( 'wp-blocks' )
	);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );

Now, create the following block-variations.js file in your (child) theme’s assets folder:

wp.blocks.registerBlockVariation( 
	'core/search', 
	{
		name: 'movie-search',
		title: 'Movie Search Block',
		attributes: {
			query: {
				post_type: 'movies'
			}
		}
	} 
);

Now reload your WordPress dashboard and search for a Movie Search Block variation in the block inserter.

You can read more about block variations in the official documentation.

A New Buttons Element in Global Styles

WordPress 5.9 introduced a Global Styles interface to enable users to customize style presets for their websites, either globally or at block level.

With the first implementation, you could customize the colors for Background, Text, and Links. Now, starting with WordPress 6.1, a new Buttons element has been added to the Colors panel to enable users to control the appearance of buttons across their entire websites.

This would affect button style in everything across the site, from the Buttons block to the Search block and third-party blocks making use of buttons.

Get the scoop on what's coming to WordPress 6.1 in this guide- and gear up for changes like fluid typography, JPEG to WEbP conversion, and more! Click to Tweet

Summary

There are indeed many new features coming with WordPress 6.1, but it is still early to give a final assessment of the latest release of 2022. In addition, at the time of this writing, we have not yet reached the Feature Freeze, so there may still be additional features and changes to talk about before the final release scheduled for November 1.

Although we can already be fairly sure of the new features we will see thanks to the 11 versions of Gutenberg merged into the core, we are not yet sure how the JPEG to WebP conversion will be implemented and other changes may be added to those listed above.

But keep following us as we will be updating this article as there are changes worthy of attention and new features are merged into the core.

Now up to you. What do you expect from the next version of WordPress? Have you already tested the Nightly Build in your development environment? Share your thoughts on WordPress 6.1 with us in the comments section below.

The post What’s New in WordPress 6.1: JPEG to WebP Conversion, Fluid Typography, Improved Template System, and Much More! appeared first on Kinsta®.