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>
     );
},

用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根本没有保存。

我想念什么？

Answer 1

要进行调试，请在编辑功能内使用console.log(props.attributes)，并在编辑时观察contentHeading的值是否正在更改。如果组件的状态或属性发生更改，则每次都会调用edit（）函数。根据我的幸运猜测，contentHeading的来源应该是“文本”而不是children。

Answer 2

尝试设置

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

古腾堡区块开发：仅保存一个RichText内容

2 个答案: