Not everyone likes change. In fact, most people dig their heels in when they know change is on the horizon. But, there are changes that are good for you and from my perspective, the new Gutenberg Editor is one of them!

You may have missed my first post encouraging you to have fun with the new Gutenberg Editor so if you want to catch up on it, I’ll wait right here for you.

I am sure that after catching up on the test drive, you are not welcoming Gutenberg with open arms and I understand 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. 

NOTE: As of the date of this post, the Gutenberg Editor is not yet launched for WordPress users. Apparently, the live date is set for November which is fast approaching so we’ll see if they postpone it or not. But for sure, it is coming with the next big version update which is WordPress version 5.0.

The New Gutenberg Editor is coming soon. Take the time to play in the new Editor while you can.
Click the image to save to Pinterest.

Functionality Refresher

As a refresher, let’s look at the some of the features in random order:

  • everything you do is in a block, whether it is text, image, a header, video, etc. Each of these is in blocks and are the foundation of a post. New blocks are created when you press the ‘return’ key.
  • you can apply a background colour to any block of text
  • you can apply text colour to any block of text. Let’s hope the Gutenberg designers will give us the functionality to apply colour to any ‘selected’ text too!
  • changing the font size is easy with the new slider
  • adding a drop cap to a block of text is fast and easy
  • bullets and numbered lists can be added at any time
  • text alignment, as well as formatting, is easy to do
  • adding a link, well, right now that could use some improvement. It used to be that you could select a post or page from a list but that is missing at this point. I hope they give us back that functionality! But I do have a workaround for that though which is to open a new window, grab the link from your blog and paste it in the link field.

That’s a few of the familiar editing features that you have come to depend on in the WordPress editor plus some new ones specific to Gutenberg. Though there are still improvements to be made, I know I’m comfortable enough to move ahead with using the Gutenberg Editor. Why? Because there are millions of people using WordPress and they will be complaining when they lose functionality.

Prepping Photo Image Files

Time to change our focus now and go over are some features that you may not have thought of when you took the Gutenberg Editor for a test drive.

Here’s the fun part. You already know the importance of preparing your graphic images for Pinterest and SEO so I want to show you how that is done in the Gutenberg Editor.

We normally prep our graphics with:

  • the image filename as the blog post title
  • blog post title in the Title field
  • add a Caption on free stock photos to credit the photo source
  • include appropriate Alt Text
  • add a Description to help SEO and Pinterest. Unfortunately, as of this post date, the developers have not included the Description field. I’m not sure how this will affect you.
  • edit the image’s HTML to add a nopin or dofollow code as necessary

To add a photo image, click on the Image icon in the block options, as shown.

A dialogue box will open with two choices: Upload a photo from your computer OR you can select an image from your Media Library.

When you select an image from your Media Library, I would imagine that you have already added data to the fields, Title, Alt Text, Description, etc. If you haven’t added that metadata yet, you can add it here as shown below.

If you are uploading a brand new image, you will need to add the details to the photo. With the photo block selected, the Block option menu will change to the fields necessary for adding photo details.

Photo Source: Cindy Barnes

As much as I love the Gutenberg Editor, I still see room for improvement. The Description is missing as is the Title field. Though you can’t see it in this image, above, the Caption is now placed outside of the image. I’ll write in this one so you can see it.

I’m really hoping that the Gutenberg designers will give us the functionality of adding the description again.

I guess you didn’t know that when I was in the workforce I worked in the Information Technology department of our local hospital. My job was Application Analyst which meant I worked with software. I trained staff, wrote manuals and helped develop our main software. I’m familiar with functionality and even with workarounds.

The workaround for my photo images in Gutenberg would be to add the images in the Media Library. That way I can add all the necessary metadata and not miss any fields. Then when I add the images to the post, all the graphic details are there already.

Editing HTML in Image Blocks

I must say that I love adding the nopin code in Gutenberg. It is so much easier as you simply click on the image you don’t want others to pin, select Edit HTML and then add the code in the proper spot.

Now, the next thing you do is keep the image as HTML code. Don’t convert it back to blocks. At least, not until the WP developers work out the quirks that make the code disappear when the block is converted back to the image.

To keep the image as HTML code, select the Convert to HTML when it pops up.

If you want to preview your image, click in the code block and above it will appear two options, HTML or Preview. Select Preview. However, the image will remain as HTML code for the remainder of your post.

So, that’s it for editing the Image Blocks to include the nopin code in HTML. Do you think this will be easier for you?

New Gutenberg Editor | WordPress New Editor | Bloggers' How to Use the new Gutenberg Editor
Click the image to save to Pinterest.

Preview Your Post in Gutenberg

We all want to see what the post will look like before we publish it. I know I like to proofread it from the finished standpoint.

However, during the trial period of testing Gutenberg, I have found that the Preview button, located next to PUBLISH at the top on the right-hand side, hasn’t been working for me. I have been getting a “Not Found” page but it is my belief that this is a bug that has yet to be fixed before the development team launches the new Editor.

So, the workaround, and you know I always have them, is, save your post by clicking on Save Draft next to the Preview button, then exit the Editor by clicking on the left-hand menu.

I usually click directly on ALL POSTS so I have the list of posts on the screen. Hover your mouse over the post title you want to preview and then the menu will appear under it. Your choices are Edit, Classic Editor, Quick Edit, Trash, Preview. Click on Preview to view your post. When you’re done viewing, use the browser’s back button to return to the All Posts list.

That’s it for Now!

My perspective of the new Gutenberg Editor is “bring it on!”

Even though there are still kinks that need to be worked out by the development team, I still really like the new Gutenberg Editor. I look forward to the version update that is coming soon whenever that will be.

Well, if you worked through your test drive of the new Gutenberg Editor with me, let me know how your drive went. There is still more to learn but you’ll figure it out by playing around. Between this post and the previous one, you have a good head start to being successful in the new Editor.

I’d love to hear from you. Please leave a comment below.

Oh! one more thing, if you’re going to pin the two main images, click on the image itself for the Pinterest Save button to appear. Don’t use the small Pinterest Save button at the end of the post as the main images aren’t available to choose when that is used. Strange, eh? Another one for the development team!

Yes! I want to take a look at {Part 3} Gutenberg’s Best Feature: Reusable Blocks and {Part 1} Have Fun with Gutenberg’s New Editor.

4 Comments

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.