- API Improvements<\/a>
- Interactivity API<\/a><\/li>
- Block Bindings API<\/a><\/li><\/ul><\/li>
- Design Additions<\/a>
- WordPress Font Library<\/a><\/li>
- Shadow Support for More Blocks<\/a><\/li>
- Aspect Ratio Support for the Cover Block<\/a><\/li><\/ul><\/li>
- Site Editor Updates<\/a>
- DataViews<\/a><\/li>
- List View enhancements<\/a><\/li>
- Duplicate and Rename Patterns<\/a><\/li><\/ul><\/li>
- Site Management Changes<\/a>
- Improved Style Revision System<\/a><\/li>
- Plugin Dependencies<\/a><\/li><\/ul><\/li>
- Additional Changes<\/a><\/li>
- Final Thoughts<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n
API Improvements<\/h2>\n\n\n\n
APIs are a huge part of software development nowadays and for good reason. They allow new applications to integrate with existing software systems. WordPress 6.5 brings two big improvements on the API front: further support for the Interactivity API and the new Block Bindings API. These two APIs will allow WordPress to become an even more versatile platform. Firstly, the Interactivity API.<\/p>\n\n\n\n
Interactivity API<\/strong><\/h3>\n\n\n\n
The Interactivity API<\/a> is, as the name suggests, WordPress’ take on adding interactivity to your website’s pages. Before WordPress 6.5, developers had to manually add such interactivity through JavaScript libraries. As you can imagine, that could lead to inconsistencies in the development process and implementation, which is a hassle in itself. However, the Interactivity API is here to set a standard for the functionality from here on out.<\/p>\n\n\n\n
With this new API, developers can add all sorts of interactions to the front end of WordPress blocks. Things such as adding an item to your cart automatically update the “cart” block without you having to refresh the page. A more complex example would be dynamic pagination, which allows pages to be updated, rendered, and generated on the fly without having to refresh it. That will improve the user experience since it allows for more seamless browsing with no interruptions. Interacting with content without reloading the page is always much better for the user.<\/p>\n\n\n\n
It is also important to note that while it sounds like this API might slow down page speeds, it actually will not. WordPress will load the scripts only if you have interactive blocks in place and only on the front end. The API is fast and efficient, and it will not slow down your website.<\/p>\n\n\n\n
Additionally, the API is on par with many modern-day development tools, meeting a number of requirements.<\/p>\n\n\n\n
- \n
- Server-side rendering and client-hydrated HTML<\/a> support;<\/li>\n\n\n\n
- Compatibility with current block system and PHP versions;<\/li>\n\n\n\n
- Backward compatibility with WordPress hooks<\/a> and JavaScript libraries;<\/li>\n\n\n\n
- The API takes a declarative approach<\/a>. Simply put, the code used describes what has to be achieved instead of how it will be achieved;<\/li>\n\n\n\n
- Each directive within the API controls a piece of the DOM and can be combined to create complex applications. In other terms, the directives are atomic<\/a> and composable<\/a>;<\/li>\n\n\n\n
- Finally, it is fully compatible with current WordPress development tools, highly performant, and fully extensible.<\/li>\n<\/ul>\n\n\n\n
The interactivity API is based on directives. Directives are special HTML attributes that can attach specific behavior to DOM elements. This is done by using the data-wp-interactive<\/em> directive in the specific DOM element. The value must be the unique namespace of your interactive block or plugin. An example of such an interactive block can look something like this.<\/p>\n\n\n\n
\/\/ render.php\n\n$context = array('isOpen' => false);\n\n<div\n\n <?php echo get_block_wrapper_attributes(); ?>\n\n <?php echo wp_interactivity_data_wp_context($context) ?>\n\n data-wp-interactive='myPlugin'\n\n data-wp-watch= \"callbacks.logIsOpen\"\n\n>\n\n <button\n\n data-wp-on--click=\" actions.toggle\"\n\n data-wp-bind--aria-expanded= \"context.isOpen\"\n\n >\n\n Toggle\n\n <\/button>\n\n <p id=\"p-1\" data-wp-bind--hidden=\"!context.isOpen\">\n\n This element is now visible!\n\n <\/p>\n\n<\/div><\/code><\/pre>\n\n\n\nSince we are talking about code, this change will have the most significant effect on existing developers. It will allow them to create more interconnected and exciting websites. If you want to learn about creating such blocks yourself, you can check out WordPress’ documentation<\/a> on the process. Finally, WordPress devs have put together a small website to showcase the power of the API, and you can check it out here<\/a>.<\/p>\n\n\n\n
Block Bindings API<\/strong><\/h3>\n\n\n\n
The second significant API addition to this update is the Block Bindings API<\/a>. Simply put, it will allow block attributes to connect to values from different data sources. A quick example of this is a heading that shows the author, but the name changes depending on the post_author<\/em> value. It allows the creation of custom, dynamic fields in core blocks, also known as post-meta fields.<\/p>\n\n\n\n
The images<\/strong>, buttons<\/strong>, paragraphs, <\/strong>and headings<\/strong> core blocks can benefit from this iteration of the Block Bindings API. The developers will add more in future updates. The API itself works by creating a binding connection between block attributes and data sources using the binding<\/em> object. In it, the API will look for a specific data source to draw information from, after which it updates the block’s HTML with the new particulars.<\/p>\n\n\n\n
Future updates will increase the number of blocks that can benefit from this API and perhaps even extend to custom blocks. This new API will allow you to draw on dynamic data from nearly any source to display in these blocks. Previously, WordPress did not have such functionality, and there was no convenient workaround.<\/p>\n\n\n\n
Here is an example of a Paragraph<\/strong> block with an attribute bound to a custom field.<\/p>\n\n\n\n
<!-- wp:paragraph {\n\n\"metadata\" :{\n\n \"bindings\" :{\n\n \"content\" :{\n\n \"source\": \"core\/post-meta\",\n\n \"args\" :{\n\n \"key\": \"book-genre\"\n\n }\n\n }\n\n }\n\n}\n\n} -->\n\n<p><\/p>\n\n<!-- \/wp:paragraph \u2192<\/code><\/pre>\n\n\n\nIn this example, the content<\/em> of the Paragraph<\/strong> block is bound to the data from the core\/post-meta <\/em>custom field. Additionally, it will draw specifically from the book-genre <\/em>custom field within core\/post-meta<\/em>. Here is an explanation of each object and attribute from the code above.<\/p>\n\n\n\n
- \n
- metadata<\/strong> – An object of block metadata.<\/li>\n\n\n\n
- bindings <\/strong>– An object containing one or more bindings.<\/li>\n\n\n\n
- content<\/strong> – The block attribute to bind to a data source. In this example, a Paragraph block’s content attribute.<\/li>\n\n\n\n
- source<\/strong> – The bindings source.<\/li>\n\n\n\n
- args<\/strong> – An object of arguments to pass to the block bindings source.<\/li>\n<\/ul>\n\n\n\n
Injecting custom values into the content of blocks was impossible before WordPress 6.5. Now, however, with the help of the Block Bindings API<\/strong>, it is entirely possible. For the time being, custom fields can only be assigned to certain core blocks: buttons<\/strong>, headers<\/strong>, images<\/strong>, and paragraphs<\/strong>. Here are the attributes that can be bound for each block.<\/p>\n\n\n\n
- \n
- Images – <\/strong>URL, alt, and title;<\/li>\n\n\n\n
- Buttons – <\/strong>text, URL, linkTarget, rel;<\/li>\n\n\n\n
- Paragraphs – <\/strong>content;<\/li>\n\n\n\n
- Headings – <\/strong>content.<\/li>\n<\/ul>\n\n\n\n
To start doing that, you must first enable Custom Fields<\/strong> in the Post editor. Go to Options > Preferences > General > Advanced<\/strong> and switch it on.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-custom-fields-option.png\")
<\/figure>\n\n\n\nAfter you have enabled it, you will be able to add custom fields to the aforementioned blocks. Here is what the custom fields interface looks like. It appears at the bottom of the page. We created a custom image field for our example.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-custom-field-example.png\")
<\/figure>\n\n\n\nSince this is a blog post about the changes coming with WordPress 6.5, we recommend you check out WordPress’ guide<\/a> on binding custom fields to block attributes. It is something that should primarily affect developers and provide them with more tools with which to work. You should absolutely try to build such a block yourself, though, if you need some custom fields on your website.<\/p>\n\n\n\n
As you can see, though, these two API additions to WordPress will allow developers to build more intricate, engaging, and dynamic websites. APIs are invaluable nowadays, given the amount of information on the Internet. Drawing upon it and displaying it instantly is such a boon.<\/p>\n\n\n\n
Design Additions<\/h2>\n\n\n\n
Next are several design improvements and additions. They should help save you time and effort from having to use custom CSS code on your website. They include a font library, shadows for more blocks, and aspect ratio support for the Cover<\/strong> block. Firstly, the biggest change is the WordPress Font Library.<\/p>\n\n\n\n
WordPress Font Library<\/strong><\/h3>\n\n\n\n
For those of you who love to use different fonts in your websites, this new Font Library<\/strong> should make you very happy. It is similar to how media is managed in WordPress and allows users to easily install and uninstall local and Google Fonts<\/a>. With the Font Library<\/strong>, you can use any font on your website, regardless of your theme, without needing custom CSS.<\/p>\n\n\n\n
To use this new feature, open the site editor for any page or post on your website, open the Global Styles <\/strong>sidebar, and select Typography<\/strong>. You will then see a list of fonts available on your website.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-font-library.png\")
<\/figure>\n\n\n\nTo manage your fonts, click on the button next to Fonts<\/strong>. This will open a pop-up with three tabs: Library<\/strong>, Upload<\/strong>, and Install Fonts<\/strong>. <\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-font-library-interface.png\")
<\/figure>\n\n\n\nLibrary<\/strong> shows all the currently available fonts. Upload<\/strong> allows you to drag and drop font assets directly from your computer. Finally, you can install Google Fonts from Install Fonts<\/strong>. You must give Google permission to access your WordPress to use Google Fonts.<\/p>\n\n\n\n
Once that is done, you will see a list of all available fonts, or you can search for the one you are looking for. <\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-font-library-install-fonts.png\")
<\/figure>\n\n\n\nWhen you have the fonts, simply click Install<\/strong>, and they will be added to the library. Like other media, the font files are saved in the wp-content\/<\/em> directory in \/fonts<\/em>. <\/p>\n\n\n\n
Shadow Support for More Blocks<\/strong><\/h3>\n\n\n\n
Up until WordPress 6.5, only the Button<\/strong> block had shadow support. Now, the Columns<\/strong>, Column, <\/strong>and Image <\/strong>blocks also have shadow support<\/a>.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-block-shadow-support.png\")
<\/figure>\n\n\n\nAspect Ratio Support for the Cover Block<\/strong><\/h3>\n\n\n\n
Finally, in the design improvements that come with WordPress 6.5, the Cover<\/strong> block now has support for aspect ratio.<\/a> You have two options here: control the block aspect ratio from the Global Style <\/strong>interface or change it individually from the image itself.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-cover-block-aspect-ratio-1024x678.png\")
<\/figure>\n\n\n\nSite Editor Updates<\/h2>\n\n\n\n
It would not be a new WordPress release without some improvements to the Site Editor<\/strong>. This time, there are three that we think are the most significant: the brand new DataViews<\/strong>, enhancements to the List View<\/strong>, and the ability to Duplicate and Rename Patterns<\/strong>. Let’s dive right in!<\/p>\n\n\n\n
DataViews<\/strong><\/h3>\n\n\n\n
The most significant change to the Site Editor is the addition of DataViews<\/strong>. This is a new component that allows WordPress to render datasets in different layouts: table, grid, etc.<\/p>\n\n\n\n
In this initial iteration<\/a> with WordPress 6.5, it uses DataViews <\/strong>to change the layout of the following sections of the Site Editor.<\/p>\n\n\n\n
- \n
- Templates –<\/strong> List and Grid view are available for the Templates page;<\/li>\n\n\n\n
- Patterns – <\/strong>The Patterns page itself currently supports only the Grid layout, but the Template Parts page has both List and Grid layouts;<\/li>\n\n\n\n
- Pages – <\/strong>When managing all pages, you can arrange them in either a Grid or a List.<\/li>\n<\/ul>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-dataviews-template-layout.png\")
<\/figure>\n\n\n\nDataViews<\/strong> also adds several visualization features that should help streamline the page creation process.<\/p>\n\n\n\n
- \n
- Filters;<\/li>\n\n\n\n
- Search;<\/li>\n\n\n\n
- Pagination;<\/li>\n\n\n\n
- Sorting;<\/li>\n\n\n\n
- Showing and Hiding fields.<\/li>\n<\/ul>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-dataviews-additional-functions.png\")
<\/figure>\n\n\n\nList View enhancements<\/strong><\/h3>\n\n\n\n
Next up are improvements to the List View<\/strong>. Since it is an integral part of any WordPress workflow, we are excited that it is getting some love with 6.5.<\/p>\n\n\n\n
First, users can right-click on a block in the List View <\/strong>to open its settings. It is less significant a change than the Font Library<\/strong> from earlier, but this one is just so convenient. Almost anyone nowadays is used to right-clicking to open settings, options, etc. Makes sense that WordPress would add it, too!<\/p>\n\n\n\n
Additionally, the List View itself has received two improvements.<\/p>\n\n\n\n
- \n
- You can rename almost all blocks<\/a> in the List View<\/strong> except these ones:\n
- \n
- core\/block;<\/li>\n\n\n\n
- core\/template-part;<\/li>\n\n\n\n
- core\/pattern;<\/li>\n\n\n\n
- core\/navigation;<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- The List View<\/strong> now also supports the CTRL+A (CMD+A) keyboard shortcut for selecting all the blocks. Useful if you want to perform any bulk actions.<\/li>\n<\/ul>\n\n\n\n
Duplicate and Rename Patterns<\/strong><\/h3>\n\n\n\n
Finally, a small but important change. The ability to duplicate and rename patterns<\/a> is now a part of WordPress as well. This might not seem like a big deal, but it actually allows users to edit patterns provided by themes. As things currently are, such patterns cannot be edited to a user’s needs. With this new feature that downside can be circumvented as duplicating and renaming a pattern breaks the sync settings, allowing you to edit the pattern as you need. <\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-duplicate-pattern.png\")
<\/figure>\n\n\n\nSite Management Changes<\/h2>\n\n\n\n
The final batch of important changes concerns managing your website or its content. In this section, we will discuss improvements to the Style Revision System <\/strong>and the addition of a UI element for plugin dependencies.<\/p>\n\n\n\n
Improved Style Revision System<\/strong><\/h3>\n\n\n\n
Being able to undo a change you made to your website or post is invaluable<\/a>. That is why we are happy to tell you about the improvements<\/a> the Style<\/strong> Revision System<\/strong> is getting in WordPress 6.5. <\/p>\n\n\n\n
First, each revision now has a description. Previously, only the date, time, and author of a revision were available. With WordPress 6.5, you will also see a description<\/a> of the revision.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-style-revisions.png\")
<\/figure>\n\n\n\nAdditionally, 6.5 removes the limit of 100 maximum revisions. Now, you can have unlimited revisions, which you can browse in pages of 10. This is accomplished thanks to two new selectors<\/a>: getRevision <\/em>and getRevisions<\/em>, introduced in Gutenberg 17.2<\/a>. Finally, the revision panel is now available for both the Style Book<\/strong> and Templates and Template Parts<\/strong>.<\/p>\n\n\n\n
Plugin Dependencies<\/strong><\/h3>\n\n\n\n
WordPress 6.5 also introduces a super useful feature regarding plugin dependencies. As we all know, some plugins require other plugins to work. Without these “other” plugins, you will likely encounter issues, or your website will flat-out refuse to work. It can be a hassle to read through pages of documentation to find what plugins you need so that one specific plugin would work.<\/p>\n\n\n\n
Fortunately, the new Requires Plugin<\/em> header will allow developers to specify what plugins are required for their own to function.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-required-plugins.png\")
<\/figure>\n\n\n\nIn addition, users can see those dependencies in the Plugins<\/strong> section of the dashboard.<\/p>\n\n\n\n
![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2024\/04\/fastcomet-wp-6-5-required-plugins-list.png\")
<\/figure>\n\n\n\nAdditional Changes<\/h2>\n\n\n\n
Last, but absolutely not least, there are a few additional changes that are not as significant as the ones above, so we have bunched them all here with links to their complete documentation. Here they are!<\/p>\n\n\n\n
- \n
- Classic Themes – <\/strong>With 6.5<\/a> non-block themes (classic themes), will benefit from some of the features introduced to the Site Editor. Since classic themes don’t use a theme.json<\/em> file, if you opt for the appearanceTool<\/em> support, it will enable the border<\/em>, color<\/em>, spacing<\/em>, and typography<\/em> design features;<\/li>\n\n\n\n
- AVIF Support – <\/strong>WordPress 6.5 also introduces support<\/a> for the advanced AVIF image format<\/a>. It boasts better image quality at a higher compression ratio when compared to WebP<\/a>. AVIF images can be uploaded like any other from the Media Library section of the website;<\/li>\n\n\n\n
- Site and Post Editor Unification – <\/strong>The latest release aims to narrow the gap<\/a> between the two editors and move one step closer to unifying them;<\/li>\n\n\n\n
- Performance Improvements – <\/strong>Users will be happy to hear that WordPress 6.5 brings over 100 improvements<\/a> to performance. Loading and input processing times are now at least two times faster than how they were before;<\/li>\n\n\n\n
- Block Hooks –<\/strong> WordPress 6.4<\/a> introduced Block Hooks. They were available only for templates, template parts, and patterns without user modifications. That changes with 6.5<\/a>, allowing Block Hooks to be used with modified templates, template parts, and patterns.<\/li>\n<\/ul>\n\n\n\n
- AVIF Support – <\/strong>WordPress 6.5 also introduces support<\/a> for the advanced AVIF image format<\/a>. It boasts better image quality at a higher compression ratio when compared to WebP<\/a>. AVIF images can be uploaded like any other from the Media Library section of the website;<\/li>\n\n\n\n
- Classic Themes – <\/strong>With 6.5<\/a> non-block themes (classic themes), will benefit from some of the features introduced to the Site Editor. Since classic themes don’t use a theme.json<\/em> file, if you opt for the appearanceTool<\/em> support, it will enable the border<\/em>, color<\/em>, spacing<\/em>, and typography<\/em> design features;<\/li>\n\n\n\n
- You can rename almost all blocks<\/a> in the List View<\/strong> except these ones:\n
- Patterns – <\/strong>The Patterns page itself currently supports only the Grid layout, but the Template Parts page has both List and Grid layouts;<\/li>\n\n\n\n
- Buttons – <\/strong>text, URL, linkTarget, rel;<\/li>\n\n\n\n
- bindings <\/strong>– An object containing one or more bindings.<\/li>\n\n\n\n
- Plugin Dependencies<\/a><\/li><\/ul><\/li>
- List View enhancements<\/a><\/li>
- Shadow Support for More Blocks<\/a><\/li>
- Block Bindings API<\/a><\/li><\/ul><\/li>
- Interactivity API<\/a><\/li>