Gutenberg extend blocks add new class name

I’m trying to add an extra class name to all the blocks by extending them. Documentation: Extending Blocks

I’m using blocks.BlockEdit to modify the edit component. I want to add a custom class name.

So far I have this

const withClass = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        let wrapperProps = props.wrapperProps;
        wrapperProps = {
            ...wrapperProps,
            className: 'my-custom-class',
        };

        return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
    };
}, 'withClass' );

It’s working by adding the custom class to the wrapper but it is overwriting the default block class. Is it possible to append to the current classes without overriding?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Yes, you can do this via the classnames() function.

import classnames from 'classnames';

const withClass = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        let wrapperProps = props.wrapperProps;
        wrapperProps = {
            ...wrapperProps,
            className={ classnames( 'my-custom-class', props.className ) }
        };

        return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
    };
}, 'withClass' );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0