In this video you’re going to learn how to add links to text and images using Gutenberg.

This is a preview of the new WordPress editor which is expected to be released shortly. As the update hasn’t happened yet, I’m using the Gutenberg plugin to simulate the new editor experience. The real thing may be slightly different when it comes out.

As they are still fixing bugs prior to the release of WordPress version 5 it's not a good idea to install the Gutenberg plugin on a live site.

Create or use a practice website to play with the plugin.

In some respects most of the process of linking is the same as before but there are some important differences.

The main difference with linking in Gutenberg is that there are no advanced options.

You can’t force the links to open in a new tab. The idea here is to give the reader the choice of opening in a new tab or not.

In most cases that’s fine. But there are some situations where you don’t want the reader to lose their place in your document. Not everyone knows to right-click to open in a new tab.

Not everything in Gutenberg is going to be perfect.

And internal linking is much less automatic than before. Because there’s no advanced options window with links there’s no list of internal posts and pages to select from.

So the first, and most important, step is to open the web page you want to link to in a new tab. That could be the home page or a deep link to a particular article.

Copy the URL from the address bar. This is a sure-fire way to avoid typos.

Let’s look at a regular text link.

Highlight the text you want to use and click on the link icon. Paste the copied URL into the popup window. Then click the little arrow thingy to apply.

Test your link by right-clicking and select open link in new tab.

Now let’s look at an image link. Pretty much the same at the regular text link. Click on the image, select the link icon and paste in the URL you copied from the other tab.

Remember to click the arrow thingy to apply the link.

If you’re using a Pretty Link then copy the link from your list of Pretty Links instead of the browser.

You can add code to the link to force it to open in a new tab.

Click on the three dots top right and select Code Editor.

The code you'll want to add is:

target="_blank" rel="noopener"

So the complete link code will be:

<a href="https://marionblackonline.com" target="_blank" rel="noopener">click here</a>

If you’re not comfortable with editing code you could put all the links at the end of the document instead of placing them where they most logically would appear, within the post.

Related Training

WordPress Gutenberg: Create a New Post

WordPress Gutenberg: Add Headings

WordPress Gutenberg: Add Images

WordPress Gutenberg: Available Blocks

More of my Tutorials and Videos

As always I'm here to help you,

Please share the love, click 'Like This' (if you do). Ask a question, share something or leave a comment.