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

Question

我正在尝试创建一个自定义 Gutenberg 块，该块将具有多个 RichText 组件的无序列表。

最终结果会是这样的：

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

中的食谱卡片示例

我可以看到 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 但它没有将其显示为列表。

非常感谢任何帮助。

Answer 1

据我所知，没有像“Multiline”这样的选项可以将 RichText 扩展到子组件中。您现在可以做的是在块的开头声明两个额外的属性，然后在编辑函数调用 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 规则，但这就是我们目前在 Gutenberg 开发方面所处的状态。希望对您有所帮助

Answer 2

也许这不是最新的答案，但对于将面临类似问题的其他人来说。我一直在尝试实现您上面描述的类似内容，在迷失了几天之后，我找到了这个 davidyeiser 的解决方案。我真的推荐这个教程： https://davidyeiser.com/tutorials/wordpress-create-dynamic-gutenberg-block (git repo: https://github.com/davidyeiser/detailer).

更容易manage/modify输入您想要的数据
易于遵循 DRY 规则
不需要依赖于 WP 插件（也不需要 ACF）

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

Gutenberg block: How to add RichText an to un-ordered list

wordpress

wordpress-gutenberg

gutenberg-blocks