我正在尝试使用块API构建一个简单的自定义Wordpress块，但我很难让文本字符串在WPML翻译插件中正确显示以进行翻译。我见过其他插件构建的其他自定义块（例如Kadence块）完成了我正在尝试的工作，所以我知道这是可能的。
目标是让文本字符串在WPML翻译编辑器中单独注册。我正在构建的自定义块在WPML编辑器中显示为一个包含所有HTML的大字符串。
这些屏幕截图显示了Kadence Infobox自定义块如何呈现<RichText> 元素（第一个是<h2> 元素，第二个是<p>) 单独并且没有任何HTML。为了进行比较，您可以看到我的自定义块在WPML中显示为<RichText> 元素（a<blockquote> 和a<cite>) 以及所有HTML，包括包装器和容器标记。还可以参考WP编辑器中块的外观。
下面是我在registerBlockType（）函数中的javascript代码：
edit: ( props ) => {
const { attributes: { content, citation }, setAttributes, className } = props;
const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } );
};
const onChangeCitation = ( newCitation ) => {
setAttributes( { citation: newCitation } );
};
return (
<div className="hello-block--fullwidth alignfull hello-bg--blue hello-text--white">
<figure>
<RichText
tagName="blockquote"
multiline="p"
className="hello-tools-blue-cta__blockquote h2 mx-auto text-center font-weight-bold"
onChange={ onChangeContent }
placeholder={ __( \'Enter CTA message here...\', \'hello-tools\' ) }
value={ content }
keepPlaceholderOnFocus={ true }
/>
<RichText
tagName="cite"
className="hello-tools-blue-cta__cite d-block text-center"
onChange={ onChangeCitation }
placeholder={ __( \'Enter additional text (optional)...\', \'hello-tools\' ) }
value={ citation }
keepPlaceholderOnFocus={ true }
/>
</figure>
</div>
);
},
save: ( props ) => {
return (
<div className="hello-block--fullwidth alignfull hello-bg--blue hello-text--white">
<figure>
<RichText.Content
className="hello-tools-blue-cta__blockquote h2 mx-auto text-center font-weight-bold"
tagName="blockquote"
value={ props.attributes.content }
/>
<RichText.Content
tagName="cite"
className="hello-tools-blue-cta__cite d-block"
value={ props.attributes.citation }
/>
</figure>
</div>
)
}
我从Kadence块中获取的用于比较的Infobox块的代码如下所示（请注意，我只包含了第一个
<RichText> 元素为简洁起见，还有许多其他javascript似乎不相关）：
<RichText
className="kt-blocks-info-box-title"
formattingControls={ ( linkProperty === \'learnmore\' ? [ \'bold\', \'italic\', \'link\', \'strikethrough\' ] : [ \'bold\', \'italic\', \'strikethrough\' ] ) }
tagName={ titleTagName }
placeholder={ __( \'Title\' ) }
onChange={ onChangeTitle }
value={ title }
style={ {
fontWeight: titleFont[ 0 ].weight,
fontStyle: titleFont[ 0 ].style,
color: titleColor,
fontSize: titleFont[ 0 ].size[ 0 ] + titleFont[ 0 ].sizeType, lineHeight: ( titleFont[ 0 ].lineHeight && titleFont[ 0 ].lineHeight[ 0 ] ? titleFont[ 0 ].lineHeight[ 0 ] + titleFont[ 0 ].lineType : undefined ),
letterSpacing: titleFont[ 0 ].letterSpacing + \'px\',
fontFamily: ( titleFont[ 0 ].family ? titleFont[ 0 ].family : \'\' ),
padding: ( titleFont[ 0 ].padding ? titleFont[ 0 ].padding[ 0 ] + \'px \' + titleFont[ 0 ].padding[ 1 ] + \'px \' + titleFont[ 0 ].padding[ 2 ] + \'px \' + titleFont[ 0 ].padding[ 3 ] + \'px\' : \'\' ),
margin: ( titleFont[ 0 ].margin ? titleFont[ 0 ].margin[ 0 ] + \'px \' + titleFont[ 0 ].margin[ 1 ] + \'px \' + titleFont[ 0 ].margin[ 2 ] + \'px \' + titleFont[ 0 ].margin[ 3 ] + \'px\' : \'\' ),
minHeight: ( undefined !== titleMinHeight && undefined !== titleMinHeight[ 0 ] ? titleMinHeight[ 0 ] + \'px\' : undefined ),
} }
keepPlaceholderOnFocus
/>
