WordPress Block Editor: Block Filters Explained

As WordPress developers, we’ve come to appreciate the power and flexibility of the Block Editor (a.k.a. Gutenberg). While creating custom blocks is often the go-to approach, sometimes we just want to modify existing blocks — tweak how they behave, change their appearance, or even alter how they save data.

That’s where block filters come in.

In this blog, we’ll explore what block filters are, how we can use them to extend core or third-party blocks, and walk through real-world examples using code.

What Are Block Filters in WordPress?

Block filters are part of the WordPress hook system applied to Gutenberg blocks. They allow us to hook into various parts of a block’s lifecycle:

When it’s registered
When it’s rendered in the editor
When it saves data
And more

This gives us fine-grained control without having to create a block from scratch.

Why Use Block Filters?

Here are a few scenarios where block filters are incredibly useful:

Adding custom class names to core blocks (like core/paragraph)
Injecting custom attributes (eg-, adding alignment or tracking options)
Replacing or wrapping a block’s default edit or save component
Changing default settings or restricting block features

Common Block Filters

Here are some of the most used filters:

Filter	Description
`blocks.registerBlockType`	Modify block settings when it’s registered
`editor.BlockEdit`	Override or wrap the block’s edit component
`blocks.getSaveContent.extraProps`	Inject extra props (eg-, class) into saved markup
`blocks.getBlockDefaultClassName`	Override default class names
`blocks.getSaveElement`	Modify the output of the block’s save function

1. Add a Custom Class to All Paragraph Blocks

Let’s say we want every core/paragraph block to get a custom class like my-custom-paragraph.

const { addFilter } = wp.hooks;

function addCustomClassName( props, blockType, attributes ) {
    if ( blockType.name === 'core/paragraph' ) {
        return {
            ...props,
            className: `${props.className || ''} my-custom-paragraph`,
        };
    }
    return props;
}

addFilter(
    'blocks.getSaveContent.extraProps',
    'my-plugin/add-custom-class',
    addCustomClassName
);

2. Modify Block Settings on Registration

What if we want to disable the “drop cap” feature from the paragraph block?

const { addFilter } = wp.hooks;

function modifyBlockSettings( settings, name ) {
    if ( name === 'core/paragraph' ) {
        return {
            ...settings,
            supports: {
                ...settings.supports,
                dropCap: false,
            },
        };
    }
    return settings;
}

addFilter(
    'blocks.registerBlockType',
    'my-plugin/modify-paragraph-settings',
    modifyBlockSettings
);

3. Wrap the Block’s Edit Component

Need to inject UI or logic into a block’s editor UI? We can wrap the edit function using editor.BlockEdit.

const { addFilter } = wp.hooks;
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;

const withCustomEditWrapper = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        if ( props.name === 'core/paragraph' ) {
            return (
                <Fragment>
                    <div style={{ border: '1px solid red', padding: '10px' }}>
                        <strong>Custom UI:</strong> You’re editing a paragraph!
                    </div>
                    <BlockEdit { ...props } />
                </Fragment>
            );
        }
        return <BlockEdit { ...props } />;
    };
}, 'withCustomEditWrapper' );

addFilter(
    'editor.BlockEdit',
    'my-plugin/custom-block-edit',
    withCustomEditWrapper
);

Enqueuing the JavaScript

To make all this work, we’ll need to enqueue our JS file in the editor.

function my_plugin_enqueue_editor_assets() {
    wp_enqueue_script(
        'my-plugin-block-filters',
        plugin_dir_url( __FILE__ ) . 'my-plugin.js',
        array( 'wp-blocks', 'wp-hooks', 'wp-element', 'wp-compose', 'wp-editor' ),
        '1.0.0',
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'my_plugin_enqueue_editor_assets' );

Final Thoughts

Block filters are a powerful tool in our WordPress development toolkit. They let us modify existing blocks in a clean, extensible way — without forking or rewriting them. Whether we’re improving the editorial experience or enforcing consistent branding, filters help us tailor Gutenberg to our needs.

Lakshyajeet.