What’s the Block Editor?

You may also have heard the WordPress block editor referred to as Gutenberg, which is the code name for the WordPress team’s redesign of the text editor. WordPress calls it a

… modular approach to pages and posts: each piece of content in the editor, from a paragraph to an image gallery to a headline, is its own block.

WordPress.org

Not only does the block editor come with its own set of blocks, many plugins add a block of their own. For example, Gravity Forms makes it simple to add a form of your choosing, which I’ll go into in more detail in another post. There’s also a free plugin from Brainstorm Force called Ultimate Add-ons for Gutenberg that adds additional blocks. You can read about it here.

How Does the WordPress Block Editor Work?

Set Up Your Environment and Preferences

You’ll start with this screen and add your post title. Or, if you’re like me, sometimes I don’t add the title until I’m finished with the post. Either is OK.

The Right Sidebar

The content of the right sidebar changes, depending on whether you’re viewing post or block settings.

At the top right of the page, click the three vertical dots. The top three options help you arrange your interface as you like. Click Top Toolbar to show your block toolbar at the top of the page. Spotlight Mode focuses on one block at a time, and decreases opacity for the remaining blocks. Fullscreen Mode eliminates the left WordPress sidebar to minimize distraction.

You can choose whether to view your content in Code View or Visual Editor. I use both from time to time. If there’s a layout issue you can’t figure out in the visual editor, it’s usually easy to fix in the code editor if you know a little HTML.

Next on the Settings sidebar, if you have Jetpack installed, is the shortlink Jetpack creates for your post. Copy this link and you can use it to post on social media. Click Preview under the shortlink and you can preview what your post will look like on social media sites. Note that I’ve added a featured image so it will pull the image for social media.

Under Tools, the Block Manager lets you disable blocks you don’t need.

Post Settings

Permalinks

On the right sidebar, you’ll notice at the top there are tabs for Post and Block. For now, let’s focus on the Post tab. These are the settings that apply to the entire post.

As you scroll down the sidebar, you’ll see the Permalink settings, which is the last part of the URL. You can change this permalink to whatever you like, but it’s a good idea to set it and leave it as it can otherwise hurt your SEO. As you can see, my post still has random numbers as its permalink because I haven’t given my post a title. Once you enter the post title, you’ll see that WordPress will automatically fill in the permalink.

Categories and Tags

Scrolling down on the sidebar, you’ll notice your categories and tags; you can add the post to as many categories as you like. Use tags to bring more specificity to the sorting of your post.

Featured Image

Every page and post should have a featured image. This is because if you post a link on social media, you want the image to be pulled and included in your post to draw more eyeballs.

Excerpt

The excerpt is a hand-written short summary of your post. WordPress can use the excerpt in many different ways, so it’s a good idea to fill this out. I use the meta description I write for the Yoast SEO plugin for my excerpt.

Discussion

You can allow or disallow comments, pingbacks, and trackbacks on each post. This is helpful if you’re writing about a potentially controversial topic and you don’t want heated discussion.

Wondering what pingbacks and trackbacks are? They are WordPress’ way of letting other blogs know you’ve linked to them. Here’s how WordPress differentiates the two:

Trackbacks must be created manually, and send an excerpt of the content, while pingbacks are automated and don’t send content. — WordPress Codex

Post Attributes

Depending on your theme, you may have different settings here, but this is where you’ll change your page template. Many themes have different templates for pages such as FAQ, landing pages, full-width pages, or pages with a sidebar.

Plugin-Related Settings

You’ll notice on my post screen (above, shaded area), there are several areas that have been added by plugins. The plugin adds these automatically so that you can control its options post by post.

Block Settings

Block settings control only the active block. For our image, we can choose a style, specify a default style, and add an alt tag (important for SEO and screen readers).

Under the alt tag box, you can set the display size of your image. Remember, for best performance, your image should be sized correctly for the page before you import it into WordPress. But sometimes you may need to make a change on the fly.

Under the Advanced tab, you can add title attributes, an HTML anchor if you wish to link directly to that block, and a CSS class that will apply only to that block.

Content Area

Let’s go ahead and add a title to our test post. Notice that as soon as I’ve typed in the title, WordPress has replaced the permalink.

Now let’s add a block. Place your cursor in the content area and you’ll see a black box with a plus icon. Click the plus. You’ll see a box with the most recent blocks you’ve used, or you can click Browse All to see more blocks.

Let’s add a paragraph. After I click on the plus icon, all I need to do is click the Paragraph in the dialog box and start adding my copy. Press return or enter to go to a new line and select a new box.

Let’s add an image. Once you select Image, this dialog box will pop up and you can select or upload your image. While your image is selected, you’ll see the image controls. You can set these to be at the top of the page if you like, but by default they are immediately above the block.

Move Blocks

Let’s say I decide I’d like my list to be above the image. Go to the top of the page and click the up arrow as many times as you need to move the block to the position you like.

Change the Type of Block

Note that I’ve added heading text, “This is a heading.” If I click the paragraph icon, a dialog will pop up and I can choose which type of block I want to change to. Here I’ve made it a heading, and when I choose Heading it shows a menu with all six levels of headings.

Reusable Blocks

This is one of my favorite features. Let’s say I want to use my list in every post. Click on the block, click the three vertical dots at the top, and select Add to Reusable Blocks.

When you’re ready to use your reusable block, just click to add it. Unlike my test block, it’s a good idea to give it a name so you’ll know what you’re adding.

Publish Your Post

When you’re ready to publish, just click Publish in the upper right corner. It’ll ask you if you’re sure you’re ready to publish and give you a handy checklist to be sure you didn’t forget anything. Hit Publish again and you’re good to go.