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

Question

I am trying to create a custom Gutenberg block that would have an un ordered list of multiple RichText components.

The end result would be something like:

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

I have been playing around with the Recipe card example from this WordPress tutorial

I can see how the RichText component can be multiline to achieve an 'li' as the tag to get a list but I don't know how to have a multiline with sub Richtext components.

Here is what I have so far:

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

} )

I think the problem is the first RichText should be switched for something else but I don't know what to change it to that would still show everything as a list. I have tried removing the first RichText and setting it to just a 'ul' with an 'li' tag and then the editor shows the second RichText but it does not show it as a list.

Any help is greatly appreciated.

Answer 1

As far as I know, There's no option like "Multiline" to extend RichText into sub components. What you can do for now is to declare two extra attributes at the beginning of the block and then in the edit function call RichText. So this -

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

becomes -

<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>

I know, it doesn't follow DRY rule but this is what we're at right now in terms of Gutenberg development. I hope this helps