Разработка блока Гутенберга: сохраняется только один контент RichText

Question

Я добавил два RichText компоненты в моем блоке.

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: 'h1,h2,h3,h4,h5,h6'
            },
            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="h1"
                        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 null;
            return(
                <div className={props.className}>
                    <div className="gray-bg">
                        <div className="constrain content">
                            <RichText.Content tagName="h1" value={ attributes.contentHeading } />
                            <RichText.Content tagName="p" value={ attributes.textContent } />
                        </div>
                    </div>
                </div>
            );

        },
    } );

Я попробовал два разных подхода к сохранению данных.

Использование по умолчанию save() функция

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

С помощью render_callback метод (Использование return null; из блока по умолчанию save() функция.

register_block_type( 'hallmark/white-content-container', array(
    'render_callback' => 'hall_render_white_content'
) );

function hall_render_white_content( $atts ) {
   $heading = $atts['contentHeading'];
   $raw_content = $atts['textContent'];
   $full_content = $heading . $raw_content;
   // var_dump($full_content);

   $content = hall_clean_shortcode_block_content( $full_content );

   return '<div class="gray-bg"><div class="constrain content">' . $content . '</div></div>';
}

atts['contentHeading'] элемент вообще не существует в $atts массив. Когда я проверяю var_dump( $attas ); она имеет textContentЭлемент присутствует.

Проблема в том, что оба подхода сохраняют textContent, contentHeading совсем не экономит.

Чего мне не хватает?

Answer 1

Попробуйте установить

attributes:{ contentHeading: { type: 'string', source: 'children', selector: 'h1' }, textContent: { type: 'string' selector: 'p' } },

Я думаю, что селекторы должны точно соответствовать тому, что установлено в save метод.

<div className="constrain content"> <RichText.Content tagName="h1" value={ attributes.contentHeading } /> <RichText.Content tagName="p" value={ attributes.textContent } /> </div>

Я думаю, вам также нужен уникальный селектор, поэтому, если у вас есть два абзаца RichText, вы можете сделать

textContentA: { type: 'string' selector: 'p.content-a' } textContentB: { type: 'string' selector: 'p.content-b' }

Answer 2

Для отладки используйте console.log(props.attributes) внутри вашей функции редактирования и наблюдайте, если значения contentHeading меняется или нет при редактировании. Функция edit() будет вызываться каждый раз, когда изменяется состояние или реквизиты компонента. Согласно моему счастливому предположению источник contentHeading должен быть "текст" вместо children,