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