I ran into a situation recently where I wanted to add border controls to Heading and Paragraph blocks and also add border-radius support to Column blocks. This functionality is not yet available in WordPress Core or Gutenberg. In the case of the Column block, border-radius can introduce some tricky content overflow issues, but nothing I couldn’t handle manually in my own controlled environment.

Thankfully, there is a powerful client-side filter called blocks.registerBlockType that, among other things, allows you to modify block supports, such as border, color, dimensions, and typography. You may have seen other tutorials that use this filter, but I have not seen one that discusses adding functionality not currently available in WordPress.

So, in this article, I will show you how to use the blocks.registerBlockType filter to add the missing border controls and also modify the default typography controls on all blocks. This technique is useful for Editor curation and can be combined with other approaches, such as the one discussed in my recent article on another client-side filter.

Before I begin

It is important to note that the examples in this article add functionality to blocks that do not yet have this functionality, even in Gutenberg. If you implement the code, you may encounter minor issues depending on the block support you are adding or modifying. Usually, a bit of extra CSS solves the issue. For example, with border-radius, I needed to selectively add overflow: hidden to Column blocks.

Despite this warning, the best thing about this approach is that it is relatively future-proof. I am using native block supports to add border functionality. There is no custom implementation. If border support is ever added to Heading or Paragraph blocks in Core, I can simply remove my code, and everything will still work.

So, with that in mind, let’s get started.

Adding border support

To begin, I added a new file called modify-block-supports.js in my theme. This file is enqueued in the theme’s functions.php file with the following code. Depending on your own implementation, a utility plugin is also a viable approach.

/**
 * Modify block supports in the Editor.
 *
 * @return void
 */
function example_modify_block_supports() {
	wp_enqueue_script( 
		'example-modify-block-supports', 
		get_template_directory_uri() . '/assets/js/modify-block-supports.js', 
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'example_modify_block_supports' );

In the modify-block-supports.js file, I added the filter using addFilter from the @wordpress/hooks package. The syntax for the function looks like this:

const { addFilter } = wp.hooks;

addFilter( 'hookName', 'namespace', callback, priority );

Unlike PHP filters, JavaScript filters require a namespace as the second argument. The namespace uniquely identifies the callback function and can be anything you want. Priority is optional.

The callback function for the blocks.registerBlockType filter accepts two parameters. 

• settings – All of the block’s settings.
• name – The name of the block.

So, with that said, my filter to add border controls to Heading and Paragraph blocks while also adding border-radius support to Column blocks looks like this:

/**
 * WordPress dependencies
 */
const { addFilter } = wp.hooks;

/**
 * Adds border support to Column, Heading, and Paragraph blocks.
 *
 * @param {Object} settings - The original block settings.
 * @param {string} name - The name of the block.
 *
 * @returns {Object} The modified block settings with added border support.
 */
function addBorderSupport( settings, name ) {

	// Bail early if the block does not have supports.
	if ( ! settings?.supports ) {
		return settings;
	}

	// Only apply to Column, Heading, and Paragraph blocks.
  	if (
		name === 'core/column' ||
		name === 'core/heading' ||
		name === 'core/paragraph' 
	) {
		return Object.assign( {}, settings, {
			supports: Object.assign( settings.supports, {
				__experimentalBorder: {
					color: true,
					style: true,
					width: true,
					radius: true,
					__experimentalDefaultControls: {
						color: false,
						style: false,
						width: false,
						radius: false,
					}
				},
			} ),
		} );
	}

	return settings;
}

addFilter(
	'blocks.registerBlockType',
	'modify-block-supports/add-border-support',
	addBorderSupport,
);

This might look a bit complicated, but I am applying an updated list of block supports if the block name is one that I am trying to modify.

Border support is still considered experimental, which is why we use the property __experimentalBorder. Hopefully, this will be stabilized soon, but rest assured it is a native block support used by many other Core blocks. When enabled, border controls generate the correct block styles and CSS classes.

I’m also using the property __experimentalDefaultControls to set all of the border controls to hidden. This experimental setting allows you to define which controls are displayed by default. My next example will look at this in more detail.

Here’s what this applied filter will look like in the Editor for Heading blocks.

Modifying default typography controls

Notice how the code in the previous example sets the __experimentalDefaultControls to false for each border support. This hides all controls until a user manually enables them via the tools panel.

In a recent Hallway Hangout, there was some discussion about how to configure the default controls on each block. Some people want them all to be visible. Others, like myself, want to really personalize the experience and only enable the controls I use all the time and hide everything else.

Well, __experimentalDefaultControls to the rescue.

The following blocks.registerBlockType filter will set the default typography controls to fontSize and fontAppearance for all blocks that support typography. You could also configure specific defaults per block-type.

/**
 * WordPress dependencies
 */
const { addFilter } = wp.hooks;

/**
 * Modifies the default typography settings for blocks with typography support.
 * 
 * @param {Object} settings - The original block settings.
 * 
 * @returns {Object} The modified block settings with updated typography defaults.
 */
function modifyTypographyDefaults( settings ) {

	// Only apply to blocks with typography support.
	if ( settings?.supports?.typography ) {
		return Object.assign( {}, settings, {
			supports: Object.assign( settings.supports, {
				typography: Object.assign( settings.supports.typography, {
					__experimentalDefaultControls: {
						fontAppearance: true,
						fontSize: true
					}
				} ),
			} ),
		} );
	}

	return settings;
}

addFilter(
	'blocks.registerBlockType',
	'modify-block-supports/modify-typography-defaults',
	modifyTypographyDefaults,
);

With this code applied, the typography panel will be updated for all blocks:

These examples just scratch the surface of what you can do with the blocks.registerBlockType filter, so I encourage you to get out there and start experimenting. And let me know if you have an interesting real-world application of this technique. I am tentatively planning a more comprehensive article on the topic for the WordPress Developer Blog.