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 release calendar:

• Beta 1 as well as feature freeze September 20-20 20-20 and 2022. Beginning on this date major contributors will work on identifying bugs and then fix them.
• Release Candidate 1. October 4 2022. Launch the Field Guide as well as the Dev Notes
• Dry Run 24 October 2022
• WordPress 6.1 General Version Published on November 1, 2022.

At the time of posting at the time of this post, the developer's notes as well as the field guide haven't been made available, we are able to look behind the curtain and attempt to determine what to expect in the coming major version of WordPress.

Matias Ventura gives us some insight into his strategy to implement 6.1, where he states that the purpose for 6.1 is to make improvements to the user experience created with 5.9 and 6.0 as well as fixing certain bugs when we get to stage 3 . The Gutenberg Roadmap.

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

3. Global Styles and Blocks, and tools to design: WordPress 6.1 will allow the management of webfonts as well as responsive typography , while also expanding the options for blocking.

Now, let's examine the top features that are included in WordPress 6.1:

Automatic Image Conversion from WebP Format into an Automated

In version 6.1, WordPress will generate the necessary WebP sub sizes if they're accessible by default.

If new kinds of mime are developed, only images whose sizes are less than those of the predecessors are left. As a default, all new varieties of mime are created with standard sizes. They are also generated for specific sizes when you've selected to aid.

This change also introduces three filters, which have full control over output from the 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 a page, the first mime type on the list that to be utilized.

This change could result in the average diminution in the size of files up to 30%..

Before the time that 6.1 version is released and accessible, you are able to test the new features using the Performance Lab plugin designed by WordPress Performance Group. WordPress Performance Group.

However, the change appears to be controversial and many users have been raising problems. As an example, it was noted that:

The resources needed to generate images after uploading images will increase significantly, however the image are provided through resources that are less. Since uploading images is not common in comparison to the image server in overall, the extra time and effort required to compress and save images is well worth it.

And:

The ever-growing popularity of the use of resources when uploading photos could be one of the negative outcomes for this specific instance. The result is that many uploads may fail and can leave users without solution. As a result, it will increase the requirement for assistance for WordPress and hosting providers significantly. This isn't a suitable method. It doesn't matter if images with multi-mime support is needed in WordPress It's not a good alternative.

The time that the article was written, we do not exactly when the usage of WebP format for displaying pictures of different sizes is going to be made available as a standard feature, or if the webmaster will have to opt-in to use the WebP format on the front of their site. Meanwhile, JPEG to WEBP automatic conversion has been temporarily disabled. The following is a brief overview of the debate that is in progress, read Sara Gooding's blog post in the WP Tavern. WP Tavern.

Fluid Typography

WordPress 6.1 has the capacity to permit Fluid Typography by using the functions of the calc/clamp CSS.

The expression fluid typography is the term used to describe the ability for text to adapt to the size of the window , and to smoothly increase or decrease in size from the minimum width up to the largest size.

There's a distinct difference in the outcomes you can expect from queries based on media, since they allow themes to alter the size of their text according to specific dimensions of the viewport, but 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)" 

You can observe in the code above is shown above, the values for fluid font sizes are applied to every font size.

Starting with WordPress 6.1 Themes are designed to immediately create fluid-sized fonts by declaring the new typography.fluid property as such:

"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 crucial to be aware of the reality that when the article was published, Fluid Typography is described as an experimental feature. The technical details within Block Support: Incorporating Fluid Typography.

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

8 August 2022

Check out the methods to implement Fluid Typography into the WordPress blocks themes by Rich Tabor and Fluid typography using Gutenberg from Carolina Nymark.

The New and Improved Block Types

With such a variety of Gutenberg versions, all of which are integrated within the WordPress foundation, 6.1 will bring an entirely new Table of Contents Block and numerous improvements and changes to blocks that are currently in use.

The New Table of Contents Block

Include Border Support in the Columns block

The Columns block is now utilizing the all-new BorderBoxControl component which allows WordPress users to define specific borders for columns as well as creating totally unique designs for each border (see the illustration below). Column Add border support to column blocks Request for Pull).

The borders of each individual can 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 are able to find out more information on the most recent functions of BorderBoxControl within the Component Reference, BorderBoxControl.

Images with Border Controls Blocks

Gutenberg 13.8 introduced support for border controls in all forms for this Image block. This feature will be included in the base of WordPress 6.1 that will open up the possibilities of web-based creativity.

Comments Block Improvements

WordPress 6.1 comes with users an enhanced Comment Block. Starting with the new version of WordPress users will be able to have the option of using the most advanced editing tools for comments block. Comments block.

What you see to the left look at the image below the Comments block's settings along with the sidebar. Also, you can see the changes applied on Comment Title. Comments Title.

Block Variations on Terms Custom Taxonomy. Taxonomy. Custom Terms.

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

A new Parents Filter has been part of the Block. Block

A brand new filtering system specifically for parents are located within the Block for Query Block to top-level posts as well as pages with the same parent.

Font Family Controls inside the Heading Block

The block Heading has been modified to be compatible with the block Heading that contains family controls.

Horizontal and Vertical Spacings of Gallery Block

With WordPress 6.1 version, which is a completely new version. Space control can be used to determine the vertical and horizontal spacing for gallery blocks. gallery block.

This change gives you more flexibility when making gallery layouts. Gallery layout.

The Cover Block that includes the Featured Images

The change will help ensure that users have a consistent experience. Additionally, it will make users more aware of what they're modifying.

A feature image switch was added to the Media Replace flow.

Techniques for Appearing on Posts Navigation Links

The appearanceTools setting property permits you to login to various choices that are blocked by default.

In WordPress 6.1 and the themes using the appearanceTools setting property in themes with an appearanceTools setting property, you are able to modify the colors of links as well as the family of fonts for posts.

Lock Container Blocks Inside Just One Click

The toggle is able to block blocks within an surrounding of blocks at a single click. It is applicable to blocks that are part of the Group, Cover blocks as well as column. blocks.

New Features and Improved Features to The Block Editor

Even though it's a consolidation version, WordPress 6.1 will bring many changes and enhancements that make it almost impossible to include all the changes within one spot. Alongside the brand-new Table of Contents block and the other enhancements mentioned earlier, it will include:

Template Part Variations in the Block Inserter

The most recent design makes editing easier and faster that lets users view various variations of templates in two clicks. Two clicks.

Imagine Margin and Padding

One small, but important improvement is the illumination of the edges and padding when changing the elements. The elements are now visible in terms of the space made inside and out of the components.

Enhancements made to the Settings Sidebar

In addition, the template panel was replaced with a template link. Once clicked the template link will display the default template in the form of a popover.

Publish Popover Design Updates

The selection of the date on the Publish popover has been redesigned and now is inspired by "existing WordPress components and Emotion design."

Further technical information is provided more technical details are available Updates to the design are available. Publish popover ( DateTimePicker).

It's time to look through the Info Panel.

The duration of reading is based on the average of approximately 189 words/minute. Learn more regarding this on @wordpress/editor EditorEditor: The expected reading time must be included in the table of contents in editor.

New and better construction tools

WordPress 6.1 will further enhance its features with the Site Builder. Block templates will be offered in more categories, and more templates that are editable using the editor for templates.

Design Patterns for Post Types

To allow this feature to work, at least one block pattern must be declared to support for the post-content, or for the core blocks.

Starting with WordPress 6.1 This feature is being extended to any type of posts. The only thing you have to add is core/post-content within the patterns blocksTypes and then choose the proper kinds of posts.

Let's now examine how you can make the most use of this feature by using an illustration. Let's say you're using a Movie post type.

The first step is to create a block pattern register as explained here.

Text */? Hello!

It's that simple. it. Once you have started a new Movie post, type in the name and then select it and a pick the pattern Modul will be displayed on screen.

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

To gain a greater comprehension of the design patterns study what you could make use of the pattern for different kinds of posts apart from the one on this page.

Additional Template Types are available within the Site Editor

The new version of WordPress 6.0 WordPress 6.0 it's only available to some templates built using the Site Editor.

From WordPress 6.1 It will be possible to make a unique template for each post type.

If you develop custom post types, or an individual taxonomy, these will be included in the templates available to editors for Sites.

It's not only but that. When you select the template post kind the pop-up prompts you to create templates that can be used for any type of posts or create an entirely new template that can be utilized for just one particular kind of post.

The new modal displays an overview of all posts that have been posted for the specific type of posting.

Developmental Changes

WordPress 6.1 comes with an API upgrade and several improvement to WordPress developers.

A New API for Preference Persistence

WordPress 6.1 It's the first version of the brand new preference persistency API that saves editor preferences to the WordPress database, not local storage.

Thus, the preferences of users can be saved on various platforms and browsers.

Support for Button Styles that are part of the theme.json

In WordPress 6.1 the possibility to design button designs that match themes is achievable using theme.json. Theme designers can also make buttons with the same style across blocks. For instance, this is, for example the block which searches. Third-party blocks, however, also benefit from this modification.

For this purpose to make it easier, a brand new button of the wp_element class is embedded in the element of the button, which shares the same style.

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

Search Block Variables Supported Now Variables in Search Block Variables Support Now Variables that are in

WordPress 6.1 will permit Search block types based on the query variables. This means that you'll be able to provide users with Search box that can be used to find specific data on something.

In this case, it's identified as a block variant for the film type of post. The example is based on Carolina Nymar's instruction 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 within your (child) theme's assets folder:

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

More information about block variants on block variations in the official document.

The New Buttons Elements in Global Styles

When the first release was made available, users were able to alter the color of text, background and Links. Beginning with WordPress 6.1, a new Buttons feature has been added to the Colors panel. It allows users to modify the appearance of buttons on their websites.

This will affect the style of every button on the site, from the Buttons block through the Search block as well as the other block that comes from third-party companies with buttons.

Summary

There's a lot of new features to be included in WordPress 6.1 but there's not enough time to make an assessment of the version 2022 in use. Additionally, as of this point, WordPress 6.1 release is not yet reached the Feature Freeze, so there may be some new options or modifications to speak about ahead of the release scheduled to be released in November 1.

Keep an eye on us as we'll be adding more features to this website as we are aware about developments that merit consideration along with the addition of new features into the existing.

Reduce time and expenditures and boost the efficiency of your site.

• Instant help 24/7 support from WordPress hosting experts 24/7.
• Cloudflare Enterprise integration.
• The reach worldwide of these viewers is enhanced thanks to 34 data centers across the world.
• Optimization with The built-in Application for Performance Monitoring.

This article was originally posted this site

Article was first seen on here