Les blocs d'extension Gutenberg ajoutent un nouveau nom de classe

Question

J'essaie d'ajouter un nom de classe supplémentaire à tous les blocs en les étendant. Documentation: Extending Blocks

J'utilise blocks.BlockEdit pour modifier le composant d'édition. Je veux ajouter un nom de classe personnalisé.

Jusqu'ici j'ai cette

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

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

Cela fonctionne en ajoutant la classe personnalisée au wrapper mais en écrasant la classe de bloc par défaut. Est-il possible d'ajouter aux classes actuelles sans surcharger?

Answer 1

Oui, vous pouvez le faire via la fonction classnames().

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