ToggleControl не применяется в разделе сохранения - PullRequest
Новая
       7

ToggleControl не применяется в разделе сохранения

0 голосов
/ 31 января 2019

В настоящее время я строю собственный блок Героев.Я добавил ToggleControl, чтобы скрыть или показать содержимое в этом блоке.Это работает в разделе редактирования в блоке Гутенберга, также необходимо добавить класс в оболочку.Это также работает в разделе редактирования.

Странно то, что он не работает в разделе сохранения блока.Код, который я использую для установки класса, приведен ниже:

Он работает, как и ожидалось, в разделе редактирования 

edit: function( props ) {
    const { attributes, className } = props;

    const wrapperStyle = {
        backgroundColor: attributes.backgroundColor,
        backgroundImage: attributes.backgroundImage && 'url(' + attributes.backgroundImage + ')',
    };

    const classes = classnames(
        className,
        dimRatioToClass( attributes.backgroundOpacity ),
        {
            'has-background-dim': attributes.backgroundOpacity !== 0,
        },
        attributes.position,
        { [ `align${ attributes.align }` ]: attributes.align && attributes.fullWidthBackground },
        { [ `has-${ attributes.includeContent ? 'content' : 'no-content' }` ] : attributes.includeContent },
    );

    return (
        <Fragment>
            <Inspector { ...props } />
            <div style={ wrapperStyle } className={ classes }>
                <div className="wrapper-inner">
                    <div className="wrapper-inner-blocks">
                     { attributes.includeContent === true &&
                        <InnerBlocks />
                     }
                    </div>
                </div>
            </div>
        </Fragment>
    );
},

Но в разделе сохранения стиль не применяется, а условныйтег не работает.См. Код ниже.

Я что-то упустил? 

save: function( props ) {
    const { attributes, className } = props;

    const wrapperStyle = {
        backgroundColor: attributes.backgroundColor,
        backgroundImage: attributes.backgroundImage && 'url(' + attributes.backgroundImage + ')',
    };

    const classes = classnames(
        className,
        { [ `has-${ attributes.includeContent ? 'content' : 'no-content' }` ] : attributes.includeContent },
        { [ `align${ attributes.align }` ]: attributes.align && attributes.fullWidthBackground },
        dimRatioToClass( attributes.backgroundOpacity ),
        {
            'has-background-dim': attributes.backgroundOpacity !== 0,
        },
        attributes.position,
    );

    return (
        <div style={ wrapperStyle } className={ classes }>
            <div className="wrapper-inner">
                <div className="wrapper-inner-blocks">
                    { attributes.includeContent === true &&
                        <InnerBlocks.Content />
                    }
                </div>
            </div>
        </div>
    );
}

});

1 Ответ

0 голосов
/ 31 января 2019

Я не могу комментировать, поэтому я должен опубликовать ответ вместо этого: /

Я предполагаю, что attributes.includeContent опора - это вопрос ToggleControl, да?

это установлено как логическое значение в атрибутах?

Что вы получите, когда сохраните его в файле console.log?Как насчет того, когда вы console.log его тип в сохранить?Мне просто интересно, если бы это заканчивалось как строка, которая стала бы истинной.

...