How Can I nest in Gutenberg Richtext multiline list block

Question

I build Custom block type by using WordPress Gutenberg.

As core/list block , I want to nest list tag. My ideal output is like bellow.

<ul>
  <li>list1</li>
  <li><ul>
      <li>nested list1</li>
      <li>nested list3</li>
      </ul>
</ul>

My Code is like this.

Can RichText nest or have child?

<RichText
        style={{marginBottom:mb}}
        tagName="ul"
        value={ lists }
        onChange={  (value) => {
            setAttributes({ lists: value})
        } }
        multiline="li"
        formattingControls={[]}
/>

Thank you.

Answer 1

The core WordPress Gutenberg List Block already supports for multilevel/nested lists like you are trying to make.

If you would like to create your own similiar block, the source code of the List Block is a great place to start to see how it uses <RichText/>. No child blocks are added to <RichText/>, instead it calls a function that formats then returns the list contents with/without indentation. The content is then saved as markup, eg <ul><li>..</li></ul> in the blocks attributes as values and the source is html, enabling the list to be re-edited by <RichText/>.