The Basics of Using the Gutenberg Editor – Part One

“Gutenberg” is the name of the new editor experience on WordPress. Their goal was to create a new post and page editing experience that makes it easy for anyone to create rich post layouts. I’ve been using the Gutenberg Editor for almost a year now. I thought if I shared some tips and tricks it might help some of you learn how to maneuver this new block style blogging experience. (This is an example of the “highlight” selection – it looks like a flashlight icon in the paragraph tab on the top menu).

On December 31, 2021 (two years from now) WordPress will discontinue the old Classic Editor.

This prompted a huge discussion in our Literary Diva’s Facebook group. I’ll be sharing my experiences with the WordPress Gutenberg editor. Eventually, we all have to succumb to change. I hope I can make your path easier.

The first thing I would like you to do is to create a test blog in WordPress. This should be a free account so you can play with the different settings until you’ve reached your comfort zone.

In your WordPress dashboard:

Go to: My Sites/Switch Sites/Add new Site.

Follow the steps and create your test site. Name it test so you know what it is.

Once you’re created your test blog, choose one of the new themes to use that have been designed for this new editor. WordPress has been adding many new themes. They aren’t as flamboyant as they used to be, but with some tweaks you can standout from the crowd. At some point, WordPress (WP from here on) will ask you which editor to use. Select Gutenberg.

This editor is different from the old editor. Here you work with blocks or paragraphs that are not connected. The layout is simple. Clicking the + to the left of each paragraph gives you different options for your paragraphs.

Once you finish typing a paragraph, hit the enter key. It will move you to the next paragraph. If you want to change that paragraph to a quote, click on the top menu paragraph key to select the pull-down menu. Pick what you want and the editor changes the block.

This is a listing of all the different types of blocks available: https://gogutenberg.com/blocks/

I FOUND AN ARTICLE THAT IS A GREAT REFERENCE ON EVERYTHING YOU NEED TO KNOW ABOUT THE GUTHEBERG EDITOR: 

https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/

I want to share some tips and tricks I’ve found to be invaluable in maneuvering the changes. (I centered this paragraph with the centering tool on the top menu).

Once you go into WP to create your first post, click the three dots at the end of the top menu at the right. Select the top toolbar position. That will keep all your block and document tools up and out of the way of your blocks. The top menu is easy to maneuver. Click on the different options starting with the paragraph image.

If you learn the keyboard shortcuts, you will maneuver the blocks easily. Below is the canonical list of keyboard shortcuts:

Editor shortcuts #Editor shortcuts

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Display keyboard shortcuts.Shift+Alt+H⌃⌥H
Save your changes.Ctrl+S⌘S
Undo your last changes.Ctrl+Z⌘Z
Redo your last undo.Ctrl+Shift+Z⇧⌘Z
Show or hide the settings sidebar.Ctrl+Shift+,⇧⌘,
Open the block navigation menu.Shift+Alt+O⌃⌥O
Navigate to a the next part of the editor.Ctrl+`⌃`
Navigate to the previous part of the editor.Ctrl+Shift+`⌃⇧`
Navigate to a the next part of the editor (alternative).Shift+Alt+N⇧⌥N
Navigate to the previous part of the editor (alternative).Shift+Alt+P⇧⌥P
Navigate to the nearest toolbar.Alt+F10⌥F10
Switch between Visual Editor and Code Editor.Ctrl+Shift+Alt+M⇧⌥⌘M

Selection shortcuts #Selection shortcuts

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Select all text when typing. Press again to select all blocks.Ctrl+A⌘A
Clear selection.EscEsc

Block shortcuts #Block shortcuts

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Duplicate the selected block(s).Ctrl+Shift+D⇧⌘D
Remove the selected block(s).Shift+Alt+Z⌃⌥Z
Insert a new block before the selected block(s).Ctrl+Alt+T⌥⌘T
Insert a new block after the selected block(s).Ctrl+Alt+Y⌥⌘Y
Change the block type after adding a new paragraph.//

Text formatting #Text formatting

Shortcut descriptionLinux/Windows shortcutmacOS shortcut
Make the selected text bold.Ctrl+B⌘B
Make the selected text italic.Ctrl+I⌘I
Underline the selected text.Ctrl+U⌘U
Convert the selected text into a link.Ctrl+K⌘K
Remove a link.Ctrl+Shift+K⇧⌘K
Add a strikethrough to the selected text.Shift+Alt+D⌃⌥D
Display the selected text in a monospaced font.Shift+Alt+X⌃⌥X

I did a cut and paste on the table from this document: What is Gutenberg WordPress.org

These shortcuts will prove to be a huge help. I use the pink table shortcuts the most!

There are plenty of cool things you can do to highlight text by changing the block text color and the background color from the color settings menu on the right.

Headings or Titles

However

You can’t change the color of the titles, but WP made it easier for you. If you select the paragraph setting, you can select the text settings to enlarge the font size and change its color and background color from the righthand side menu, like I did above with the word, “However.”

The settings on the right-hand side of the editor are for changing the colors and sizes of your text on the blocks. You can even add a drop cap to your writing now! You can also move the blocks around by using the up or down option on the left-hand side of each paragraph.

I moved my author blog to the business plan which gave me the opportunity to upgrade my theme to a Gutenberg ready theme. Most of the themes on WordPress.org have moved to the block format. I believe there will be many changes in the next few years in themes and plugins all geared to the new editor.

For example, many of the plugins like the “Press This,” plugin won’t work on my new site.

Instead, I added the “Add to Any plugin”. These icons appear below the like button in my posts. The black WP option will allow my readers to select Press This where they can share my post by inputting the https:// address of their site.

Don’t be afraid to try the new editor. Take a half-hour a day to play around on your test blog. There is a lot of hype out there right now and I admit, I was the most fearful of all. As with all new things, you just have to learn how to use it.

Image Credit: sayingimages.com

After you’ve tried the editor, reply in the comments if you have questions. I’ll try to help as much as I can. ❤

In Part Two, I’ll talk about some of the different blocks.

Hugs to you all! ❤

91 comments

  1. I just knew this would happen!
    Once my new book is launched, I will study your posts and try to learn the blessed thing! So thank you for thinking of all us slowcoaches out here…

    Like

  2. Thank you for this, Colleen. Right now, I don’t have time to even process it. I type something in Word and paste it into the block on WP, but maybe in a few weeks I’ll have time to play around with this. 🙂

    Like

  3. I had no idea WordPress were discontinuing the classic editor altogether, Colleen. I’d heard that from the end of December 2020 they would start to slowly remove supporting the classic editor so that their engineers could concentrate more on the Gutenberg editor. I guess, therefore, it makes sense that they will discontinue the classic editor altogether. Does that mean that the classic block in Gutenberg will also disappear?

    When I first started using the Gutenberg editor, I disliked it a lot. Then I realised that I had not given it enough time to try out, nor had I read and watched any tutorials or guides on how to use it. I set up a test post in my draft folder and spent about 30 mins a day trying it out. There was a long learning curve, but now I really do think that the Gutenberg editor is the future of blogging. Blog posts look far better, plus the more you use it, the more easier it gets.

    I read so many bad reviews about Gutenberg that clearly show the user hasn’t given it any time or read any guides on how to use it. Like me when I first started using it, they go in blind and try and figure it out themselves. After a few minutes, they start getting stressed out by it and give up. Just like learning to ride a bike, you have to give it time before you become comfortable using it.

    Now, using the Gutenberg editor is like a walk in the park for me. I’m still learning lots about it and what it can do, but that’s all part of the fun.

    Like

          1. That makes a lot of sense Colleen, especially as there were a lot of problems with the gallery blocks on Gutenberg. People were able to use the Classic block to add photo galleries to their posts. I guess WordPress put the block there to help while settling Gutenberg in. I guess if they stop the Classic editor, then the classic editor block will also disappear.

            Like

          2. My issues with the new editor vs the old editor have been compatibility related. I think I’m one of the only people using the new editor. When I tried to copy poetry from posts completed on the old editor I had issues. Often I grab the text and place it into Word as unformatted text. Then, I can bring it over into a post. Other than that, most of the issues have been fixable.

            Like

          3. I’ve converted posts written and published in the classic editor to Gutenberg posts. I’ve had to make a few amendments, but it worked well. I’ve also heard from another blogger who has had problems copying posts written in Word and pasting them into the Gutenberg editor. I now draft all my posts on Grammarly and then paste them on Gutenberg. So far, I had no issues with doing this. I report any bugs I come across. WordPress seem to fix them quickly.

            Like

          4. I don’t use Word for drafting posts, it was somebody else you told me they were having problems cutting and pasting into Gutenberg from Word. I draft all my posts on Grammarly and then cut and paste to Gutenberg. It works great for me.

            Like

    1. This is the first I’ve heard about the classic editor being cancelled as well. I suspect the old WP Admin interface will go too. That makes me very sad as it’s very powerful when you know how.
      Re Guttenberg, I already use a lot of keyboard shortcuts in my work, but I’m not sure how I feel about being /forced/ to learn a ton of new or re-purposed shortcuts. I’m surprised new users/casual users haven’t complained.

      Like

  4. You are braver than me. As Merril said, who has the time? Technology is for the young who both grew up with it and have few obligations. I will have to stop doing any work for a few months when I’m forced to change. (K)

    Like

        1. I’ve been holding out trying it. It sounds like a big learning curve and I know I need to sit down and learn it. I will come back to this blog when I give it a try. Thanks:)

          Like

  5. Thanks for this, Colleen! I was completely unaware of this upcoming change and I appreciate all the help I can get!! I look forward (well, maybe not really but) to familiarizing myself with this new editor. 🙂

    Like

    1. You’re so funny. Today, I discovered a plugin called Elementor, which will work on your Ashe blog to give you fancier blocks. See, I’m already learning the stuff I’ll have to teach you down the road. LOL! What are sisters for? ❤

      Like

      1. I am really dreading the change Colleen, but I will have to give it a try. I do most of my blogging on my mobile, will that be more complicated do you think…will I be heading back to my lap top? I HATE CHANGE ! 💜💜

        Like

      2. LOL. And funny you mention Elementor. I have that plugin installed but not activated. When I hired a web guy 2 years ago to help out with blog problems he added the plugin but didn’t activate it. I didn’t either cuz I don’t know what it’s for, lol Is it only for Gutenberg? ❤

        Like

  6. Thanks for posting this. This is the first I’d heard of a date they’d plan to end my blogging comfort and joy discontinue the old Classic Editor. Thanks for trying to help make the changes for me and other like me, easier. I really appreciate it. Thanks so much.

    Like

    1. Update: I went and made a test blog and tried the new editor.
      It’s going to take some time for me to get used to it. But it’s not nearly as scary as I had feared. Thanks for suggesting making a test blog. It’s going to be a huge help in getting me comfortable with the new system.
      Thanks again. 🙂

      Like

    1. Liz, WP will say all of the themes are ready for the Gutenberg editor. On your test blog, try one of the “new” themes. They seem plain but you should be able to spiff them up in ways that show your special magic. ❤

      Like

  7. Great idea to start a test blog, Colleen…my interest then takes a downward path…I have kept up with changes all my life and was hoping for a smooth trouble free ride henceforth…haha…Who am I kidding! BM for when I have to do the inevitable or just give up blogging….Thank you for taking the time to help us though you are a star , Colleen ❤

    Like

    1. Oh, Carol. I can’t stress enough how easy this editor is to use. Please don’t give up blogging (D.G. Kaye entertained this thought too!) because you have to learn something new. Set up a test blog and give it a try. I’ll help with my posts. ❤

      Like

      1. Hmm…that does surprise me. Blender, a graphics package I’ve been learning, used to rely heavily on shortcuts, but its latest iteration has rationalised the menus, perhaps as an acknowledgement that new users need menus. -shrug-
        As the blindman said, ‘we shall see’. 🙂

        Like

  8. This was great to read, Colleen! I have jumped in whole-heartedly with Gutenberg and found it really easy. I hope other bloggers take the plunge and what is the worst that could happen? I will look forward to your continued insights!

    Like

  9. This is excellent, Colleen! I’ve also been using the new Gutenburg editor for about a year and after I finally figured out some things, I like it. Thanks so much for sharing!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.