How to add a link to an Image in Gutenberg, WordPress

Gutenberg is the brand new WordPress editor which rolled out in the latest WordPress 5.0 update, replacing the previous “Classic Editor”. Even though there was a lot of fuss and worry about Gutenberg, it turned out to be pretty awesome for me. But using some parts of Gutenberg is still a mystery to some users. In this blog, I am going to cover how to add a link to an image in Gutenberg and make sure that it opens up the link in a new tab “on click”.

It is extremely important to know how to add a link to an image. If you are into affiliate marketing, you would definitely want to embed a nice looking banner of your affiliate product in your blog. Also making sure that it opens up the link in a new tab when someone clicks on it because obviously, you would not want the visitor to leave your site completely!

Step 1: Add the image

Hover over the block above which you want to add the image. A small plus icon will appear. Click on the plus icon.

Step 2: Choose the image block

After you have clicked on the plus icon, you will be provided with several options. From that option choose the image block.

Step 3: Upload the image from your computer

Step 4: Click on the Image

After the image is uploaded, please click on the image to select it. This would provide you with options.

Step 5: Click on the dropdown “Link To”

After you have click on the image, you will get several options/settings for this block in the right hand side. After you have scrolled down a little, you will see an option or drop-down called “Link To”. Click on that.

Step 6: Choose “Custom URL”

From the dropdown, choose the option called “custom URL”. After choosing this option from the drop-down, you will see more fields appear.

Step 7: Insert your URL/Link

Insert your link in the following field as shown below. Also make sure to toggle on the button “Open in New Tab”, this would make sure that the link opens up in a new tab, keeping the visitor in your website.

adding link to an image in gutenberg wordpress

After you have added the link and toggled the following option. Your interface should look like the following below.

Please make sure to update or save the changes after you are done for changes to take effect. Also clear your cache for good measure.

If you are still confused and need some help, then please CLICK HERE to contact me now.