Learn the New WordPress Editor | Meet Gutenberg

Have Fun with the New Gutenberg Editor {Part 1}

There’s a new Editor coming in WordPress! Have you heard about it yet? Gutenberg will be moving in with the next major update in WordPress, both for the free dot com sites and for the self-hosted dot org sites. Get ready to have fun with the new features that you can use in the Gutenberg Editor! Spread out across our friendship table is this post that is catering to WordPress dot com bloggers. For those who use a self-hosted site, what I share here should be the same but I’m not 100% sure. My research indicates it is but I have no experience with that as proof. So, follow along and if it works for you as I describe here, please let me know!

New Kid on the Block

First of all, let me fill you in on Gutenberg. Most people are referring to Gutenberg as the New Editor and it has been in development for three phases. The original editor in WordPress allows you to type your post, add images, set categories and tags, and even upload videos, plus more. Rest assured that in Gutenberg, you will continue to be able to do that and more!

The Editor will look different. But give yourself some time and you will come to love it!

I know, I hear you. You don’t like change but some changes are good. And from what I’ve been seeing as I’m using Gutenberg, you know I’m writing in it now (think of Madge in the Palmolive commercial – you know, you’re soaking in it). Anyway, back to Gutenberg. I see improvements such as adding colour to blocks of writing and making the first letter in the first word in a paragraph a Drop Cap letter. I like that!

Edited: The Gutenberg Development Team do not recommend activating the Gutenberg Editor in a live environment as it may cause problems. Any reference I share about activation should only be read and not activated at this point. Once Gutenberg has been pushed out and is ready for everyone to use, then this post series will be a great resource for you. 

Before we go any further, let me remind you that at this point, you are testing out the new Editor. While there is nothing stopping you from publishing a post using the Gutenberg Editor, you don’t have to. I recommend that you play in it using a draft post. Get familiar with all its nuances and when WordPress pushes out version 5.0, you will be ready for Gutenberg then.

Gutenberg incorporates the use of ‘blocks’ which can be paragraph blocks, image blocks, video blocks, blocks, blocks, blocks. If you like playing with blocks, this will be fun!

The thing with Gutenberg is, it looks different. The functionality is the same but with enhancements that are free! You don’t have to buy a new theme to get the Drop Cap feature or to add colour to a paragraph block. I like that!

So, let’s take a look at what we get when we first activate Gutenberg.

1. Change Your Admin Screen

Do you have a black wp-admin menu screen on the right-hand side where you want to start a new post? Or is it blue? Which of the two pictures does it look like?

If it is blue, I suggest you change it to the black one. To do that, in the address bar at the top, type in wp-admin at the end of the line. It should look like this: https://YourBlogURL.wordpress.com/wp-admin/

Your screen will look like the WordPress dot org self-hosted sites. I know, you’re probably saying that you prefer the blue screen because you are used to it.  But you know what? You’ll get used to this too! It’s the learning curve that you don’t like and I fully understand that.

  • One tip for you is to bookmark your new wp-admin page so you can access it quickly. I have both the wp-admin screen as a shortcut on my main Blog Stuff and the original blue screen too. That way I don’t have to type anything in at the top, I just quickly open a new window and select the view I want to work in.

Anyway, you cannot access the Gutenberg Editor through the blue screen, only the black one so you really will need to make that change. (WordPress dot org bloggers, you will need to install the Gutenberg plugin if you haven’t already.)

2. Activate the Gutenberg Editor

The first thing you need to do is to activate the Gutenberg Editor. Do you see an option to Try Gutenberg that looks like this?

If not, it could be that you may have “dismissed” the option because you didn’t know what it was. Let’s turn it on now.

At the very top of your screen, do you see “Screen Options” on the far right-hand side? Click this. There will be screen options available to choose from. The last one should be New Editor. Put a checkmark here then close out the “Screen Options” menu.

Now, look at the above image that shows the Try Gutenberg in a blue button. Click on it. Did you notice the option to deactivate it at any time? You can do this while Gutenberg is still being worked on by WordPress but once it becomes the default editor, you won’t be able to turn it off.

I keep mine activated but I switch back and forth between Editors. Yes, you can do that until you are comfortable with how Gutenberg functions.

One thing you will be able to do once WordPress launches Gutenberg is to choose between the Classic Editor or work in the Gutenberg Editor. We’ll talk more about that later.

3. Test Drive the Gutenberg Editor

When the new editor is activated, you should see a giant size Add Title block. Let’s roam around this screen for a bit.

As you can see above, there is a Title Block that will have the H1 header code attached. Underneath it is the initial Writing Block. To the far right of the block are three option icons: Header, Image and the most recent block type used. For me, this was the More Tag.

On the far right, are the Document Options. Once you begin typing in a block, it will automatically switch to the Block Options.

So what this means is, the options that apply to the entire Document such as Category and Tags, will be found under Document. Specific options that apply to your writing, such as inserting an image or video file, changing the colour of the block or adding a Drop Cap are found under Block.  

WordPress bloggers | Learn Gutenberg | Explore the new WP Editor | Meet Gutenberg

click or tap the image to Pin It!

  Every time you press the Return key on your keyboard, it starts a new block. Seems weird, I know, but after a while, you’ll come to appreciate it. Why? Because you can easily change the block type to something else if you need to. And, I think the developers are making it so blocks can be moved around easily, but we’ll find out for sure when it is launched.

Here’s how easy it is to transform a block. See the Paragraph symbol in the image below on the left? That indicates the current block is a paragraph block. When you click on the down arrow right beside it, the option is to switch it out. Click on it to see how you can transform the block.

One more thing to peek at before we leave this screen and that is in the upper left corner. If you want to see the information about your document, click the “i” circle.

The document information shows the total number of words, the headings, number of paragraph blocks and the overall number of blocks. You also see the details of the document outline, showing the header titles. Click on any title in the document information and it will take you to that header in the document. That is handy if you decide to change the wording from here or you want to re-read that section again.

4. Quick Customs to Paragraph Blocks

There are a few things you can do within a paragraph block. As you can see, this block as a drop cap. Once you turn on the toggle switch for Drop Cap on the Block Options menu, you don’t see the drop cap until you are out of the block, in other words, until you hit the return key.

The great big capital T looks nice, don’t you think? I can’t do that in my theme but it is available in the Gutenberg Editor. And personally, I love it! Just don’t overuse it though or it will look tacky.

The other thing you can do is apply colour to a whole block. Unfortunately, the Gutenberg designers haven’t coded the ability to apply colour to single words or phrases but from what I read on the forums, they are working on it. So for now, here’s a whole paragraph block in my brand colour. Forgot to mention that you can choose from predefined colours or select your own brand colour.

As you can see from the Colour Settings, you can choose to apply colour to text or colour to a block, like this. Again, I can’t do this in my theme, can you?

A few of the other options are:

  • adding either bullet or numbered lists
  • indenting left and right
  • using Bold, Italics and Strikethrough
  • inserting a link
  • editing individual blocks in HTML which is perfect for adding the no pin code to images you don’t want to be pinned to Pinterest

That’s a Wrap, for now

Has this helped you see that the Gutenberg Editor can be fun? I must say that every time I use it, I enjoy it more. I’m very glad I have the time to figure this out before it becomes our default editor in WordPress.

So, if you blog on WordPress dot com, I strongly encourage you to explore the Gutenberg Editor to have fun with it as you learn how to use it.

When I first activated it and began to explore it with a real post, there were some things I couldn’t find how to do so I deactivated Gutenberg just to continue my post for publication.

My recommendation to you is to activate it, but begin a draft post until you get familiar with the functionality of it. Have fun with Gutenberg.

The next time we get together, I’ll show you how to format your images for Pinterest.

If this post has been helpful, please leave me a comment as I’d love to hear from you!

Yes! I want to take a look at {Part 2} Here’s My Perspective of the Gutenberg Editor and {Part 3} Gutenberg’s Best Feature: Reusable Blocks.

17 thoughts on “Have Fun with the New Gutenberg Editor {Part 1}

    • Hi Chris. Yes, lots of information and it is only a bit of it! More to come and yes, this applies to the free wp dot com bloggers. I will be writing post for bloggers now and they will be focused on bloggers who use wp dot com. Stay tuned for more!

  1. Pingback: Behind the Scenes with the New Gutenberg Editor • SusanBMead

  2. Pingback: Gutenberg’s Best Feature: Reusable Blocks {Part 3} – Women's Tabletop Friendship

  3. ParticularlyCALLED

    So, what if your site is live? I mean, aren’t all of ours?? How do we activate it without causing problems?? (Sorry if it’s a dumb question)

    • Hi there. That’s a very good question actually. Unfortunately, activating Gutenberg is on a live site and is possible to do but the Dev Team does not recommend it. I know of other bloggers who have enabled it with no problems but there’s always the chance something negative could happen. Some of them have also deactivated it since. For now, I suggest referring to my posts for details until they launch it. I wish I could give you a better option.
      Thanks for stopping by today.

  4. Pingback: Gutenberg's Best Feature: Reusable Blocks {Part 3} - Women's Tabletop Friendship

  5. Pingback: How to Improve Your Blog Post in 6 Steps - Women's Tabletop Friendship

So, what are your thoughts about this?

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