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. ♥
OMG. I have to take this a little slower. Thank you so much, Natalie. I need to bookmark this and take it one step at a time. 😀
Cheers, John! I think you’ll really appreciate this Editor once you get familiar with it. It’s a learning curve for sure, but it’s worth it. Thanks for stopping by today. Happy Friday! 🙂
I have it bookmarked. I want back to see if the Twitter button was working and it is not. Have a great weekend, Natalie.
BTW Your Twitter button isn’t working.
Yikes, I’m stumped on this one! Have you ever experienced this before? This is the only post that’s not cooperating. I checked all my pages and posts and all is good. Searching for solutions, but nothing yet. I’ll have to blog about it once I figure it out! 🙂
one thing to check is to make sure you have the share protocol set up for Twitter on this post.
Thanks, John. Yup. all set, but still not working. Completely stumped!
me too.
Hi Natalie, it’s so pleasing to see another blogger giving the Gutenberg editor the credit it deserves. I’m delighted you’ve given it some time and have got to enjoy using it. I still come across the occasional bug in it, but the WordPress engineers soon get to work on fixing those bugs when I report them. It took me a while to get my confidence using Gutenberg, but now there is no looking back. The only thing I’ve not figured out doing is changing the colour of a certain word or words within a block. It seems the text in a box has to be all the same colour.
This is a great tutorial on using Gutenberg. I’m book marking it and will link back to it on some of my upcoming posts.
Thank you, Hugh! Many thanks for your encouraging and inspiring posts. 🙂 I’m really enjoying it and amazed at what’s to come, as I read more about its implementation. I found an awesome plugin that you may appreciate as well. It’s called Gutenberg Blocks – Ultimate Addons for Gutenberg. Here’s the link in case you’d like to check it out. https://en-ca.wordpress.org/plugins/ultimate-addons-for-gutenberg/
I think Gutenberg is a game changer for bloggers. Thanks so much for stopping by and for sharing on Twitter. I’m running into a snag with my Twitter share for this post. Still trying to figure it out. Always something to learn, eh?!
Much appreciation for linking back in the future. I’ll be doing the same. Cheers! 🙂
Thanks for the link to the ‘Addons’ block, Natalie.
I agree. Gutenberg is going to change the blogging world, I think for the better. I’m already seeing problems with not getting Pingback notifications from those still using the Classic editor, whereas they are coming through from those using Gutenberg.
It’s a huge learning curve, but well worth it. Plus, it’s also saving me time when drafting new posts. It’s a winner as far as I’m concerned. I’m glad I gave it my time.
BTW – I had no problems with your Twitter sharing button. It worked fine for me.
I’m still using the old editor. I get overwhelmed thinking about all the changes. Thanks for talking us through some of them. One of these dsys I will play with it and get used to it. Thanks, Natalie.
Hey, Denise! I think you’ll really appreciate this Editor once you get familiar with it. It’s a learning curve for sure, but it’s worth it. Lots of great things happening with its design. Happy to help in any way. Hope you enjoy a fabulous weekend. Cheers! 🙂
Very comprehensive Natalie.. bookmarked should I take the plunge.. hugs xx
Cheers, Sally! I think you’ll really appreciate this Editor once you get familiar with it. It’s a learning curve for sure, but it’s worth it. Thanks for stopping by today. Happy to help in any way should you take the plunge! 🙂
Thank you Natalie.. excellent tutorial..♥
I’ve been using Gutenburg for a while now and I like it. I can’t remember how to do the old way anymore. You gave a great step-by-step tutorial, Natalie! Thanks for sharing.
Fantastic to hear, Jan! I’m loving it and discovering some amazing addons that I’ll be sharing for sure. More blog posts to come! 🙂
Hi, Natalie! Wow! This is an amazing tutorial. It actually looks much more practical than the old one which is what I’m using. I’m going to pin it for future reference. Thank you very much! <3 xo
Thanks, Vashti! I think you’ll really appreciate this editor. The features are awesome and the Plugin addons take it to a whole other level. I’ll be blogging more about it for sure. Happy Sunday, my friend! 🙂
What a thoroughly detailed gem of a post, Natalie. I’m bookmarking this to come back and review in more detail. I’ve been using Gutenberg for a while now, but I do struggle with some elements. I admit it frustrates me when attributes I apply to blocks don’t take but overall, I’ve been adapting. I think there are still bugs and flaws (how many times do I have to add a bold attribute for it to hold? I think it often has to do with themes). I’m trying to embrace it, and I think this post will help. Thank you for sharing!
Thanks a bunch, Mae! Awesome to hear you’re using it, as well. I’m running into a few snags too, but I guess that’s all part of the implementation. 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. Thanks so much for stopping by this evening. Wishing you a fabulous week ahead. Cheers! 🙂
I’m finally getting used to Gutenberg. I hate it when things are changed for the sake of change, which is what I feel Gutenberg was. But, as with anything, you adapt and overcome, right?
This was an excellent post. Very thorough. Great job.
Thank you, Staci! Awesome to hear you’re using it. I’m running into a few snags, but I guess that’s all part of the implementation. 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. Thanks so much for stopping today. Wishing you a fabulous week ahead. Cheers! 🙂
Beautiful tutorial, Natalie. Hugs on the wing.
Thank you, Teagan! Same to you. 🙂
This is so helpful, Natalie. The images are key for me as I’m just terrible at anything technological. Thanks so much for sharing this and all the work that went into it. I’m bookmarking!
Thank you, Diana! I think you’ll really appreciate this editor. The features are awesome and the Plugin addons take it to a whole other level. I’ll be blogging more about it for sure. Wishing you a fabulous day! 🙂
Thanks for this great step by step on Gutenberg Natalie. Personally, it’s all Greek to me and I am quite happy that I added the ‘classic editor’ plugin months ago so I wouldn’t have to deal with this whole new language, lol. But I will be including it in my next posts of writer’s tips. 🙂 x
Cheers, Debby! I think you’ll really appreciate this Editor once you get familiar with it. It’s a learning curve for sure, but it’s worth it. Thanks for stopping by today and for including it with your posts. You rock! 🙂 XO
<3
Natalie, I needed something like this when I started using Gutenberg! Superb explanation and at last so much makes sense, where I’ve just had to find things by hit and miss, taking ages at times. The hyperlink drove me to despair as I spent an afternoon looking for it! You’ve given me great tips for features I hasn’t yet discovered! Thank you so much for this informative post … a lot of dedicated work!
Cheers, Annika! Awesome to hear that you’re using it. 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 today about adding a Content Timeline. 🙂 Awesome feature! Thanks so much for stopping by today. Wishing you a fabulous week!