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

Question

В настоящее время я строю собственный блок Hero. Я добавил 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>
    );
}

});

Answer 1

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

Я угадываю attributes.includeContent опора это ToggleControl это вопрос, да?

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

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