Gutenberg Block Development:只有一个 RichText 内容正在保存
Gutenberg Block Development: Only one RichText content is saving
我在块中添加了两个 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
方法(使用块的默认 save()
函数中的 return null;
。
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
根本没有保存。
我错过了什么?
为了调试,请在您的编辑函数中使用 console.log(props.attributes)
,并在您编辑时观察 contentHeading
的值是否发生变化。如果组件的状态或道具发生变化,每次都会调用 edit() 函数。根据我的幸运猜测 contentHeading
的来源应该是 'text' 而不是 children
.
尝试设置
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
组件。
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
方法(使用块的默认 save()
函数中的 return null;
。
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
根本没有保存。
我错过了什么?
为了调试,请在您的编辑函数中使用 console.log(props.attributes)
,并在您编辑时观察 contentHeading
的值是否发生变化。如果组件的状态或道具发生变化,每次都会调用 edit() 函数。根据我的幸运猜测 contentHeading
的来源应该是 'text' 而不是 children
.
尝试设置
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'
}