What’s New in WordPress 6.0 – Unveiling the Latest Features

Say hello to WordPress 6.0. It’s called Arturo. What’s new in WordPress 6.0? Brace yourselves as we take a deep dive into the latest and finest features of the latest WordPress major release.

While WordPress 5.9 was mostly focused on Gutenberg’s Phase 2 involving the upgrade of the editing experience for the platform users, the spotlight for WordPress 6.0 is on strengthening the existing editing, design, and customization tools. Yet, this version is much more than just that. For instance, the introduction of the site editor may turn out to be a revolutionary step in the direction of improving the WordPress user experience.

WordPress 6.0 isn’t just another sub-update; it’s full of many major enhancements, covering everything about WordPress development from user experience to smooth editing and skyrocketed performance. Here’s a glimpse into the goodies:

The major changes and updates in the latest WordPress version include revamped information architecture and template searching experience, next-level template creation features, new hooks for added flexibility, webfonts api, alternative global styles, improved navigation with new navigation block, new design tools, a new browse mode for the site editor, bolstered performance and much more.

Excited for What’s new in WordPress 6.0? We are too! So, without further ado, let’s dive into the deep sea of changes that WordPress 6.0 brings to the table.

What’s New in WordPress 6.0?

Here’s everything new in WordPress 6.0, including new global style switching, block patterns, shortcuts, editing options, paragraph topography, and other features.

1. Introducing the Webfonts API

WordPress 6.0 introduces the Webfonts API, a new and improved method for seamlessly integrating webfonts into WordPress, with a focus on performance and user privacy. With this update, new webfonts can only be registered and integrated through theme.json.

To add a webfont to WordPress, one has to follow a simple process: add a new font family to the typography section using the following code.

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				},
				{
					"fontFamily": "\"Inter\", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	}
}

For instance, registering the Inter font family involves downloading it from Google Fonts to the ./assets/fonts folder and adding the above code to your theme’s theme.json in the settings.typography section. The Webfonts API registers and lists fonts based on font family, reducing HTTP requests. This API selectively registers fonts needed for rendering blocks on the current page, making it particularly beneficial for webfonts with style variations. Explore more details about the Webfonts API here.

2. Enhanced Block Patterns

Block patterns have always been an integral part of WordPress development, more so with the introduction of WordPress 5.5, and continued to evolve with new WordPress versions. WordPress 5.9 allowed patterns from the Patterns directory to be dynamically integrated into web pages, as well as recovered and loaded through the block inserter.

The introduction of WordPress 6.0 is going to be a game-changer for block patterns. In the latest release, a new online tool called the Pattern Creator has been introduced, empowering everyone with a WordPress.org account to create new block patterns and submit them to the Pattern Directory as well as edit existing patterns.

To further improve block patterns, WordPress 6.0 makes it easy to access them in template editing by introducing the quick inserter, which now displays block patterns at the top level of a template, making it easy to access and use them when adding blocks directly to the page.

Other than that, the new release now allows theme developers to recommend patterns in theme.json, offering users a wide selection of options directly accessible in the block inserter. Implicit pattern registration has been introduced, which now allows developers to register patterns through PHP files in a dedicated /patterns directory.

Another notable addition is Page Creation Patterns, which are shown in a dedicated window when creating a new page, offering a set of block patterns for direct integration into the page. The modal window will show only when a pattern declares support for core/post-content block types. Page Creation Patterns aren’t included by default in WordPress 6.0, but can be added by registering the needed block patterns and supporting the pattern modal through PHP code.

For an in-depth exploration of block pattern development in WordPress 6.0, refer to this article.

3. New Site Editing Features in WordPress 6.0

WordPress 6.0 continues to improve the Full Site Editing feature with advanced options such as enhanced visual theme-building capabilities and additional template options for block themes. Even more features might be in the pipeline.

Visual Theme Building has been empowered with a revamped block theme export tool, which allows users to download their current themes, including all style and template customizations, as a convenient zip file. The tool can be accessed through the Options sidebar in the site editor and can be used for seamless transfer and installation of customized themes across different WordPress websites.

The tool, which is still under development, might be added with many more features, increasing its capabilities in the near future and hinting at the possibility of creating and sharing themes directly from the website’s editing interface.

In addition, WordPress 6.0 introduces new template options for block themes, such as Author, Category, Date, Tag, and Taxonomy. This diversification aims to simplify site editing, allowing users for more flexibility.

The combination of the enhanced block theme export tool and the new template options is expected to facilitate significant advancements in site editing, making it easier for users to edit and design their WordPress sites with a user-friendly interface. For those looking to know more about Visual Theme Building and its progress, here’s the source.

4. Integrating & Switching between Global Styles Variations

WordPress 6.0 introduces the highly anticipated Global Styles Variations feature, allowing theme creators to include multiple sets of global styles in their themes. This feature allows users to effortlessly switch between different style options with a single click, which is similar to having pre-configured child themes.

To add a style variation to a theme, one has to insert an alternative JSON file into the styles folder in the theme’s root directory. Themes supporting Global Styles variations will show a “Browse styles” option in the Global Styles sidebar, allowing users to choose from a list of available styles. Once you select a Global Style, the entire website style will change to the chosen styling instantly.

This feature improves WordPress’ performance and utility by allowing developers to create a variety of style variations with truly limitless customization possibilities.

For those eager to try the new feature, start by adding a styles folder and a JSON file with the following code initiates the process. Explore more details on Global Styles and Theme.json here.

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "\"Inter\", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

5. Improved Interface and Usability

WordPress 6.0 brings multiple significant user interface (UI) improvements aimed at enhancing the overall editing and web designing experience. Some of the top noteworthy changes are mentioned below:

List View Improvements:

1. Expand List View on Selection – Clicking on a block highlights in the List View, expanding the parent block if nested.

2. List View Collapsed by Default:

   – Unlike the previous WordPress versions, the List View in WordPress 6.0 is collapsed by default in all editors, ensuring a clearer block tree view.

3. Focus on the List View Button:

   – When you open the List View panel, the focus will automatically return to the List View button for seamless keyboard navigation.

4. Multiple Block Selection and Drag & Drop:

   – Users in WordPress 6.0 can select multiple blocks at the same level and easily drag & drop them within the list.

Block Style Previews:

   – Style previews now appear outside the sidebar, reducing the load and portion of the sidebar and making style names more visible.

Paragraph Typography Section:

   – The Drop Cap control for the Paragraph block is transferred to the Typography section to improve organization.

Border and Color Setting:

   – Border and color settings are now available in the Tools Panel, ensuring a streamlined editing experience.

Assign a category Reminder:

   – A new panel indicating “Suggestion: Assign a category” appears when publishing a post to remind users to assign categories, improving efficiency.

Code Editor Now in Site Editor:

   – The option to access Code Editor is now available within the Site Editor under the Options menu.

Block Locking:

   – A new Lock feature in WordPress 6.0 allows users to lock blocks, preventing them from being moved or removed, which can prove useful when template editing and reusing blocks.

Multi-select:

   – Users can now select text across multiple blocks at the same time in the latest WordPress update.

Style Retention:

   – Styles are now maintained when editing blocks or creating new buttons, ensuring design consistency in edited or newly added elements.

These improvements are aimed at contributing to a more streamlined and user-friendly editing experience under WordPress 6.0.

6. New Core Blocks

The number of core blocks in WordPress continues to increase with each update, a complete list of which you can see here. Each new block added to WordPress includes crucial details such as Name, Category, Supports, and Attributes, along with links to the source code for developers.

As anticipated, WordPress 6.0 introduces several new blocks. These include:

1. Comments Query Loop:

   – Similar to the Query Loop block, this new Comment Query Loop block shows post comments, providing accessible customization options for its inner blocks.

2. Read More:

   – A new Read More block allows users to edit/customize various aspects of the Read More button, including designs, borders, colors, corners, typography, and more.

3. No Results in Query Loop:

   – The primary function of the ‘No Results’ block is to contain content to be displayed when a user search yields no results. It is specifically designed for use within a Query Loop.

4. Avatar and Post Author Biography:

   – WordPress 6.0 disassembles the Author block into multiple components, with each item, including avatar and author biography, now having their dedicated blocks. While the Post Author Biography block contains the author description, the Avatar block showcases the user avatar (photo).

These changes, ranging from advanced comment displays to customizable Read More buttons and versatile Author-bio blocks ensure enhanced content creation and customization for WordPress developers and users.

7. Improvements to Existing Blocks

Other than adding new blocks, WordPress 6.0 also introduces a variety of changes and improvements to existing blocks, enhancing the overall editing experience of users. Key changes have been made to blocks like Navigation, Query Loop, Featured Image, Group, and Social Icons.

Changes in the Navigation Block:

– The Navigation block, which allows WordPress users to add custom links, now boasts a new design with a more user-friendly interface, offering a rich preview of links for publicly accessible resources.

– When adding a new menu, if only one Navigation Menu exists, it automatically becomes the default menu.

– Navigation Links now come with a description field, allowing more information to be added with each link.

Query Loop Filters and Featured Images:

– Query Loop Filters now have dedicated fields for custom taxonomies (classifications), enabling users to filter posts based on these classifications.

– Multiple authors can now be selected at the same time when filtering posts, providing more flexibility.

– Featured Image dimensions within a Query Loop block can now be specified.

Responsive Group Blocks:

– Group and Row blocks now have the option for Typography settings, allowing format customizations for multiple blocks within a group.

– The Group block is improved with the ability to group the blocks in Stack or Row with a single click.

– Group blocks now have a Margin support option, providing control over top and bottom margins.

Featured Image in Cover:

– With the addition of a “Use featured image” option in the block toolbar, featured Images can now be accessed and used in Cover blocks.

Show/Hide Labels in Social Icons block:

– The Social Icons block now allows users to select between on and off for icon link labels.

Additional Block Enhancements:

Other noteworthy changes in existing blocks include:

– Support for border control added to columns blocks.

– Internal links can now be inserted using a simple [[ keyboard trigger.

– the new Block spacing control feature allows managing the space around images in a Gallery block.

8. WordPress Development and Performance Improvements

WordPress 6.0 introduces several developer-centric features and improvements with a focus on enhancing overall performance and efficiency.

Developers can now use the wp_content_img_tag filter to modify images directly within HTML content. A change has been introduced in the parse_request method to optimize query execution when the do_parse_request filter returns false, thereby reducing the number of queries.

In another notable development, WordPress 6.0 allows blocks to be registered directly from within a theme, simplifying the block registration process. A new property called ancestor has been introduced in block.json, which allows blocks to be restricted to specified block types.

The overall performance of the CMS has been upgraded to a whole new level with improvements to the WordPress Caching API, enhanced taxonomy term query performance, and special optimizations for single sites with large user counts. These enhancements aim to contribute to a smoother and more efficient development experience.

Also Read: Reasons Why WordPress Website Is Perfect for Your Business

Conclusion

As WordPress enters the second Phase of Gutenberg’s development, the focus is now more on customization. Full Site Editing is now integral to WordPress core, with ongoing improvements and changes being introduced in version 6.0. Hopefully, now you are aware of what is new in WordPress 6.0.

The latest WordPress release holds significant importance for the WordPress ecosystem, developers, and users, given WordPress now powers more than 40% of all websites. While it’s nearly impossible to list all the WordPress 6.0 features and improvements in a single post, we have tried our best to bring to you key highlights of the newest WordPress release along with their potential impact on daily WordPress usage through this post.

If you need WordPress development services or want to discuss your WordPress project with a specialist, contact SAG IPL to set up a meeting.