This is my first Post using the Gutenberg Block Editor. You’ll know by the end of this whether I was successful with it or not.
If you have already used Gutenberg (aka WordPress 5.0), you know that you can start writing a new Post (or Page) pretty much like you did when you used the Classic Editor. There’s a box where you type your article’s headline, and below that is a box where you start writing the body of your article itself.
That’s where I’m writing right now. (Actually, I usually compose my articles in Google docs first and then copy/paste them into the WP editor. But this time I’m typing directly into the Block Editor, so I can see how it really works.)
I’ll try going back to the Google-copy-paste method in the future to see if that still works as well as it used to.
One more thing before getting into the real topic of this Post: I just noticed that, when I hit Enter to start a new paragraph, the editor is creating a new Paragraph Block automatically.
I could go back and rearrange paragraphs by dragging them around in the editor or clicking up and down arrows. I could also add a new Paragraph Block by clicking a plus sign at the top middle of a block.
Nice.
Okay, one more thing, for a total of two: When you make your cursor hover over the active Paragraph Block, you see a sort of context menu that lets you change Paragraph type, change justification, add bold, Italic, and strikethrough type, add links, and make several more common edits via menu items hidden behind 3 vertical dots.
In other words, you can do pretty much everything you could do to your writing in the old editor. It’s just that your options aren’t always visible.
Links: Adding and Modifying Them
Let’s start with adding a basic link to some text.
Suppose I wanted to link to an external site (that is, to a page not on my site) such as Wikipedia.
Click here to go to Wikipedia.
Just above, I added a link by highlighting the entire text of the paragraph, clicking the link icon in the block’s menu, pasting the URL from the page I wanted, clicking the 3 vertical dots and selecting “Open in New Tab” option, and finally clicking the Apply down-and-left arrow.
I could have highlighted less text, say, just the “Click here” words and then done the same procedure.
If you choose to click that link above, it should open a new tab in your browser and take you to the Hyperlink page at Wikipedia.
If I want to change anything about that link, including removing it, I would click anywhere within the link text to bring up the same link menu that I used to create it in the first place.
Well, almost anything. I can’t dig into the HTML code behind the link itself. And this is something some of us (affiliate marketers) sometimes need to do.
Gutenberg Links: What Affiliate Marketers Need to Know
Sometimes affiliate marketers (and others) need to get into the HTML that the Web is still built on to make little changes to the code.
One common change that Amazon affiliates need to make is to turn affiliate links into “nofollow” links. (If you don’t know what that means, you’re probably not an affiliate marketer and probably will never need to know why we do this. Just ignore the following.)
Gutenberg provides a Code Editor (as opposed to the default Visual Editor) so you can make code-level changes.
To get to the Code Editor, look for and click the 3 vertical dots in the upper right of your editing screen.
As shown above, just below the Mode options, are the Editor options with Visual selected. Just click the Code Editor.
You’ll see your writing now surrounded by various tags. The link to Wikipedia I made above now looks like this.
The “wp:paragraph” lines are just comments, not something you actually typed. You can tell because they are in between what looks a little like arrows, plus an exclamation point.
What makes this a Paragraph Block is the opening “p” and closing “/p” tags. (Tags are always found in brackets, which are really less-than and greater-than signs.)
In between those tags you can see the link. The text I actually typed is near the end of the paragraph, just before the closing “/a” anchor tag.
An affiliate marketer needs to add this text: rel=”nofollow”. You can do this just about anywhere within the “a” anchor tag. The easiest place to do that is probably between the “a” and the “href”. There is no special relationship between the “a” and the “href”. That is, the one doesn’t always have to immediately follow the other – even though that’s how you normally see them. (The fact that there is a website called “Ahrefs.com” doesn’t matter either.)
After making your code changes, switch back to the Visual Editor using the 3 dots at the upper right again.
That’s it, affiliate marketers. Everything you need is still here in Gutenberg. It’s just located in different places or temporarily hidden from view.
