javascript - Add custom HTML markup to Gutenberg RichText

admin管理员组

文章数量:1304216

I'm using the RichText component to add some custom list on my Gutenberg Block.

function onItemsChange(items) {
    setAttributes({ items })
}

<RichText
    multiline="li"
    tagName="ul"
    value={attributes.items}
    onChange={onItemsChange}
    placeholder={__('Enter item list')}
/>

So this is rendering the next markup

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>

But I wanted to generate the next markup on every list item

<li class="list-item-class">
    <div class="flex">
        <!-- svg image -->
    </div>
    <p class="some-class">
          Item 1
    </p>
</li>

I was thinking of using some sort of replace on the onItemsChange function. Do you think this is a good approach? Or I'm doing it wrong? Any ideas? Maybe I need to use a Dynamic Block Yes I'm really lost here...

For example (I know this is not working):

function onItemsChange(items) {
    items = items.replaceAll('<li>', '<li class"list-item-class"><div class="flex"><!-- svg image --></div>');
    setAttributes({ items })
}

At this moment I was using the attributes:

items: {
    type: 'string',
    source: 'html',
    selector: 'ul',
},

But I think it would be better to use

items: {
    type: 'array',
    source: 'children',
    selector: 'ul',
},

本文标签： javascriptAdd custom HTML markup to Gutenberg RichText