{"id":3066,"date":"2022-05-03T11:43:21","date_gmt":"2022-05-03T11:43:21","guid":{"rendered":"https:\/\/www.hostinger.com\/blog\/?p=3066"},"modified":"2022-05-07T08:25:25","modified_gmt":"2022-05-07T08:25:25","slug":"wordpress-6-0-beta-update","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/blog\/wordpress-6-0-beta-update","title":{"rendered":"WordPress 6.0 Beta Update: Bug Fixes and Improvements"},"content":{"rendered":"<p>The first beta version of WordPress 6.0 was released a few weeks ago. Then, on April 26, 2022, the latest and final beta version, <a href=\"https:\/\/wordpress.org\/news\/2022\/04\/wordpress-6-0-beta-3\/\" target=\"_blank\" rel=\"noopener\">WordPress 6.0 Beta 3<\/a>, was launched.<\/p><p>WordPress 6.0 Beta 3 introduces several bug fixes and improvements that significantly impact the overall user experience on WordPress.<\/p><p>We have covered the new features and test instructions in our first <a href=\"\/blog\/wordpress-6-0-beta\">WordPress 6.0 Beta<\/a> post. This article will focus on the fixes and improvements introduced in the recent beta releases.<\/p><h2 class=\"wp-block-heading\" id=\"h-new-twenty-twenty-two-style-variations\">New Twenty Twenty-Two Style Variations<\/h2><p>The Twenty Twenty-Two default theme now comes with three new style variations. This will complement the new style switcher feature, as you can now easily change the global styles in a few clicks.<\/p><p>Go to the site editor and open the global styles panel. Click on the <strong>Browse styles <\/strong>button to find all the style variations of the Twenty Twenty-Two theme.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"464\" height=\"561\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/theme-variations.png\/public\" alt=\"The new style variations for the Twenty Twenty-Two theme.\" class=\"wp-image-3067\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/theme-variations.png\/w=464,fit=scale-down 464w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/theme-variations.png\/w=248,fit=scale-down 248w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-duotone-preset-bug-fix\">Duotone Preset Bug Fix<\/h2><p>Using the <strong>theme.json<\/strong> file, you can add a preset to apply a duotone filter to all images. However, a bug prevented the site editor from rendering the preset correctly.<\/p><p>Luckily, the problem was fixed in the latest beta version. To test it, open the <strong>theme.json<\/strong> file and add the duotone preset by inserting this code snippet:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n  \"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/image\": {\n\t\t\t\t\"filter\": {\n\t\t\t\t\t\"duotone\": \"var(--wp--preset--duotone--foreground-and-secondary)\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/pre><p>Open the site editor, and you will see that the duotone filter was applied to the existing and new images by default.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"713\" height=\"297\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/duotone-preset.png\/public\" alt=\"Header image with the duotone filter preset applied.\" class=\"wp-image-3068\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/duotone-preset.png\/w=713,fit=scale-down 713w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/duotone-preset.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 713px) 100vw, 713px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-nested-block-style-bug-fix-for-link-color\">Nested Block Style: Bug Fix for Link Color<\/h2><p>The latest beta release fixed the issue with the link color in nested blocks. The bug made links in a nested block follow the style of the parent block.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"557\" height=\"176\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/old-nested-block.png\/public\" alt=\"Links inside a row block using the row block's link color settings.\" class=\"wp-image-3069\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/old-nested-block.png\/w=557,fit=scale-down 557w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/old-nested-block.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 557px) 100vw, 557px\" \/><\/figure><\/div><p>In the example above, the two links inside the row block have custom colors. However, the row block&rsquo;s default link color is black, overwriting the custom settings.<\/p><p>After the fix, the link color for blocks inside a group, row, or stack block should work independently. To test this, create a post with a group block and add a link to it. Then, define a different link color for the group block and the paragraph block inside it.<\/p><p>When you open the post, the link color in the paragraph block should follow its style settings.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"566\" height=\"176\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/new-nested-block.png\/public\" alt=\"Links inside a row block using their specific link color settings &ndash; purple and green.\" class=\"wp-image-3070\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/new-nested-block.png\/w=566,fit=scale-down 566w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/new-nested-block.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-improvements-to-the-comments-query-loop-block\">Improvements to the Comments Query Loop Block<\/h2><p>The new comments query loop block replaces the post comment block in WordPress 6.0. In the final beta release, developers launched improvements and fixes to make it consistent with the old post comment block.<\/p><h3 class=\"wp-block-heading\" id=\"h-comment-title-block\">Comment Title Block<\/h3><p>The developers added a new block in the comments query loop block to include a title above the post comments.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"599\" height=\"285\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-title.png\/public\" alt=\"The comment title block appears at the top of the post's comment section.\" class=\"wp-image-3071\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-title.png\/w=599,fit=scale-down 599w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-title.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 599px) 100vw, 599px\" \/><\/figure><\/div><p>The comment title includes the comment count and the post title, which you can enable or disable on the block settings. Customize the block&rsquo;s color, typography, and border using the design tools.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"927\" height=\"411\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-title-style.png\/public\" alt=\"The design tools on the block settings panel to customize the comment title block.\" class=\"wp-image-3072\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-title-style.png\/w=927,fit=scale-down 927w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-title-style.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-title-style.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 927px) 100vw, 927px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-comment-form-block\">Comment Form Block<\/h3><p>Previously, the comments query loop block didn&rsquo;t include a post comment form, and users had to insert it themselves.<\/p><p>In the latest beta version, developers included the post comment form block into the comments query loop block.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"666\" height=\"488\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-form.png\/public\" alt=\"Comment form block that's now a part of the comments query loop block.\" class=\"wp-image-3074\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-form.png\/w=666,fit=scale-down 666w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/comment-form.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div><p>Users can choose whether to use it, and with the design tools, it&rsquo;s possible to customize the block&rsquo;s color and typography and add custom CSS classes.<\/p><h3 class=\"wp-block-heading\" id=\"h-added-comment-id\">Added Comment ID<\/h3><p>Due to a bug in the comments query loop block, the comment IDs were missing on the front-end output. Because of that, the page would jump back to the top of the post after a user submitted a comment instead of going back to their comment, creating a bad user experience.<\/p><p>The new beta version fixed the issue by adding an ID for each comment and loading the page with a URL anchor that leads you to the submitted comment.<\/p><p>To test this fix, create a post with a comments query loop block. Open the post and leave a comment. Once you&rsquo;ve submitted it, the post should reload and direct you to your comment.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"760\" height=\"563\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/4\/2022\/05\/wordpress-comment.gif\/public\" alt=\"Submitting a comment using a comments query loop block will redirect users to the new comment.\" class=\"wp-image-3073\"><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-accessibility-improvements\">Accessibility Improvements<\/h2><p>WordPress aims to comply with the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG2AA-Conformance\" target=\"_blank\" rel=\"noopener\">Web Content Accessibility Guidelines 2.0 Level AA<\/a>. Thus, the developers are working on <a href=\"https:\/\/core.trac.wordpress.org\/focus\/accessibility\" target=\"_blank\" rel=\"noopener\">150+ accessibility improvements<\/a>.<\/p><p><a href=\"https:\/\/make.wordpress.org\/core\/2022\/04\/20\/wordpress-6-0-accessibility-improvements\/\" target=\"_blank\" rel=\"noopener\">WordPress 6.0 accessibility improvements<\/a> should feature 50+ of these items. Here are some of the highlights:<\/p><ul class=\"wp-block-list\"><li>When linked to a post, the featured image will use the post title as the alt text.<\/li><li>The search button, locked block status icon, navigation block, and query pagination block now use the <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#aria-label\" target=\"_blank\" rel=\"noopener\">aria-label<\/a>.<\/li><li>Improved keyboard controls and the addition of an <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#aria-expanded\" target=\"_blank\" rel=\"noopener\">aria-expanded<\/a> attribute for collapsible blocks in the list view.<\/li><li>Enabled <strong>Home <\/strong>and <strong>End <\/strong>keys to navigate the list view.<\/li><li>Improved <strong>Draft saved <\/strong>text, making it more descriptive.<\/li><\/ul><h2 class=\"wp-block-heading\" id=\"h-upcoming-updates\">Upcoming Updates<\/h2><p>After the WordPress Beta 3, the development team will launch three Release Candidates (RC) before the final release on May 24, 2022.<\/p><p>Essentially, the Release Candidates are versions ready for the final release. However, with so many plugins and themes available and people using WordPress in different ways, the RCs provide the opportunity to ensure that the final release will work as intended. If you want to get involved, you can <a href=\"https:\/\/make.wordpress.org\/core\/handbook\/testing\/reporting-bugs\/\" target=\"_blank\" rel=\"noopener\">report any bug or error<\/a> you find to the WordPress team until the final release date.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The first beta version of WordPress 6.0 was released a few weeks ago. Then, on April 26, 2022, the latest and final beta version, WordPress 6.0 Beta 3, was launched.<\/p>\n<p>WordPress \u2026<\/p>\n","protected":false},"author":172,"featured_media":2410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2365],"tags":[],"hashtags":[],"class_list":["post-3066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts\/3066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/comments?post=3066"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts\/3066\/revisions"}],"predecessor-version":[{"id":3076,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/posts\/3066\/revisions\/3076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/media\/2410"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/media?parent=3066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/categories?post=3066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/tags?post=3066"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/www.hostinger.com\/blog\/wp-json\/wp\/v2\/hashtags?post=3066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}