It’s hard to believe that it’s been over a month since the dev-focused WordPress 6.5 shipped. At this point, work toward version 6.6 is well underway, and many of the changes in the past few weeks have iterated on the new APIs from the last release.
The WordPress 6.5.3 maintenance release also landed on May 7, 2024. The update fixed 12 bugs in Core and nine in the Block Editor. Be sure to upgrade if you haven’t done so already.
But let’s hop into the new stuff. As usual, make sure to test the below changes against WordPress trunk and the latest version of the Gutenberg plugin. The main goals of these monthly roundups are to help you stay updated and prepare for the next WordPress release.
Table of Contents
Highlights
The road to WordPress 6.6
A week ago, the WordPress 6.6 roadmap was published on the Make Core blog. Many of the plans for the upcoming release, which is expected to ship on July 16, 2024, appear to focus on the user experience, themes, and refinements of existing APIs.
Some things to look forward to include:
- Continued work on Data Views.
- Mixing and matching color and typography sets defined via global style variations.
- Synced patterns, which were punted from the 6.5 release.
- Expanded block style variations support, including a dedicated
/block-stylesdirectory for themes. - Enhanced grid support for blocks and the Grid variation for the Group block.
- Shadow tools, negative margin support, aspect ratio presets, and more.
Also check out the summary of the latest Hallway Hangout on what’s coming in Gutenberg, which includes several demos of in-progress features.
Color and typography style variations
On a personal note, one of the features that I’m most looking forward to is expanded global style variations. If you build themes, I hope this excites you just as much.
Gutenberg 18.3 introduced a new method of defining color or typography-only global style variations. When you define variations in your theme’s /styles folder with only color or typography styles, they won’t appear as full variations. Instead, they appear under the new Colors and Typography panels in the Site Editor sidebar.
Community blueprints for Playground
There is now an official repository for community-created blueprints for Playground. The first 10 blueprints are available in the Blueprints Gallery, providing live demos of various WordPresss setups.
The initial gallery has a wide variety of blueprints to try, but they primarily serve as examples to learn the system. The goal is to get you to start creating your own blueprints to showcase via Playground. And just as a reminder, you can add blueprints to your plugins in the Plugin Directory to give users a live preview.
Plugins and tools
HTML API progress report
A progress report on the HTML API was recently published, which includes an overview of ongoing internal improvements and the next steps. Future updates should include:
- Reading and modifying block attributes
- Full HTML support
- Bits/Tokens (i.e., Shortcodes 2.0)
Stabilizing experimental components
WordPress has over two dozen experimental Editor components that are on their way to being stabilized. For many of these components, this is long overdue as it has held some developers back from building with the Core tools. Most of these should be ready to use by the time WordPress 6.6 is released.
New and updated components
In other component news, the last couple of Gutenberg releases included some changes you should keep an eye on:
- A new
TextAlignmentControlcomponent shipped with Gutenberg 18.3 in preparation for block-level text alignment support in global styles. - Gutenberg 18.2 added
disabledprop support for item types in theCustomSelectControlV2component.
Editor unification updates
Work continues on the project to unify the publishing functionality between the Post and Site Editor. The following slots are now available across editors:
PluginSidebarPluginPostStatusInfoPluginMoreMenuItemPluginSidebarMoreMenuItemPluginDocumentSettingsPanel
Interactivity API updates
The Interactivity API, which became public in WordPress 6.5, continues to see improvements. Here are a few changes you should be aware of that shipped in Gutenberg 18.2:
- You can now declare multiple event listeners with
data-wp-onfor the same event type on the same element (this was backported to WordPress 6.5.3). - When
SCRIPT_DEBUGis enabled, thepreact/debugpackage will be included, allowing you to use Preact Devtools to debug your interactive blocks. - The Query block has been updated to permit third-party interactive blocks.
Other noteworthy changes
Gutenberg 18.3 includes a couple of other updates you should pay attention to:
- The bundled React version has been updated to 18.3.1. This is in preparation for the upcoming React 19 release.
- Gutenberg will trigger a console warning when you register a block variation without a name.
Themes
Default font sizes setting triggers theme.json upgrade to version 3
Gutenberg 18.3 introduced a new settings.typography.defaultFontSizes property that will let you disable the default font sizes from being selectable in the user interface. This fixes a longstanding problem where the Core sizes were shown alongside theme-registered sizes.
This change also bumped the theme.json schema to version 3. Be prepared to update your themes when WordPress 6.6 rolls around to continue using the newer theme.json features.
Layout updates
Several updates to layout and related styles have found their way into Gutenberg 18.2 and 18.3. Any CSS changes to Core code have the potential to break your theme designs, so be sure to check your designs against these and report any issues before WordPress 6.6 ships:
- Layout style selectors are now wrapped in
:where(), reducing their specificity. - For themes without a
theme.jsonfile, the flow and constrained layout rules are no longer output. - The auto-margin rule that centers blocks like Gallery and Quote in classic themes has been restored.
- Negative margins are now applied to full-width nested blocks when placed inside a container with custom padding.
- Semantic layout classes are now always correctly added in the editor.
Aside from these under-the-hood changes, a new Row control has been added to blocks with grid layout when in manual mode.
Text alignment block support
Gutenberg 18.2 introduced a new typography.textAlign support property for block developers. The eventual goal is to migrate this feature to Core blocks that are using ad-hoc text alignment and support it via global styles.
Post classes in the editor
As of Gutenberg 18.3, you should now be able to use the standard post classes (as returned by the get_post_class() function) in the editor. This is only shown when using the Query Loop block. But it brings a long-used classic feature into the editor and should make it easier to consistently style posts using contextual classes.
Is it time for post format styles to make a proper comeback?
Block fixes
Gutenberg 18.2 fixed issues across several blocks that should alleviate some theme design headaches:
- The wrapper
<div>was removed from the Latest Posts block in the editor, making it easier to consistently style it. It also adds some missing classes to the front end. - The Navigation block now shows the
.current-menu-itemclass for post type archives. - Paragraph support was re-added to the Post Title block’s
levelattribute at the block markup level, but there is no UI support for it. - The CSS specificity of the Pullquote block’s padding and Separator block’s border styles was reduced to avoid conflicting with global styles.
Background image updates
Gutenberg 18.1 added the initial theme.json support and a UI control for a top-level site background image. As part of some follow-up tasks to round out the feature, Gutenberg 18.2 included a couple of UI updates:
- The default background size value as defined in
theme.jsonnow shows in the controls in the Styles interface. - Some of the text labels were updated to avoid potential confusion between the background image and color.
Full-page, client-side navigation experiment
An experimental setting for full-page, client-side navigation was added to Gutenberg 18.3 as part of the Interactivity API iteration for WordPress 6.6. You can test it by visiting Gutenberg > Experiments in your WordPress admin and turning it on.
Keep in mind that this is an early experiment and will likely break pieces of your theme design. Please report any issues that you run into. You can follow the progress of this feature on this tracking issue.
Negative margin support
While negative margins have long been supported via theme.json and custom spacing presets, Gutenberg 18.3 made them available through the UI controls in the editor. Now is a good time to begin testing this feature for issues with your designs because WordPress 6.6 will open it up to your theme users.
Default theme updates
If you generally use the default themes as starting points for your own projects, be sure to check out these changes in case they are relevant to your themes:
- Twenty Fourteen: Fixed a font size issue with the Pullquote block.
- Twenty Twenty-One: Added a
wp_is_error()check to prevent a fatal error on PHP 8.0+. - Twenty Twenty-Two: The header was updated to better support the Block Hooks API.
Other notable changes
A few other changes, which are mostly related to UI, have landed in the last couple of Gutenberg releases:
- The control for renaming blocks has been removed from the Advanced inspector panel. The goal is to remove duplicate controls (it’s also available through the block toolbar and List View).
- The hardcoded styles for the Group block example preview have been removed, which should now let your custom Group styles work correctly.
- Classic themes now show an Appearance > Patterns menu item in the admin. This change also removes the Template Parts item.
- The Site Editor now supports creating starter patterns from the UI.
Resources
WordPress News
On the main WordPress News blog, two developer-related posts were published that you should catch up with if you missed them:
Developer Hours
There were two new live sessions that covered major WordPress 6.5 features in April: the Interactivity API and Block Bindings API. They are available via YouTube:
- Building custom blocks in WordPress with the Interactivity API
- Creating dynamic content in WordPress with Block Bindings and Custom Fields
The next Developer Hours event will be Tuesday, May 14, 2024 and will cover meta box alternatives. Sign up to see the event live!
Developer Blog
Four new tutorials landed here on the Developer Blog in the last month. As always, there are more on the way, but take some time to catch up if you haven’t read these yet:
- A first look at the Interactivity API
- Creating an external project template for create-block
- How to use WordPress Playground for interactive demos
- Building a book review site with Block Bindings, part 1: Custom fields and block variations
Props to @ndiego and @juanmaguitar for reviewing this post.
Leave a Reply