How to Easily Use the New WordPress Gutenberg Editor

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

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.

How Anyone Can Make Money From Just Playing Games Online!

How would you like to get paid just for playing games online? There are many companies that pay those who play games, whether on their phones or on their computers. If that sounds like fun click here read all about it. You will also see all the sites that really pay.

Powered by Kingged.com
Where Quality Content Is King!

 

Get Your Free Copy of 137 Blogging Tools to Increase Your Blog Traffic

Save time blogging with 137 free blogging tools!

You have Successfully Subscribed!

  1. Moss Clement at 10:11 am

    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 at 6:59 pm

      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
      Janice Wald recently posted…Inspire Me Monday Linky Party #208My Profile

  2. Jennifer at 7:27 am

    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!

  3. Marilyn Armstrong at 9:15 am

    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!

  4. Christine at 9:26 am

    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 at 6:41 pm

      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
      Janice Wald recently posted…Inspire Me Monday Linky Party #208My Profile

  5. Rio at 12:07 am

    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.

  6. Philip V Ariel at 1:39 pm

    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
    Philip V Ariel recently posted…DesignHill Giveaway Is Here To Grab – Join Now And Win PrizesMy Profile

  7. Kyle Sloka-Frey at 6:51 am

    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!

  8. Erika Mohssen-Beyk at 8:51 pm

    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 at 10:12 pm

      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

  9. Kathryn Maclean at 5:21 am

    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 at 3:01 pm

      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

  10. Barbara Radisavljevic at 1:03 pm

    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 at 7:13 pm

      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
      Janice Wald recently posted…19 Best Graphic Design Websites and Tools: 12 Days of Christmas Day 2My Profile

  11. Hugh Roberts at 2:24 am

    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.

  12. Widdershins at 2:43 am

    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.

  13. Pingback: Mostly Blogging
  14. Lori at 9:40 pm

    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.
    Lori recently posted…How To Recover a Deleted Video On AndroidMy Profile

  15. D. Parker at 11:26 am

    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 *

CommentLuv badge

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

SKYROCKET YOUR BLOG TRAFFIC!

Do you want to increase your website traffic?

Get notified of tips to increase your traffic, access to our exclusive Pinterest group board, a link exchange, a Follow to Follow Directory, a StumbleUpon group, and a free, downloadable PDF of 89 blogging tools that will save you hours of time. Your Email will always stay private.

Check your email for a confirmation email.

Powered byRapidology
%d bloggers like this: