CoreListItem return sublist html in attributes.content

[MKlblangenois]

When I create a list with sublist inside <li>, the query in attributes.content of parent <li> return all HTML content, and duplicate the content at the end of content:



[theodesp]

Hey @MKlblangenois. Looking at the core/list-item block.json spec it looks like this is the expected behavior. The content attribute for this is located here:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/list-item/block.json

        "content": {
            "type": "rich-text",
            "source": "rich-text",
            "selector": "li",
            "__experimentalRole": "content"
        }

the selector targets a single li element so it will grab the content of the <li/> HTML node which will contain innerHTML. So the result will be HTML

[jasonbahl]

@MKlblangenois @theodesp I have 2 thoughts on this.

My first thought was:

Any field that returns HTML should return valid HTML. i.e. this field should return the HTML and include the opening and closing <li> tag so the client doesn't need to to this.

Since this field returns invalid HTML, it requires the user to wrap the field in an <li>{field.value}</li> which is confusing for users to consume and render.

However, the __typename of the Block does indicate what Type of block it is and core/list-item does declare that it is indeed a "list item" which is represnted by <li> so as a client consuming this block, it's not entirely uncalled for do to something like:

(pseudo)

switch ( block.__typename ) {
  case: 'core/list-item':
     return <li>{block.attributes.content}</li>
}

I think long-term it would be nice to see fields that return HTML return valid HTML though. If core WPGraphQL were to introduce an HTML Scalar, this field would fail validation as-is, for example.