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
I hope after reading this post you’re feeling more at ease with using Gutenberg.
Embracing the change is all that’s to it. AND a little practice when we’re not pressed for time.
In this post, we looked 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
Perhaps this is a lot to cover in one blog post, but these are the basics of creating a post and getting started with Gutenberg.
In future posts, we’ll be looking at other features and customization of each. In this post, I also used the Ultimate Addons plugin.
The Tweetable Quote and Bio below were created with the Ultimate Addons plugin ~ using options BlockQuote and Team consecutively. Both are easy to use and format. We’ll cover these in future posts.
Thanks for joining me today. I hope to see you again soon.
Have a tip or question you’d like to share? Please feel free to share in the comments below.
Until next time… happy blogging, my friends! ♥
Blogging to Success with WordPress
Free Download
Blogging Essentials Guide
After seven years of blogging, I thought I’d put together a Resource Guide with a list of essential tools and resources I use in hopes that it may prove helpful to fellow bloggers – newbies and/or not-so-newbies alike. After all, we’re always learning in this form of engagement. ♥
watchingthedaisies says
Thank you Natalie. This a terrific tutorial. I have not taken the plunge yet but I will come back to your post when the time is right.
Natalie Ducey says
Cheers, Brigid! The articles I’ve read about the direction the developers are going with this makes it quite exciting. There are several plugin addons that offer so much flexibility and intuitive design. I’ll be blogging more about it for sure. I added a new post yesterday about adding a Content Timeline. Awesome feature! Thanks so much for stopping by today. Wishing you a fabulous week! 🙂
Liesbet @ Roaming About says
Trial and error for sure! And, certainly good advice to not tackle Gutenberg when you’re in a hurry. That’s why I waited for my first attempt when I was temporarily in a house and not on the road, with limited internet and electricity and time. 🙂
Great tutorial. I’m looking forward to the part where you attempt to create photo galleries… I haven’t found a way to please me as much as the classic editor did these! The galleries with Gutenberg have glitches and look unprofessional.
Natalie Ducey says
Welcome, Liesbet! It’s lovely to see you here. 🙂
The articles I’ve read about the direction the developers are going with this makes it quite exciting. I’m running into a few snags, but I guess that’s all part of the implementation.
There are several plugin addons that offer so much flexibility and intuitive design. It’s a game changer. More posts to come!
Thanks so much for stopping by, and for commenting, too. Cheers! 🙂
Bette A. Stevens says
Thanks so much for the guide, Natalie… Saving, sharing and one of these days, I’ll try it out! xo
Natalie Ducey says
Wonderful to hear, Bette! I think you’ll really appreciate this editor. There’s a learning curve, but it’s so worth it. Happy to help in any way. 🙂
Colleen Chesebro says
I loved this fabulous post, Natalie! Well done. <3
Natalie Ducey says
That’s wonderful to hear, Colleen. Thank you! Always happy to share and pay it forward. Have a fabulous weekend! 🙂
Colleen Chesebro says
Thanks, Natalie! We’re finally settling into our new house in Arizona! I hope to be more sociable starting Sunday. 😍❤️
Robert Matthew Goldstein says
Thank you, Natalie. I confess to flipping back to the classic editor when frustrated. Last night I spent thirty minutes trying to figure out how to reduce an image in the Gutenberg Editor and gave up in disgust. I’m sure I will like Gutenberg once I’ve mastered it, but this business of needing to learn an entirely new interface every year or two is tedious. I hope WordPress leaves the editing tool alone for awhile. In the meantime, thank goodness for bloggers like you. 🙂
Natalie Ducey says
Cheers, Robert! I really appreciate your visit. 🙂
It’s a learning curve for sure, and I still experience speedbumps. Hang in there. From all that I’ve read thus far, this editor is/will be a game changer.
Thank you for your kind words. When I learn something new, I’m delighted to pass it on. Thanks for sharing, too! 🙂
Robert Matthew Goldstein says
From what I’ve seen of it, it does appear to be a better editor. I do like the fact that all of the features I like in the classic editor are available in Gutenberg. Your advice to learn Gutenberg when not under pressure to post is solid. Thanks again.
Natalie Ducey says
Thanks for sharing! 🙂