web-dev-qa-db-ja.com

グーテンベルク拡張ブロックは新しいクラス名を追加します

私はそれらを拡張することによってすべてのブロックに追加のクラス名を追加しようとしています。 Documentation： 拡張ブロック

私はblocks.BlockEditを使って編集コンポーネントを修正しています。カスタムクラス名を追加したいです。

これまでのところ私はこれを持っています

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

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

ラッパーにカスタムクラスを追加することで機能しますが、デフォルトのブロッククラスは上書きされます。上書きせずに現在のクラスに追加することは可能ですか？

javascriptblock-editor
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