The Basics of Using the Gutenberg Editor – Part Two

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!

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.

I’ve turned to the blog, Torque, part of the Gutenberg Hub and NICK SCHÄFERHOFF whose post I’m sharing below with a link back to the original post.

“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

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 main idea behind the Gutenberg editor is to make the editing experience more flexible and easier to customize, especially for beginner users.

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

Plus, soon you no longer have to learn different ways of displaying page elements (like shortcodes and widgets) but simply one: blocks. When you know how to use them, you can control all different parts of your site.”

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 and create 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 – way down at the bottom of the list. 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.