Skip to content

How to Insert Images Inside Lists in WordPress Gutenberg Editor

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

  1. Create a list by adding a list block.
  2. Press Shift+Enter to go to the next line without proceeding to the next item in the list.
  3. At the top of the editor, click the small arrow on the block picker and select Inline Image.
    insert inlime image
  4. Now select or upload an image to insert from the Media Library.
  5. 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.
    change image width
    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.
  6. 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.

Tags:
Share:

6 Comments

  1. Thanks man!
    I was always adding a new image below, and when I added it to the list it was creating a new list below!

    This trick fixed it!

Leave a Reply

Feel free to share your comments or questions with me. I may not be able to respond immediately so please check later once I've approved your comment.

Your email address will not be published. Required fields are marked *

Kelvin Kathia

Kelvin Kathia is a writer that's passionate about sharing solutions to everyday tech problems. He's the founder and editor of Journey Bytes, a tech blog and web design agency. Feel free to leave him comments or questions regarding this post, or by leaving him a message on the contact page. If you found his content helpful, a donation is much appreciated.