WordPress.org
Get WordPress
WordPress.org

WordPress Developer Blog

What’s new for developers? (March 2024)

What’s new for developers? (March 2024)

By Nick Diego
, ,

The release of WordPress 6.5 on March 26th is fast approaching, making now the perfect time to start testing and exploring the many new features.

The first release candidate (RC1) was released on Tuesday, March 5, signaling the final stages of the 6.5 development cycle. This will be the final public version unless critical issues emerge that need fixing in subsequent release candidates (RC2 or RC3). 

Whether you’re a plugin or theme developer, build sites for clients, or maintain your website, testing RC1 is vital. Not only will you be able to start exploring the new enhancements, but rigorous testing will help ensure stability and backward compatibility while ironing out any potential issues before the official launch.

Given the scope of the upcoming release, knowing what to test can be challenging. This article will help guide you along with the official Field Guide (coming soon). If you do find an issue, please make sure to report it on GitHub or in Trac. 

While I’ll primarily be focusing on features in WordPress 6.5, development never stops. Contributors are already laying the groundwork for future improvements in WordPress 6.6 and beyond. It’s impossible to cover everything, but you should leave with a solid understanding of what to expect in the upcoming versions of both WordPress and Gutenberg. If you haven’t already, I also encourage you to read last month’s “What’s new for developers?” article.

As always, ensure you are running WordPress trunk and the latest version of the Gutenberg plugin in a development environment to test the following updates.

Table of Contents

Highlights

Interactivity API

The Interactivity API was officially merged into Core and will soon be publicly available in WordPress 6.5. The team has been hard at work getting the API ready for release, and a few notable changes were made recently:

Much of the focus has been on improving the documentation and moving it to the Block Editor Handbook. More work is planned over the next few weeks.

To learn more about the Interactivity API, check out the latest WP Briefing Episode or attend the next Developer Hours event on Tuesday, March 12. The session recording will be uploaded to WordPress.tv and YouTube.

Grid layout variation

The Grid variation of the Group block has been significantly improved in Gutenberg 17.8 and is now available without needing an experimental flag. It offers two layout options: “Auto,” which automatically creates rows and columns with a minimum item width, and “Manual,” where you can set a specific number of columns. You can also define column and row span in grid children.

Though not part of WordPress 6.5, start testing to discover the design possibilities this Group variation unlocks.

Font Library

The Font Library, initially planned for WordPress 6.4, will finally be included in WordPress 6.5. It simplifies typography management on your site, allowing you to add and manage fonts just like media files, irrespective of the theme you’re using. You can easily install both local and Google Fonts, and the system is designed to be extendable, enabling you to add custom font collections.

As designed, uploaded fonts will be stored in a fonts directory within wp-content. There was some debate on the merits of this location, with uploads being an alternative suggestion. Project leadership stepped in and decided that wp-content will be used.

Additionally, a few noteworthy enhancements were made in the past Gutenberg releases:

Data Views project

The Data Views project continues to evolve with each Gutenberg release, and WordPress 6.5 will include the initial implementation. Key recent improvements include the introduction of bulk actions in grid view, a redesign of filters, and the default display of the sync status filter on the patterns screen.

As shown in the video above, you can test this new feature in the Site Editor by navigating to the pattern, template, template part, or page management screens.

Outreach program

In January, a proposal was introduced to shift the focus of the FSE Outreach Experiment towards a wider outreach initiative aimed at developers and designers. The transition began last month with a Hallway Hangout, during which contributors discussed the next steps.

As a result, the Slack channel was renamed from #fse-outreach-experiment to #outreach, and a new GitHub group, WordPress/outreach, was established. 

Contributors seeking extra feedback or testing for their pull requests (PRs) can now ping @WordPress/outreach for assistance. Those interested in contributing to this initiative can request to join the group by messaging in the #outreach Slack channel.

Plugins and tools

Proposal for Core blocks in the Plugin directory

Matías Ventura, the lead architect of Gutenberg, began a discussion in the Gutenberg repository about developing Core blocks within the Plugins directory. This approach addresses the demand for specialized blocks that may not fit directly into WordPress Core. 

The idea is for these blocks to be created and maintained by WordPress contributors in the Gutenberg repository yet made available for insertion via the Block directory, a subset of the Plugins directory. If this topic interests you, please review the proposal and share your feedback.

Plugin dependencies

As mentioned in last month’s article, plugins can specify required dependencies through a Requires Plugins header starting with WordPress 6.5. The recently published merge announcement post has all the details. 

The one notable change is that the functionality for automatically deactivating plugins when their dependencies are unmet has been omitted due to community concerns.

Script Modules API

Work has continued on the Script Modules API ahead of its debut in WordPress 6.5. One of the biggest changes was the renaming of the viewModule property to viewScriptModule in block.json. If you have blocks currently using viewModule to enqueue module scripts, everything will continue to work, but the property is now deprecated, and you should switch to viewScriptModule.

The interactive template for the @wordpress/create-block package has also been updated to reflect these changes. 

If you’re currently using JavaScript modules in your WordPress projects or are interested in the Interactivity API, make sure to review the comprehensive Script Modules in 6.5 post for a deep dive into all the technical specifics.

Block Bindings API

The Block Bindings API is one of the most exciting new features in WordPress 6.5, and some final touches were added in the last few weeks. The most important change is that editing bound blocks is now disabled by default. 

For more information on Block Bindings, check out the introductory tutorial here on the Developer Blog. 

The previous month’s article highlighted that blocks could specify their allowed inner blocks using the allowedBlocks property in block.json and that this property can be modified with the blocks.registerBlockType hook. This enhancement in WordPress 6.5 allows developers to include almost any block within the Navigation block. However, since the Navigation block uses an unordered list, custom blocks might not be properly wrapped in an <li> element.

To address this, Gutenberg 17.7 introduced the block_core_navigation_listable_blocks filter. This filter ensures custom blocks used in Navigation blocks are correctly wrapped in <li> elements for proper rendering and accessibility. If you’re adding custom blocks to menus without an <li> wrapper, the following code snippet can be used to apply it automatically.

function add_icon_block_to_needs_list_item_wrapper( $blocks ) {
    $blocks[] = 'example-block/custom-icon';
    return $blocks;
}
add_filter( 'block_core_navigation_listable_blocks', 'add_icon_block_to_needs_list_item_wrapper' );

Plugins that modify Code blocks

In Gutenberg 17.1, an update normalized line breaks to serialize as HTML elements, which inadvertently broke several syntax highlighter plugins that directly modify the output of Code blocks. Code that should be highlighted and displayed across multiple lines appears on a single line instead.

There is an open PR that resolves the line break issue and is slated for WordPress 6.5. However, any valid HTML should be correctly handled in your plugin when extending the Core Code block. For those using PrismJs for syntax highlighting, there is an extension you can use to preserve markup. Refer to the original issue to learn more.

Footnotes meta registration

WordPress 6.5’s registration priority for footnotes meta has been increased from 10 to 20. This adjustment ensures that footnotes are registered for the majority of post types, including custom ones, which are typically registered at priority 10. For those with specific needs requiring changes to the footnotes meta, it’s important to use a priority above 20 to ensure your modifications are applied.

Starting with WordPress 6.5, you will be able to use symbolic links when registering a block using a block.json file and register_block_type().  Before this update, while blocks could be registered using symlinks, the editorScript and editorStyle files specified in block.json would fail to enqueue. 

Seven years ago, an issue was opened in Trac, noting that while Audio and Video attachments can have featured images, featured_media was not returned by the REST API wp/v2/media endpoint. This is now fixed in WordPress 6.5.

Storybook updates

If you are unfamiliar with the Storybook, it’s an excellent reference for user interface components developed in WordPress packages, especially the @wordpress/components package. You can use these components in your own plugins and Editor extension projects. 

The Storybook is routinely updated with each Gutenberg release, and recently, badges were added that make it easier to determine which components are “private” and should not be used in custom development.  

PHP autoloader

In early February, a proposal to add a PHP autoloader to WordPress Core was put forward. This complex topic dates back to a ticket created eight years ago. If you’re interested, please read the proposal and share your thoughts. Your feedback is crucial for determining the project’s future direction.

Themes

Synced Pattern Overrides

This feature, initially set for WordPress 6.5, has been delayed to version 6.6 due to unexpected issues arising from a recent update. Additional time is required to identify and resolve these problems.

Synced pattern overrides continue to see enhancements. The most recent updates in Gutenberg 17.7 include a button in the block toolbar that allows users to reset a pattern, and support was added for the linkTarget and rel attributes in Button blocks.

Additionally, the data structure for pattern overrides was changed. Overrides were previously stored using the overrides attribute. This has been updated to the content attribute, which will provide more flexibility in the future. If you have been experimenting with this feature already, any existing patterns that use the overrides attribute will continue to work. 

If you are interested in learning more about this feature in general, ensure you’re following the primary issue on GitHub.

Shadow support

In WordPress 6.5, you can add shadows to Columns, Column, and Image blocks directly from the Editor. While refinements were made, this feature was previously restricted to Button blocks. Notably, the Shadow control is now located in the Border panel, which is renamed “Border & Shadow” for blocks that support the feature. 

WordPress does provide a set of default shadows, but you will probably want to add your own. If you need a refresher on defining custom shadows in theme.json, check out the corresponding article here on the Developer Blog. You can also test the following code snippet. 

{
	"version": 2,
	"settings": {
		"shadow": {
			"presets": [
				{
					"name": "Small",
					"slug": "sm",
					"shadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
				},
				{
					"name": "Medium",
					"slug": "md",
					"shadow": "0 4px  10px 0 rgba( 0, 0, 0, 0.3 )"
				},
				{
					"name": "Large",
					"slug": "lg",
					"shadow": "0 8px  15px 0 rgba( 0, 0, 0, 0.3 )"
				}
			]
		}
	}
}

Restricting Template Part and Content blocks

Starting in Gutenberg 17.8,  Template Part and Content blocks will be hidden within the Site Editor in some contexts. This is part of an effort to unify the Post Editor and Site Editor experiences while removing the blocks when they are unnecessary, such as in-page content.  You can still add Content blocks within Query blocks as expected. 

When you register patterns in a theme, you can specify their association with certain templates using the Template Types property or with template parts using the Block Types property. For example, you might have multiple patterns designed for Headers and Footers.

In WordPress 6.5, patterns linked to a specific template or template part will be displayed in the Settings Sidebar while editing them. This enhancement streamlines the editing process, allowing users to quickly change any template’s design. You can explore this feature with the Twenty Twenty-Four theme, which includes multiple patterns tailored to specific templates and parts.

Background image support

Background image support in Group blocks will be improved in WordPress 6.5. Recent updates include the ability to set the background position and size. 

With this enhancement, the appearanceTools property in theme.json will now opt-in to backgroundSize. The documentation has been updated to reflect this change, and the JSON schema has also been updated for the various background supports. 

Pattern export and import

In WordPress 6.5, you can bulk export patterns directly from the Site Editor, making it much easier to transfer patterns between sites. Bulk import is not yet available, but given the amount of interest, I expect it’s only a matter of time. 

AVIF image support

In WordPress 6.5, you can upload, edit, and save images in the AVIF (AV1 Image File) format, just like other supported image types like JPEG or PNG. The AVIF format offers many benefits, such as image quality and compression.

AVIF image support assumes your web server has the necessary image processing libraries. You can check this in Site Health under the “Media Handling” section. Learn more in the official documentation.

Global styles loading order

WordPress 6.5 will optimize the loading sequence for Global Styles on the front end. This work allows for the future reduction of specificity in block global styles. The order will now be:

  • Block library styles
  • Base global styles (element styles, etc)
  • Block-specific global styles

This loading order applies whether should_load_separate_core_block_assets is active or not. When this setting is enabled, Core block global styles load immediately after the base global styles within the global-styles-inline-css tag, ensuring consistency with the Editor iframe and when the setting is disabled. 

As a reminder, with should_load_separate_core_block_assets enabled, only styles related to the blocks on the page are loaded, enhancing loading efficiency by avoiding unnecessary styles.

Additional typography controls for elements

Text, caption, and button elements in Global Styles were missing controls for Letter Spacing and Letter Case (text-transform). This is now fixed in WordPress 6.5.

A fix for theme font sizes

If your theme specifies font sizes in theme.json using the same slugs as Core, you may have encountered problems with recent versions of Gutenberg. Specifically, Gutenberg 17.6 had a bug that caused Core font sizes to override theme-defined sizes in the Editor and on the front end. This issue has been resolved in Gutenberg 17.8 and WordPress 6.5.

Additional block fixes

Gutenberg 17.8 introduced several block improvements worth noting. 

Author-related blocks (Author, Author Name, and Author Biography) now display correctly on the Author Archive template, even if the author has no posts.

The Spacer block’s orientation now matches the direction of its container, correcting a previous issue where it was always displayed vertically in flex layout containers like Row or Navigation blocks.

Two bug fixes were made to the Cover block. First, you might have noticed a bug in Chrome v122 where the image would not respect the border radius set on the block. This has now been fixed. Second, the minimum height setting now properly resets when an aspect ratio is selected.

Resources

Dev Notes of note

Developers’ notes, or Dev Notes for short, are published on the Make Core blog ahead of each WordPress release and provide a technical overview of new functionality and features. With WordPress 6.5 coming soon, new notes are published almost daily using the tag #dev-notes-6-5. Here are a few that caught my eye: 

Developer Hours and Hallway Hangouts

It’s been a busy few weeks for Developer Hours and Hallway Hangouts. Check out the recaps and recordings below: 

Developer Blog

Check out the most recent tutorial here on the Developer Blog if you haven’t already, and stay tuned for more content showcasing features coming in WordPress 6.5.  

Props for review @greenshady and @eidolonnight

Categories: , ,
Tags:

One response to “What’s new for developers? (March 2024)”

  1. joynall Avatar
    joynall

    Thanks Nick Diego

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Have an idea for a new post?

Learn how to contribute

Share your knowledge with fellow WordPress developers.

Review tips and guidelines

Everything you need to know about writing for the Blog.

Subscribe to the Blog

Join 1,490 other subscribers