How to Easily Use the New WordPress Gutenberg Editor

By: | December 16, 2018 | Tags: , , , ,

How to use the new WordPress Gutenberg Editor

Can I address the elephant in the room?

WordPress doesn’t look like WordPress anymore.

The WordPress Gutenberg Editor has replaced the familiar WordPress Editor.

Welcome to the world of blocks! There are blocks available for all kinds of content: You can insert text, headings, images, lists, and lots more!

This post will explain why WordPress switched to the Gutenberg Editor and offer a tutorial so you know how to use the new WordPress editor.

Why Did WordPress Switch to the WordPress Gutenberg Editor?

Bloggers were using third parties to build landing pages.

For example, bloggers and other content creators were paying to use DragDropr to move around content.

WordPress Gutenberg Editor

 

My landing page for new subscribers is an example of content moved around on that page.

As you can see, my image block and my text block are next to each other. Using DragDropr, I arranged the blocks this way.

WordPress wanted to have this functionality. By adopting this feature and more, WordPress will continue to grow. That was the rationale.

How to Use the New Gutenberg WordPress Editor

Are you familiar with Medium.com? Medium, a publishing site, works in a similar manner to the WordPress Gutenberg Editor.

You add blocks with different parts of your blog post in them.

WordPress Gutenberg Tutorial:

Once you click “Add Post,” you see a series of blocks on your screen.

Add your title, your blog post graphic, and the text of your post where directed.

The WordPress Gutenberg editor is intuitive. You don’t need to click the plus sign to add a new block. Each time you hit enter, a new block will be created.

Should you want to add a new element, click the plus sign.

If you drag your cursor to the left of the block, you’ll bring up the edit functions.

Look at your options for elements to add. Although they’re listed by most commonly used, you may find additional elements intriguing. These may be elements you never thought to use until you saw them as an option to add in the WordPress Gutenberg Editor.

To add an Image:

Create a new block and click the Image icon.

Upload your image. Notice the alignment and edit choices are directly above the block for your convenience.

Use the handlebars on the sides of the image to alter the size. You can also just drag the sides of the photo until they’re the dimensions you want. Write the caption directly in the draft if desired.

Don’t forget to put your focus SEO keyword in the Alt Tag.

Alignment choices for aligning your image right, left, or center will be available as well.

Many of these features were available in the Classic Editor but were not too obvious.

If you want to create a new heading, after creating a new block, click the T (for text).

WordPress Gutenberg Editor

After typing, you see you are given a choice for what type of heading you want to add.

Under the block you see you have choices such as adding HTML code to the block or an Image.

Clicking the 3 dots will enable you to choose additional options.

Did you notice the Grammarly editor appeared? You can now edit individual blocks with Grammarly.

Once again, you can add new elements by clicking the plus sign.

You can add YouTube or Vimeo videos simply by pasting the link into the block.

You can add blockquotes as well.

Do you like to embed lists in your blog posts?

You can also add numbered lists or bulleted lists.

To add Custom HTML in the new WordPress editor:

 

WordPress Gutenberg Editor

When you click the plus sign in the upper left-hand corner of the screen, you’ll be able to search for HTML. Look: The Custom HTML Code option came up when I searched for it.

Look: WordPress Gutenberg Editor Tutorial

The new WordPress editor is intuitive. I don’t have to search for HTML code. It “knew” I commonly use the HTML code and it came right up the next time I needed it.

Since I paste codes for embedded elements and throw a linky party, I use HTML code pretty often, so this feature was important to me.

You can toggle between the HTML and the preview so you can see how your text will look.

Click “Preview” to load a preview of this page so you can make sure you’re happy with your blocks.

Finished writing? Just click “Publish” and you’re good to go.

What if you need help with the WordPress Editor?

You can insert a plugin needed to get the classic editor back.

If you need help, there is a WordPress Gutenberg tutorial video. You can see how to use the WordPress Gutenberg Editor.

Fair warning: The video was made a year ago when the editor was still in the beta testing stages.

Advantages of Using the WordPress Gutenberg Editor

  • You can move the blocks around.
  • Resize your image by moving the handlebars on the sides. Just drag your image to the size you want it.
  • You don’t need 3rd-party tools like DragDropr to build landing pages.
  • You don’t need 3rd party plugins like tables since the editor allows you to insert a table.
  • The option to enter an image comes in when you add a new block. Therefore, you don’t have to keep going to the top of the screen to add media.
  • You have more options now.
  • The options you had before are more obvious now.
  • Using the Gutenberg editor is like using Medium. If you can publish at Medium.com, you can easily publish using the new WordPress Gutenberg editor since Medium uses the same concept of blocks.
  • If you’re not happy, you can install a plugin that will put the previous WordPress editor on your site.

Disadvantages of Using WordPress Gutenberg Editor

  • Bloggers now have to learn a new skill: Mastering Gutenberg.
  • You can’t use the editor on your phone and you won’t be able to until 2019.

Wrapping Up: Features of The New WordPress Gutenberg Editor and Tutorial

This post explained 

  • What Gutenberg is
  • Why WordPress switched to a new WordPress editor
  • How to use the WordPress Gutenberg Editor
  • The advantages and disadvantages of the new WordPress editor.

Your turn: What is your opinion of the WordPress Gutenberg editor? Are you used to it yet? What is your opinion?

Readers, please share so bloggers struggling to learn the WordPress Gutenberg Editor read this tutorial and learn how to use Gutenberg.

  1. Troy Cox

    hi,
    I’m using wp site but I don’t know WordPress Gutenberg before,
    thanks for your tutorial

    • Janice Wald

      Hi Troy,
      WordPress just switched to Gutenberg. I’m glad you could find my tutorial helpful with this new editor.
      Janice

  2. Jo (A Rose Tinted World)

    Pinning this post for when I decided that I can face removing the Classic Editor Plugin and get to grips with Gutenberg. Will have to do it after the New Year! Thank you for sharing such brilliant information.

    • Janice Wald

      Hi,
      I am happy I could help. Thank you for writing to tell me I did. Pinning is a great idea.
      Janice

  3. Moss Clement

    Hi Janice,

    Great tutorial here. I have been skeptical using this WordPress new editor. Your tutorial makes it seem very easy, especially comparing it with Medium.
    But the fact that you can’t use it on your phone is a no-no for me. We are always on mobile. Everybody is on their smartphone, it makes it easier to blog on the go.

    However, will give it a shot.

    • Janice Wald

      Hi Moss,
      I’m glad my tutorial could give you the motivation to try to use Gutenberg WordPress. Thanks for writing to tell me it did.
      Are you able to edit on your smartphone? My screen is too small and I have an iPhone 6S.
      Janice

  4. caren gittleman

    Wish I had this last week when I was flipping out. I opted to keep the old editor because I just couldn’t stand Gutenberg. Pinned this and maybe will try again in january

    • Janice Wald

      Hi Caren,
      You were one of the first commenters. Many, no, everyone after you expressed the same sentiments of dissatisfaction with the new Gutenberg editor. You are in good company.
      Definitely pin and reference my tutorial later on. We have two years to learn to use Gutenberg and then we have no option.
      Janice

  5. Bill Vancil (

    I have given the Gutenberg editor a chance, but do not like it as well as the Classic Editor. Thanks for keeping the old editor available as an option, please do not eliminate it.

    • Janice Wald

      Hi Bill,
      I am not actually with WordPress, just a WordPress blogger.
      My understanding is the old editor will continue to be an option until the year 2021.
      Janice

  6. Jennifer

    I haven’t updated yet and won’t until sometime after the crazy of holidays and a cross-country move dies down. (And the kinks are worked out of Gutenberg!) Definitely saving this for when I need it!

    • Janice Wald

      Hi Jennifer,
      Bookmarking is a great idea. Thanks to the Classic Editor plugin there is no pressure to make the switch right away. Good luck with your move!
      Janice

  7. Alice v

    I hate this update at first. It takes a little getting used to because everything is totally different when creating a new post. I almost went insane, LOL.

    • Janice Wald

      Hi Alice,
      I went with you– to an insane place that is. That’s why I wrote this tutorial. I figured if I was experiencing stress so were other blogger and this post could help them. Thanks for writing.
      Janice

  8. Marilyn Armstrong

    There was a time — even a few years back — when I was into more complex stuff with a lot of insertions of external text and occasionally (egads!) even footnotes when this would have been great. But after years of waiting for them to add stronger features for texting, I simplified my style to suit the actual options. And these days, I’m far more interested in graphics options than text.

    Thank you, though. I might change my mind and if I do, I will refer to this. Assuming, of course, they haven’t gone and redone the format yet again!

    • Janice Wald

      Hi Marilyn,
      Thanks for writing. I agree. Bloggers adapt to the tools they have at their disposal. Maybe in time we can adapt to the Gutenberg WordPress editor. I hope so. That’s why I wrote this article/tutorial to help bloggers adapt.
      Janice

  9. Christine

    I read through part of this but got lost at SEO keyword and alt tag? Sorry I don’t know coding, I’m probably a bit old for this. I tried the new editor and sort of got it, but I couldn’t find how to add tags. Also because I didn’t understand my blogs looked scrappy.

    Question? Will we have to use it or will they take the old classic editor away?
    Thanks

    • Janice Wald

      Hi Christine,
      Thanks for writing.
      1. You’re never too old to learn new tricks, as they say.
      2. This is how to add the alt tag: When you click on the picture, look off to the right. Under Image Settings You’ll see Alt Text (Alternative Text). Put your focus SEO keyword there.
      3. They will take the Classic Editor away in 2 years and then we will all have to use Gutenberg.
      Janice

  10. ashish tiwari

    Wow your article is awesome for newbie wordpress user like me

    thanks

  11. Christina

    Hi Janice, I am pinning this! ? I am still defaulting to the classic, but I know I have to transition soon. Thanks for this informative post!
    Best,
    Christina

    • Janice Wald

      Hi Christina,
      Great to see you! Happy holidays to you! Definitely pin this so when you’re ready to transition to Gutenberg, you have these instructions. Thanks for commenting.
      Janice

  12. Rio

    I’ve tried it on the first week it was rolled out. I think the blocks are a great idea. It will make some blogposts look more interesting especially for the listicle types. However I didn’t like the way it messed up with my theme, which l chose for a reason. Wish they found a way to integrate better with the themes, though.

  13. Philip V Ariel

    Hi Janice,
    This is indeed a timely post to me. Just the other day I opted for the new version after seeing the notification in the dashboard. But to my surprise I realized that I am in a different land and got really panic! No way to go back to my old version, but thank God I found a green button on my computer, an expert on this was there I immediately contacted her and she suggested me to activate Classic editor plugin and I did it and am back to the old version. But I think ultimately it’s a necessary thing to go to this new version as it has got lot of wonderful features, but at the and time few people got crashed with it, as you mentioned it may take some more time to make this a user friendly one.
    Good to know that if we can publish on Medium we can use this too. 🙂
    But the sad thing to note is that if we can’t operate this with our mobile as Moses said it’s a big No No to me too! As I often work with my phone.
    When this is possible only will I opt for it. Anyways Thanks Janice for this timely post.
    Best Regards
    ~ Phil

    • Janice Wald

      Hi Philip,
      Thanks for commenting.
      I figured it was timely so I rushed to get this published. Since I was stressed over the new editor, other bloggers might be as well, so I knew the time was right for this tutorial and I couldn’t wait any longer.
      I’m glad to hear I helped by reading these comments.
      Janice

  14. Kyle Sloka-Frey

    Great piece! We recently upgraded our sites to using Gutenberg, and I have to say, I’m glad I did! It’s a bit easier to use than the previous editor, but also gives some of the power that used to only come with paid site building plugins.

    Thanks again!

    • Janice Wald

      Hi Kyle,
      Thanks for your comments.
      Out of curiosity, did you happen to read the other comments? Out of 27 comments, yours is the ONLY comment that praised the new Gutenberg WordPress editor. Thanks for bringing by a different perspective to add to the conversation.
      Janice

  15. Akhiesh

    Lovely article and I am also using WordPress and I not upgraded to Gutenberg maybe I will try later but thanks for sharing such nice information.

    • Janice Wald

      Hi,
      Thanks for commenting on my post and for the compliment. You have time. We’re not required to change until 2021.
      Janice

  16. Erika Mohssen-Beyk

    Much needed post for many 🙂 I still used the old version, but will play around and learn. Good, you give examples so we can to look and get it right. Change is always first a bit difficult until we get used to it.
    Thank you for this informative post
    Erika

    • Janice Wald

      Hi Erika,
      Thanks for your comments.
      Yes, “growing pains” are difficult. I use to think I was the only one who had trouble adjusting to change, LOL!
      I didn’t realize until I read these comments how many people still use the Classic Editor.
      Janice

  17. Kathryn Maclean

    Hi Janice,
    A timely post. I have saved your tips on a notepad for quick use for the new editor. Something else to learn. I have the Classic Editor and the Thrive Themes Editor and now the Gutenberg editor. I will give it try in the New Year. Happy Holidays.

    • Janice Wald

      Hi Kathryn,
      Thanks for commenting on my Gutenberg editor tutorial.
      I just linked to you in another one of my Lumen5 reviews, LOL! I guess we inspire each other which is how it should be. Great idea to save these tips for when you’re ready to try Gutenberg.
      Happy holidays to you as well.
      Janice

  18. Pamela

    I can’t say that I’m crazy about it but thank you for your informative post. I wish I’d seen it when I was writing my post.

    • Janice Wald

      Hi Pamela,
      Bookmark my Gutenberg instructions and reference them in your future posts.
      Janice

  19. Barbara Radisavljevic

    Is Gutenberg similar to the Weebly editor? One reason I neglect my Weebly site is that I don’t like using the block approach — at least not the way it works there. But the main reason I haven’t updated to WordPress 5 is that Yoast sent a warning letter that the bugs aren’t out of that version yet and it might be better to wait until they are. Then I bought my Smartphone and I’ve been busy learning to use it and got sidetracked. Haven’t had much time for my blogs. Hoping that changes during the new year.

    At my age it’s really hard to keep jumping onto new learning curves every time some platform decides to “improve” something that I have a pretty good handle on. PicMonkey also changed everything and I’m also having to face that learning curve. It seems I’m so busy adjusting to changes and updating and learning new ways to to what always came easily before that I have no time to blog. I plan to start a new blog in the new year and I may use the new editor on that just to get used to it. Or I might mess with it on my WordPress.com blog.

    • Janice Wald

      Hi Barbara,
      1. Yes, Weebly is like Gutenberg– both use blocks.
      2. I noticed kinks in Yoast today. Are the kinks in Yoast or WordPress Gutenberg?
      3. Regarding the learning curve– Gutenberg is here to stay. Bloggers won’t even have the option to use the Classic Editor plugin after 2021.
      4. Great to see you again. We used to see each other a lot in Facebook groups but not so much anymore.
      Happy holidays, Happy New Year, and good luck in 2019 with your new blog.
      Janice

  20. Hugh Roberts

    Thanks for the information on the new Gutenberg editor, Janice. I have used it and, whilst it does take some getting used to, I would recommend everyone give it a try and use it. I have discovered a couple of bugs with it (reported to WordPress) and there are a couple of things it doesn’t do that can be done when using the classic editor. However, all in all, it’s a great tool and certainly adds to the whole blogging experience.
    If WordPress does plan to discontinue the classic editor in 20121, then nows a time as good as any to start using Gutenberg.

    • Janice Wald

      Hi Hugh,
      For those of us slow to change, 2021 will come awfully fast, LOL!
      Thanks for contributing to the discussion that Gutenberg IS indeed doable.
      Janice

  21. Widdershins

    No thoughts on Gutenberg, other that I wish it’d been an ‘opt-in’ instead of an ‘opt-out’ but that’s the way the world seems to be wired at the moment … however … I just wanted to let you know that your responses to peoples comments are coming through as dark gray text on a black background.

    • Janice Wald

      Hi Widdershins,
      Thanks for letting me know. I alerted my tech helper.
      Janice

  22. Pingback: Mostly Blogging
    • Janice Wald

      Thanks Bette! Great to see you again! Thanks for coming by to tell me you enjoyed! Thanks in advance for sharing!
      Janice

  23. Lori

    I was researching for a way to make an image clickable and came across your blog post. Thanks for these tips! Do you know if there’s an easy way to make an image link in the Gutenberg editor? I actually had to use the code editor and manually add the code to make an image link to another page. Should not have had to do that. I’m hoping I just overlooked something and that there is an easy way to do this. Thanks for your help.

    • Janice Wald

      Hi Lori,
      I made you a screenshot. Does this help?
      top-10-blogging-questions-and-answers-faqs
      Upload in the media library. See the screenshot. You’ll find the URL of the image.
      Janice

  24. Akhi

    Its nice information about Gutenberg and I like to work on Gutenberg. Gutenberg is so easy compares to the previous version and Thanks for sharing this article and it’s really helpful for others.

    • Janice Wald

      Hi Akhi,
      I wasn’t aware there is a new version of Gutenberg. Do you know when it came out? Thanks for writing to tell me.
      Janice

  25. D. Parker

    This is my 8th ‘tutorial’ Janice and I’m still baffled, I’m beginning to be suspicious that this only works well for Premium accounts or something. I’ve never had a problem with any other editors or anything else computery and I thought, well, if anyone knows how to explain this it will be Janice but my brain still can’t wrap around this which is too bad because it looks cool. I guess back to Classic Editor and then leave WordPress when they change over. Off to share, maybe it will help someone else. 🙂
    Hope this week is treating you kindly. 🙂
    Big bloggy hugs xox

Would you like to share your thoughts?

Your email address will not be published. Required fields are marked *

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

LinkedIn
Share
Instagram
%d bloggers like this: