How to use render_block filter in WordPress

This filter is used to filter the content of a single block. It’s a very useful filter to modify the content of a block before displaying it on the page. e.g if you want to add a div wrapper on a ‘core/paragraph’ type of block then you can use this filter.

To use the render_block filter, first, you have to register it using add_filter. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

We at WePlugins, always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function modify_render_block_defaults which takes 3 parameters and we registered using add_filter. The first parameter render_block is the name of the hook, The second parameter modify_render_block_defaults is the name of the function that needs to be called, the third parameter is the priority of calling the hook if the same hook is used multiple times and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometimes, you have to remove a registered hook so you can use remove_filter to remove the render_block filter.

Parameters

Below are the 3 parameters required to use this hook.

• $block_content : (string) The block content is about to be appended.
• $block : (array) The full block, including name and attributes.
• $instance : (WP_Block) The block instance.

Live Example

In this live example, I’ve added a stylish touch by wrapping all ‘core/paragraph’ blocks with a red background and white font color using a div. Check it out the source code below!

function modify_render_block_defaults($block_content, $block, $instance) {
    // Update the $block_content variable according to your website requirements and return this variable. You can modify the $block_content variable conditionally too if you want.</div>
if($block['blockName'] == 'core/paragraph') {
return "<div style='background:red; color:white;padding:10px;'>".$block_content."</div>";
} else {
return $block_content;
}
}
// add the filter
add_filter( "render_block", "modify_render_block_defaults", 10, 3 );

Below is an generic example of how you can use this hook.

                        function modify_render_block_defaults($block_content, $block, $instance) { 
   
                            // Update the $block_content variable according to your website requirements and return this variable. You can modify the $block_content variable conditionally too if you want.

                            return $block_content; 
                        }
                        // add the filter
                        add_filter( "render_block", "modify_render_block_defaults", 10, 3 );

To remove a hook callback, use the example below.

remove_filter( "render_block", "modify_render_block_defaults", 10, 3 );

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

WePlugins (formerly Flipper Code) is a Premium WordPress Plugins development company and integrating new functionalities into WordPress sites in the form of custom WordPress Plugins since 2012. If you’re having any trouble using this hook, please contact our WordPress Development Team and we’d be happy to assist you.