Inline elements in Gutenberg

comments 6
WordPress

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

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.