古腾堡块:如何将富文本添加到无序列表中

Question

我正在尝试创建一个自定义的古腾堡块，该块将具有多个富文本组件的无序列表。

最终结果将是这样的：

<ul> <li> <span class="class-one">First item</span> <span class="class-two">Second item</span> </li> </ul>

我一直在玩这个WordPress教程中的食谱卡示例

我可以看到富文本组件如何多行以实现"li"作为标签来获取列表，但我不知道如何使用子富文本组件的多行。

这是我到目前为止所拥有的：

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

我认为问题是第一个富文本应该切换为其他内容，但我不知道将其更改为什么，这仍然会将所有内容显示为列表。我尝试删除第一个富文本并将其设置为带有"li"标签的"ul"，然后编辑器显示第二个富文本，但它没有将其显示为列表。

任何帮助将不胜感激。

Answer 1

据我所知，没有像">多行"这样的选项可以将富文本扩展到子组件中。您现在可以做的是在块的开头声明两个额外的属性，然后在编辑函数中调用 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 规则，但这就是我们现在在古腾堡开发方面所处的位置。我希望这有帮助

Answer 2

也许这不是最新的答案，但对于另一个将面临类似问题的人来说。我一直在尝试实现您上面描述的东西，经过几天的损失，我找到了这个 davidyeiser 的解决方案。我真的推荐本教程： https://davidyeiser.com/tutorials/wordpress-create-dynamic-gutenberg-block(git 存储库：https://github.com/davidyeiser/detailer(。

• 更容易根据需要管理/修改输入的数据
• 易于遵循的干燥规则
不需要
• 对WP插件的依赖(ACF也不需要(