WordPress 6.0 “Arthur” has finally been released. This second major release of 2022 brings many improvements including +600 updates and +600 bug fixes.
Many improvements refine the , a prominent feature introduced in the . WordPress 6.0 builds on the block editor by adding the global style switcher, block style retention, and container block transformation.
Let’s take a look at the new features you’ll see in .
Block editor improvements
When introduced in WordPress 5.9, the block editor brought a new site customization experience. WordPress 6.0 offers many updates to improve its usability.
Global Styles Switcher
The block editor global style switcher is one of the most anticipated features of WordPress 6.0. It allows theme creators to use style variations and switch between them with a single click.
The default theme Twenty Twenty-Two now has four style variations. To access the toggle, open the global styles panel and click browse styles.
You should see the style variations available. Click on any of them to easily change the style.
Note that the button browse styles it will only appear when style variations are available in the theme folder.
To add a style variation to the Twenty Twenty Two theme, you must add a new file JSON in the /wp-content/themes/twentytwentytwo directory.
For example, follow these steps to add a style variation dark to the Twenty Twenty-Two theme.
- Use the file manager or an FTP client and open the folder /wp-content/themes/twentytwentytwo in your WordPress installation directory.
- Create a new file called Dark.json.
- Insert the code snippet of this into the file Dark.json.
- Save the file.
Go back to your WordPress dashboard and open the block editor. You should see the newly added dark theme variation in the global style picker.
Webfonts API
The Webfonts API is intended to speed up the registration of local web fonts in the global styles configuration. It standardizes the process, ensuring consistency between sites and topics.
In WordPress 6.0, you can add new web fonts via the file theme.json and have them appear in the global styles typography panel.
In the following example, we will add the Montserrat font to the Twenty Twenty-Two theme. You can download the source of the .
- Use your file manager or an FTP client to upload the Montserrat font file to the directory /wp-content/themes/twentytwentytwo/assets/fonts/montserrat.
- open the file theme.json in the theme directory and add the following code snippet in the typography:
{ “fontFamily”: “\”Montserrat\”, sans-serif”, “name”: “Montserrat”, “slug”: “Montserrat”, “fontFace”: } ]}
- Save and close the file theme.json.
Go to the block editor and open the global styles panel. Open the font section and use the dropdown menu to browse installed fonts. You should now see the Monserrat font as an option.
code editor
The block editor now has a code editor, allowing users to edit the HTML of a theme.
To access the code editor, click on the icon three points in the upper right corner of the screen and select code editor.
Theme Export Tool
WordPress 6.0 introduces the theme export tool. Allows you to download your current theme and its customizations as a file .zip.
Click on the icon three points in the upper right corner of the screen and select Export. The theme and its current customizations will be downloaded to your computer.
This is an easier way to save all your customizations and reuse them for other websites. Instead of customizing two separate websites, simply export the theme from one website and upload it to the other website.
New types of templates
WordPress 6.0 adds five new template types: Author, category, date, label Y taxonomy. You can access them by adding a new template in the block editor.
open the dashboard Templates in the left sidebar of the editor and click add new in the upper right corner of the screen. It will display six templates to choose from.
New template types simplify the site editing process, as you no longer need to create custom page templates for these purposes.
block patterns
Block patterns play a bigger role in WordPress 6.0, with new updates to the block editor quick inserter.
When opened at the root level and outside of any blocks, the quick inserter now recommends patterns instead of blocks.
This update makes it easier to create a specific section.
For example, you want to add a subscription call-to-action section before the footer. Instead of inserting the text and button blocks manually, use the quick inserter to add a subscription block pattern to speed up the process.
new blocks
The WordPress developers improved the full site editability by adding more core blocks. Let’s look at the 5 new core blocks in WordPress 6.0.
Feedback query loop
The comment query loop block replaces the obsolete post comment block. It comprises several secondary blocks, such as the title of the commentthe Author of the comment and the contents of the commentwhich you can customize individually.
No results in query loop
Without results is a new wrapper block that displays specific text or other blocks when there are no query results to display.
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 block without results inside the block query loop.
Read more
Previously, the link Read more in the query loop integrated with the block excerpt from the publicationwhich reduced its customization.
WordPress 6.0 fixes this by introducing the block Read more, making it independent of the post excerpt. This allows you to get creative by applying a different color, border style, and font to the link. Read more.
Post author bio and avatar blocks
WordPress 6.0 adds two new blocks to split the block content from the post author. the block of bio post Author Displays the description of the author’s profile, while the block of avatar shows the image of the author.
This way you get more options when displaying author information. For example, you can use the row block to contain the post author’s avatar and the bio block to display them side by side.
block upgrades
In addition to adding new blocks, WordPress 6.0 also introduces several improvements to the existing ones. Let’s take a look at some of the updates and see how they provide a better user experience and customization options.
Featured image for the cover block
WordPress 6.0 adds a new feature for the block front page. With a single click on the block toolbar, you can connect the cover block to the featured image and use it as a background.
With this integration, the cover block will change accordingly when you update the featured image.
Featured Image Size Picker
Added a dropdown size selector to the block layout tools outstanding image. This feature can only be accessed when a featured image block is added to a post or page.
To activate it, open the block settings panel by clicking on Setting in the upper right corner of the editor. Then click on the icon three points on the section Dimensions and select Image size.
Block transformation options
WordPress 6.0 adds more block transformation options. A significant improvement is the option to easily transform container blocks (Group, row Y stack) each.
Selecting a block cluster, row either stack, open the block configuration panel. You should see the three icons at the top that represent each block. Click on any of them to transform the block into the one you want.
Now you can also group multiple blocks into a container block. For example, you want to group several paragraphs and blocks of images. Simply click and drag to select these blocks. Then click one of the container block icons in the toolbar.
Additionally, WordPress 6.0 also adds the following block transformation options:
- Logo a Title.
- Extract a Contents.
- Tag cloud a Categories.
- Calendar a files.
- Paragraph a Code.
- Cluster a Row.
Navigation block improvements
the block of navigation got rich preview function for page link block. When you link the navigation to a public page, the preview will appear in the toolbar.
While this is not a major update, a rich preview can be very helpful to make sure you added the correct link.
Another improvement is the ability to set the navigation block to the only available menu. In the previous version, you had to select the menu or start from scratch when you only had one menu. This enhancement speeds up your workflow.
It’s also worth mentioning that you can have a navigation menus in the block editor if you activate the . Once activated, access the panel menus navigation by clicking Navigation in the upper right corner of the editor screen.
In this panel, you can select and configure any navigation menu. For example, you can remove or lock any navigation element or create a nested navigation structure.
Gallery block spacing
WordPress 6.0 adds block spacing control for the page block. Gallery, allowing more flexibility when designing a gallery layout. Now you can specify the spaces between the images.
Open the block configuration panel. you should see the field block spacing in the section Dimensions. Define how many pixels you want for the spaces between the images.
Combine this feature with the tool edge control for individual image blocks to create a unique design.
Column Border and Layout Settings
WordPress 6.0 adds border settings for the block of columns. Now you can change the color, thickness and radius of the border.
This feature is available for the column container, but you can add one for individual column blocks by turning on the…
Facebook Comments
Disqus