Разработка блока Гутенберга - троичный оператор не работает - PullRequest
Новая
       18

Разработка блока Гутенберга - троичный оператор не работает

0 голосов
/ 05 марта 2019

Я создал следующий блок Гутенберга: 

const { __ } = wp.i18n;
const { registerBlockType, Heading } = wp.blocks;
const { Fragment } = wp.element;
const { RichText, InnerBlocks } = wp.editor;

function hall_block_gray_content() {

    registerBlockType( 'hallmark/gray-content-container', {
        title: __( 'Gray Content Container' ),
        icon: 'grid-view',
        category: 'hallmark-blocks',
        keywords: [
            __( 'Hallmark gray content' ),
            __( 'Hallmark' ),
            __( 'Gray content container' ),
        ],

        attributes:{
            contentHeading: {
                type: 'string',
                source: 'children',
                selector: 'h4',
                default: ''
            },
            textContent: {
                type: 'string'
            }
        },

        edit: function( props ) {

            var textContent = props.attributes.textContent;
            var contentHeading = props.attributes.contentHeading;

            function onChangeTextContent( content ) {
                props.setAttributes( { textContent: content } );
            }

            function onChangeHeading (heading) {
                props.setAttributes( { contentHeading: heading} );
            }

            return (
                <div className={ props.className }>
                    <label className="editor-content-section-label">Content for gray section</label>
                    <RichText
                        tagName="h4"
                        value={contentHeading}
                        onChange={onChangeHeading}
                        placeholder={ __( 'Add a heading' ) }
                        keepPlaceholderOnFocus
                    />
                    <RichText
                        tagName="p"
                        className={props.className}
                        onChange={onChangeTextContent}
                        value={textContent}
                        placeholder={ __( 'Add content' ) }
                        keepPlaceholderOnFocus
                    />
                </div>
            );
        },

        save: function( props ) {
            return(
                <div className={props.className}>
                    <div className="gray-bg">
                        <div className="constrain content">
                            { props.attributes.contentHeading ? <RichText.Content tagName="h4" value={ props.attributes.contentHeading } /> : "" }
                            <RichText.Content tagName="p" value={ props.attributes.textContent } />
                        </div>
                    </div>
                </div>
            );
        },
    } );

    /* Gray content block ends */
}

export default hall_block_gray_content();

Я хочу, чтобы раздел заголовка был необязательным, т. Е. Если кто-то не вводит заголовок, <h4></h4> не должен отображаться. Я использовал троичный оператор, чтобы проверить, существует ли props.attributes.contentHeading в функции save, и попытался условно отобразить тег <h4>.

Но это всегда рендеринг пустого тега контейнера <h4>, например:

<h4></h4><p>Content is here</p>

Как правильно это сделать?

...