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.


6 comments

  1. susurrus · September 22, 2018

    When I click on the envelope, I’m taken to the same post again in a new window, but with no image. Gutenberg may not like my browser (Safari and up to date so far as I know) as it was buggy for me when I tried it on my test site.

    Like

    • David Bennett · September 22, 2018

      That’s not a bug. I set the link to simply the home page of photographworks.me – It just so happens that the top post is this one.

      Like

    • David Bennett · September 22, 2018

      I’ll add another envelope now with a different link and you will see that it works.

      Like

  2. Margy · September 22, 2018

    Looks like you are good to go on inline elements!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.