{"id":3231,"date":"2022-05-25T04:19:07","date_gmt":"2022-05-25T04:19:07","guid":{"rendered":"https:\/\/www.hostinger.com\/blog\/?p=3231"},"modified":"2024-08-20T10:33:20","modified_gmt":"2024-08-20T10:33:20","slug":"wordpress-6-0","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/blog\/wordpress-6-0","title":{"rendered":"WordPress 6.0: The New Major Release Is Here"},"content":{"rendered":"

WordPress 6.0 “Arturo” has finally launched. This second major release of 2022 brings many improvements, including 600+ updates and 600+ bug fixes.<\/p>

Many improvements refine the block site editor<\/a>, a prominent feature introduced in WordPress 5.9. WordPress 6.0 builds on the block editor by adding the global styles switcher, block style retaining, and container block transformation.<\/p>

Let’s look at the new features you’ll see in WordPress 6.0<\/a>.<\/p>

Block Editor Improvements<\/h2>

When it was introduced in WordPress 5.9, the block editor brought a new site customization experience. WordPress 6.0 delivers many upgrades to enhance its usability.<\/p>

Global Styles Switcher<\/h3>

The block editor’s global styles switcher is one of the most anticipated features of WordPress 6.0. It lets theme builders use style variations and switch between them with a single click.<\/p>

The default Twenty Twenty-Two<\/strong> theme now has four style variations. To access the switcher, open the global styles panel and click Browse styles<\/strong>.<\/p>

\n
\"Browse<\/figure><\/div>

You should see the available style variations. Click on any of them to switch styles easily.<\/p>

\n
\"Using<\/figure><\/div>

Note that the Browse styles <\/strong>button will only appear when style variations are available in the theme folder.<\/p>

To add a style variation to the Twenty Twenty Two theme, you need to add a new JSON <\/strong>file in the \/wp-content\/themes\/twentytwentytwo <\/strong>directory.<\/p>

For example, follow these steps to add a dark <\/strong>style variation to the Twenty Twenty-Two theme.<\/p>

    \n
  1. Use the file manager or an FTP client and open \/wp-content\/themes\/twentytwentytwo <\/strong>folder on your WordPress installation directory.<\/li>\n\n\n\n
  2. Create a new file named Dark.json<\/strong>.<\/li>\n\n\n\n
  3. Insert the code snippet from this GitHub gist<\/a> to the Dark.json <\/strong>file.<\/li>\n\n\n\n
  4. Save the file.<\/li>\n<\/ol>

    Go back to your WordPress dashboard and open the block editor. You should see the newly added dark theme variation in the global styles switcher.<\/p>

    \n
    \"The<\/figure><\/div>

    Webfonts API<\/h3>

    The Webfonts API aims to streamline registering local web fonts to the global styles settings. It standardizes the process, ensuring consistency across sites and themes.<\/p>

    In WordPress 6.0, you can add new web fonts via the theme.json<\/strong> file and make them appear on the global styles typography panel.<\/p>

    In the following example, we’ll add the Montserrat font to the Twenty Twenty-Two theme. You can download the font from the Google Fonts directory<\/a>.<\/p>

      \n
    1. Use the file manager or an FTP client to upload the Montserrat font file to the \/wp-content\/themes\/twentytwentytwo\/assets\/fonts\/montserrat <\/strong>directory.<\/li>\n\n\n\n
    2. Open the theme.json <\/strong>file in the theme’s directory and add the following code snippet into the typography<\/strong> section:<\/li>\n<\/ol>
      {\n\t\"fontFamily\": \"\\\"Montserrat\\\", sans-serif\",\n\t\"name\": \"Montserrat\",\n\t\"slug\": \"Montserrat\",\n\t\"fontFace\": [\n\t\t{\n\t\t\t\"fontFamily\": \"Monserrat\",\n\t\t\t\"fontWeight\": \"200 900\",\n\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\"fontStretch\": \"normal\",\n\t\t\t\"src\": [ \"file:.\/assets\/fonts\/montserrat\/Montserrat.ttf\" ]   \n\t\t}\n\t]\n}\n<\/pre>
        \n
      1. Save and close the theme.json <\/strong>file.<\/li>\n<\/ol>
        Go to the block editor and open the global styles panel. Open the typography section and use the drop-down menu to browse installed fonts. You should now see the Monserrat font as an option.<\/p>
        \n
        \"Font<\/figure><\/div>
        Code Editor<\/h3>
        The block editor now has a code editor, allowing users to edit the HTML of a theme.<\/p>
        To access the code editor, click on the three dots<\/strong> icon on the top-right corner of the screen and select Code editor<\/strong>.<\/p>
        \"Code<\/figure>
        Theme Export Tool<\/h3>
        WordPress 6.0 introduces the theme export tool. It lets you download your current theme and its customizations as a .zip<\/strong> file.<\/p>
        Click on the three dots<\/strong> icon on the top-right corner of the screen and select Export<\/strong>. The theme and its current customizations will then be downloaded to your computer.<\/p>
        \n
        \"WordPress<\/figure><\/div>
        This is an easier way to save all your customizations and reuse them for other websites. Instead of customizing two websites separately, simply export a website’s theme and upload it to the other website.<\/p>
        New Template Types<\/h3>
        WordPress 6.0 adds five new template types – author<\/strong>, category<\/strong>, date<\/strong>, tag<\/strong>, and taxonomy<\/strong>. You can access them when adding a new template in the block editor.<\/p>
        Open the Templates <\/strong>panel on the editor’s left sidebar and click Add New <\/strong>on the top-right corner of the screen. It will show six templates to choose from.<\/p>
        \n
        \"New<\/figure><\/div>
        The new template types streamline the site editing process as you no longer need to create custom page templates for these purposes.<\/p>
        Block Patterns<\/h2>
        Block patterns play a more significant role in WordPress 6.0, with new upgrades for the block editor’s quick inserter.<\/p>
        When opening it at the root level and outside of any block, the quick inserter now recommends patterns instead of blocks.<\/p>
        \n
        \"Block<\/figure><\/div>
        This upgrade makes it easier to construct a specific section.<\/p>
        For example, you want to add a subscription call-to-action section before the footer. Instead of inserting the text and the button blocks manually, use the quick inserter to add a subscription block pattern to speed up the process.<\/p>
        New Blocks<\/h2>
        WordPress developers improved the full site editing capability by adding more core blocks. Let’s look at the five new core blocks in WordPress 6.0.<\/p>
        Comments Query Loop<\/h3>
        The comments query loop block<\/strong> replaces the deprecated post comments block<\/strong>. It comprises several child blocks like comment title<\/strong>, comment author<\/strong>, and comment content<\/strong> that you can customize individually.<\/p>
        \n
        \"Comments<\/figure><\/div>
        No Results in Query Loop<\/h3>
        No results<\/strong> is a new container block that shows a specific text or other blocks when there are no query results to display.<\/p>
        \n
        \"No<\/figure><\/div>
        Since it’s a container block, you can use paragraphs, links, or images to inform visitors that the site doesn’t have a post yet. Note that you can only insert the no results<\/strong> block inside the query loop<\/strong> block.<\/p>
        \n
        \"A<\/figure><\/div>
        Read More<\/h3>
        Previously, the read more<\/strong> link in the query loop<\/strong> was integrated with the post excerpt<\/strong> block, reducing its customizability.<\/p>
        WordPress 6.0 fixes this by introducing the read more<\/strong> block, making it independent from the post excerpt. This lets you get creative by applying a different color, border style, and typography to the read more<\/strong> link.<\/p>
        \n
        \"Read<\/figure><\/div>
        Post Author Biography and Avatar Blocks<\/h3>
        WordPress 6.0 adds two new blocks to split the content of the post author <\/strong>block. The post author biography<\/strong> block shows the author’s profile description, while the avatar<\/strong> block displays the author’s picture.<\/p>
        This way, you get more options when displaying author information. For example, you can use the row block to contain the avatar and the post author biography block to display them side by side.<\/p>
        \n
        \"Avatar<\/figure><\/div>
        Block Improvements<\/h2>
        Besides adding new blocks, WordPress 6.0 also introduces several improvements to existing ones. Let’s look at some of the upgrades and see how they provide better user experience and customization options.<\/p>