What’s new for developers? (August 2024)

Last month was pretty exciting with the release of WordPress 6.6 “Dorsey.” But if I’m being entirely honest, I’m a bit biased. As a themer, it was nice to see a release that was heavily focused on the theme-building experience. I’m certainly not complaining, at least.

A patch release, WordPress 6.6.1, was released a week later. It included 16 total bug fixes. So if you haven’t upgraded already, now is a good time to do so.

Now it’s time to set our eyes forward and start focusing on WordPress 6.7 and beyond. This monthly edition won’t be as exciting as some because the release cycle is just getting underway, but there are already some nice quality-of-life improvements included in the latest Gutenberg plugin.

As always, this post will contain a list of development-related changes from the past month. Most of them are only included in WordPress trunk or Gutenberg 18.8 and 18.9.

Highlights

Learn WP redesign

Learn WordPress recently launched with a spiffy new design. It’s a refreshing overhaul that brings it inline with other design updates for WordPress.org, making it easier to navigate based on what type of WordPress user you are.

Read more about the update via these two announcements:

• A Brand-New Way to Learn WordPress
• Meet the new Learn WordPress

And while you’re perusing the site, be sure to check out the new Intermediate Theme Developer Course.

Offline mode and PWA support for Playground

WordPress Playground now supports “offline” mode, which means that when you visit playground.wordpress.net, the data for your Playground instance will be cached in your browser. This means that you can continue working on your project even without an active internet connection.

You can also install Playground on your device and launch it as a Progressive Web App (PWA). This means that you can open Playground directly from your device’s home screen, just like any other app.

Read more about these features and their limitations in the announcement post.

Loads of extra block supports

Contributors have been actively polishing the design experience by fleshing out the design tool support for various Core blocks. The following table lists which blocks have been updated in Gutenberg 18.8 and 18.9 and which feature support was added:

Block	Feature Support
Buttons	border, color, padding
Gallery	border
Group	shadow
Heading	border
Image	margin
Latest Comments	color
List Item	color
Media & Text	border
Paragraph	border
Quote	border, spacing
Search	margin
Social Links	border
Term Description	border

Plugins and tools

Define block variations via a file

Gutenberg 18.8 introduced support for referencing a PHP file in block.json for registering block variations. To do this, you must assign the file path as a value for the variations property:

{
	"variations": "file:./variations.php"
}

Previously, you could only define a variations JSON object, but this change lets you register the variations on the server-side. The PHP file must return an array of variations to register.

New DataForm API

Gutenberg 18.8 introduced a new DataForm API, which is a part of the larger effort to reduce duplicated form code with Data Views. Currently, the new API is only used for the duplicate page action in the Site Editor.

Experimental local attributes

A new local value is now supported for the __experimentalRole property when defining a block attribute, essentially allowing temporary attributes. The current use, introduced in Gutenberg 18.8, adds a method of storing temporary URLs for images as they are uploaded (it’s possible for a user to save before an image is fully uploaded).

Block Bindings API updates

A few changes have landed in the last couple of Gutenberg releases for handling block bindings and custom fields:

• Editing post meta nested inside the Query Loop block is now disabled.
• Attachment IDs are dynamically generated when there is bound data for the Image block, ensuring extenders have the correct ID.
• Custom binding sources are now bootstrapped on the server so that their properties can be used, such as showing the label in the Editor UI.

Component updates

Several Core components received minor updates in the last couple of releases of Gutenberg:

• DateTime:
  • A new TimeInput component was added and integrated into the TimePicker component.
  • A label prop was added to the TimeInput component.
  • A dateOrder prop was added to the TimePicker component to sort by day, month, and day.
• ToolbarButton: The isDisabled prop was deprecated and merged with disabled.
• Tooltip: Custom class name support was added.
• SelectControl: A minimal variant was added, which creates a borderless dropdown that auto-adjusts its width to the widest option.

Themes

Background image attachment support added

You can now define background-attachment values for blocks that support background images. In the UI, this appears as a toggle switch to enable a fixed background (the default would be scroll). You can also set this for background images defined in theme.json via the background.backgroundAttachment style property.

Query Loop block inheritance updates

Several changes in Gutenberg 18.9 sought to correct how inheritance works when using the Query Loop block:

• The attributes for the default Query Loop variations were removed, which originally had set the inherit attribute to false.
• The Posts Lists variation was removed because its settings did not match what users would normally expect when inserting it.
• The posts-per-page setting will also inherit its value from template settings changes.

New UI for editing font-size presets

Font sizes defined by the theme can be edited via the Styles UI as of Gutenberg 18.9. For the most part, this is a user-facing change, but it’s also useful if you prefer to build block themes from the Site Editor.

Root padding style fix for wide-aligned blocks

During the WordPress 6.6 beta, an issue with root/global padding was introduced that omitted the padding from nested blocks with wide alignment. This was fixed in Gutenberg 18.8 and backported to WordPress 6.6.

Global styles updates and fixes

A couple of late fixes were backported to WordPress 6.6 and 6.6.1 to fix issues with changes found during or after the previous release cycle:

• One fix ensures the root/body selector does not use the new :root:where() wrapper.
• Top-level element selectors (those without classes, such as headings) are also no longer wrapped in :root:where().

Other notable bug fixes

There are also several noteworthy fixes that should improve your theme design experience:

• The Navigation block’s CSS specificity was reduced for nested links text-decoration styles (this was backported to WordPress 6.6).
• The Comment Form block’s button CSS specificity has been reduced, allowing theme.json button element styles to override it. The same treatment was applied to the Search block’s button.
• The CSS for lists with backgrounds now only targets the List block instead of general lists.
• The Comment Form block’s CSS specificity was reduced to allow for simpler overrides via theme.json.
• Aspect ratio controls now correctly appear for Image blocks nested in a grid.

Resources

Learn WordPress

Alongside the overhauled redesign of the Learn WordPress site, there is a brand new course this month:

• Intermediate Theme Developer Course

Developer Hours and Hallway Hangouts

Two live sessions were held in the last month covering topics for both plugin and theme developers:

• Developer Hours: Do you really need a custom block? Let’s explore alternatives
• Hallway Hangout: Section styles and other block style variation updates

Developer Blog

If you haven’t already read them, now is a good time to check out the latest blog posts right here on the Developer Blog:

• Registering custom aspect ratios in WordPress 6.6
• Building a card layout with a “hover reveal” effect
• Mixing and matching styles, colors, and typography in WordPress 6.6
• JSON Schema in WordPress

Props to @bph for co-wrangling these resources and @ndiego and @welcher for feedback and review on this post.