What’s new in WordPress 6.5: Font Library, DataViews, Block Bindings, Interactivity API, and much more!

WordPress 6.5 is scheduled for release on March 26th, and we can’t wait to take advantage of the fantastic features coming with it.

6.5 introduces new powerful APIs, bringing the WordPress development experience to the next level. However, WordPress 6.5 also brings tons of changes that will make you happy when it comes to site building and content creation.

Thanks to the new Font Library, you’ll be able to inject custom field values into the content of core blocks and download and install Google Fonts directly from the site editor. New design tools and several UI enhancements will improve the overall editing experience.

But these are just a few updates coming with WordPress 6.5. The new release gathers so many improvements and updates that it would be impossible to mention them all in a single blog post. So, we have collected the most disruptive and exciting ones in this long and detailed article.

Let’s begin our journey of discovery of WordPress 6.5.

The new WordPress Font Library

First and foremost, WordPress 6.5 introduces a new feature that allows for font management from the Styles interface.

The new WordPress Font Library enables you to manage fonts in a way that resembles media management in the Media Library but for fonts.

Thanks to the Font Library, you can easily install/uninstall local fonts and Google Fonts and choose the ones you want to activate/deactivate regardless of your active theme.

Sounds great, doesn’t it? We now have much greater control over a critical aspect of every website: typography. To use custom fonts in your WordPress website, you won’t need to rely on your theme’s fonts or play around with CSS anymore.

It’s usage is pretty straightforward. In the site editor UI, open the Global Styles sidebar and select Typography.

Here, you should see a list of the available fonts and elements. Click the Manage fonts button on the right, and a popup with three tabs will appear.

The Library tab provides a preview of the available fonts, the Upload tab includes a drag-and-drop area to upload font assets from your computer, and the Install Fonts tab allows you to install fonts from Google Fonts.

Once connected to Google Fonts, a list of all the available fonts will appear in the same panel.

You can also search for fonts by name.

Pick the font variants you need, click Install, and you are done.

When you install a new font, the Font Library adds the font family definition to the installed fonts and downloads the font asset to the /wp-content/fonts/ folder or wp-content/uploads/fonts as a fallback location.

Disable Font Library

Plugin and theme developers can disable the Font Library using the new fontLibraryEnabled PHP filter:

function disable_font_library_ui( $editor_settings ) { 
	$editor_settings['fontLibraryEnabled'] = false;
	return $editor_settings; 
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );

DataViews

DataViews is a component allowing for rendering datasets using different types of layouts, such as table, grid, list, and more.

With this iteration, new views and related features for managing pages, patterns, and templates come into the core, and we may expect additional improvements with future WordPress releases.

For the time being, WordPress 6.5 introduces the following views in the Site Editor:

• Templates > Manage all templates: Table and Grid layouts.
• Patterns > Template parts > Manage all template parts: Table and Grid layouts.
• Patterns: Grid layout.
• Pages > Manage all pages: Table and Grid layouts.

Along with layouts, data views add several visualization features, including filters, search, pagination, sorting, hiding, and showing fields.

A Bulk edit button allows you to perform several actions in bulk depending on the current dataset. For Pages, you can Move to thrash, Restore, and Permanently delete.

Data views also come with a new Primary filter API aiming to add a special kind of filter – always visible on the screen – to data views. The image below shows the new Sync Status primary filter on the Patterns admin section.

The DataViews API comes with the new @wordpress/dataviews npm package that enables developers to experiment with data views.

Block Bindings API

The Block Bindings API is a new API that aims to connect block attributes to values from different data sources. These values may differ depending on the context. A simple example would be a heading containing the author’s name that changes with the post_author value.

This is a remarkable improvement because it extends the capabilities of several core blocks. Thanks to the new API, you can bind dynamic data from any source to a block attribute.

Data sources can be the most diverse: Site data, custom fields, user data, patterns, shortcodes, other blocks, and even external tools using Gutenberg. An example of this could be a Drupal website with Gutenberg.

From a technical point of view, we can describe the way the Block Bindings API works as a three-step process:

1. First, you create a binding between block attributes and a data source using a bindings object.
2. The API gets the value from the data source defined in the binding.
3. Then, it updates the HTML of the block using the values received from the data source.

The first implementation of the Block Bindings API coming with WordPress 6.5 allows to connect block attributes and custom fields. A second announced implementation, Synced Patterns Overrides, has been delayed to a future release.

At first, only a limited number of blocks, such as headings, paragraphs, images, and buttons, will support the Block Bindings API. With future iterations, more blocks, even custom blocks, will be added to the list.

This first implementation of the API also enables plugin developers to register their sources the same way as Gutenberg registers the core/post-meta data source. Based on Santos Guillamot’s example, you can register your plugin data source this way:

register_block_bindings_source(
	'myplugin/plugin-data',
	array(
		'label'              => _x( 'Plugin Data', 'block bindings source' ),
		'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
	)
);

And then add a bindings object to your block:

<!-- wp:paragraph 
{
	"metadata": {
		"bindings": {
			"content": {
				"source": "myplugin/plugin-data",
				"args": {
					"key":"plugin_key"
				}
			}
		}
	}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->

Here is a description of each property:

• metadata: An object of block metadata.
• bindings: An object containing one or more bindings.
• content: The block attribute to bind to a data source. In this example, a Paragraph block’s content attribute.
• source: The bindings source.
• args: An object of arguments to pass to the block bindings source.

Future iterations will add more features to the Block Bindings API. In addition, we should soon be able to create bindings from the Visual Editor, connect block attributes with more data sources, such as site data or taxonomy data, and use this feature with more blocks.

That said, let’s dive deeper into the first implementations of the Block Bindings API.

Connecting custom fields to blocks

Before WordPress 6.5, there was no way to inject custom field values into the content of core blocks. Developers could only create custom blocks to display custom fields on the frontend.

As of WordPress 6.5, you can display data stored in custom fields within core blocks, including buttons, headers, images, and paragraphs.

As mentioned earlier, the Block Bindings API allows you to connect block attributes and different data sources, including the “meta_fields” source. To use this feature, you first need to enable custom fields in the editor from Options -> Preferences -> General -> Advanced.

Note that, as of WordPress 6.5, you don’t have a UI control to bind a custom field value to a block attribute.

So, once you have added your custom field key and value, you’ll have to switch to the code editor and add a “bindings” object within the block delimiter, as shown in the code below:

<!-- wp:paragraph 
	{
		"metadata": {
			"bindings": {
				"content": {
					"source":"core/post-meta",
					"args": {
						"key":"my_custom_field"
					}
				}
			}
		}
	} -->
	<p>Paragraph</p>
<!-- /wp:paragraph -->

Adding a custom field to a block locks the appropriate controls, making the block content non-editable.

Now, let’s explore how this works with an Image block. Add two custom fields for alt and src attributes.

Then add an Image block, switch to the code editor, and add a bindings object to the block as in the following example:

<!-- wp:image {
	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"img_src"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"img_alt"
				}
			}
		}
	}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->

You will notice that you won’t be able to replace the image source using the editor’s controls.

With this first iteration, only the following block attributes can be connected to custom fields:

• Paragraph: content.
• Heading: content.
• Image: URL, alt, and title.
• Button: text, URL, linkTarget, rel.

For a more extensive overview of connecting custom fields with block attributes, see this comprehensive introduction to Block Bindings.

Improved revision system

Revisions give you the confidence that you can undo any changes by restoring an earlier version of the site’s appearance at any moment in time. Due to the importance of a reliable revision system on collaborative websites, style revisions have a prominent place in the current phase of WordPress development. WordPress 6.5 brings several significant improvements to the revision system.

Here is what you can expect to see with revisions in WordPress 6.5.

Description of changes

In the previous version of WordPress, only the date, time, and author of each revision were visible. Starting with WordPress 6.5, in addition to those details, you will also see a brief summary and other details of that version.

Unlimited Revisions and Pagination

Before 6.5, due to the Rest API limit, it was only possible to view a maximum of 100 revisions in a single panel of the sidebar.

Thanks to the two new selectors getRevisions and getRevision, introduced with Gutenberg 17.2 and now merged into the core with WordPress 6.5, the limit of 100 revisions no longer exists. In addition, you can browse all existing revisions divided into pages of 10 items each.

Revision Style Book integration

Another change makes the Revisions panel also available with the Style Book. This allows you to check the changes you made to your styles on patterns and blocks not included in the current template.

Revisions for templates and template parts

Template and template part revisions are also available for you to switch to a previous version of your design project, adding an additional security layer to your workflow.

Interactivity API

Before WordPress 6.5, to add interactivity to their pages, developers should have implemented their favorite JavaScript libraries on their own. Unfortunately, this led to a lack of consistency in JavaScript development in the frontend.

Starting with WordPress 6.5, a new Interactivity API provides a modern and standardized way to add interactivity to the frontend of your WordPress websites.

If you’re wondering what this new API does, we got a taste of it earlier in WordPress 6.4 since the Image, Search, File, Navigation, and Query core blocks were refactored using the private version of the API. The lightbox effect on images is another good example.

Dynamic pagination, instant search, and real-time interaction between blocks are just a few examples of what you will be able to implement on your websites using the Interactivity API:

Blocks can share data, actions, and callbacks between them. This makes communication between blocks simpler and less error-prone. For example, clicking on an “add to cart” block can seamlessly update a separate “cart” block.

And it is incredibly fast. All the scripts required to add interactivity will only be loaded on the frontend if you have at least one interactive block on the page.

The Interactivity API embraces a modern approach to frontend development that leverages the power of custom HTML attributes to reduce the amount of JavaScript needed to add interactivity to your pages.

If you are familiar with frontend libraries such as HTMX and Alpine.js, you will be happy to see the same logic implemented into WordPress with the Interactivity API. So, what is it all about? Let’s dive deeper.

What is the Interactivity API?

The Interactivity API is a new standard system of directives for creating interactive blocks that will enable developers to easily add interactivity to the frontend of their blocks so that site visitors will be able to interact with your content without having to reload the page. Think of things like instant search, adding comments, adding to a cart, and dynamic pagination.

The new API meets a number of requirements that make it a modern development tool, including the following:

• It supports server-side rendering and client-hydrated HTML.
• It works well with PHP and the current block system.
• It is backward-compatible with WordPress hooks and existing JavaScript libraries.
• It follows a declarative approach instead of an imperative approach.
• It is performant and extensible.
• It is atomic and composable: Each directive controls a small part of the DOM, and multiple directives can be combined to create complex applications.
• It is compatible with the existing WordPress development tools.

As mentioned above, the Interactivity API is based on directives, which are special HTML attributes that allow you to attach specific behavior to DOM elements. Here is an example of an interactive block:

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive='{ "namespace": "create-block" }'
	data-wp-context='{ "isOpen": false }'
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
		?>
	</p>
</div>

WordPress processes those directives on the server and generates the corresponding markup.

How to get started with the Interactivity API

The implementation of the Interactivity API will not affect the block creation workflow. You can scaffold a plugin that registers an interactive block using the @wordpress/create-block command and a specific interactive template.

Launch your favorite command line tool, navigate to your plugins directory, and run the following command:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

This generates an interactive block from a template that uses the metadata field viewScriptModule. The script module declared in viewScriptModule will be enqueued when a block is rendered on the frontend. (See also viewScriptModule and Script Modules dev notes.)

Once the installation process is complete, you’ll find a new plugin in your WordPress dashboard. Activate it, then get back to the command line, navigate to the new plugin’s directory, and start the service:

cd my-interactive-block && npm start

Now, create a new post or page, open the block inserter, and scroll down to the Widgets section. There, you’ll find a new block called My Interactive Block that you can use as a template for new exciting and interactive creations:

Add the block to your content and save the post. The post preview will display a toggle that hides/shows a dummy text. And that’s it. Now, you can start building interactive blocks.

You can read more on how to create interactive blocks using the Interactivity API on the WordPress Core blog, GitHub’s documentation, and Interactivity API dev note.

A great example of Interactivity API at work is the wpmovies.dev demo website.

New design tools

WordPress 6.5 also introduces new design tools that allow you to customize your design further without relying on custom CSS code.

Background image size and repeat support for the Group block

The Group block now supports size and repeat features for background images. This also allows you to set the background image size to cover or contain, keeping the same aspect ratio.

In addition, when you set the Background size to Fixed, a Repeat toggle shows up to allow you to enable or disable repeating background.

Aspect ratio support for the Cover block

The Cover block has received support for aspect ratio. You can control the block’s aspect ratio at the global level from the Global Style interface or adjust it individually in your content.

Shadow support for more blocks

So far, the Button block was the only block to support shadows. WordPress 5.6 adds shadow support to Columns, Column, and Image blocks.

You can add shadow to these blocks from the block’s Styles tab in block settings.

Site editor updates

Several improvements to the site editor should significantly improve your editing experience and streamline your workflow.

List View enhancements

List View is a central element of the design workflow, and WordPress 6.5 introduces a handful of enhancements.

First, you can now right-click on the List View to access the block settings dropdown. This is a small but useful enhancement that should streamline your creation process as it makes accessing block settings from the List View easier.

A second enhancement allows you to rename almost all blocks in List View except for the following blocks:

• core/block
• core/template-part
• core/pattern
• core/navigation

The List View has also been enhanced with a keyboard shortcut. You can now select all blocks in the List View by clicking CTRL + A on Windows and CMD + A on Mac. This allows you to perform actions in bulk easily.

Duplicate and rename Patterns

Patterns provided by themes are not editable, so you cannot use them to create your own patterns or simply change something in the pattern. WordPress 6.5 adds a small but useful feature allowing for duplicating and renaming patterns, enabling you to change the sync settings and modify the patterns as you need.

In addition, two new pattern categories have been added: Audio and Video.

An improved Preferences panel

With WordPress 6.5, the Preferences panel has been updated, and existing settings have been reorganized. The main changes include:

• New “Appearance” and “Accessibility” panels.
• A new Top toolbar setting under Appearance.

Enabling the Top toolbar moves all block and document tools into a single toolbar at the top of the editor.

Block toolbar in distraction-free mode

Before WordPress 6.5, accessing the block toolbar was not possible in distraction-free mode, and you were forced to switch it on and off at any change. Since WordPress 6.5, moving the cursor over the top area of the editor will show the block toolbar for your customizations.

Improved LinkControl component

The LinkControl has been improved and now adding links is easier. The following image shows the new panel that appears when you click on a link to edit.

For a full list of changes to the LinkControl component, see PR #50891.

Drag & Drop Improvements

Drag & Drop has been improved in several areas of the editor.

In List View:

• When dropping a block into a collapsed block, the collapsed block expands.
• A drag cursor appears when you are dragging elements.

In the editor canvas:

• Now you can drag and drop elements to the beginning or end of your content.
• The drag and drop of elements between sibling container blocks has been improved.
• It is also possible to drag blocks in template parts.
• A new visual indication now informs you that a block is not draggable.
• You can drag and drop elements to the beginning or end of a document.
• You can create rows or galleries by simply dragging and dropping blocks near other blocks. For example, adding an image next to another image will convert the existing Image block to a Gallery block.

For a more comprehensive list of drag and drop improvements, see the Block drag and drop tracking issue.

Additional changes and improvements

But wait, that’s not all! WordPress 6.5 also brings a bunch of other changes and enhancements that are worth mentioning.

Appearance tools for classic themes

Classic themes can also take advantage of some of the design features introduced in the site editor, even without using theme.json. Starting with WordPress 6.5, opting for the appearanceTool theme support would include the following design features:

• Border
• Color
• Spacing
• Typography

This can give users of classic themes a preview of the site editor’s capabilities and streamline the transition from classic to block themes.

AVIF support

WordPress 6.5 also introduces support for the AVIF image format, characterized by an advanced compression algorithm enabling superior image quality at an elevated compression ratio. Consequently, AVIF yields smaller image files compared to conventional formats, including the WebP format.

Users can now seamlessly upload AVIF files via the WordPress media library, similar to other image formats. However, check your hosting platform’s compatibility with the AVIF file format.

You can check if your host supports AVIF image format in the Site Health screen of your WordPress install by clicking on the Info tab and expanding the Media Handling section.

Plugin dependencies

Some plugins add new features on top of other plugins as extensions/add-ons. For these plugins to work, you first need to install and activate their dependencies – the plugins they rely on.

Since WordPress 6.5, plugin developers can use a new “Requires Plugins” plugin header. This header unlocks a powerful feature that streamlines the process of installing and activating dependencies. It contains a list of comma-separated slugs of the dependencies required by a dependent plugin to work.

This provides information to the plugin’s user with links to the WordPress.org Plugins Repository to install and activate the dependencies.

In addition, the dependency plugin provides a “Required by” detail that lists dependent plugins that need it to work. You’ll also notice that you are not allowed to delete the dependency plugin unless you delete the dependent plugin.

WordPress 6.5 also introduces a new wp_plugin_dependencies_slug filter that allows you to filter dependency slugs programmatically.

See the Plugin Dependencies dev note for a more in-depth discussion.

Updates to the HTML API

With WordPress 6.5, the HTML API Tag Processor received several improvements, and now it scans every kind of syntax token, including tag and non-tag tokens, comments, doctype definitions, and text nodes.

This allows the change of the text wrapped within token boundaries, referred to as modifiable text, without affecting the structure of a document.

Modifiable text is the entire content of a text node, the content of an HTML comment, or the content between the opening and closing tags of special elements, such as script or style elements.

A bunch of new methods have been introduced:

• next_token() – moves to the next token in the document
• get_token_type() – gets the type of token found
• get_token_name() – gets the name of a token
• get_modifiable_text() – returns the properly decoded text content for a given token.
• get_comment_type() – gets the type of comment
• paused_at_incomplete_token() – returns true if the Tag Processor reaches the end of a document truncated in the middle of a token.

For a more extended overview, check the Updates to the HTML API in 6.5 dev note.

Site and post editor unification

In WordPress 6.5, the editors receive several updates aimed at unifying UI and behavior.

Several sidebar panels have been moved from the edit-post package to the @wordpress/editor package to bring the corresponding functionalities to the Site Editor:

• Page Attributes (PR #57151)
• Post Taxonomy (PR #57049)
• Added View link to the site editor for post types (PR #57153)
• Added the Discussion panel to the site editor sidebar for post types that support it (PR #57150)
• Added the featured image panel (PR #57053)
• Added the revision panel to the site editor (PR #57010)

Another change allows you to preview the template when editing a page in the Post Editor, as it was already possible in the Site Editor, and you can toggle on/off the template preview from the page Settings sidebar.

Performance enhancements

Over 110 performance enhancements lead to a significant surge in speed and efficiency within both the post editor and site editor. Loading times are now twice faster than 6.4, and input processing speed is nearly four times faster. Additionally, the integration of the Performant Translations i18 library contributes to reducing memory usage and load time overhead for translated websites.

Accessibility improvements

With the release of WordPress 6.5, more than 65 updates will be merged into the core to improve accessibility throughout the admin panel. These improvements include focus style, contrast ratio, Customizer menu ordering, and more.

Updates to Block Hooks

First introduced with WordPress 6.4, Block Hooks allow to automatically place a block in a specific position when another block is added to the content.

Block Hooks were previously available for templates, template parts, and patterns that didn’t have any user modifications. Now, they can also be used with modified layouts.

Before WordPress 6.5, a hooked block could only be added before or after the Navigation block. With this iteration, hooked blocks can also be added to a Navigation Block as the first or last child.

In addition, this iteration introduces the new hooked_block and hooked_block_{$hooked_block_type} filters.

For a deeper overview and examples of usage, see the Block Hook updates dev note.

Summary

Are you ready for the next level of WordPress development experience? Get excited for the release of WordPress 6.5 on March 26th! This new version brings tons of changes that will make you happy when it comes to site building and content creation.

The new WordPress Font Library allows you to manage fonts in a way that resembles media management in the Media Library, giving you greater control over typography. With DataViews, you can render your datasets using different layouts, filters, and search options, improving the overall experience. With the Block Bindings API and Interactivity API, you can provide a more dynamic and personalized experience to your site users.

With all these exciting updates, WordPress 6.5 is a game-changer.

Have you tested the new WordPress version on your development environment? What are your favorite features coming with WordPress 6.5? Share your thoughts in the comments section.

The post What’s new in WordPress 6.5: Font Library, DataViews, Block Bindings, Interactivity API, and much more! appeared first on Kinsta®.