For millions of basketball fans like me, it’s the best month of the year for basketball. That’s because, in the US and Canada,  March Madness brings the national college tournament and its concurrent excitement of buzzer-beaters, upsets, and championship dreams.

There’s also a lot to get excited about in the WordPress world this month.

WordPress 6.8 is less than a month away, bringing a bucketful (pun intended! It’s March!) of improvements from recent Gutenberg updates.  March brings lots of things to test, contribute to, and prepare for what’s ahead.

Highlights

WordPress 6.8 and Gutenberg 20.3 and 20.4

The next version of WordPress is 6.8, and it is scheduled for release on April 15th, 2025. This update will include enhancements from Gutenberg versions 19.4 through 20.4.

With just about four weeks until launch, there’s plenty to test! If you have time to contribute, now is the perfect opportunity. Stay informed by following developer notes for 6.8, and keep an eye out for the 6.8 Field Guide, which the release squad aims to publish alongside RC 1, on March 25.

Recently published developer notes for 6.8:

• More efficient block type registration in 6.8
• Roster of design tools per block (WordPress 6.8 edition)
• Data: A helpful performance warning for developers in the ‘useSelect’ hook
• Internationalization improvements in 6.8
• Speculative Loading in 6.8
• WordPress 6.8 will use bcrypt for password hashing

While 6.8 is mostly a polish and bug-fix release, you will still find meaningful updates. If you’re a plugin developer, or you otherwise work in the WordPress ecosystem, it’s time to test your products for compatibility.

Themes

Here are some notable changes to blocks your users might appreciate:

Block Library

The latest improvements to Gutenberg bring more flexibility and feature enhancements across various blocks. The Query block now includes an option to ignore sticky post behavior, giving users more control over content display. Social links have been expanded with the addition of Discord, making it easier to link to the platform. The Featured Image block now uses the resolution tool component for better image handling. Additionally, the RSS block receives support for border and spacing adjustments, enhancing layout customization.

• Query block: Add option to ignore sticky posts behavior. (69057)
• Added Discord in social links. (68848)
• Featured Image block: Use resolution tool component. (68471)
• RSS: Border & Spacing support. (66411)

Global Styles

Several refinements have been made to improve the usability and customization options in Gutenberg. The Clear button for box shadows is now disabled when no shadow is applied, preventing unnecessary interactions. Duotone settings have been enhanced with a reset button and improved toggle rendering in the FiltersPanel for a smoother user experience. Similarly, a reset button has been added to the Shadow panel, making it easier to revert changes. Additionally, theme developers now have the ability to set the :focus-visible pseudo-selector in theme.json, improving accessibility and styling control.

• Disable Clear button if there’s no shadow. (69092)
• Duotone Settings: Add reset button and improve toggle rendering in FiltersPanel. (68672)
• Shadow Panel: Add reset button. (68981)
• Allow :Focus-visible pseudo-selector to be set in theme.json. (68521)

Post Editor

Several improvements have been made to enhance the editor’s usability and stability. Loading states have been added to the Page Attributes Parent and Post Author Combobox components for a smoother experience. Error handling is now improved with clear messages when loading a post fails. The default rendering mode for Pages is now conditionally enabled, and users’ Show Template preferences will persist between sessions. Additionally, the starter content modal has been restored, and the Post Template Panel popover now appears on the left side of the sidebar for better consistency.

• Editor: Add loading state to the ‘PageAttributesParent’ component. (69062)
• Editor: Add loading state to the ‘PostAuthorCombobox’ component. (68991)
• Editor: Display error message when loading current post fails. (68999)
• Editor: Conditionally enable the new default rendering mode for Pages. (69160)
• Editor: Persist user’s ‘Show Template’ preference. (69286)
• Editor: Restore starter content modal. (69081)
• Post Template Panel: Display popover on the left side of the sidebar. (69134)

Block Editor

Several refinements have been made to improve block interactions and usability. The Quick Inserter now restores pattern search and insertion for easier access. Keyboard shortcuts for block deletion have been updated to use Shift + Backspace. The Post Navigation Link now supports all non-interactive formats, while the Pullquote block gains a missing alignment style. The Query Loop block introduces menu_order as a sorting option, and block actions now include a convenient cut functionality within the settings menu.

• Quick Inserter: Restore pattern search and insertion. (69028)
• Update keyboard shortcuts to use primaryShift+backspace for block deletion. (69074)
• Post Navigation Link: Enable all non-interactive formats. (69325)
• Pullquote: Adding missing alignment style. (68121)
• Query Loop: Add menu_order as sorting option. (68781)
• Block Action: Implement cut functionality in block actions and settings menu. (68554)

Components

Enhancements to UI controls improve usability and feedback. The BorderControl now always displays the Reset button for quicker adjustments, while the ComboboxControl gains an isLoading prop, allowing a loading spinner to provide better visual feedback when fetching options.

• BorderControl: Always show the Reset button. (69066)
• ComboboxControl: Add an isLoading prop to show a loading spinner. (68990)

Design Tools

Customization options have been expanded across multiple blocks. The Archives and Categories blocks now support color customization, allowing for better visual styling. Additionally, the Post Comments Count block gains border support, providing more design flexibility.

• Archives: Add Color Support. (68685)
• Categories: Add Color Support. (68686)

Post Comments Count: Add Border Support. (68223)

Resources

• WordPress News
  • WordCamp Asia 2025: Manila Magic
  • Report: WordPress in 2025
  • Shaping Tomorrow at WordCamp Asia 2025
  • WordPress 6.8 Beta 1
  • WordPress 6.8 Beta 2
  • WordPress 6.8 Beta 3
• Developer Blog
  • Customize WordPress embeds to match your theme

Props to @marybaum and @greenshady for reviewing this article and offering feedback.

Not that there’s anything wrong with the defaults. WordPress gives you a neutral, adaptable design that fits seamlessly into almost any layout. This is why many leave the default unchanged.

However, with a little effort, you can make your embeds reflect your brand, match your site’s design, and even display extra information—beyond the title and excerpt.

In this article, you’ll see several ways to tailor both the look and content of your WordPress embeds. Let’s dive in!

What are embeds?

Embeds let you include external content in your posts, including videos, polls, social media posts, and even content from other WordPress sites.

The YouTube videos you see on different websites are almost certainly embeds, except for a few that use custom players. Likewise, just as you can include YouTube videos on your website, others can embed your WordPress posts on theirs.

If a service is supported, you can embed a resource simply by pasting a URL into the Embed Block. If it’s not, you’ll have to use the Custom HTML Block to insert the embed code. The embed code nearly always contains an iframe tag.

In both cases, the front-end displays an iframe pointing to a simplified, embed-friendly version of the content at the canonical URL.

For example, the canonical URL of this article is the one in your browser’s address bar. If you append /embed/ to the URL, you’ll see how this post looks when embedded.

Essentially, a WordPress /embed/ endpoint serves a slightly different view of the same post.

YouTube works the same way, where you have the main, canonical video URL, such as https://www.youtube.com/watch?v=KLybH5YvIPQ, and the embed version at https://www.youtube.com/embed/KLybH5YvIPQ. Both load the same video, but they use different templates.

A brief history of embeds in WordPress

Since version 2.9, WordPress has used the oEmbed protocol to make embedding content from various services easy. This functionality improved further in version 4.0 with the addition of live previews for embeds in the editor.

With version 4.4, WordPress became an oEmbed provider, allowing other sites to embed posts from WordPress. Version 4.5 further improved embed templating.

Version 5.0 introduced the Block Editor, which came with a dedicated Embed block. Since then, WordPress has continued to add and remove services and make behind-the-scenes tweaks.

The default view

Before you start customizing embeds, let’s break down the default layout.

The WordPress embed looks like a card component that renders the post’s title and excerpt in the main area.

On one side of the embed footer, you’ll find the site’s icon and name. If no site icon is set, the WordPress logo appears as a fallback.

On the other side, if discussions are enabled, the comment count appears alongside a share button. Clicking the share button opens an overlay containing the post’s URL and HTML embed code.

The excerpt is either one you added manually, or auto-generated. If it’s auto-generated, it’s limited by word count and followed by a “Continue reading” call to action.

If the post has a featured image, it can appear above the title as a large image or below it as a floated image, depending on the image’s aspect ratio.

Lastly, when a nonexistent URL is embedded, the embed displays a 404 not-found error with a relevant title and message.

Tweaking the styles

Now that you’ve seen the variety of ways WordPress renders embeds, let’s start adding some personality with custom styles.

First, create a dedicated CSS file, assets/css/embed.css, in your theme’s folder. Then enqueue the file using the enqueue_embed_scripts hook by adding the following code to your functions.php:

function devblog_embed_enqueue_style() {
	wp_enqueue_style(
		'devblog-embed',
		get_theme_file_uri( 'assets/css/embed.css' ),
		array( 'wp-embed-template' )
	);
}

add_action( 'enqueue_embed_scripts', 'devblog_embed_enqueue_style' );

By specifying wp-embed-template as a dependency, you ensure your styles load after the defaults, making it easier to override them without resorting to excessive CSS specificity.

Now, add this code to the CSS file to subtly adjust the spacing and apply a soft background to the footer:

.wp-embed-featured-image.rectangular {
	margin: -25px -25px 25px;
}

/* This specificity is needed to overwrite the defaults. */
p.wp-embed-heading {
	/* CSS logical properties are not used by the default embed stylesheet. */
	margin-bottom: 10px;
}

.wp-embed-footer {
	margin: 25px -25px -25px;
	padding: 25px;
	background: #fafafa;
}

Use inline styles

If you only need to change one thing and prefer not to create a separate CSS file, you can use inline styles:

function devblog_embed_inline_style() {
	wp_add_inline_style(
		'wp-embed-template',
		<<<CSS
		.wp-embed-featured-image.rectangular {
			margin: -25px -25px 25px;
		}
		CSS
	);
}

add_action( 'embed_head', 'devblog_embed_inline_style' );

For inline styles, you must use the embed_head hook, because the enqueue_embed_scripts hook loads too late in the process.

Enforce consistent image format

Beyond adding your own styles, you can modify lots more. For instance, if you don’t want to display images in two different ways (above the title and floated), you can enforce a single option.

Suppose you want images to always appear above the title. You can override determined image shape using the embed_thumbnail_image_shape filter:

function devblog_embed_enforce_rectangular_image_shape() {
    return 'rectangular';
}

add_filter( 'embed_thumbnail_image_shape', 'devblog_embed_enforce_rectangular_image_shape' );

This change has a downside: square images that were previously floated may take up too much space, making your embed too tall. That’s why WordPress displays images in two ways by default.

You can address this by enforcing a specific image size for embeds. First, check whether you’ve already registered an appropriate image size (one that’s narrow in height).

If not, register a new image size and enforce it with the embed_thumbnail_image_size filter:

function devblog_register_embed_narrow_image_size() {
	add_image_size( 'devblog-embed-narrow', 640, 360, true );
}

add_action( 'after_setup_theme', 'devblog_register_embed_narrow_image_size' );

function devblog_embed_enforce_embed_narrow_thumbnail_image_size() {
	return 'devblog-embed-narrow';
}

add_filter( 'embed_thumbnail_image_size', 'devblog_embed_enforce_embed_narrow_thumbnail_image_size' );

When you register a new image size, you must regenerate the images, since WordPress by default doesn’t dynamically create them. You can regenerate the images with WP CLI or with a plugin.

Altering the excerpt conditionally

While WordPress provides filters for image size and shape, there isn’t a dedicated filter for every aspect. For example, there’s no embed-specific filter for the title or excerpt length.

However, you can shorten the excerpt specifically for embeds by using the excerpt_length filter along with the is_embed function:

function devblog_embed_shorter_excerpt_length( $length ) {
	return is_embed() ? 25 : $length;
}

add_filter( 'excerpt_length', 'devblog_embed_shorter_excerpt_length' );

This is a minor change, but it might be exactly what you need.

Remove or change the excerpt call to action

Besides adjusting the length of the excerpt, you can also remove the “Continue reading” call to action at the end. Because WordPress appends that CTA using a filter, you can remove it with one line of code:

remove_filter( 'excerpt_more', 'wp_embed_excerpt_more', 20 );

If you’d rather change the text instead of removing it, hook into excerpt_more and use the HTML API to set it to “Keep exploring”:

function devblog_embed_excerpt_call_to_action( $more_string ) {
	if ( ! is_embed() ) {
		return $more_string;
	}

	$processor = new WP_HTML_Tag_Processor( $more_string );

	if ( $processor->next_tag( 'a' ) ) {
		$processor->next_token();
		$processor->set_modifiable_text(
			__( 'Keep exploring', 'devblog' )
		);
	}

	return $processor->get_updated_html();
}

add_filter( 'excerpt_more', 'devblog_embed_excerpt_call_to_action', 21 );

Changing the site’s title

Another area you can customize is the site’s title and its logo.

Suppose you don’t have a logo for your personal blog and want to display the site title without the WordPress fallback logo. In that case, hook into embed_site_title_html:

function devblog_embed_only_site_title() {
	return sprintf(
		'<div class="wp-embed-site-title">%s</div>',
		esc_html( get_bloginfo( 'name' ) )
	);
}

add_filter( 'embed_site_title_html', 'devblog_embed_only_site_title' );

Adding extra content

Besides styling the embed and modifying its elements, you can also add extra pieces of content.

You can use two hooks for this: one immediately after the excerpt (embed_content), and another in the row that contains the comment and share icons (embed_content_meta).

Add the published date

You might choose to display the publication date only for posts, since pages are fairly static.

Since every post type uses the same embed template, use a conditional tag to append the date with the embed_content action:

function devblog_embed_post_posted_on() {
	if ( ! is_single() ) {
		return;
	}

	$time = sprintf(
		'<time datetime="%1$s">%2$s</time>',
		esc_attr( get_the_date( DATE_W3C ) ),
		esc_html( get_the_date() )
	);

	printf(
		'<p class="wp-embed-posted-on">%s</p>',
		sprintf(
			/* translators: %s: Publish date. */
			esc_html__( 'Posted on %s', 'devblog' ),
			$time // phpcs:ignore WordPress.Security.EscapeOutput
		)
	);
}

add_action( 'embed_content', 'devblog_embed_post_posted_on' );

Then, add these styles to previously created CSS file to create spacing between the post date and the excerpt:

/* This specificity is needed to overwrite the defaults. */
p.wp-embed-posted-on {
	margin-top: 10px;
}

Add a like button

There are not many examples of extending the row with the comment and share icons, but here’s one idea: if your website includes a feature for liking posts, you could add a like button to the embed.

You can hook into the action embed_content_meta to render the markup:

function devblog_embed_like_button() {
	if ( is_404() ) {
		return;
	}
	?>
	<div class="wp-embed-like">
		<button class="wp-embed-like-button"
				aria-label="<?php esc_attr_e( 'Like', 'devblog' ); ?>">
			<span class="dashicons dashicons-heart"></span>
		</button>
	</div>
	<?php
}

add_action( 'embed_content_meta', 'devblog_embed_like_button', 9 );

This HTML follows a structure similar to the sharing button that WordPress already gives you in embeds.

Likewise, to stay as close as possible to the existing WordPress code, you can add these styles:

.wp-embed-like {
	display: inline;
	margin-right: 10px;
}

.wp-embed-like-button {
	margin: -8px 0 0;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none;
}

.wp-embed-like-button .dashicons {
	padding: 4px;
	top: 8px;
}

.wp-embed-like-button:focus .dashicons,
.wp-embed-like-button:focus .dashicons {
	box-shadow: 0 0 0 2px #2271b1;
	outline: 2px solid transparent;
	border-radius: 100%;
}

.wp-embed-like-button:hover .dashicons-heart {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%232271b1' d='M10 17.12c3.33-1.4 5.74-3.79 7.04-6.21 1.28-2.41 1.46-4.81.32-6.25-1.03-1.29-2.37-1.78-3.73-1.74s-2.68.63-3.63 1.46c-.95-.83-2.27-1.42-3.63-1.46s-2.7.45-3.73 1.74c-1.14 1.44-.96 3.84.34 6.25 1.28 2.42 3.69 4.81 7.02 6.21z'/%3E%3C/g%3E%3C/svg%3E");
}

.dashicons-heart {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%238c8f94' d='M10 17.12c3.33-1.4 5.74-3.79 7.04-6.21 1.28-2.41 1.46-4.81.32-6.25-1.03-1.29-2.37-1.78-3.73-1.74s-2.68.63-3.63 1.46c-.95-.83-2.27-1.42-3.63-1.46s-2.7.45-3.73 1.74c-1.14 1.44-.96 3.84.34 6.25 1.28 2.42 3.69 4.81 7.02 6.21z'/%3E%3C/g%3E%3C/svg%3E");
}

This is not the most modern CSS, but it aligns with the styles WordPress core uses for embeds.

Implementing actual Like button functionality goes beyond this article, but here’s how you would style the button.

Removing existing elements

Beyond adding elements, you can also remove existing ones you don’t need.

For example, here’s how you can remove the comment and share buttons that WordPress adds with the embed_content_meta action:

remove_action( 'embed_content_meta', 'print_embed_comments_button' );

remove_action( 'embed_content_meta', 'print_embed_sharing_button' );

If you remove the share button, you should also remove the corresponding markup for the sharing dialog. These two elements go together, but they are added using separate hooks:

remove_action( 'embed_footer', 'print_embed_sharing_dialog' );

Custom embeds

What if you’d rather build a custom embed from scratch, and the available hooks and filters aren’t enough?

In that situation, you can create a custom template. That gives you complete control over the output and structure, allowing you to design an embed layout that perfectly fits your needs.

Remember—your embeds will appear on other websites. Make practical design choices, so they integrate well with various styles. Sometimes, a modern and fresh look is all you need.

Template files

Where do you find the template files related to embeds? If your website uses the default embeds, you won’t find them in your theme folder.

Theme-compat files

The template files for embeds are in the /wp-includes/theme-compat/ folder of your WordPress installation. They include:

• embed-404.php
• embed-content.php
• embed.php
• footer-embed.php
• header-embed.php

To override any of these, copy the ones you need into your theme folder and edit them. Theme files take priority over the theme-compat files, which serve as fallbacks.

Template hierarchy

By default, every post type (post, page) shares the same template file, embed.php.

You’ve already seen how to use conditional tags for code specific to certain post types. However, sometimes you might need a dedicated template for a specific post type.

For example, you can create an embed-page.php template file specifically for pages, or an embed-product.php template file for a custom post type called product.

A good example of a post-type-specific embed template is the plugin embed on WordPress.org.

The embed-plugin.php includes information specific to plugins, such as the author, rating, and “tested up to” version. These are details that wouldn’t make sense for regular posts or pages.

Site Editor and Block Themes support

Right now, the Editor doesn’t really support editing embeds.

Even if you’re working with a block theme that uses HTML files for the templates, you still need to add PHP files for custom embed templates.

Load templates files from a plugin

But you’re not restricted to storing your embed template files in your theme folder.

If you want to reuse a template across multiple projects, you can move it into a plugin and load it from there.

To get started, create a simple plugin with the following file structure:

/plugins/devblog-embed-template/
├── index.php
└── templates/
    └── embed.php

In the index.php file, add the necessary plugin header and use the embed_template filter to change the location of the template:

<?php
/**
 * Plugin Name: Developer Blog Embed Template
 */

function devblog_embed_template() {
	return plugin_dir_path( __FILE__ ) . 'templates/embed.php';
}

add_filter( 'embed_template', 'devblog_embed_template' );

Finally, add your custom embed template code to the templates/embed.php file.

This is the simplest approach, but it isn’t the most foolproof and doesn’t support post-type–specific files.

For more flexibility, modify the plugin as follows:

function devblog_embed_template( $template_path, $type, $template_candidates ) {
	foreach ( $template_candidates as $template_candidate ) {
		$local_template_path = plugin_dir_path( __FILE__ ) . 'templates/' . $template_candidate;

		if ( file_exists( $local_template_path ) ) {
			return $local_template_path;
		}
	}

	return $template_path;
}

add_filter( 'embed_template', 'devblog_embed_template', 10, 3 );

With this approach, you can also create post-type–specific template files in your plugin, such as /templates/embed-page.php.

WordPress will check your plugin’s folder first; if no matching file is found there, it will fall back to the theme, and then ultimately to the default files in theme-compat if needed.

Have fun!

Now that you’ve seen all the ways you can customize WordPress embeds, it’s time to put these ideas into action. Treat this as your invitation to experiment, using the suggestions in this article as a starting point.

And if you’ve ever felt the current default embed design could use a refresh, the code could stand an update, or Site Editor integration might be more seamless, now is a great time to get involved.

Even sharing feedback and ideas can spark meaningful change.

Props to @marybaum and @areziaal for reviewing the draft and offering feedback.

Speaking of exciting events, WordCamp Asia is just around the corner! The schedule looks fantastic and is filled with some great speakers. If you’re going, I hope you have an amazing time soaking in all the knowledge, idea sharing and celebrating WordPress at one of the largest community events of the year!

Highlights

The road to 6.8 and 6.7.2 RC1

Scheduled to release on April 15th, WordPress 6.8 aims to enhance data views, query loops and block interactions. This release will also include new APIs to enhance extensibility and the integration of speculative loading aims to improve site performance. Read about this and more in the Roadmap to 6.8 post.

In release news, WordPress 6.7.2 is now available, the final release landed on February 11, 2025. Some of the key changes are as follows:

• Playwright was updated to the latest version (#62843)
• Schema version used throughout Twenty Twenty-Five was updated (#62455)
• Filters can now correctly check if the context is a WP_Post of type wp_navigation and limit the insertion of hooked blocks. (#62639)
• Changes were made to ensure that uppercase tag names, specifically those starting with “D” and preceded by whitespace, are correctly matched by the tag processor in WordPress (#62522)
• Fixes were made to ensure meta boxes are saved even if none of their areas are present in the post editor’s UI. (#67503)
• Changes to meta boxes to ensure combinations of meta boxes and device previews don’t cause conflicts. (#68902)

Happy birthday, Gutenberg!

Eight years ago, on February 3, 2017, the initial commit was made that introduced the world to Gutenberg, the revolutionary block editor that transformed how we write with and develop for WordPress. 

Over those eight years Gutenberg has evolved, becoming much more than a post editor. With features like full-site editing, block patterns and global styles, the editor has grown a whole new area in the ecosystem with an ever-growing list of third party blocks and themes.

With Gutenberg and the support from contributors all around the community, the future looks bright. Here’s to eight fantastic years of innovation, and many more to come!

Learn more about contributing to Gutenberg.

Plugins & tools

Gutenberg 20.1 and 20.2

The two latest releases of Gutenberg introduce enhancements for both developers and users. What’s new in Gutenberg 20.1 and 20.2 highlights changes to preview pages in data views, color picker and clear control changes, and more. Some of the key changes are:

• Details block now support allowedBlocks attributes providing developers a method to customizing available innerblocks. (#68489)
• A new default rendering mode was made available to post type supports. (#68549)
• A new field has been added allowing UI changes to data views and content preview field for posts and pages. (#67278)
• Upgrade Playwright to v1.49. (#68504)

Themes

Notable Block Updates

The following are notable changes to blocks from the point of view of a user:

• Navigation block now provides an option for users to clear a selection in the color picker. (#68454)
• Navigation block in the editor list view now displays the menu name alongside the block name. (#68446)
• Page List block now includes color support. (#66430)
• Social links block now provides an option for users to clear a selection in the color picker. (#68564)
• Post Comment Link block now displays border and shadow options by default. (#68506)
• Query Total block now displays border and shadow options by default. (#68507)

Resources

Developer Blog

And last, but not least, here’s the latest right here on the Developer Blog, if you’re ready to dive into customizing block categories:

• One hook to rule them all: The many faces of block categories

Props to @marybaum and @greenshady for reviewing this article and offering feedback.

You can rename them. Reorder them. Add completely new categories, including new categories for your custom blocks. And probably do things you or I haven’t even thought of yet.

And you can do all of that with one hook: block_categories_all

The hook is a versatile tool that allows developers to customize the way block categories are organized. Throughout this article you will learn how to use this hook and build functions to add, reorder and rename single or multiple block categories.

Before you dive in it’s important to note that each function accepts a single parameter which is expected to be an array of existing block categories. This is defined as $categories throughout this article.

Adding categories

If you build custom blocks, you might want to put them in some custom categories. You could also have other uses for custom categories—maybe you’re building some sections that have custom styling. Whatever your reasons, here are three approaches:

Creating a new category

Here’s how you can use array_merge to add a new category named Custom Blocks to the end of the existing categories array.

add_filter( 'block_categories_all', 'add_block_category', 10, 2 );

function add_block_category( $categories ) {
    $custom_category = array(
        array(
            'slug'  => 'custom-blocks',
            'title' => __( 'Custom Blocks', 'your-text-domain' ),
            'icon'  => null,
        ),
    );

    return array_merge( $categories, $custom_category );
}

Start by creating a function that accepts a single parameter—remember, it’s expecting the list of existing $categories. Inside the function create a variable named $custom_category and assign an array with these key-value pairs:

• slug — a unique identifier for the category
• title — the display name of the category
• icon — a Dashicon or custom SVG

Note: to my knowledge we’re not using or showing the icon anywhere so in this example you can set this as null.

Then you’ll use the array_merge function to combine $custom_category with the existing $category list. You can position your new category before or after $categories based on the order that you pass each variable into the array_merge.

Positioning a new category

Here’s how to use array_splice to add a new category named Custom Blocks to $categories in the second position (index 1).

add_filter( 'block_categories_all', 'add_order_block_category', 10, 2 );

function add_order_block_category( $categories ) {
    $custom_category = array(
        'slug'     => 'custom-blocks',
        'title'    => __( 'Custom Blocks', 'your-text-domain' ),
        'icon'     => null,
        'position' => 1,
    );

    // Extract position from the custom category array.
    $position = $custom_category['position'];

    // Remove position from the custom category array.
    unset( $custom_category['position'] );

    // Insert the custom category at the desired position.
    array_splice( $categories, $position, 0, array( $custom_category ) );

    return $categories;
}

Start by creating a function and a new category array, much like you did in the previous example. But this time you will add a key for position letting the value specify where you want your new category to live inside $categories.

Then you will extract the position and set it as a variable to use in an array_splice, but before that, use unset to pull the position out of the array—you don’t need it.

Finally, use an array_splice function, which accepts 4 parameters:

1. Array: the array you want to modify
2. Offset: the position where you wish to insert
3. Length: specify the number of items to remove after the offset
4. Replacement: an array of elements to add in the specified position

In your array_splice, pass in $categories, the position you specified in your new category array, a length (in this case 0 as we do not want to remove anything), then your new category array.

Adding and positioning multiple new categories

Now let’s add and position some categories all at once. Here’s how you can insert two custom categories into $categories at positions two and four.

add_filter( 'block_categories_all', 'add_order_multiple_block_categories', 10, 2 );

function add_order_multiple_block_categories( $categories ) {
    $custom_categories = array(
        array(
            'slug'     => 'custom-category-1',
            'title'    => __( 'Custom Category 1', 'your-text-domain' ),
            'icon'     => null,
            'position' => 1,
        ),
        array(
            'slug'     => 'custom-category-2',
            'title'    => __( 'Custom Category 2', 'your-text-domain' ),
            'icon'     => null,
            'position' => 3,
        ),
    );

    $added_categories = array();

    // Prepare an associative array with positions as keys.
    foreach ( $custom_categories as $custom_category ) {
        $position = $custom_category['position'];
        unset( $custom_category['position'] );
        $added_categories[ $position ] = $custom_category;
    }

    // Sort the categories to insert by their positions/key.
    ksort( $added_categories );

    // Insert the sorted categories into the existing categories array.
    foreach ( $added_categories as $position => $custom_category ) {
        array_splice( $categories, $position, 0, array( $custom_category ) );
    }

    return $categories;
}

Create a function. Inside, create an array of new categories named $custom_categories, including the desired position for each item. Create an empty array to store data in the next step, name this $added_categories.

Next, iterate through $custom_categories to extract and unset the position and store it in $added_categories with the new position as its key. Then add a ksort function to make sure the categories that were stored in $added_categories are sorted by their keys.

Finally add foreach and iterate over the $added_categories and use an array_slice to insert each category into the desired position. Finally, reindex the categories using array_values to ensure things are in the correct order in the new category list.

Reordering categories

You can also use the block_categories_all hook to reorder the existing list of categories in the block editor. Whether you want to move a single category or rearrange multiple, here are some ways to get more control over both.

Reordering a single category

Here’s how to reorder the Design category in the existing array by removing it and reinserting it in the second position using array_splice PHP function.

add_filter( 'block_categories_all', 'reorder_design_category', 10, 2 );

function reorder_design_category( $categories ) {
    $design_category = null;
    $new_position    = 1;

    // Remove the design category from the existing categories.
    foreach ( $categories as $key => $category ) {
        if ( 'design' === $category['slug'] ) {
            $design_category = $category;
            unset( $categories[ $key ] );
            break;
        }
    }

    // If the design category exists, insert it at the new position.
    if ( $design_category ) {
        array_splice( $categories, $new_position, 0, array( $design_category ) );
    }

    // Reindex the array.
    return array_values( $categories );
}

Start by setting two variables inside your function, one named $design_category set as null that you’ll use later to store the design category, or whichever category you wish to move, and another named $position that specifies the position you want to move the category into. Then, add a foreach that will iterate through the existing categories to find a match for the category slug, store it in $design_category, and use unset to remove it from the existing list.

Now check if any data was stored in your variable and use array_splice to insert the category into the desired position, just as you did in the new category functions above. Finally, re-index the categories using array_values to ensure things are in the correct order.

Reordering multiple categories

Here’s how to reorder both the Design and Text categories to positions one and four by removing and reinserting them using array_splice.

<?php
add_filter( 'block_categories_all', 'reorder_multiple_categories', 10, 2 );

function reorder_multiple_categories( $categories ) {
    $reorder_categories = array(
        'design' => 0,
        'text'   => 3,
    );

    $moved_categories = array();

    // Iterate through the existing categories and add/remove the ones to be reordered.
    foreach ( $categories as $key => $category ) {
        if ( array_key_exists( $category['slug'], $reorder_categories ) ) {
            $moved_categories[ $reorder_categories[ $category['slug'] ] ] = $category;
            unset( $categories[ $key ] );
        }
    }

    // Sort the moved categories by their new positions.
    ksort( $moved_categories );

    // Insert the moved categories at their new positions.
    foreach ( $moved_categories as $position => $category ) {
        array_splice( $categories, $position, 0, array( $category ) );
    }

    // Reindex the array.
    $categories = array_values( $categories );

    return $categories;
}

Start by creating an associative array named $reorder_categories inside your function. The keys can be of the categories you want to reorder, and the value is their new position. You will also need to create an empty array to store data in the next step, name this $moved_categories.

When the check finds a match, the function adds the category to $moved_categories, in the position you specified as its key. The unset function drops the category from $categories.

Now add a ksort function to, well, sort the categories by their keys. 

Add a foreach to iterate over the $moved_categories, using array_splice to insert each category into its proper position. Finally, re-index the categories with array_values, so things are in the right order in the new $categories list.

Renaming categories

You can also use block_categories_all to rename the list of categories in the block editor. Want to rename one category? Want to rename them all? Here are some approaches that will give you control over the whole thing..

Renaming one category

Maybe you’d like to rename the Text category to Text Elements.

add_filter( 'block_categories_all', 'rename_text_category', 10, 2 );

function rename_text_category( $categories ) {
    foreach ( $categories as &$category ) {
        if ( $category['slug'] === 'text' ) {
            $category['title'] = __( 'Text Elements', 'your-text-domain' );
        }
    }

    return $categories;
}

Start by using a foreach. Iterate through $categories, looking for a category with a slug equal to text. If text exists, rename the category title to Text Elements.

Renaming multiple categories

Or maybe you really wanted to rename the Text and Media categories to Text Elements and Media and Text Elements.

add_filter( 'block_categories_all', 'rename_multiple_categories', 10, 2 );

function rename_multiple_categories( $categories ) {
    foreach ( $categories as &$category ) {
        if ( $category['slug'] === 'text' ) {
            $category['title'] = __( 'Text Elements', 'your-text-domain' );
        }
        if ( $category['slug'] === 'media' ) {
            $category['title'] = __( 'Media and Text Elements', 'your-text-domain' );
        }
    }

    return $categories;
}

To rename multiple categories in one function, follow the same steps as you did for renaming a single category. Only add as many checks for the category slug as you need.

Bringing it all together

Finally. Here you have it all— complete control over the names and position of existing categories, and the power to add new ones.

add_filter( 'block_categories_all', 'modify_block_categories', 10, 2 );

function modify_block_categories( $categories ) {
    $new_category_order = array(
        array(
            'slug'     => 'media',
            'title'    => __( 'Media and Text Elements', 'your-text-domain' ),
            'position' => 0,
        ),
        array(
            'slug'     => 'custom-blocks',
            'title'    => __( 'Custom Blocks', 'your-text-domain' ),
            'position' => 1,
        ),
        array(
            'slug'     => 'text',
            'title'    => __( 'Text Elements', 'your-text-domain' ),
            'position' => 2,
        ),
        array(
            'slug'     => 'embed',
            'position' => 3,
        ),
        array(
            'slug'     => 'design',
            'position' => 4,
        ),
    );

    // Create an associative array of block categories with the slug as the key.
    $current_block_categories = array_column( $categories, 'title', 'slug' );

    // Check if the new category order has a title set, otherwise use the default title.
    foreach ( $new_category_order as &$new_category ) {
        $new_category['title'] = $new_category['title'] ?? $current_block_categories[ $new_category['slug'] ] ?? __( 'Untitled', 'your-text-domain' );
    }

    // Create an array of slugs from the new category order.
    $new_category_slugs = array_column( $new_category_order, 'slug' );

    // Filter out the remaining block categories that are not in the new order.
    $remaining_categories = array_filter( $categories, function ( $category ) use ( $new_category_slugs ) {
        return ! in_array( $category['slug'], $new_category_slugs, true );
    } );

    // Merge the new category order with the remaining categories.
    return array_merge( $new_category_order, $remaining_categories );
}

Start by defining an array of categories you want to add, reorder or rename named $new_category_order. Now, the slug is required to identify each entry. The title and position are optional based on what you want to modify.

First, update any category titles by using array_column to create an associative array named $current_block_categories from $categories, using the category slug as the key. Then use a foreach to iterate through $new_category_order, checking whether or not a new title is set for any of the items in the array and updating them if necessary. If no new title is set, it will be extracted from $current_block_categories based on the slug. If for whatever reason no slug is found, then Untitled will be used.

Now build an associative array of categories by iterating over $new_category_order, checking for any categories with a new position, then adding it as the key in an array named $moved_categories. 

Then use ksort to sort the $moved_categories based on their position. Add a foreach and iterate over the $moved_categories and use an array_slice to insert each category into position.

Now that the new titles and positions are handled it’s time to filter out the remaining categories so you can bring everything back together. First, create an array of slugs named $new_category_order from array_column. Then create a variable named $remaining_categories that uses an array_filter to remove any items from $categories whose slugs do not exist in $new_category_order.

Finally, use an array_merge to combine the new category order with the $remaining_categories to return a full list of modified Block Categories.

Conclusion

The block_categories_all hook lets you make block categories work any way you need them to—for your project and for your users, and all the content they’ll create.

And, really, these functions are just the beginning. How are you going to use them? Do you have others, or can you see creative twists on them? Leave a comment!

Props to @psykro and @marybaum for reviewing this article and offering feedback.

Last year, we saw the introduction of a lot of fun features for extenders. I’m partial to the Block Bindings API, but features like Data Views, section styles, and block hooks are pretty exciting too. There are far too many to list here, so just check out past editions of the monthly roundup to catch up on anything you may have missed.

Just because many of us were on holiday break doesn’t mean that WordPress development completely ground to a halt. Since the last monthly update, contributors released both version 19.9 and 20.0 of the Gutenberg plugin.

Highlights

State of the Word 2024

State of the Word 2024 was held in Tokyo, Japan, celebrating WordPress’s continued growth and global reach. The event highlighted key achievements in the past year. Some of those include nearly half a billion Core downloads each year, an uptick in plugin activity, and the introduction of APIs like Interactivity and Block Bindings. The event also celebrated Japan’s connection to WordPress, including the first person to localize the platform and the history of Wapuu, WordPress’s mascot.

Check out the State of the Word 2024 playlist on YouTube, which includes all sessions and discussions.

New Query Total block

Gutenberg 19.9 introduced a new Query Total block, which has two settings for displaying query results:

• Total results: Outputs the total number of posts found (e.g., “12 results found”).
• Range display: Outputs the current range of the total posts found (e.g., “Displaying 1 – 10 of 12”).

This block will give you more flexibility when displaying query-related information in your theme designs.

Stylebook added for classic themes

A scaled-down stylebook screen for classic themes was introduced in Gutenberg 19.9, continuing to bridge the gap between classic and block themes. The screen is currently static and only shows colors, typography, and block styles, but could offer user interaction in the future, maybe as part of a theme opt-in.

Plugins and tools

Stabilization of experimental block supports keys reverted

Gutenberg 19.8 initially stabilized several experimental block support keys. However, those changes were reverted in Gutenberg 20.0. The reasons cited were that the approach taken to stabilize them also needed time to be stabilized itself and more time was needed to communicate the changes with third-party extenders.

Create Block updates

The Create Block script received two nice feature updates:

• You can now set the requiresAtLeast, requiresPHP, and testedUpTo fields in external templates.
• The default template was optimized for use cases with multiple blocks.

Multisite support added for wp-env

The wp-env tool now supports WordPress multisite. You can set env.development.multisite to true in your .wp-env.json file to enable it. Check out the documentation to learn how to set environment variables.

Block Hooks updates

As of Gutenberg 20.0, block hooks are applied in the editor and front end to two new areas:

• Synced patterns
• Post content

New filter hook for nav link post statuses

By default, navigation links are only allowed if they have the publish post status. With the new render_block_core_navigation_link_allowed_post_status hook, it is now possible to add multiple post statuses to an allowed list for rendering on the front end with a custom filter.

Presets support added to BoxControl component

Support for presets with the BoxControl component was added in Gutenberg 20.0. When presets are provided, a button to switch between a preset and a custom value is shown. Currently, a range control is always used for presets, but a future iteration should allow for a select dropdown for longer presets.

WordPress Playground

Several major updates landed for Playground in the last month:

• CORS Proxy is enabled for all network requests. This gives WordPress running inside Playground more access to cross-origin resources. However, some limitations still apply to allowed headers and download sizes.
• The experimental Data Liberation importer is now available in the importWxr step when using the importer.data-liberation option. The new importer will rewrite links to the imported content, download assets through the CORS proxy, and parallelize downloads while communicating the live progress.
• WP-Cron has been re-enabled for Playground, which had been previously disabled.
• The SQLite Database Integration plugin was released for testing the integration of WordPress with SQLite.
• The Playground tester was used to compare the error rate of the top 1,000 WordPress.org plugins. The number has improved from 2023-2024, with the failure rate dropping from 7% to 5%.
• WordPress Playground for developers workshop is now available on WordPress TV.

Themes

Notable block updates

When using the featured image option for the Cover block, Gutenberg 19.9 now lets you also set the resolution of the image. This will allow you to use a resolution that fits your designs.

Also since Gutenberg 19.9, you can set the Separator block to be a <div> instead of the default <hr> (horizontal rule) element. <hr> is a semantic element meant to denote a thematic break in an HTML document, which is read out by screen readers. This is often what you need and was the original intent of the Separator block. But the introduction of the <div> option lets you use the block as a design token only.

A change in Gutenberg 19.9 moves the CSS variable definition for the Image blocks lightbox overlay from an inline <style> tag to a data-wp-bind--style directive. I haven’t noticed any negative effects from my custom lightbox styles, but it’s always worth testing to ensure it works.

Deeply nested Post Template blocks

The Post Template block now defines the Query block as its ancestor rather than parent. This allows you to deeply nest Post Template within other blocks, such as Group and Column, for more flexible and unique designs.

Border support added to more blocks

Several blocks now support the border design tools over the last couple of Gutenberg releases:

• Latest Posts
• Post Comments Link
• Post Template (The PR includes spacing support.)
• Query Total

Editor and user-facing updates

A couple of noteworthy user-facing changes landed in Gutenberg 19.9:

• The Replace button for changing a Query block’s pattern has been renamed to Change design. The same PR swaps the popup modal with a dropdown to show the patterns.
• The hardcoded RichText formats list for navigation menu items has been removed. Previously, only bold, italic, image, and strikethrough text were allowed. Now, users can use any non-interactive formats for menu items.

Resources

WordPress News

The WordPress News blog features posts covering the latest WordPress releases and several new articles dropped in the past month:

• State of the Word 2024: Legacy, Innovation, and Community
• WordPress Themes Need More Weird: A Call for Creative Digital Homes
• Write Books With the Block Editor
• Openverse.org: A Sight for Sore Eyes

Developer Hours 

Two developer-focused live shows have run since the last monthly roundup. Catch up with them here:

• Developer Hours: Everything you need to know about WordPress Playground
• Developer Hours: Improve your workflows with WordPress development tools

You can catch past recordings of all Developer Hours on WordPress.tv, and there is a wide range of content on the official WordPress.org YouTube channel.

Hallway Hangouts

Two Hallway Hangouts, which are community discussions about WordPress features, occurred over the past month:

• Hallway Hangout: Playground for Agencies and Product Demos
• Hallway Hangout: Blueprint Block Editor

Developer Blog

And, of course, some new content landed right here on the Developer Blog in December, including two new code snippets:

• Mastering light and dark mode styling in block themes
• Snippet: How to register a block variation but hide it from the inserter
• Snippet: How to filter the output of a block binding

Props to @bph for co-wrangling these resources and @ndiego and @psykro for reviewing.

• The solution must respect the site visitor’s operating system preferences.
• The theme user shouldn’t have to take any steps to make it work.
• The code must live in theme.json as much as possible (a tiny bit of extra CSS is required).

Basically, I wanted to take the laziest path as I could to making dark mode a reality. I also wanted to do this in a way that used modern CSS features while respecting the Global Styles Engine in WordPress.

In this tutorial, I’ll walk through the solution that I came up with and have been using extensively over the past few months. There are some limitations, which I’ll get to, but I believe this is the solution that is the most forward looking.

Setup

For this tutorial, I chose to make a child theme of the Twenty Twenty-Four theme and worked with the parent theme’s default color scheme. You can see the result in these screenshots:

To follow along, make a new child theme named tt4-dark-mode with the following files in it:

• style.css
• functions.php
• theme.json
• /assets/editor.css

As usual, add your basic file header setup to your style.css file before activating the theme:

/*!
 * Theme Name:        TT4: Dark Mode
 * Description:       Exploring dark mode with Twenty Twenty-Four.
 * Version:           1.0.0
 * Tags:              block-patterns, block-styles, editor-style, full-site-editing, wide-blocks
 * Template:          twentytwentyfour
 * Text Domain:       tt4-dark-mode
 * Tested up to:      6.7
 * Requires at least: 6.6
 */

Using modern CSS features

For this tutorial, you’ll use two CSS features that do not have 100% browser support at the moment, but they are in wide use:

• color-scheme: CSS property that lets you define what color scheme an element can be safely rendered in. This property has over 95% browser support, so it’s relatively safe to use.
• light-dark(): CSS color function for defining both light and dark colors. The output color is based on the user’s operating system preferences. It is meant to be used in conjunction with the color-scheme property. It currently has over 86% browser support and can be safely used if supporting modern browsers.

The color-scheme property and light-dark() function are the foundation of the method used in this tutorial. They are both baseline CSS standards in 2024, so the challenge is making them work with WordPress standards.

Enabling the light/dark mode color scheme

For the browser to automatically switch to light or dark mode based on user preferences, you must set the color-scheme property. While this can be set on individual elements, you should target :root for the entire page. color-scheme supports several values, but light dark is the value that tells the browser to determine which scheme to use for light/dark switching.

There is no standard for setting this property via theme.json, but you can use the styles.css field to define custom CSS:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"css": ":root { color-scheme: light dark; }"
	}
}

One potential issue to watch out for is that the styles.css property can be overwritten in a style variation or child theme’s theme.json by accident. The value from the parent theme.json is not merged. If this could be a problem for your project, try an alternative solution:

Alternative method: Using a stylesheet

I prefer the theme.json method above because it doesn’t require any additional code. But if you want or need to set the color scheme via a stylesheet, you can do so by adding this CSS to your style.css file:

:root {
	color-scheme: light dark;
}

And, of course, you need to ensure that style.css is included in both the front end and editor. Do this by adding this snippet to your functions.php file:

add_action( 'wp_enqueue_scripts', 'tt4_dark_mode_enqueue_assets' );

function tt4_dark_mode_enqueue_assets() {
	wp_enqueue_style( 'tt4-dark-mode', get_stylesheet_uri() );
}

add_action( 'after_setup_theme', 'tt4_dark_mode_theme_setup' );

function tt4_dark_mode_theme_setup() {
	add_editor_style( get_stylesheet_uri() );
}

Designing in two colors using CSS standards

At this point, you’ve got the basic setup out of the way. The hard part of building light and dark color schemes is not in the code itself. It’s in the design—i.e., picking the right colors. That’s more of an art than simply flipping colors around, which won’t look great. And it’s also outside the scope of this tutorial.

I’ll assume you already have your complete light and dark color schemes defined for your own projects. For this tutorial, I’ve already done the work of creating a dark color scheme for Twenty Twenty-Four’s existing default light palette.

What’s important is how to define those colors in theme.json. Do you remember the light-dark() CSS function covered earlier? You’ll use it to define both the light and dark values for each of the colors defined in your theme’s palette.

Here’s an example of what white (#ffffff) and black (#000000) looks like when used with light-dark():

light-dark( #ffffff, #000000 );

This tells the browser to use #ffffff when the user prefers a light scheme and #000000 when they prefer a dark scheme. Any CSS color value is valid here, so the values really depend on your theme’s design.

Now open your theme.json file that you’ve already been working in and add a new settings.color.palette section and define these colors. Your full theme.json file should now look like this:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "light-dark(#f9f9f9, #1c1c1c)",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "light-dark(#ffffff, #111111)",
					"name": "Base / Two",
					"slug": "base-2"
				},
				{
					"color": "light-dark(#111111, #ffffff)",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "light-dark(#636363, #888888)",
					"name": "Contrast / Two",
					"slug": "contrast-2"
				},
				{
					"color": "light-dark(#A4A4A4, #3d3d3d)",
					"name": "Contrast / Three",
					"slug": "contrast-3"
				},
				{
					"color": "light-dark(#cfcabe, #60544c)",
					"name": "Accent",
					"slug": "accent"
				},
				{
					"color": "light-dark(#c2a990, #9d7359)",
					"name": "Accent / Two",
					"slug": "accent-2"
				},
				{
					"color": "#d8613c",
					"name": "Accent / Three",
					"slug": "accent-3"
				},
				{
					"color": "light-dark(#b1c5a4, #465a3b)",
					"name": "Accent / Four",
					"slug": "accent-4"
				},
				{
					"color": "light-dark(#b5bdbc, #4d5757)",
					"name": "Accent / Five",
					"slug": "accent-5"
				}
			]
		}
	},
	"styles": {
		"css": ":root { color-scheme: light dark; }"
	}
}

As you can see, almost all of the color definitions have both light and dark hex color codes. I didn’t set one of the colors (accent-three) because it works well in both light and dark mode. That was a bit of a happy accident, but it illustrates that how you define colors is specific to your design.

To test, switch your computer’s display mode between light and dark (there will be different settings based on your operating system).

Small editor fix

The implementation you’ve learned thus far works in both the editor canvas and on the front end. But the dark colors are not reflected in the various color indicators in the editor UI when in dark mode. To fix this, you’ll need a few lines of CSS using the same color-scheme definition you used before.

Create a new file named /assets/editor.css in your theme and add this CSS in it:

.component-color-indicator,
.block-editor-color-gradient-control,
.components-circular-option-picker__option {
	color-scheme: light dark;
}

This tells the various color indicators and controls in the UI to use the preferred light or dark scheme.

Now enqueue this stylesheet in the editor:

add_action( 'enqueue_block_editor_assets', 'tt4_dark_mode_editor_assets' );

function tt4_dark_mode_editor_assets() {
	wp_enqueue_style(
		'tt4-dark-mode-editor',
		get_theme_file_uri( 'assets/editor.css' )
	);
}

Current limitations of this method

One of the major downsides of using light-dark() is that users can overwrite the individual colors in your theme-defined palette via the Styles panel in the Site Editor:

This is problematic because WordPress doesn’t currently have a UI-based method of defining both the light and dark hex codes. When a user overwrites an individual color, their custom color will be used regardless of the mode. 

For distributed themes or sites where the client has access to edit styles, I have yet to find a solution. My initial idea was to disable this functionality, but that is not a supported WordPress feature at this time.

Despite this limitation, this is still a path worth exploring further. color-scheme and light-dark() are already a part of the CSS standard, so it makes sense for WordPress to officially adopt it as part of the UI going forward. 

It’s even possible to make a button to switch between light and dark, but let’s save that for a tutorial on another day. I’d like to see what you come up with in the meantime.

Props to @ndiego and @welcher for feedback and review on this post.

In some cases, a custom block is overkill, and a block variation is a better solution. For example, a user in the outreach channel wanted to add an attribute to a block that was only used in a template and, based on the existence of that attribute, add some custom functionality.

This is a perfect scenario to use a block variation. The issue was that they couldn’t hide the variation from the inserter.

After some digging, it is possible to hide the block by setting the scope property to block in registerBlockVariation. The following code registers the paragraph-red block variation for the Paragraph block, but it’s not available to users in the Editor.

import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation( 'core/paragraph', {
	name: 'paragraph-red',
	title: 'Red Paragraph',
	attributes: {
		textColor: 'vivid-red',
	},
	isActive: [ 'textColor' ],
	scope: [ 'block' ],
} );

This value is used for blocks like the Columns and Query blocks to filter specific block variations. These variations are passed to the experimental BlockVariationPickercomponent which handles displaying the variations and allows users to choose one of them. For variations of other blocks, the scope property is a great workaround to hide them from the inserter.

Relevant links

• Block Variations
• BlockVariationPicker component

Props to @ndiego and @greenshady for reviewing this snippet

Consider a scenario where you have a custom post type called book and need to store the price for each book as post meta. The price will be stored in US dollars, but you want to give users the ability to view prices in different currencies. By adding a query parameter to the URL (like ?currency=EUR), users can dynamically switch between US dollars, Euros, and British pounds. Let’s walk through how to implement this using block bindings.

First, register the post meta using register_post_meta() to make it available to blocks in the Editor:

add_action( 'init', function() {
    register_post_meta(
        'book',
        'book_price',
        array(
            'show_in_rest'      => true,
            'single'            => true,
            'type'              => 'string',
            'label'             => __( 'Book Price', 'text-domain' ),
            'description'       => __( 'Book price in USD', 'text-domain' ),
            'sanitize_callback' => 'wp_strip_all_tags',
        )
    );
} );

Next, you can use the block_bindings_source_value filter to intercept the price value when it’s displayed and convert it based on a query parameter. For instance, a URL with ?currency=GBP will automatically display the price in British pounds. The binding can be added to any block that supports content, like a Paragraph block, using the core/post-meta source.

add_filter( 'block_bindings_source_value', function( $value, $source, $args ) {
    // Only process if the source and key are correct.
    if ( 'core/post-meta' !== $source || 'book_price' !== $args['key'] ) {
        return $value;
    }

    // Get currency from query parameter (e.g., ?currency=EUR).
    $currency = isset( $_GET['currency'] ) ? sanitize_text_field( wp_unslash( $_GET['currency'] ) ) : 'USD';
    
    // Base price in USD.
    $price = floatval( $value );
    
    // Conversion rates (you might want to use a real API for live rates).
    $conversion_rates = array(
        'EUR' => 0.92, // 1 USD = 0.92 EUR
        'GBP' => 0.79, // 1 USD = 0.79 GBP
        'USD' => 1.00,
    );
    
    // Convert price.
    $converted_price = $price * ( isset( $conversion_rates[ $currency ] ) ? $conversion_rates[ $currency ] : 1 );
    
    // Format price with currency symbol.
    $currency_symbols = array(
        'EUR' => '€',
        'GBP' => '£',
        'USD' => '$',
    );
    
    $symbol = isset( $currency_symbols[ $currency ] ) ? $currency_symbols[ $currency ] : '$';
    
    // Format the price with 2 decimal places.
    return sprintf( '%s%.2f', $symbol, $converted_price );
}, 10, 3 );

Here’s a quick demonstration of how to use this new functionality:

This approach gives you a flexible way to modify block binding output based on user input or other parameters. While this example uses hardcoded conversion rates, you could easily extend it to use a currency conversion API for live rates.

If you are interested in learning more about the Block Bindings API, here are several articles to get you started:

• Introducing Block Bindings, part 1: connecting custom fields
• Introducing Block Bindings, part 2: Working with custom binding sources
• Getting and setting Block Binding values in the Editor

Props to @greenshady, @welcher, and @santosguillamot for reviewing this post.

In this session of the Developer Hours, the presenters took a deep dive into the advanced usage of tools like create-block and wp-scripts, along with a few others. They focused on solving common challenges and showcasing techniques that went beyond the basics, even for developers already familiar with these tools.

The session featured practical examples and insights to help participants work more efficiently, especially when building blocks, block themes, and Editor extensions. While the discussion covered more advanced implementations, it remained accessible to developers of all experience levels, with plenty of resources provided.

They highlighted WP Scripts’ features, such as targeting specific files, customizing output directories, and enabling fast refresh with hot module replacement. Ryan demonstrated creating custom templates for blocks and plugins, emphasizing efficiency and personalization. They also addressed common issues like SASS warnings and the need for Windows testers. Nick introduced Create Block templates for scaffolding blocks and plugins, encouraging community feedback to improve these tools. They concluded by inviting further discussion on potential enhancements and best practices.

Relevant links

• Block Development Environment (Documentation)
• wp-scripts
  • Get started with wp-scripts (Documentation)
  • @wordpress/scripts
  • Available Scripts
  • Examples: Build All The Things (GitHub)
• create-block
  • Get started with create-block (Documentation)
  • Creating an external project template for create-block (Dev Blog article)
  • Examples:
    • Create Block Templates (GitHub)
• Future improvements
• Automatically detect entry points for the default JS and CSS files (PR)

Props to @ndiego and @welcher for presenting and reviewing

Before diving into changes, WordPress 6.7 was released on November 12, so be sure to update your sites if you haven’t already!

Highlights

Style book updates

The style book in the Site Editor has received significant updates, integrating global styles controls and the style book preview directly into the Styles panel. By default, the preview displays the Site view, but users can easily switch to the Style book for a comprehensive block overview. Additionally, a new landing page has been added to the style book tabs, showcasing common theme blocks for a more streamlined and intuitive editing experience.

Filter the block editor rendering mode

As of WordPress 6.7, there was no way to programmatically set the default rendering mode of the Editor. With Gutenberg 19.8, it is now possible to control the rendering mode either via one of the new filters or during post type registration with the new default_rendering_mode property.

WordPress Playground

The Playground app now offers the Pull Request (PR) testers for WordPress Core and Gutenberg in the interface. It’s a more streamlined way to test contributor work before it’s merged into the next release, and should make contributing to the project by testing, providing feedback and filing bug reports much easier. 

Plugins and tools

Stabilizing experimental supports keys

Plugin authors and theme builders might appreciate the stabilization of the __experimentalBorder support and a few other common experimental block support flags.

DataViews and DataForm updates

The DataViews and DataForm components continue to be iterated on to include a new API, better extensibility support for retrieving information, and some documentation updates.

• getValueFromId now supports nested objects for default values.
• Developers working with DataViews can now make use of a new API to programmatically register and unregister fields for the various display methods.
• Documentation for the DataViews and DataForm components has been updated to add some missing properties.
• A new section about the Fields API has been added to the documentation. 
• An individual field can now declare a layout different from the one defined by the DataForm. 

Updates to core blocks

Several core blocks have been updated to enhance functionality and add support for existing features.

• The Social Link block now has support for contentOnly editing.
• The Page List and Post Content blocks now have border and spacing support.
• The Details Block now has anchor support.
• Border controls are hidden by default in the Heading block.
• The Query Loop block has been updated to receive templateSlug and postType, providing the block with additional context.

Notable bugs fixes

While many bugs have been addressed in the last month, there are a few that bear mentioning for extenders.

• wp-scripts start is now more resilient against developer errors.
• The  PluginPostStatusInfo slot was unintentionally removed and has now been restored.

Themes

Set a featured image directly from an Image block

Gutenberg 19.7 introduces a convenient workflow improvement: you can now set an image as the post’s featured image directly from an Image block. In the Image block’s Options dropdown, you’ll find a Set featured image option. Selecting it updates the post’s featured image with the image from the block. This feature is available in both the Post Editor and Site Editor.

A new category for starter patterns

An update in Gutenberg 19.7 makes starter patterns more accessible by adding a dedicated Starter Content category in the pattern inserter. Previously, these patterns were only available through a modal when creating a new page, disappearing once the modal was closed. The long-term goal is to replace the modal entirely, opening the inserter directly to the Starter Content category for a more seamless and intuitive workflow.

Resources

WordPress News

The WordPress News blog features posts covering the latest WordPress releases, and Make WordPress Core has started the planning for WordPress 6.8 and the remainder of 2025.

• WordPress 6.7 Field Guide
• WordPress 6.7 “Rollins” release post
• WordPress 6.7.1 Maintenance Release
• WordPress 6.7 Release Retrospective
• Proposal: Major releases for 2025
• WordPress 6.8 Call for Volunteers

Developer Hours and WordPress YouTube

It’s been a busy few weeks for Developer Hours and live streams. Check out the recordings below:

• Developer Hours: Exploring the Block Bindings API in WordPress 6.7
• Developer Hours: Improve your workflows with WordPress development tools
• Building Your First WordPress Gutenberg Block: Beginner’s Guide!
• WordPress Speed Build: Matt Mullenweg versus Jessica Lyschik

Recordings of all past Developer Hours sessions are available on WordPress.tv, and there is a wide range of content on the official WordPres.org YouTube channel.

Hallway Hangouts

Two Hallway Hangouts, which are community discussions about WordPress features, occurred over the past month:

• Hallway Hangout Blueprint Block Editor
• Hallway Hangout Playground for agencies

Developer Blog

Be sure to check out the latest tutorials on the Developer Blog if you haven’t done so yet. Stay tuned for more content showcasing the exciting new features released in WordPress 6.7.

• Snippet: How to lock WordPress blocks and prevent unlocking
• Snippet: How to disable heading levels in the Editor
• Snippet: How to disable the Font Library
• Bridging the gap: Hybrid themes

You can subscribe to the Developer Blog and get every new post delivered straight to your inbox.

Props to @ndiego and @bph for co-wrangling the resources in this post, writing portions of it, and reviewing the final draft.