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.

The real challenge with lists however comes into play if one is to insert images inside the lists. As it’s the case, one must add an image block in order to insert an image into the editor. However doing this will only break the list since the image block cannot be nested inside the list.

A solution for this 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.

Advertisements

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!
  7. Advertisements

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:

Author

Kelvin Muriuki is a web content developer that's passionate about keeping the internet a useful place. He is the founder and editor of Journey Bytes, a tech blog and web design agency. Feel free to connect with him regarding the content appearing on this page or on web and content development.

4 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 *