it-swarm.com.ru

Гутенберг расширяет блоки, добавляет новое имя класса

Я пытаюсь добавить дополнительное имя класса для всех блоков, расширяя их. Документация: Расширяющиеся блоки

Я использую blocks.BlockEdit для изменения компонента редактирования. Я хочу добавить собственное имя класса.

Пока у меня есть это

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

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

Он работает путем добавления пользовательского класса в оболочку, но перезаписывает класс блока по умолчанию. Можно ли добавить к текущим классам без переопределения?

3
at least three characters

Да, вы можете сделать это с помощью функции 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' );
1
dgwyer