Inline elements in Gutenberg

“To use inline elements in Gutenberg, insert the cursor at the position where you want to insert the inline element.

Found the instructions in a discussion on Github.

---

OK, let’s try it. The first thing I found is that the image should be small.

By that I mean is should not be so tall that it would increase the distance between the lines of text by pushing the lines apart to fit the image, because that looks bad.

So, here is some more text I am writing, followed by placing the cursor and adding the inline element block with   this tiny image of an envelope that is 15x21px. It is small enough that it does not reach or interfere with the line of text above. And it works. (At least in the Preview it works…)

It might need a bit of experimentation to get it to render correctly relative to the line with a different theme. I know that is the case, because I tried it on the Editor Blocks by Danny Cooper on a self-hosted site and the top rather than the bottom of the envelope was on the line.

And I was able to add a link within the image – click the envelope to try it.

Doing this again with the little blue envelope  but a different link.