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

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

0 голосов
/ 28 февраля 2019

Я добавил два 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>
     );
},

Сохранение в PHP:

Использование метода 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совсем нет сохранения.

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

Ответы [ 2 ]

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

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

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' }

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

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

...