Author MarionBlack
2014
2
86
Premium
Ambassador
Rank 86
Unfollow

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.

Join the Discussion
Write something…
Recent messages
wb5yjs Premium
Some of us have never heard of "Gutenberg". Therefor, a good place to start would be at the
beginning by removing the mystery of "Gutenberg"... explaining the Who, What, When, Where,
Why, What-If & How.
Reply
PatsyC Premium
Hi Wally, I just noticed your comment. I'll leave you with a link to my recent post from yesterday.
The first 2 links are from the past few weeks explaining everything you have asked.

https://my.wealthyaffiliate.com/patsyc/blog/upcoming-wordpress-gutenberg-5-0-and-easy-step-by-step-tutorials/btd
Reply
MarionBlack Premium
Yes, Wally. I started at the beginning about 2 weeks ago but I've been sick since then. The links are at the bottom of the post.
Reply
YumaBloggers Premium
In short, another move away from what we want for our blogs towards what others have decided is what we should do with our blogs. Thank God they left the part in to edit our own HTML to make it happen now only those with no HTML skills will be forced to conform.

Andy
Reply
MarionBlack Premium
This is the worst move I've seen with the new update. Just about everything else is a step in the right direction. I've tried to give a couple of workarounds. At least there's an option to revert to the old "Classic" editor.
Reply
LTMLifestyle Premium
Great and very helpful post Marion. Thanks for sharing
Lilian
Reply
MarionBlack Premium
My pleasure Lilian.
Reply
buffetearns Premium
Thank you Marion

Wayne
Reply
MarionBlack Premium
You're welcome Wayne.
Reply
buffetearns Premium
A great weekend to you!

Wayne
Reply
YvetteC2 Premium
This is very helpful information, Marion. As usual, you have done a wonderful job with this training. I appreciate all you do for us.

Thank you,
Yvette
Reply
MarionBlack Premium
It's always a pleasure to share Yvette.
Reply
YvetteC2 Premium
You're the best, Marion!
Reply
Top