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

These are the main dates for the release calendar:

• Beta 1 and feature freeze: September 20 20, 2022. From this date on, key contributors will concentrate on testing bugs and fixing them.
• Release Candidate 1. October 4 2022. Publish the Field Guide along with the Dev Notes
• Dry Run 24 October 2022
•    WordPress 6.1 General Version: Released: November 1, 2022  

At the time of this writing, the dev notes and field guide haven't been released as of yet, however we can look behind the curtains and try to understand what we can anticipate from the next major release of WordPress.

Matias Ventura gives us some insight in his roadmap for 6.1, where he states that the purpose for 6.1 is to refine the experience that was introduced by 5.9 and 6.0 and to fix some issues as we approach phase 3 of the Gutenberg Roadmap.

1. Template Editor Updates The most significant new features is The Template Editor. WordPress 6.1 should introduce the ability to browse through, view, and modify the layout of the website.

3. Global Styles and Blocks & tools for design: WordPress 6.1 will allow managing webfonts, implement responsive typography, as well as expand the toolkit available to block.

So, let's have a look at some of the most effective functions that come with WordPress 6.1:

Automatic Image Conversion to WebP Format

With 6.1, WordPress will generate and utilize WebP sub sizes if they are present in default.

If new types of mime are created, only images whose sizes are smaller than their respective originals remain. In default, new mime types are generated only in default sizes. They are also generated for custom sizes when you've chosen to assistance.

This change also introduces three filters with 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. In rendering images on the page, the first mime type in the list is used.

The change is expected to result in an average file size reduction of 30%.

Prior to the 6.1 version is released, you'll be able to try the new feature with The Performance Lab plugin by WordPress Performance Group. WordPress Performance Group.

However, the change appears to be controversial and many users are still bringing up issues. In particular, it was noted that:

The resources needed to generate images once you upload an image will be increased dramatically, but the images will be served by resources that will be lowered. As image uploading is rare compared to image serving, the extra effort to compress and store images should be worth it.

And:

The dramatic growth in resources usage when uploading an image is a very bad side effect in this instance. It means a lot of uploads will fail, which could leave users without a solution. This will also increase demand for support for WordPress and the hosting companies significantly. Don't think this is an acceptable practice. Because of this regardless of whether images multi-mime support is necessary in WordPress The current method isn't a great alternative.

As of the moment when this article was written, it's currently unclear if the usage of WebP format for images of different dimensions will be available as a default feature or if the website admin will have to opt-in to use the WebP format on the front end of their website. In the meanwhile, JPEG to WEBP automatic conversion is temporarily turned off. A concise summary of the ongoing debate, go to Sara Gooding's article about WP Tavern.

Fluid Typography

WordPress 6.1 provides the ability to support Fluid Typography through calc/clamp CSS features.

The expression Fluid typography describes the capacity of text to adapt to the size of the window and smoothly scale from minimal to a maximum width.

There's a difference between the results you get with media queries, as media queries allow themes to resize text based on particular dimensions of viewports, yet they don't allow any change with regards to different value.

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

You can observe in the above code, fluid font size values are used for every single font size.

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

"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);

Example:

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

It is important to note that as that this post was written, Fluid Typography is an experimentation feature. The technical details within Block Support: Add fluid typography.

Fluid typography can be a huge advancement for the creation of modern Wordpress websites. We've just updated the @frostwp twitter account to add this feature. Here's a great read from Richard Tabor to explain what it is and what it means. https://t.co/Bq5YuHX3wi

-- Brian Gardner (@bgardner) August 8, 2022

Also, see How to add Fluid Typography in WordPress Block Themes by Rich Tabor and Fluid typography with Gutenberg by Carolina Nymark.

New and Improved Block Types

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

New Table of Contents Block

Add Border Support to the Columns block

The Columns block now leverages the brand new BorderBoxControl component which allows WordPress users to define custom borders for columns, also creating completely distinct styles for each border (see for example 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 control's new features in the Component Reference, BorderBoxControl.

Border Controls for Image Blocks

Gutenberg 13.8 introduced support for all border controls to this Image block. This feature will be added to the base within WordPress 6.1 which will open doors to new possibilities for web-based creatives.

Comments Block Improvements

WordPress 6.1 is also bringing us an enhanced Comment Block. Starting with the next version of WordPress, users will have the ability to use more advanced editing features on comments block. Comments block.

In the picture below in the image below, you will view the Comments block's settings and sidebar, as well as the changes applied on Comment Title. Comments Title.

Custom Taxonomy Terms and Block Variations on Custom Taxonomy Terms Custom Taxonomy Terms

The image below shows the actors listed in a Movie post type.

A new Parents Filter is added to the Block. Block

A new Parents filter is available in the Query Block to display top-level posts as well as pages with the identical parent.

Font Family Controls in the Heading Block

The block Heading is now compatible with The Heading block now supports Family controls.

Horizontal and Vertical Spacing in Gallery Block

Starting with WordPress 6.1 version, a brand new Axial spacing control permits you to define the vertical and horizontal spacing for images in gallery blocks. gallery block.

This change results in greater flexibility when creating the gallery layout.

Featured Images in Cover Block

This change should help to create a more consistent user experience, making it more clear to users what they are customizing.

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

Tools for Appearance on Posts Navigation Links

The appearanceTools setting property permits you to sign-in to various settings that can be disabled by default.

As of WordPress 6.1 and for the themes with appearanceTools setting property, for themes that support the appearanceTools setting property, it is possible to alter the color of links and font family for the Post Links.

Lock Container Blocks Inside Just one click

The new toggle allows users to lock blocks in an enclosure of blocks in one click. This is applicable to blocks in the Group, Cover blocks as well as column blocks.

Additional Features and Improvements to The Block Editor

Even though it's a consolidation edition, WordPress 6.1 will bring an array of changes and improvements that it's nearly impossible to cover the entire list in one place. Alongside the brand-new Table of Contents block and the other changes mentioned above there will be:

Template Part Variations in the Block Inserter

The new design makes editing process more straightforward and faster, allowing users to see variants of templates in a single click. two clicks.

Imagine Margin, and Padding

One small, but effective improvement is the highlighting of the edges and padding when users are adjusting the elements. This will make it clearer how much space is being created inside and outside of the components.

Enhancements on the Settings Sidebar

In addition, the template panel was substituted by a template link. Once clicked, the template link displays the default template within the form of a popover.

Publish Popover Design Updates

The picker for the date in the Publish popover has been redesigned and is now based on "existing WordPress components and Emotion styling."

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

It's time to read the Info Panel

The estimated reading duration is based on an average of the rate of 189 words per minute. Learn more about it in @wordpress/editor Editor: Add the estimated time read to table of contents of editor.

Modernized and improved building tools

WordPress 6.1 will also extend the capabilities of it's Site Builder. Block patterns will be offered across more areas as well as a wider selection of template types will improve the editing experience in the editor of templates.

Design Patterns for Post Types

In order to enable this feature to be enabled, at least one block pattern must declare support for the post-content or core block patterns.

Now, starting with WordPress 6.1 This feature will be extended to all types of post. The only thing you have to do is include core/post-content in the pattern's blocksTypes and then set the appropriate postTypes.

Now let's find out the best way to utilize this latest feature by using an actual example. Let's say you're using a Movie post type.

First, you need to make a block pattern register in the manner described here.

 Text */?
 Hi here!
 

That's all there is to it. Every time you start a new Movie post type and you click on it, a Choose a pattern Modul appears on the screen.

If you would like the modal to appear on multiple post types you can simply include the relevant URLs separated by commas

To get a better understanding of the creation patterns, refer to how you can use these patterns on other types of posts apart from the page.

More Template Types within the Site Editor

With WordPress 6.0 it is limited to a amount of templates are made within the Site Editor.

Starting with WordPress 6.1 It will be feasible to make a unique template for each post type.

If you create custom post types or an individual taxonomy these will be displayed within the selection of templates of the Editor for Sites.

However, it's not just but that. After selecting the template post type, a modal prompts users to either create a template for the entire type of posts or to design a fresh template to be used for one specific post of the selected post type.

A new modal then displays a list of the postings available to that type.

Development Changes

WordPress 6.1 includes an API update and a number of improvements for the developers.

New Preferences Persistence API

WordPress 6.1 is the first release of a new preference persistence API that saves editor preferences to the WordPress database, not local storage.

Thus, preferences of users can be saved across different platforms and browsers.

Help for Button Styles inside theme.json

With WordPress 6.1 the ability to add button styles to themes by using theme.json. Theme developers can add consistency to buttons across blocks. For instance, the search block. However, the third-party blocks also gain by this modification.

To facilitate this, a new button wp_element class is added to the button elements to share the same design.

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

Search Block Variations Support Now Variables in Query

WordPress 6.1 is going to support Search block variants based on query variables. That means you'll be able to provide users with search box to be used to granularly look up any kind of material.

In this case it's registering a block variation for a movies kind of post. The example is based on Carolina Nymar's tutorial about Block variations.

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 the assets folder of your (child) theme's assets folder:

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

There is more information on block variations in the official document.

A New Buttons Element in Global Styles

In the initial release, you were able to alter the colors of Text, Background and Links. Now, starting in WordPress 6.1, a new Buttons feature has been added into the Colors panel that allows users to manage the appearance of buttons on their website.

This will affect the style of buttons throughout the website, from the Buttons block through the Search block as well as any other third-party blocks that make use of buttons.

Summary

There are indeed many new features coming with WordPress 6.1 however it's still too early to give a final evaluation of the new version of 2022. In addition, at the moment of writing the WordPress 6.1 release has not yet reached that Feature Freeze, so there are likely to be some additional features and changes to talk about prior to the release scheduled for November 1.

But keep following us as we will be updating this page as we learn of modifications that merit attention, and new features are merged into the base.

Cut down on time, expenses and increase site performance:

• Instant help 24/7 support from WordPress hosting experts 24/7.
• Cloudflare Enterprise integration.
• The global reach of the audience is enhanced by 34 data centers worldwide.
• Optimization with the built-in Application for Performance Monitoring.