As the WP Tavern states in their latest article on the upcoming WordPress 5.4 release, the theme and plugin developers should be well aware of the changes.
There are several changes that theme authors will need to closely follow and test. WordPress 5.4 introduces a few extra theme features. There are several markup-related changes that could break theme designs on the front end and in the block editor. Unfortunately, for theme authors who want to support multiple versions of WordPress, some of these changes may mean a little extra CSS bloat.
There are several markup-related changes that could break theme designs on the front end and in the block editor.
Social Icons and Buttons Blocks
WordPress 5.4 introduces two new blocks: social icons and buttons. New social icons block allows users to add icons/links for up to 40 different social networks. The buttons block lets users group multiple button blocks together.
Theme authors who are rolling out custom block editor styles need to account for these new blocks to make sure they are output correctly.
Create Custom Gradient Presets
One of the coolest new features is definitely the new Gradients API which allows theme authors to define custom gradient presets for users to use with group or button blocks.
Theme authors will need to do some legwork to improve on the eyesore that is the default gradient presets.
With a little work, gradients can be a useful tool at the user’s disposal. Theme authors can also disable gradients altogether if they prefer not to support them.
Block Editor Markup and Style Changes
Theme authors who have directly targeted specific editor classes, will need to check their block editor styles. Many classes with the “editor-” prefix have been changed to use the “block-editor-” prefix. The wrapper element with the “.edit-post-layout__content” class has been removed altogether. Several wrapper elements were removed from blocks and the rich text component. Core’s built-in padding and negative margins on blocks have been refactored, which is a welcome addition. Perhaps theme authors will no longer have to fight against multiple nested selectors to provide a basic, working layout that matches the front end.
These changes have already broken several themes I have seen. There is a good chance many theme authors will need to update their block editor styles.
At a time when the Theme Review Team is asking for more theme authors to submit themes with custom editor styles, these types of changes to classes and markup are not a boost of confidence. Theme developers can easily feel like they are fighting a losing battle. However, work is moving forward to make the editor markup closer to a one-to-one match with the front end. At some point, theme authors can only hope they will no longer need to deal with these kinds of changes while supporting users across multiple versions of WordPress. For now, they are in a somewhat messy transitional phase.
Calendar Markup and Class Changes
The core team changed the markup of the “get_calendar()” function, which also affects the Calendar widget. The calendar output no longer has a “<tfoot>” element. Instead, the previous and next month links were moved to a “<nav>” element below the “<table>” element.
The calendar output also adds or changes multiple IDs and classes:
.wp-calendar-tableadded to the wrapper element..wp-calendar-navadded to the navigation wrapper element..wp-calendar-nav-nextreplaces the “#next” ID on the next month link..wp-calendar-nav-prevreplaces the “#prev” ID on the previous month link.
These are breaking changes. Any custom CSS that targeted the old HTML or IDs will need to be updated.
Block Developers
For plugin developers who are utilizing the custom blocks, WordPress 5.4 introduces several new APIs and tools for managing the block system. This feature will surely brought new plugins features as the block editor systems become more mature.
Block Scaffolding
There is a new NPM package for quick block plugin creation. With a single command of npm init @wordpress/block <plugin-name> the script will create a new directory and build out the appropriate PHP, CSS, and JavaScript files necessary for building a block plugin.
Developers can use modern JavaScript tooling by default or optionally choose to use an ES5 version.
Block Collections API
The Block Collections API works similarly to categories. However, they are based on namespace. When a plugin developer registers a custom collection, any blocks that share the collection namespace will appear under a custom section in the block inserter. This seems to be a smarter way to organize blocks. It will certainly come in handy for plugins that create libraries of blocks, providing an automatic way to group them together.
Block Variations API
The new Block Variations API allows block developers to essentially create copies of block with a variation. Each registered variation will appear as a separate block in the block inserter for users to choose from.
A good example of this feature is the new social icons block. It is a single block with 40 variations for the various social networks.
Other developer-related changes
There are a couple of other changes of note that cross into both plugin and theme development territory. You should refer to the official blog posts for the follow up on these small but significant changes.
If you care to learn more about the upcoming update, be sure to check out the WP Tavern as the regular source of the latest news on WordPress.
