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?

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' );