代码之家 › 专栏 › 技术社区 › Subrata Sarkar

Gutenberg块开发:只有一个RichText内容正在保存

gutenberg-blocks

0

Subrata Sarkar · 技术社区 · 7 年前

我加了两个 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; 从block的默认值 保存() 功能。

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 元素存在。

问题是这两种方法都只是 文本内容 . contentHeading 一点也不省钱。

我错过了什么?

0 回复 | 直到 7 年前

1

0

Mehmood Ahmad 7 年前

用于调试 console.log(props.attributes) 在编辑函数中,观察 contentHeading 编辑时是否更改。如果组件的状态或属性更改,则每次都将调用edit()函数。根据我的幸运猜测 内容标题 应该是“文本”而不是 children .

2

0

user2835033 7 年前

尝试设置

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