Getting Started with Gutenberg – A How-To Guide for Creating Engaging Blog Posts with Gutenberg.

---

Embracing GUTENBERG ~ a blogger’s journey, one block at a time.

Gutenberg is a game-changer in the world of blogging. I admit, when it first came out, I wasn’t a fan. In this digital medium, we tend to gravitate to the familiar. After years of blogging, I’m guilty of this well-entrenched mindset. When Gutenberg was introduced, I was completely lost when I tried to format my first blog post. Blocks? Really? Why do you hate me so? After ten minutes of frustration, I surrendered and returned, with zealous enthusiasm, to my dear old friend – Classic Editor. Gutenberg was the enemy.

But, as we all know, the one guaranteed constant in this progressive digital age is CHANGE. Fear it or embrace it. From the headline, you can see where I’m going with this.

Before I jump into this post, my first suggestion/piece of advice is this: don’t try to learn Gutenberg if you’re under a tight deadline to publish a blog post. Just don’t. Be kind to yourself AND your keyboard. You’ll surely deem it the unwelcome intruder of your personal space. Truth. If you’re a blogger, you know what I mean. Blogging is personal.

Remember writing your first blog post all those years/months ago? Trying to figure out the WordPress Classic Editor? If you’re still blogging, you succeeded. High five, my friends! Now… let’s do it again with Gutenberg. Game on!

---

In a series of posts, I’m setting out to highlight the numerous features of Gutenberg in all their glory. Trust me on this, if you’re not using it, you’re missing out on a blogging game changer. And PLEASE, don’t let a bad first impression tarnish the possibility of a lasting new, vibrant friendship.

I’m also going to be blogging about another FREE plugin called Gutenberg Blocks – Ultimate Addons for Gutenberg. This is a must, too. A hands-down gem of WordPress plugins. Seriously, it’s that awesome.

In this post, we’ll look at:

• Adding a Block
• Rearranging Blocks
• Changing a Block Style
• Removing a Block
• Adding Colour Background to Text and a Drop Cap
• Duplicating a Block
• Embedding a Video
• Creating a Hyperlink
• Creating and Saving a Reusable Block

---

---

So many Options. So many Possibilities

When we’re formatting a post using Gutenberg, we’ll see a list of Categories, as shown in the image below. Within each Category, there are numerous options. These options are referred to as Blocks. I accepted Gutenberg as a valued tool when I embraced these Blocks as possibilities of offering engaging content to readers.

---

The second piece of advice is: toggle through the list of Categories and just view all that’s at your fingertips. Within each Category are more options that you’re guaranteed to recognize. EVERY tool from the Classic Editor is here. We just access it differently. Also, in an ironic twist, the Classic Editor is an option under the Formatting Tab! It’s tempting I know, but let’s stay focused.

---

So many possibilities!

---

---

Adding Blocks

Just like any blog post or page, our goal is to have rich, engaging content. We begin with an enticing Heading, followed by content in various forms.

We can add a Block in two ways.

We can click on the +Plus Sign in the top left corner.

---

---

We can click on the +Plus Sign at the top or bottom centre of each Block.

---

---

Let’s browse the Categories and choose the Block style we’d like to use.

---

---

Under Common Blocks, we’ll find the Heading Block.

---

---

After we add a Block, we’ll see a list of elements we’ll be using. Each element has its own drop-down menu.

---

---

If you don’t see it, click on the Settings tab on the right of the Publish tab.

---

---

We can add and edit our Heading. We can choose the Heading Style and Alignment.

---

---

I began this post with a Heading followed by an Image.

I include images with every blog post and page, as I’m sure you do. In Gutenberg, it’s quite simple.

---

Adding an Image

Under Common Blocks, we’ll find the Image Block.

---

---

This will open the Image Block. We can drag and drop our image, upload, select from your media library, or insert from URL.

---

---

Rearranging Blocks

Rearranging Blocks is another awesome feature in Gutenberg. When we begin our post, it’s nice to keep in mind that we can rearrange content whenever we’d like. No need for copy and paste. Not saying that copy and paste is such a burden, but with Gutenberg, we can rearrange our content with ease.

When we hover over the block, we’ll see up and down arrows on the left side of the block, along with six dots. We can move the block up or down with the arrows, or click on the dots and drag the Block to our preferred location.

---

---

NOTE: To see the up and down arrows, the Spotlight Mode needs to be unchecked. We can do this by clicking on the three dots on the far right, as displayed in the image below. Many people experienced this frustration. One click, easy fix.

---

---

Whenever we press enter/return we are adding a new block. This is defaulted to begin a new paragraph. It’s great for breaking up long text into biteable chunks.

---

Changing Block Style

We can change the Block Style we’re using to another block style by following these quick and easy steps.

I should point out that when we’re using a Block we’ll see the icon that represents that particular Block style. In the image below, we see the T for Heading icon as the sixth icon from the left. If we’re changing a Paragraph Block, we’ll see a Paragraph icon in this spot.

---

---

To change the Block Style, we just hover our mouse over the relevant icon and we’ll see the two twisted arrows and the Change Block Type or Style will appear.

---

---

We can change a Heading Block to a Paragraph Block. Our options will depend on what style of Block we’re using.

---

---

Removing a Block

We can remove a block by clicking on the three vertical dots in the editor. Then click on Remove Block.

---

---

Adding a coloured background and a drop cap

A feature I love in Gutenberg is the option of adding colour behind the text, as in the example above. It’s quite simple to do.

Adding colour and customizing text can be done while using a Paragraph Block.

When we’re in the Paragraph Block, we’ll see our options on the right side of the screen under Block.

---

---

We can edit Text Settings, Colour Settings, and Advanced.

Under Text Settings, we can change the font size and add a Drop Cap to the first letter of a paragraph by turning on the Drop Cap option. I often do this with the first paragraph of my blog post or page.

---

To colour the background, we just click on Colour Settings. We can select from defaults or enter a custom colour, ie. branding colours.

---

---

We can choose from the colour spectrum or enter a hex#. I used hex#.

---

---

Duplicating a Block

We can easily Duplicate a Block. Let’s use the colour background as an example.

To Duplicate a block we click on the three vertical dots in the editor. Then click on Duplicate.

---

---

Easy peasy! This saves time while ensuring blog post colour consistency.

---

---

Adding a HyperLink

Adding a Hyperlink to text is a must in blogging. We want to create links to other relevant content on our site and/or to respected outside (re)sources.

Adding a hyperlink is a simple process in Gutenberg. We highlight our text. Then click the hyperlink option, which is located at the top of the editor.

---

---

We paste or type our URL address into the window.

---

---

Then click on the drop-down arrow for Link Settings.

---

---

When creating a hyperlink, it’s important to change the settings to Open in New Tab so readers will stay on our site, but are able to open links in a new window. We just need to click on it to activate. We’ll know it’s on when it turns blue.

---

---

Then we click on the left arrow to Apply the hyperlink.

---

---

Embedding Videos

In most of my tutorial posts, I include an easy-to-follow video. The tutorial video below was added using the Embed Category.

---

---

Then I selected YouTube.

---

---

From here, I just added the URL link. I copied my video link from YouTube and pasted it in. Then I clicked on Embed.

---

---

---

Creating a Reusable Block

Another gem in Gutenberg is the function of creating Reusable Blocks. For Blocks that we’ll use frequently, this is a fantastic time-saver.

To add a Reusable Block, we just click on the three dots in the editor and choose Reusable Block.

We’ll need to do this while we’re in the Block we’d like to Reuse. Then all we have to do is give it a name for future reference. I created a Custom Profile using the free plugin called Gutenberg Blocks – Ultimate Addons for Gutenberg.

---

---

Then we click on Add to Reusable Blocks and give it a name.

---

---

Once done, we’ll see it listed in our Reusable Block Category.

---

---

NOTE: If we edit a Reusable Block it will change the Block content in previously published content.

---

Wrap Up

---

---

Blogging to Success with WordPress

---

---