我正在尝试创建一个自定义古腾堡 block ,该 block 将具有多个 RichText 组件的无序列表。
最终结果将类似于:
<ul>
<li>
<span class="class-one">First item</span>
<span class="class-two">Second item</span>
</li>
</ul>
我一直在玩这个 WordPress tutorial 中的食谱卡示例
我可以看到 RichText 组件如何成为多行以实现“li”作为获取列表的标记,但我不知道如何使用子 Richtext 组件实现多行。
这是我到目前为止所拥有的:
( function( blocks, editor, i18n, element, components, _ ) {
var el = element.createElement;
var RichText = editor.RichText;
var MediaUpload = editor.MediaUpload;
i18n.setLocaleData( window.gutenberg_examples_05.localeData, 'gutenberg-examples' );
blocks.registerBlockType( 'gutenberg-examples/example-05-recipe-card', {
title: i18n.__( 'Example: Recipe Card', 'gutenberg-examples' ),
icon: 'index-card',
category: 'layout',
attributes: {
ingredients: {
type: 'array',
source: 'children',
selector: '.ingredients',
},
ingredientname: {
type: 'array',
source: 'children',
selector: '.ingredientname',
},
},
edit: function( props ) {
var attributes = props.attributes;
return (
el( 'div', { className: props.className },
el( 'h3', {}, i18n.__( 'Ingredients', 'gutenberg-examples' ) ),
el( RichText, {
tagName: 'ul',
multiline: 'li',
value: attributes.ingredients,
className: 'ingredients'
},
el( RichText, {
tagName: 'span',
placeholder: i18n.__( 'ingredient name', 'gutenberg-examples' ),
value: attributes.ingredientname,
onChange: function( value ) {
props.setAttributes( { ingredientname: value } );
},
} ),
)
)
);
},
save: function( props ) {
var attributes = props.attributes;
return (
el( 'div', { className: props.className },
el( 'h3', {}, i18n.__( 'Ingredients', 'gutenberg-examples' ) ),
el( RichText.Content, {
tagName: 'ul',
className: 'ingredients'
},
el( RichText.Content, {
tagName: 'span',
className: 'ingredient-name',
value: attributes.ingredientname
}),
),
)
);
},
} );
} )
我认为问题是第一个 RichText 应该切换为其他内容,但我不知道将其更改为什么仍会将所有内容显示为列表。我尝试删除第一个 RichText 并将其设置为带有“li”标记的“ul”,然后编辑器显示第二个 RichText,但它不会将其显示为列表。
非常感谢任何帮助。
最佳答案
据我所知,没有像“多行”这样的选项可以将RichText扩展到子组件中。现在您可以做的是在 block 的开头声明两个额外的属性,然后在编辑函数中调用 RichText。所以这个 -
<ul>
<li>
<span class="class-one">First item</span>
<span class="class-two">Second item</span>
</li>
</ul>
变成 -
<ul>
<RichText
fontSize={textSize}
tagName="li"
placeholder={ __( 'Nature', 'text-domain' ) }
value={ imgOneTxt }
onChange={ (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
style={{ color: textColor, fontSize: textSize }}
isSelected={ isSelected }
keepPlaceholderOnFocus
/>
<RichText
fontSize={textSize}
tagName="li"
placeholder={ __( 'Nature', 'text-domain' ) }
value={ imgOneTxt }
onChange={ (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
style={{ color: textColor, fontSize: textSize }}
isSelected={ isSelected }
keepPlaceholderOnFocus
/>
</ul>
我知道,它不遵循 DRY 规则,但这就是我们目前古腾堡开发的情况。我希望这有帮助
关于wordpress - 古腾堡 block : How to add RichText an to un-ordered list,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52570735/