Not possible to insert image inside list items (<li>)

[alvarotrigo]

Description

Sometimes we might need to add image inside a list of steps.

<ul>
   <li>Step 1: Do this</li>
   <li>
       Step 2: Do that, see picture
       <figure><img src="picture" title="picture-here" /></figure>
   </li>
   <li>Step 3: Do this</li>
</ul>

Right now the only way to do this in Gutenberg is to split the list in 2 <ul> and have a picture in between every time we add a picture.

<ul>
   <li>Step 1: Do this</li>
   <li>
       Step 2: Do that, see picture
   </li>
</ul>
<figure><img src="picture" title="picture-here" /></figure>
<ul>
   <li>Step 3: Do this</li>
</ul>

It'd be nice to be able to keep a single <ul> list and just have the image inside the <li> item.

If this is not possible on the front-end, perhaps it can be done on the back-end so we can see the fixed HTML on the resulting published post.

Step-by-step reproduction instructions

Create a list.
Try to add a picture inside one of the bulleted items.

See how the HTML breaks into two lists. And the image is left outside.

Screenshots, screen recording, code snippet

No response

Environment info

• Latest WP

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

Hi
It is possible to insert images in list items from the toolbar:

See https://wordpress.org/documentation/article/more-text-editing-overview/

[alvarotrigo]

The image won't have the same properties as a normal image and it won't behave the same way. (Which indicates something's weird is going on)

It won't even be considered a "block" when using wp.data.select('core/editor').getBlocks()

For example, we can't edit the "alt" or "caption" value, change the "aspect ratio" or apply "styles" such borders and so on:

[alvarotrigo]

The image won't appear on the "List View" elements and it is impossible to move it outside the list to a normal image: (or at least I couldn't find a way)

[alvarotrigo]

Interesting enough, if I add the HTML code on the code input, then I can get what I need, but the list looks a bit weird because the bullet has no text on the fist line on the editor (although it looks normal once published)

[ellatrix]

Let's close this as a duplicate of #17999.