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

These are the main dates on the releases calendar:

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

As of the moment of posting, the developer notes and the field guide haven't been released as of yet However, we are able to peek behind the curtains and try to figure out what we should anticipate from the next major update of WordPress.

Matias Ventura gives us some insights into his plan for 6.1, where he states that the purpose for 6.1 is to improve the experience that was implemented with 5.9 and 6.0 as well as to correct certain issues when we get to stage 3 . of the Gutenberg Roadmap.

1. Template Editor Updates The biggest and most significant new features is The Template Editor. WordPress 6.1 is expected to introduce the capability to navigate through, view, and modify the layout of the website.

3. Global Styles and Blocks, as well as tools for design: WordPress 6.1 will allow to manage webfonts and incorporate responsive typography as well expanding the tools available to block.

Now, let's take a look at some of the most effective functions included in WordPress 6.1:

Automatic Image Conversion from WebP Format to an Automatic

With 6.1, WordPress will generate and then use WebP sub sizes if they're available in the default.

When new types of mime are created, only images whose sizes are smaller than the size of their predecessors remain. In default, new types of mime are created in standard sizes. They are also generated for custom sizes when you've chosen to assist.

This change also introduces three filters, which have complete control over output of secondary mime types:

• 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 it is the first type listed in the list will be used.

This change could result in an average decrease in size of files to 30%..

Before the time that 6.1 version being released and available, you can test the new features using The Performance Lab plugin created by WordPress Performance Group. WordPress Performance Group.

But, this change seems to be controversial and many users have been raising problems. For instance, it was noted that:

The resources needed to generate images when you upload images will increase significantly, however the image are provided by resources which are reduced. Because uploading of images is not common in comparison to image server as a whole, the additional effort needed to compress and store images is worth the effort.

And:

The rapid growth of resource use when uploading images can be a negative side consequence in this particular instance. It means a lot of uploads will fail, which could leave users without a solution. The result will increase the need of support for WordPress and hosting firms substantially. This isn't an acceptable method. This is regardless of whether images with multi-mime support is needed in WordPress This isn't a great alternative.

At the time the article was published we don't know whether the utilization of the WebP format to display images of various sizes will be offered as a default feature or if the website admin will have to opt-in to make use of the WebP format on the front of their site. In the meanwhile, JPEG to WEBP automatic conversion is temporarily turned off. A brief summary of the debate that is ongoing, check out Sara Gooding's post on WP Tavern.

Fluid Typography

WordPress 6.1 offers the capability to allow Fluid Typography via the features of calc/clamp CSS.

The term fluid typography is the term used to describe the ability of text to be adapted to the width of the window and smoothly increase or decrease in size from the minimum width to the maximum width.

There's a distinct difference in the outcomes you can expect from media queries, as media queries permit themes to alter the size of texts based on specific dimensions of viewports, yet they aren't able to change anything regarding 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)" 

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

Starting with WordPress 6.1 Themes are designed to instantly generate fluid size fonts by declaring the new typography.fluid property as these:

"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's important to know the fact that at the time this article was written Fluid Typography can be described as an experimental feature. The technical details within Block Support: Incorporate Fluid Typography.

Wordpressthe Twitter account @frostwpRichard Taborhttps://t.co/Bq5YuHX3wi

8 August 2022

Also, check out the steps to incorporate Fluid Typography within the WordPress block themes from Rich Tabor and Fluid typography using Gutenberg from Carolina Nymark.

The New and Improved Block Types

With so numerous Gutenberg versions that are integrated within the WordPress core, 6.1 will bring an entirely new Table of Contents Block and many improvements and modifications for the block types that are already in use.

A New Table of Contents Block

Add Border Support to the Columns block

The Columns block is now utilizing the brand new BorderBoxControl component which allows WordPress users to define custom borders for columns, as well as creating totally distinct designs for each border (see the example below). 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 learn more details about BorderBoxControl's latest functions in the Component Reference, BorderBoxControl.

Images with Border Controls Blocks

Gutenberg 13.8 introduced support for border controls of all kinds for this Image block. The feature is expected to be added to the base within WordPress 6.1 that can open up the possibilities of web-based creativity.

Comments Block Improvements

WordPress 6.1 is also bringing users an improved Comment Block. Beginning with the new version of WordPress, users will have the option of using more advanced editing features for comments block. Comments block.

As you can see on the left, you will view in the image below, you can see Comments block's settings, as well as its sidebar. You will also see the changes applied on Comment Title. Comments Title.

Block Variations on Terms for Custom Taxonomy Custom Taxonomy Terms

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

A new Parents Filter is included in the Block. Block

A brand new filters for parents can be found in the Query Block for top-level posts as well as pages with the same parent.

Font Family Controls in the Heading Block

The block Heading has been updated to work with the block Heading that includes Family controls.

Horizontal and Vertical Spacing of Gallery Block

With WordPress 6.1 version which is a completely new version. space control lets you define the vertical and horizontal spacing for gallery blocks. gallery block.

This changes gives you more flexibility when it comes to creating gallery layouts. gallery layout.

The Cover Block with the Featured Images

This change should help to provide a consistent user experience. It will also make the users more aware of what they are customizing.

A featured image switch was added to the media replace flow.

Methods to Appear on Posts Navigation Links

The appearanceTools setting property allows you to login to various options that are disabled by default.

As of WordPress 6.1 and for the themes with appearanceTools setting property in themes with the appearanceTools setting property, it is possible to modify the color of links and the font family in the case of posts.

Lock Container Blocks Inside Just One Click

The new toggle allows users to lock blocks in the enclosure of blocks in one click. This is applicable to blocks that are part of the Group, Cover blocks as well as columns. blocks.

New Features and Improved Features to The Block Editor

Even though it's a consolidation edition, WordPress 6.1 will bring many changes and enhancements that make it almost impossible to include all the changes in one place. In addition to the all-new Table of Contents block and the additional changes discussed above, it will include:

Template Part Variations in the Block Inserter

The latest design makes editing simpler and speedier, which allows users to view different versions of templates within a couple of clicks. two clicks.

Imagine Margin and Padding

A small but powerful improvement is the highlighting of the edges as well as paddings when people are changing the elements. It is now clear the amount of space being made inside and out of the elements.

Improvements to the Settings Sidebar

Furthermore to that, the template panel was replaced by the template link. Once clicked, the template link displays the default template in the form of a popover.

Publish Popover Design Updates

The option to select the date in the Publish popover is redesigned and now is based on "existing WordPress components and Emotion style."

Additional technical details are provided more technical details are available Updates to the design of the Publish popover ( DateTimePicker).

You're now ready to go through the Info Panel

The estimated reading duration is based on the average of about 189 words/minute. Discover more details about this in @wordpress/editor EditorEditor: The estimated reading time should be added to table of contents of editor.

New and better building tools

WordPress 6.1 will further enhance its capabilities with the Site Builder. Block designs will be available across more areas along with a greater variety of templates can be edited in the editor of templates.

Designs Patterns for Post Types

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

Starting with WordPress 6.1 This feature will be extended to all types of post. The only thing you have to add is core/post-content in the pattern's blocksTypes and then select the appropriate types of post.

We'll now look at how to make the most of this new feature applying an example. Let's say you're using a Movie post type.

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

Text */? Hey here!

It's that simple. it. When you begin a new Movie post type , and then select it and a select a pattern Modul is displayed on the screen.

If you would like the modal appear on multiple post types it is simply necessary to include the URLs that are relevant separated by spaces

To gain a greater comprehension of the patterns for creation look up how you can use the patterns for other kinds of posts apart from the page.

Additional Template Types are available in the Site Editor

In WordPress 6.0 it's limited to some templates built using the Site Editor.

From WordPress 6.1 It'll be feasible to make a unique template for each post type.

If you design customized post types, or an individual taxonomy these will be displayed within the templates available to the Editor for Sites.

It's not only but that. When you select the template post kind, a pop-up asks users to either design templates for all kind of post or design a fresh template to be used for one specific type of post type.

A new modal then displays an overview of all the posts for that particular type of posting.

Developmental Changes

WordPress 6.1 features an API upgrade and several improvement for WordPress developers.

New API for Preference Persistence

WordPress 6.1 It is the initial version of a brand modern preference persistence API that saves editor preferences to the WordPress database, not local storage.

So, the preferences of users are saved across various platforms and browsers.

Assistance for Button Styles within theme.json

With WordPress 6.1 the ability to create button styles to themes is possible using theme.json. Theme designers can also make buttons consistent across blocks. Like, for instance it is for example, the block that searches. But, third-party blocks also gain by this change.

To facilitate this, a new button wp_element class is integrated into the element of the button that share the same style.

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

Search Block Variations Support Now Variables in Search Block Variables Support Now Variables in

WordPress 6.1 will allow Search block types that are based on the query variables. This means that you'll be able to provide users with Search box that can be used to search for specific information on anything.

In this instance, it's registered a block variation for an film kind of post. The example is based on Carolina Nymar's instructional on 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 in 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 variants on block variations in the official document.

A New Buttons Element in Global Styles

When the first release was released, you were able modify the color of text, background and Links. Now, starting in WordPress 6.1, a new Buttons function has been integrated into the Colors panel that permits users to control the appearance of buttons on their websites.

This will affect the style of all buttons within the site, from the Buttons block through the Search block, as well as the other block from third party companies using buttons.

Summary

There are indeed many new features that will be available with WordPress 6.1 but it's not enough time to make a final evaluation of the current version 2022. In addition, at the moment of writing the WordPress 6.1 release is not yet reached the Feature Freeze, so there could be new features or changes to talk about prior to the release scheduled to be released on November 1.

Stay tuned since we'll be adding new features to this website as we are aware about changes that deserve consideration, as well as new features that are integrated into the existing.

Cut down on time, expenses and increase the performance of your site:

• Instant help 24/7 support from WordPress hosting experts 24 hours a day.
• Cloudflare Enterprise integration.
• The worldwide reach of this viewers is enhanced thanks to 34 data centers around the world.
• Optimization with the integrated Application for Performance Monitoring.

Article was posted on here