What’s new for developers? (January 2024)

It’s a brand new year, which is a time for new and wonderful things in the WordPress space. And I’m looking forward to seeing what you all build in 2024. I’m also excited about sharing new things as they land in WordPress and the Gutenberg plugin.

If you haven’t already done so, give the Developer Blog’s 2023 overview a read. It covers everything we published last year, the revamped blog design, and more.

As usual, I will be covering the features and other changes from the past month in this post. Unlike past monthly roundups, this one will have fewer items of interest. Things slowed down in the WordPress development community over the holidays. I hope that all of our contributors got plenty of rest and are coming into 2024 refreshed and ready to take on new challenges.

Let’s go ahead and look at all the changes you need to know about from the past month. Be sure to test these while running WordPress trunk and the latest version of the Gutenberg plugin.

Highlights

Developer Resources updated design

Alongside the redesign of the Developer Blog, the entire Developer Resources site has been overhauled for a more cohesive and enjoyable reading experience. The project took months of work from contributors to finish, but it was well worth it. It showcases the improved documentation that the Docs Team and others have been working on in a way that you haven’t seen before out of the WordPress project.

Data Views: Template management

The template management screen was moved from experimental to stable in Gutenberg 17.4. This should make it easier for you to manage your theme’s templates. The feature, a part of the larger data view tables focus, still needs loads of testing before it officially lands in WordPress.

You can find the template management screen by navigating to Appearance > Editor > Templates > Manage all templates in your WordPress admin.

Background size and repeat features

WordPress 6.4 introduced a new background feature that you can opt into in your themes. It currently only works for the Group block and is limited to adding an image.

Gutenberg 17.4 added background size and repeat options, bringing the feature one step closer to completion. But there are several followup tasks to really make it shine.

Plugins and tools

Node.js and npm versions updated

WordPress and Gutenberg have been updated to use newer versions of Node.js and npm. To contribute to either, you should ensure that you are running at least these versions:

Node.js: 20.10.0
npm: 10.2.3

Read the announcement post for more information about this change and what it means for future development.

Interactivity API public release and bug fixes

The Interactivity API, a standard for adding front-end functionality to blocks, is planned for a WordPress 6.5 release. This means that you will soon be able to use it in your plugins for building cool interactive elements for website visitors.

There is still a lot of work ahead, but you can follow its progress via the Public 1.0 Version tracking ticket.

A couple of bug fixes to the Interactive Template landed in the Create Block package:

All files are added to the generated plugin ZIP.
Crashes are prevented when the Gutenberg plugin is not installed.

Groundwork for a potential block supports API

A Gutenberg 17.3 update refactored hooks to use a single filter for editor.BlockEdit. This is a foundational change that lays the groundwork for a potential Block Supports API. If implemented, the API would allow describing the behavior and rendering block features that use support features via a single registerBlockSupport() call. Perhaps this could one day also lead to custom “block supports” implementations.

HTML API updates

Also in the pipeline for WordPress 6.5 are additional improvements to the HTML:

The HTML Processor now supports H1-H6 tags.
Explicit handling or failure has been added for all tags.

WordPress 6.5 will ship with a new Plugins link in the toolbar. It will sit under the top-level item that shows the site title and point to the Plugins admin screen. It is unlikely to impact your work. It’s just a nice-to-have addition—a little love thrown to plugin authors.

Post Template Panel shared between editors

Since Gutenberg 17.3, the Template panel in the document settings sidebar is shared between the Post and Site Editor. This will help to unify the interfaces for both developers and users.

Component updates

There were several noteworthy component updates that you should look at if you use them in your work:

Tabs:
- id was replaced with the new tabId prop on sub-components that use it.
- Individual tabs are now linked to the correct tab panels.
- Hidden content is now only rendered when a tab panel is selected.
DropdownMenuV2:
- Styles were tweaked to ensure the suffix width doesn’t collapse.
- Fallback styles were added for browsers that do not support subgrid.
CustomSelect:
- Uses WordPressComponentsProps so that it’s possible to add HTML attributes to CustomSelect and CustomSelectItem.

Themes

Experimental partially synced patterns

Developers have been asking for partially synced patterns for a while. It’s a feature that would allow you to create patterns with locked and updateable designs but content that users could edit. Unlike synced patterns (formerly reusable blocks), the content would be unique to each instance of the pattern.

An experimental version of this was added in Gutenberg 17.3 and can be enabled via the Synced patterns partial syncing option under the Gutenberg > Experiments screen in your WordPress admin.

Disable layout size controls from theme.json

Setting the layout content and wide sizes via the UI can often be a confusing experience for users. And giving them control over customizing the width can conflict with a well-defined design system.

As of Gutenberg 17.2, you can disable this control by setting the settings.layout.allowCustomContentAndWideSize property to false in theme.json. You can also define this at the block level.

Dimensions controls for the List Item block

Margin and padding support for the List Item block landed in Gutenberg 17.3. It’s always nice to see additional support added for more customizability.

Gutenberg 17.3 introduced a Gravatar icon that can be used in the Social Icons block. Given how much WordPress already integrates with Gravatar out of the box, it’s a surprise that this hadn’t happened a lot sooner.

This new icon should not negatively affect your themes. But, as with any addition of a new block or block variation, it’s always good practice to test it.

One update that could impact your theme designs is a CSS update to both the list item and the link surrounding the Social Icon. Listed as a bug fix to prevent theme styles from distorting the icons, the new CSS could break custom style rules. Be sure to test this with your themes before WordPress 6.5 lands.

For the Mail variation of the Social Icon block, email addresses are obfuscated in Gutenberg 17.4. It won’t keep all the spammers at bay, but at least it makes it a little harder for them.

Classic themes have gotten a little love in the last few Gutenberg releases, and you should see these changes land in WordPress 6.5:

Color palette presets will always be output when opting into appearance tools support.
Default duotone styles are now supported.
Layout classes are defined on the Group block’s legacy inner container, ensuring that block gap styles work.
Sticky positioning should work in the editor when opting into appearance tools support.

Typography sizes order

When you add custom font sizes via theme.json, they will show up in the Typography section as options for your theme users. A Gutenberg 17.3 bug fix ensures that all font sizes are consistently output in the same order. Now, core sizes will always appear before theme-defined sizes.

This is likely not ideal for theme authors, who would generally prefer that users select from the theme’s sizes. There is an open pull request that would allow you to remove the core sizes from the UI control.

Bug fixes

A couple of other noteworthy bug fixes not mentioned elsewhere are:

Ensure that layout classnames match in the editor and front end.
Duplicate style rules were removed when using background image support.

Resources

Developer Hours

There was one Developer Hours session in December that covered modern WordPress development with the wp-scripts package. If you missed out on joining live, you can catch the replay on WordPress.tv.

Developer Blog

In the past month, two posts were published on the Developer Blog:

Props to @bph for reviewing and co-wrangling these resources and @ndiego and @webcommsat for reviewing the post.

What’s new for developers? (January 2024)