How to Change Core Blocks with Block Filters

In this tutorial we are about to learn how to work with WordPress block filters, blocks.registerBlockType in particular. This filter allows not only to change block attributes and their default values but also other block data like title, description etc.

How WordPress Block Filters Work?

I am pretty sure you’re familiar with WordPress PHP filter hooks, which allow us to modify WordPress in so many different ways. For example we can easily modify post content and to display something at the end.

add_filter( 'the_content', 'rudr_add_something_after_content', 99 );

function rudr_add_something_after_content( $content ) {
	return $content . ' share buttons or something';
}

The block filters look similar, but remember, they should be performed in JavaScript.

wp.hooks.addFilter( 'hookName', 'namespace', rudrModifySomething, 99 )

function rudrModifySomething( something ) {
	// we can modify it somehow first
	return something
}

Or with a destucturing of the wp.hooks object and an arrow function it will look like:

const { addFilter } = wp.hooks

addFilter( 'hookName', 'namespace', something => {
	// we can modify it somehow first
	return something
}, 99 )

But where to run this JavaScript? You can just create a JS file, for example my-block-filter.js, and include it using enqueue_block_editor_assets action hook.

add_action( 'enqueue_block_editor_assets', function() {

	wp_enqueue_script(
		'my-block-filters',
		plugin_dir_url( __FILE__ ) . 'my-block-filters.js',
		array( 'wp-blocks', 'wp-dom' )
	);

} );

If you’re using it inside a theme, not in a plugin, replace plugin_dir_url( __FILE__ ) with get_stylesheet_directory_uri() . '/'.

Modifying Core Block Default Attribute Values

How to make images automatically centered

wp.hooks.addFilter( 'blocks.registerBlockType', 'rudr/img', ( settings, name ) => {

	if( 'core/image' === name ) {

		return lodash.assign( {}, settings, {
			attributes: lodash.assign( {}, settings.attributes, { 
				align: {
					type: 'string', 
					default: 'center'
				} 
			} )
		} )
		
  }

  return settings
	
})

In case you didn’t know:

• core/image, as you might have guessed is an “Image” block slug, the full list of core block slugs you can find in here.
• lodash is a JavaScript library which is available in Block Editor and we are free to use it, in this specific example lodash.assign() allows to add or modify block properties while preventing the object from mutating. You can also use lodash.merge() – it allows you to not specify attribute type another one more time (or other peroperties we are not going to change).

The result:

Change custom block default attributes

The whole idea of this tutorial came to me when a client of mine who purchased my plugin Simple Carousel Block asked me about a possibility to modify the default values of its attributes. So let’s try to do it right now with blocks.registerBlockType hook.

Let’s say that we would like default “Slides to show” to be 4 and “Dots navigation” turned on (see the screenshot below).

The code would be:

wp.hooks.addFilter( 'blocks.registerBlockType', 'rudr/atts', ( settings, name ) => {

	if( 'rudr/carousel' === name ) {

		return lodash.assign( {}, settings, {
			attributes: lodash.assign( {}, settings.attributes, {
				slides_to_show: {
					type: 'number',
					default: 4
				},
				pagination: {
					type: 'boolean',
					default: true
				}
			} )
		} )

  }

  return settings

})

If you’re wondering where did I find custom block slug (rudr/carousel) and its attribute names (slides_to_show, pagination), you just need to take a look inside block.json file.

Modifying Any (Almost) Block Data

Block attributes is not the only thing we can change with blocks.registerBlockType hook. In order to get a clear picture of what block data we can actually change, let’s just run console.log( settings ) for a paragraph block.

wp.hooks.addFilter( 'blocks.registerBlockType', 'rudr/smth', ( settings, name ) => {

	if( 'core/paragraph' === name ) {
		console.log( settings );
	}

	return settings

})

Now let’s just take a look inside a browser console:

And we can change pretty much everything in here! Let’s give it a try now.

Change core block titles and descriptions

const { addFilter } = wp.hooks

addFilter( 'blocks.registerBlockType', 'rudr/changetitle', ( settings, name ) => {
	if( 'core/paragraph' === name ) {
		return lodash.assign( {}, settings, {
			title: 'Piece of text',
			description: 'Start your article with a nice piece of text.'
		} )
  }

  return settings

})

The result:

Add paragraph wide alignment support

const { addFilter } = wp.hooks
const { assign, merge } = lodash

addFilter( 'blocks.registerBlockType', 'rudr/changesupport', ( settings, name ) => {

	if( 'core/paragraph' === name ) {

		return assign( {}, settings, {
			supports: merge( settings.supports, {
				align: [ 'wide' ]
			})
		} )

	}

  return settings

})

# Gutenberg, Gutenberg Blocks

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X