Add custom classes for blocks in editor based on custom attributes

Question

I have been able to add additional classes to the core/heading block using blocks.getSaveContent.extraProps filter, however, this only adds the class on the frontend, I would also like that custom class to be applied to the block element in the editor as followed.

I know i can use the blocks.getBlockDefaultClassName filter but dont know if I could do that based on custom attributes assigned to the block. Any help here would be much appreciated.

Answer 1

You can do this with the editor.BlockListBlock filter. More info here. This allows you to do something like the following:

const withCustomAttributeClass = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        const { attributes } = props;
        const { yourCustomAttribute } = attributes;
        const class = yourCustomAttribute ? 'my_custom_class' : '';

        return <BlockListBlock { ...props } className={ class } />;
    };
}, 'withCustomAttributeClass' );

addFilter(
    'editor.BlockListBlock',
    'your-plugin/custom-attribute-class',
    withCustomAttributeClass
);

In the above, I am just checking if the attribute exists and then am applying a class, but you could do all sorts of more complicated things here. Note that this filter will apply the class to every block with that custom attribute. However, props contains all of the block information, so you could exclude certain blocks as needed if you wanted.