How to Use Filter Hooks in Gutenberg

Gutenberg, the block editor for WordPress, has revolutionized the way we create and manage content on our websites. With its flexible block-based approach, it allows for endless customization possibilities. One of the key features that makes this flexibility possible is the use of JavaScript filter hooks. These hooks enable developers to modify and enhance the behavior of Gutenberg blocks, making it easier than ever to tailor the editor to your specific needs.

Filter hooks

In this guide, we will explore how to leverage JavaScript filter hooks in Gutenberg, empowering you to take control of your content creation experience and create dynamic, personalized web content effortlessly. Whether you’re a seasoned WordPress developer or just getting started with Gutenberg, understanding how to use filter hooks in JavaScript is a valuable skill that will open up new horizons for your web development projects.

How a filter hook works

To understand the functionality of a filter hook, let’s make a real example. Suppose, we want to add a custom class to the existing default paragraph block. let’s figure out — how can we do it.

Since we are talking about the Javascript filter hooks, we need to create a javascript file where we can keep our filter hook codes. To do this, you can either use your theme or a custom plugin whatever you like. I hope you have a javascript file, for example, I called it “custom-hook.js”

To add a custom class to the paragraph block, you can use the blocks.getSaveContent.extraProps filter. This filter allows you to add extra props to the element saved by the block.

Add the following codes to the file (custom-hook.js):

import { addFilter } from '@wordpress/hooks';

function addCustomClass( extraProps, blockType, attributes ) {
    let addedCustomClass = false;
    if ( blockType.name === 'core/paragraph' && !addedCustomClass ) {
        // Add the custom class
        extraProps.className = ( extraProps.className || '' ) + ' my-custom-class';
        // Set a flag to prevent adding the class again.
        addedCustomClass = true;
    }

    return extraProps;
}

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

In this example, the addCustomClass function is added as a filter for the blocks.getSaveContent.extraProps hook. This function is called when the paragraph block is saved, and it adds the my-custom-class class to the block.

Remember to replace 'my-plugin/add-custom-class' it with your actual plugin and filter name.

Alternative Hook

We can also do the same task using a different hook. We can use the editor.BlockEdit filter for this purpose. Here's an example of how to add a custom class to the paragraph block:

wp.hooks.addFilter('editor.BlockEdit', 'my-custom-attributes', (BlockEdit) => {
   let addedCustomClass = false;

   return (props) => {
       if (props.name === 'core/paragraph' && !addedCustomClass) {
           // Check if className is defined, and then add the custom class.
           props.attributes.className = (props.attributes.className || '') + ' my-custom-class';

           // Set a flag to prevent adding the class again.
           addedCustomClass = true;
       }

       return <BlockEdit {...props} />;
   };
});

1. We introduce a variable addedCustomClass that is initially set to false.
2. Within the filter hook, we check if the block being edited is a paragraph block (props.name === 'core/paragraph') and if addedCustomClass is false. If both conditions are met, we add the custom class and set addedCustomClass to true to prevent it from being added again.
3. We use (props.attributes.className || '') to ensure that the className attribute is defined. If it's undefined, an empty string '' is used to avoid adding an undefined class.

Custom Class using filter hook