WordPress.org

WordPress Developer Blog

What’s new for developers? (May 2023)

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:

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 tagyou 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:

Developer Blog articles

Three new articles were published over the past month:

Props to @bph for co-writing and wrangling these resources, @oglekler and @kbat82 for review and feedback, and @joen for the Details/Summary asset.

5 responses to “What’s new for developers? (May 2023)”

  1. Dominique Pijnenburg Avatar

    Does the addition of the Block Selectors API result in the ability to pre-configure visual settings for a block?

    Per example, setting a default:
    – text, background and link color;
    – spacing;
    – alignment;
    – etc.

    1. Justin Tadlock Avatar

      The Selectors API just allows you to configure the selectors. You can set default styles via theme.json or filter theme.json data (added in WordPress 6.1).

      1. Dominique Pijnenburg Avatar

        I didn’t know about the theme.json filter yet, thanks!

  2. Victoriia Hladka Avatar

    Is there any way to add language version to FSE theme which uses front page template as homepage? I’ve been reading a lot of materials and tried to translate website with polylang but with no success. Front page template is not visible in pages list in admin panel and can not be translated. The only way to translate this themes is do delete this template from parent theme, but in this case there I must to unable theme updates…

  3. Steven Lin Avatar

    RE:
    https://make.wordpress.org/marketing/2023/05/13/day-6-wp20-from-blogs-to-blocks/

    Prompt 6/20

    “Develop: Visit the WordPress Developer Blog and subscribe to updates (it’s in the footer). If you already subscribe (or after you subscribe) leave some comments on an article.”

    Already subscribed. WP#20.

Leave a Reply

Your email address will not be published. Required fields are marked *