{"id":3882,"date":"2022-10-04T14:50:50","date_gmt":"2022-10-04T14:50:50","guid":{"rendered":"https:\/\/www.hostinger.com\/blog\/?p=3882"},"modified":"2022-10-09T01:42:51","modified_gmt":"2022-10-09T01:42:51","slug":"wordpress-6-1-beta","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/blog\/wordpress-6-1-beta","title":{"rendered":"WordPress 6.1 Beta: First Look Into the Next Major Release"},"content":{"rendered":"

WordPress 6.1 will be released on November 1, 2022. Its beta version has already been launched for testing.<\/p>

This major release will introduce Twenty Twenty-Three – the new default theme with more styles. Other new improvements include enhanced design tools consistency, updated blocks, and fluid typography.<\/p>

The beta version of WordPress 6.1 presents the perfect opportunity to explore the new features and test its compatibility with your website. We will list the new features worth checking out and explain how to install the beta version.<\/p>

What’s New in WordPress 6.1 Beta<\/h2>

WordPress 6.1<\/a> is a part of phase 2 of the Gutenberg project<\/a> which introduces a lot of improvements to full site editing, block editor, and block-based patterns. <\/p>

Let’s take a look at the new changes in more detail.<\/p>

New Twenty Twenty-Three Default Theme<\/h3>

The highlight of WordPress 6.1 is the new Twenty Twenty-Three default theme. Like Twenty Twenty-Two, it’s block-based and supports global style switching, a major feature introduced in WordPress 6.0<\/a>.<\/p>

One difference is that the new theme’s default appearance doesn’t have predefined images. Instead, you will see placeholders for your own images.<\/p>

\"The<\/figure>

Another major improvement is the style variations. Twenty Twenty-Three has ten pre-built style variations submitted by the community. These style variations differ in colors, typography, and content layout, providing more starting point options for user customization.<\/p>

Starter Patterns for All Post Types<\/h3>

Theme authors and users can now add starter pattern options for all post types. To enable this feature, add the patterns’ PHP files into the patterns <\/strong>folder of the theme.<\/p>

Note that the new Twenty Twenty-Three theme already has the patterns<\/strong> folder by default.<\/p>

For example, we can add an FAQ pattern<\/a> from the WordPress pattern directory. To do this, we must first create a PHP file called faq.php<\/strong> with the following code snippet:<\/p>

<?php\n \/**\n  * Title: FAQ\n  * Slug: twentytwentythree\/FAQ\n  * Block Types: core\/post-content\n  * Post Types: post\n  * Categories: featured, text\n  *\/\n?><\/pre>
Keep in mind that you can change the title and categories to your liking. Then, copy and paste the pattern from the pattern directory into the file using the Copy Pattern <\/strong>button.<\/p>
\"The<\/figure>
Once done, the PHP file will look like this:<\/p>
\"The<\/figure>
Save the file and open your WordPress admin panel. To confirm that the pattern has been registered, navigate to Posts -> Add New<\/strong> to create a new post. You should see a pop-up with the selection of the registered patterns.<\/p>
\"Choose<\/figure>
Fluid Typography<\/h3>
WordPress 6.1 comes with fluid typography support<\/a> via the theme.json<\/strong> file. This feature enhances responsiveness as text will automatically adjust its size based on the user’s viewport.<\/p>
You can change the fluid typography settings in the theme.json <\/strong>file. For example, theme authors or users who want to disable fluid typography can find the fluid<\/strong> parameter in the settings.typography.fluid <\/strong>and set its value to false<\/strong>.<\/p>
{\n    \"version\": 2,\n    \"settings\": {\n        \"typography\": {\n            \"fluid\": false,\n        }\n    }\n}<\/pre>
Alternatively, if you’re using an older block theme that disables fluid typography by default, you can add the fluid <\/strong>parameter and set it to true.<\/p>
{\n    \"version\": 2,\n    \"settings\": {\n        \"typography\": {\n            \"fluid\": true,\n        }\n    }\n}<\/pre>
The size for fluid typography can be configured in the settings.typography.fontSizes<\/strong> section of the file. Here, you can set the minimum and maximum values for the typography size. It’s also possible to disable fluid typography for specific font sizes. For example, you can specify the fluid typography size for Normal <\/strong>font size and disable it for Large <\/strong>font size by indicating the false <\/strong>value.<\/p>
{\n    \"version\": 2,\n    \"settings\": {\n        \"typography\": {\n            \"fluid\": true,\n            \"fontSizes\": [\n                {\n                    \"name\": \"Normal\",\n                    \"size\": \"1.125rem\",\n                    \"fluid\": {\n                        \"min\": \"1rem\",\n                        \"max\": \"1.5rem\"\n                    },\n                    \"slug\": \"normal\"\n                }\n            ]\n        }\n    }\n}<\/pre>
Block-Based Template Part Support for Classic Themes<\/h3>
Another feature that expands classic theme usability is the block-based template part support<\/a>. It allows users to customize and incorporate block-based template parts with any non-block themes.<\/p>
That said, this feature is quite difficult to utilize. First, you must add the template part support to the classic theme by adding the add_theme_support( ‘block-template-parts’ ); <\/strong>flag to the theme’s functions.php <\/strong>file. Once that’s done, you’ll see the Template Parts <\/strong>option in the dashboard’s Appearance <\/strong>menu.<\/p>
\"The<\/figure>
The next step involves adding an HTML file to the \/parts<\/strong> folder inside the theme’s root directory.<\/p>
In this example, we’ll add a footer template part to the Twenty Twenty-One theme. We’ll start by creating an HTML file with the path of \/public_html\/wp-content\/themes\/twentytwentyone\/parts\/footer.html<\/strong>.<\/p>
Inside the HTML file, add the following code snippet:<\/p>
<!-- wp:group {\"layout\":{\"inherit\":true}} -->\n<div class=\"wp-block-group\">\n\t<!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"top\":\"80px\",\"bottom\":\"30px\"}}}} -->\n\t<div class=\"wp-block-group\" style=\"padding-top:80px;padding-bottom:30px\">\n\t\t<!-- wp:paragraph {\"align\":\"center\"} -->\n\t\t<p class=\"has-text-align-center\">Proudly Powered by <a href=\"https:\/\/wordpress.org\" rel=\"nofollow\">WordPress<\/a><\/p>\n\t\t<!-- \/wp:paragraph -->\n\t<\/div>\n\t<!-- \/wp:group -->\n<\/div>\n<!-- \/wp:group --><\/pre>
Go back to the WordPress dashboard and navigate to Appearance -> Template Parts<\/strong>. You should see the footer<\/strong> template part is now available, and you can start editing using the block editor.<\/p>
\"The<\/figure>
Block Spacing Presets<\/h3>
The current block spacing tools require users to specify the spacing pixels. While this offers more accurate customization, it can be difficult if you want to use the same spacing on multiple blocks.<\/p>
WordPress 6.1 adds seven spacing presets to choose from to speed up the process. This way, you can easily remember which preset to apply for the blocks you want to customize. If you prefer to use the old custom pixel field, there’s a button to switch to it.<\/p>
\"Block<\/figure>
Improved Block Locking<\/h3>
WordPress 6.0 introduced the block locking feature, providing a new way to customize your site safely. By locking important blocks, users won’t accidentally move these blocks.<\/p>
WordPress 6.1 improves this feature by allowing users to apply block locking to inner blocks inside a group block. This way, you can apply block locking to a group block and its inner blocks at once instead of doing it manually for each block.<\/p>
\"The<\/figure>
Improved Template Options<\/h3>
The template creation process<\/a> is now easier. A new template will automatically add relevant patterns, so you won’t have to do everything from scratch.<\/p>
In addition, you can add a new template for a specific item. For example, when adding an author template, you can opt to apply it for all authors or just one.<\/p>
\"Adding<\/figure>
Two new template options are also available – page<\/strong> and single item: post<\/strong>. If the available options are not enough, you can create custom templates<\/strong> for any page or post.<\/p>
\"The<\/figure>
Updated Quote and List Blocks<\/h3>
Quote<\/a> and list<\/a> blocks can now contain inner blocks.<\/p>
You’ll see the add block <\/strong>(+<\/strong>) icon with the quote block for more blocks inside it. For example, you can use a heading block and insert an image inside a quote.<\/p>
\"A<\/figure>
The list block now treats the list items as individual blocks, resulting in a nested block structure. This allows for a more streamlined workflow as you can rearrange or remove list items more easily.<\/p>
\"A<\/figure>