The Gutenberg editor modular approach makes for an organized feel however its quirks take time to get used to. Such is the case with lists and inline images.
For instance, if you paste some plain text with numbers, the Gutenberg editor will go ahead and create an ordered list for you. This comes across as high-handed, but it’s no doubt time saving for those that typically make use of lists in their posts.
A common challenge with lists however reveals itself when one needs to insert images inside the lists. Normally, one has to add an image block in order to insert an image into the editor. Doing this however inside lists will only break it since the image block cannot be nested inside the list.
A solution to this limitation is to use inline images. In the early iterations of the Gutenberg editor this wasn’t possible, however they have since added the feature (though I reckon many people are not aware of it). Here’s how to go about it.
Adding Inline Image inside a List Block
- Create a list by adding a list block.
- Press Shift+Enter to go to the next line without proceeding to the next item in the list.
- At the top of the editor, click the small arrow on the block picker and select Inline Image.
- Now select or upload an image to insert from the Media Library.
- The image will be inserted, however it will be scaled to a width of 150px. To resize the image to its original size, enter its original width in the box floating beside the image, then select Apply or Enter.
You can also scale it to a different width if you wish. If you wish to remove the image, just select it and press the Delete key. Note however that it’s not possible to give the inline image a caption.
- Now just press enter to proceed with your list and that’s it!
You’ll notice that by default, the images inside the list block are aligned left. You can however center align the images using some custom CSS and additional classes for specific lists.