The Basics of Using the Gutenberg Editor – Part One

Posted byColleen M. ChesebroPosted inWordpress TipsTags:,

This is a RESHARE of a post I wrote last year. I’m including some new information, and the second part of the series follows below. Ask me questions if you are stuck and I’ll try to help. ❤ ~Colleen~

“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. Choose the syntax highlighter code block and input the number of lines you want highlighted.

On December 31, 2021 ( A little over one year from now) WordPress will discontinue the old Classic Editor.

This happened in March 2021! Here is an updated Guide to the Gutenberg editor for 2021.

This prompted a huge discussion in our Literary Diva’s Facebook group last year. 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.

Most of the themes on WordPress 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 a business plan or a self-hosted site. Add the Add to Any buttons to make sharing easier. 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.

On the premium plan, I added the “Add to Any Chrome Extension” which allows me to share to many social media accounts. By the way, I’m using the new Vivaldi browser, which I really like. Read about this browser here: https://vivaldi.com. This browser allows you to install Chrome extensions.

With all the changes in browsers and blogging platforms, I’m finding the print hard to read on all sites. I found the extension “BeefyText” that makes text bigger and bolder for reading. I love it!

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.

Don’t let the new WordPress Editor Scare You!

I hope you all found the time to create a test blog where you can experiment and play with the Gutenberg editor basics. Not sure what I’m talking about? Click HERE to read the first post.

I was thrilled to learn that some of you jumped right in and created your test blog so you could experiment with the new editor. When I first started blogging in 2014, the very first blogger to follow me was E.C. Here are her comments from the first post:

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.

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.

E.C. from Joysofcreating.com

The WordPress editor is here to stay, and we must all learn to function in a blogging world filled with blocks of data. Can you do it? Of course you can!

Image by Magic Creative from Pixabay

This week, let’s look at what the blocks represent in a post. I still think of them as paragraphs which may make this discussion easier for you if you also think of them in that way.

Here is the Gutenberg Tutorial HERE!

“The editor comes with a number of standard blocks that can be extended via plugins (but you would have to subscribe to the business plan to install plugins). However, being able to build your own custom solutions is often very useful, which is what this Gutenberg block tutorial will teach you. But first, let’s start with the basics.”

What Are Gutenberg Blocks?

“Before we get to how-to part, let’s first settle on what we are even talking about.

Gutenberg Block Examples

The main change that Gutenberg introduced to content creation in WordPress is that, instead of having one big chunk of content (as it was with the classic editor), web pages are now segmented into smaller parts, called blocks.”

“These can be many different things:

  • Paragraphs
  • Headings
  • Blockquotes
  • Images and galleries
  • Lists
  • Embedded media
  • Buttons
  • Tables
gutenberg block example

Each block has its own content, formatting, and other options and you can move, delete, and reuse them at will.”

Why the Change?

“Why change a running system? Well, the fundamental idea behind the Gutenberg editor is to make the editing experience more flexible and easier to customize, especially for beginner users.

Personally, it takes me longer to create a post than it did before, but we do have some great blocks of data we didn’t have before. However, you can’t highlight text and hit the delete key like we used to do. Now you have to go to the specific block and do control+option+z (for a Mac) Shift+Alt+Z for Windows.

The editor gives you more control over the entire page, not just the main content. You can customize elements in a more detailed fashion and without applying CSS classes to them or other technical hijinks.

Instead, you are able to modify their format, positioning, colors, sizes and much more directly from the user interface.

In addition, blocks in the editor look the same as they do on the page. This makes for a better user experience as the editor view more closely resembles the final product.

The rest of the post deals with creating your own blocks, and that is unnecessary at this point in learning the editor. WP gives us plenty of choices. Read the rest of the post HERE if you want to.

How to Create a Block

Today, go into your test blog and choose the paragraph button where the block selections are located on the toolbar. The blocks you use the most will show up first. Scan through and click on some choices.

When you’re ready to add a block, click on the plus sign at the left of where a new paragraph will start. Select (or search for) a quote block, then type in some data.

Notice at the bottom of the quote that you can show attribution. Type in the site’s address and then highlight the name of where you got the information. Click the link button above in the top toolbar. A menu box will open so you can paste the http://address of the site’s address inside. Select the down arrow at the right of the link box so you can request the link to open outside of your post. Now, you’ve completed the attribution to the quote.

This is a QUOTE block: Learning the Basics of the Gutenberg Editor

colleenchesebro.com

Remember, depending on your theme, your block quote may look different from mine.

Next, type something inside a block and hit the enter key.

Let’s say you created a block and now you want to get rid of it. Click on the three dots on your top toolbar and select remove block.

Another way to do this is by using the shortcut keys: Control, Option Z on a Mac, and Shift Alt Z on Windows. Just make sure you have clicked inside the block you want to remove.

If you want to move the block, hover over the left side of your first word. There are up and down arrows that will assist you in moving the block to where you want it to be on the page.

How to Create a Reusable Block

The colorful divider above is an example of a reusable block. First, I selected an image block. Then, I uploaded the divider image from Pixabay.com as it is free to use for commercial use on my blog.

Once I uploaded the image, I resized it by dragging the right blue dot to my desired width. Next, I clicked on the three dots on the toolbar at the top and chose the add to reusable blocks selection. It will prompt you to name the block so you can find it again later.

Now, whenever you need a colorful divider all you have to do is click the plus sign at the left-hand side of a block. Go into the menu and select reusable blocks. Whatever you named that block will appear. Click to add it to the new block on your post.

The best way to learn this editor is to experiment on your own in your test blog. Give these suggestions a whirl. Let me know you are getting on in the comments.

Published by Colleen M. Chesebro

An avid reader, Colleen M. Chesebro rekindled her love of writing poetry after years spent working in the accounting industry. These days, she loves crafting syllabic poetry, flash fiction, and creative fiction and nonfiction. In addition to poetry books, Chesebro’s publishing career includes participation in various anthologies featuring short stories, flash fiction, and poetry. She’s an avid supporter of her writing community on Word Craft Poetry.com by organizing and sponsoring a weekly syllabic poetry challenge, called #TankaTuesday, where participants experiment with traditional and current forms of Japanese and American syllabic poetry. Chesebro is an assistant editor of The Congress of the Rough Writers Flash Fiction Anthology & Gitty Up Press, a micro-press founded by Charli Mills and Carrot Ranch. In January 2022, Colleen founded Unicorn Cats Publishing Services to assist poets and authors in creating eBooks and print books for publication. In addition, she creates affordable book covers for Kindle and print books. Chesebro lives in the house of her dreams in mid-Michigan surrounded by the Great Lakes with her husband and two (unicorn) cats, Chloe & Sophie.

99 thoughts on “The Basics of Using the Gutenberg Editor – Part One”

  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…

    Liked by 1 person

  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. 🙂

    Liked by 1 person

  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.

    Liked by 1 person

          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

            1. 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

          2. 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.

            Liked by 1 person

            1. I can’t get Grammarly to work on WordPress anymore. It’s frustrating. Word work but you have to do a paste where you select unformatted text. Have yo tried that?

              Like

          3. 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

    2. 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)

    Liked by 1 person

        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

  8. 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. 🙂

    Liked by 1 person

    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? ❤

      Liked by 1 person

      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 ! 💜💜

        Liked by 1 person

        1. You just need to create a test blog. It’s not as difficult as your fear of trying something new. At least that’s how I motivated myself to go ahead and try it last year. I’ll help. ❤

          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? ❤

        Liked by 1 person

  10. 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.

    Liked by 1 person

    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. 🙂

      Liked by 1 person

      1. E.C. I’m so happy you tried it. Yes, it is different but if you play with it a bit you will find your comfort zone. You can do some cool things with the editor. Let me know if you have questions. ❤

        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

  12. 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 ❤

    Liked by 1 person

    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. ❤

      Liked by 1 person

      1. Dearest Colleen.. I am likey to be blogging until I take my last breath and probably my sensible side will kick in and my thirst for knowledge just not yet… Xxxx

        Liked by 1 person

  14. Great post, Colleen but I do have a question: are the keyboard shortcuts optional or are they the only way of accessing those formatting functions?

    Liked by 1 person

      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’. 🙂

        Liked by 1 person

          1. Yes, I have a Medium account as well, so I’m sort of familiar with blocks. I guess time will tell how people respond.

            Like

  18. 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!

    Liked by 1 person

  20. 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!

    Liked by 1 person

  22. I have pinned this to try again . I think Halloween has turned Guttenburg into a huge unuseable monster in my head. Thank you Coleen, and Hughes news for leading me here. Xx

    Liked by 1 person

  24. Pingback: The Basics of Using the Gutenberg Editor – Part One — Word Craft ~ Prose & Poetry | When Angels Fly

  25. I tried it, I didn’t like it. The great majority of bloggers don’t need more complications in their lives, or more steps added to what should be a simple and straightforward process. My biggest complaint, however, is readability. The blocks often get cut off on my tablet, and therefore I don’t read the post, because (again) you need to click several times to get to a place where you can read it.
    The best design is both simple and clear. For both users and readers. Less bells and whistles is what we need, not more.
    Technology should always be both as simple as possible, and intuitive for the user. Blocks fit into neither criteria. Getting used to it is not good enough for me. (K)

    Liked by 2 people

    1. I agree with everything you’ve said, Kerfe. This editor is not easier for sure. I’m not sure why they had to change the platform. All of this is out of our control (like every thing else). My understanding is that all blogging platforms have moved to these data blocks. I’m not sure we can do anything about it either. Hopefully I shared a few tips to make our blogging life easier. ❤️

      Liked by 2 people

      1. I just use the old one on WP Admin. I hope they don’t take it away! And all the guidance you give is much more helpful than their explanations.

        Liked by 2 people

  26. I think I’d be fine with them having the Gutenberg editor if they didn’t get rid of the classic one. Sure, Gutenberg might be better for beginning users (not convinced it is – the closer you can be to MSWord, the more familiar), but people who like HTML things won’t be well served. I absolutely despise the new editor. It’s made me actually consider moving to a different platform, but I know everyone here so I would have to be pretty peeved to do it in the end.

    Liked by 1 person

  27. I’ve been using Gutenberg for some time Colleen. I was pretty resistant for a long time but find it does have some useful aspects such as reusable blocks. Great idea to share your knowledge. ❤

    Liked by 1 person

    1. I posted this quite awhile ago. I added a link and I’m not sure why it sent it all out again? Wow! Thanks, Marje. Anything to help those struggling with the editor. ❤

      Like

Comments are closed.

%d bloggers like this: