Welcome back, WordPress extenders. It’s time for the latest monthly roundup that covers everything you need to know to build plugins and themes on top of WordPress.
If this is your first time here, this is a regular series where you can get an overview of the developments over the past month. The post only covers news that is specific to extending WordPress. Feel free to catch up with the previous editions:
For the May 2023 edition, there is plenty to be excited about. When testing features mentioned in this post, be sure to use the latest version of WordPress trunk and at least Gutenberg 15.7.
Before diving into the highlights of the past month, remember to take some time to reflect on WordPress’s history as it turns 20 years old on May 27, 2023. You can also join the official 20-day celebration, which started on May 7, and check out the dedicated WordPress 20th Anniversary website.
Highlights
Block Selectors API
The Selectors API was stabilized in Gutenberg 15.5 and will be available in WordPress 6.3. It lets you customize the CSS selectors used when your block styles are generated. This change means fewer workarounds and more fine-grained control over your block.
You can now define your block’s selectors in block.json by setting the selectors object. By default, the root selector is your block’s generated class. You can target the root, specific features (e.g., color), and even sub-features (e.g., typography > text-decoration). Here is a block.json example of using the Selectors API:
{
"selectors": {
"root": ".your-block-selector",
"color": ".your-block-selector > div",
"typography": {
"root": ".your-block-selector h2",
"text-decoration": ".your-block-selector h2 span"
}
}
}Defining custom selectors allows WordPress to automatically generate the appropriate CSS for the block, as shown below:
.your-block-selector > div {
color: var( --wp--preset--color--contrast );
background: var( --wp--preset--color--base );
}
.your-block-selector h2 {
font-family: var( --wp--preset--font-family--primary );
}
.your-block-selector h2 span {
text-decoration: underline;
}But this is just scratching the surface of what the API can do, and it should greatly simplify how you build complex blocks. For a full overview, visit the Selectors API documentation in the Block Editor Handbook.
First community theme live in the directory
The Community Themes project began on March 10, 2023, with over 20 members of the theming community joining the kickoff meeting. The goal of the gathering was to gauge interest in creating block-based themes under the official WordPress.org banner, much like the default themes that ship with core.
Designers, developers, and community members have joined forces to push the project forward. Stacks, a theme for creating slide decks, is the first creation to come out of the project and is now live on the WordPress theme directory.
Regardless of your level of experience, you can be a part of the project. Everything you need to know to get started is available in the Community Themes GitHub repository.
Experimental Details block
Gutenberg 15.6 introduced an experimental Details block that you can use to display a summary and hide additional content. You can also opt into displaying the content by default.
There is an alternative version of this block that should land in Gutenberg 15.8. Now is the time to start testing it but plan for its current markup and functionality to change.
Plugins and tools
Define the allowed inner blocks for Group and Media & Text
Support for an allowedBlocks attribute now allows you to limit inner blocks for both the Group and Media & Text blocks. With this change, you can further curate the editing experience for your users via custom implementations or patterns.
Customize the working directory for wp-env run
By default, any relative paths used in wp-env run commands are relative to the /var/www/html directory. A patch in Gutenberg 15.7 adds a --env-cwd option that lets you change the working directory.
Self-closing flag check for the HTML API
WordPress 6.3 will ship the WP_HTML_Tag_Processor:has_self_closing_flag() method for determining whether a self-closing flag is present for an HTML tag. You cannot use it to determine whether a tag itself is self-closing, only whether the flag is present in the tag’s syntax. The primary use case is for dealing with HTML foreign elements.
Bug fixes
A bug in WordPress 6.2 prevented custom fields added via the attachment_fields_to_edit hook from rendering when a user uploaded an image. This has now been fixed and will be backported to WordPress 6.2.1.
Documentation updates
The Block Editor Handbook has a new and improved landing page that should help you navigate its content better. Contributors also updated several documentation pages in the handbook with the goal of improving the learning experience for writing blocks:
- How to Guides > Create a basic block
- Block API Reference > Edit and Save
- Block API Reference > Metadata in block.json
- Block API Reference > Registration
- Block API Reference > Selectors
- Block API Reference > Templates
- Packages > Blocks
Themes
Style variations filter for the theme directory
You can now begin using the style-variations tag in your block theme’s style.css file header. The theme directory recently added it as a filter for users who are searching for themes. At the time of writing, there are not yet any themes with the tag—you could be the first! Of course, your theme needs to actually bundle at least one custom style variation to use it.
Create a Home template from the Site Editor
Gutenberg 15.7 added Home to its list of templates that can be created directly from the site editor. This change now makes it even easier for you to build themes from the comfort of the WordPress admin.
Block design tools additions and updates
You can now add a border to the Cover block. This is primarily an enhancement, but you should check that the addition of overflow: hidden to the CSS doesn’t impact any customizations of the block. The rule was removed and then reinstated in subsequent pull requests.
Several other blocks improved their support of various design tools:
- Embed added support for
margin - Columns and Column added support for
blockGap(shown as Block spacing in the UI) - Spacer now makes the theme-defined spacing presets available as options
- Time to Read lets you define the background and text colors
Improved minimum font size calculations
An experimental patch in Gutenberg 15.7 introduced a logarithmic scale for calculating the minimum font size for the fluid typography feature. The scale tapers out as the font size increases. You should test your theme designs to ensure that this update doesn’t negatively impact its typography.
Navigation fallbacks consolidated
Up until Gutenberg 15.7, the logic for handling the creation and retrieval of fallback navigation menus has been problematic. The logic was prone to errors and the code was duplicated in JavaScript and PHP. A recent patch centralizes the logic into a single implementation. After updating to Gutenberg 15.7, check your menus to ensure they work smoothly.
Bug fixes
The Shortcode block UI now has more specific style rules, which should prevent your theme’s CSS from inadvertently overwriting the editing components.
WordPress 6.2 added a $comment_id parameter to the comment_time() function, but it was not correctly passed to get_comment_time(). A fix for the issue will land in WordPress 6.2.1.
Documentation
A new Variations section is now in the Global Settings and Styles how-to guide, which explains how you can add custom styles for block style variations in theme.json.
The theme.json living reference also now documents the customTemplates, templateParts, and patterns settings.
Noteworthy user-centric changes
The Site Logo block has an improved flow now that allows you to set, replace, and reset your logo. This brings the block version of the core feature on par with what was possible with classic themes.
The template pattern suggestion modal’s grid design was replaced with a masonry layout. You should test your registered template patterns against this change and leave feedback on the ticket if anything is broken.
Events and resources
Developer Hours
The Interactivity API was proposed in March 2023. The project’s goal is to create a better developer experience for building interactive blocks. In the past month, there were two Developer Hours sessions held to cover multiple time zones. You can watch them on WordPress.tv:
Learn WordPress
Three new resources have landed on the Learn WordPress site in the past month:
- Extending WordPress: common security vulnerabilities
- Custom post types and capabilities
- Developing with user roles and capabilities
Developer Blog articles
Three new articles were published over the past month:
- Using template patterns to build multiple homepage designs
- Per-block CSS with theme.json
- How webpack and WordPress packages interact
Props to @bph for co-writing and wrangling these resources, @oglekler and @kbat82 for review and feedback, and @joen for the Details/Summary asset.
Leave a Reply