it-swarm.com.de

Gutenberg-Erweiterungsblöcke fügen neuen Klassennamen hinzu

Ich versuche, allen Blöcken einen zusätzlichen Klassennamen hinzuzufügen, indem ich sie erweitere. Dokumentation: Blöcke erweitern

Ich verwende blocks.BlockEdit, um die Bearbeitungskomponente zu ändern. Ich möchte einen benutzerdefinierten Klassennamen hinzufügen.

Soweit habe ich das

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

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

Es funktioniert, indem die benutzerdefinierte Klasse zum Wrapper hinzugefügt wird, aber die Standardblockklasse wird überschrieben. Ist es möglich, an die aktuellen Klassen anzuhängen, ohne sie zu überschreiben?

Ja, Sie können dies über die Funktion classnames() tun.

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