Guide to the New WordPress Block Editor

This post was last updated on July 30th, 2021

Picture of WordPress Blocks Editor

WordPress 5.0 brought the release of the new Block Editor (also known as Gutenberg from it’s beta versions). The previous editor, known as the Classic Editor, was completely rebuilt from the ground up with an emphasis on a blocks-based, drag-and-drop interface. The goal was to give you, the user, a more intuitive editing experience, more control over the layout of your content, and make your content more responsive for mobile phones and tablets. 

Since this is a significant departure from the Classic Editor we’ll cover all the important changes and additions the new Block Editor brings, how to maximize and extend its features, and also how to convert your old content over to this new format.

Differences between the new Block Editor and the Classic Editor

The New Block Editor
The Classic Editor

The Classic Editor

The traditional WordPress editor had the look and feel of a word processor with its toolbar of standard font and paragraph styling and scrolling page editor space. Options related to publishing, categorization, and featured images were shown in the right sidebar as well as some below the main content area.

The New Block Editor

The new Block Editor has a clean, spacious look with an open space filled with content blocks. This new layout has a focus on your content and what it will actually look like on the page when it’s published. There are plenty of new features under the hood as well design tweaks to give you more flexibility and control with layout. There’s also a big focus on making content more responsive on mobile and tablet devices.

A benefit and a drawback of this editor is that it hides a lot of clutter. That means you’ll need to know where to look to get to some of the options that you’re used to using.

Getting Started with the New Block Editor

Make sure WordPress is up-to-date

If you have the latest version of WordPress, you already have the Block Editor installed and you can jump into creating content with all the new tools right now. 

Don’t worry, you can have both editors!

If you’re not ready to switch over completely, WordPress allows you to have both editors on the same site while your trying out the new Block Editor.

Just install the Classic Editor plugin and you’ll be able to choose which editor you’d like to use for each post or page you’re editing. You can skip down to the section “Making the switch to the new Block Editor” to see how to do that and also how to migrate your old content to the new format.

Layout of the new Block Editor

Top Toolbar – Left Side

Buttons from left to right:

  • WordPress button linking back to your list of Posts or Pages
  • Add Block button (+) for adding new content blocks
  • Mode button (pencil) that changes your editor from Select mode to Edit mode
  • Undo/Redo buttons
  • Info button gives you statistics on your written content
  • Outline button that shows an organized list of all your blocks

Top Toolbar – Right Side

Buttons from left to right:

  • Save Draft – let’s you save your work as a draft if you’re not quite ready to publish. After publishing this switches to “Change to draft” if you want to unpublish and revert to draft state.
  • Preview – View how your content will look before publishing. A highly recommended step before publishing any content.
  • Publish – This publishes your content as a post or page on your site.
  • Settings – Show or hide the options right sidebar
  • PublishPress Blocks Settings – This is added by the PublishPress Blocks plugin, it allows you to change with width of your editor – very handy.
  • YOAST SEO – This is added by the YOAST SEO plugin
  • Options – The ellipsis (three vertical dots) shows advanced options like switching to Code editor and editing your Block Editor preferences

Content Editor

This where you’ll be editing all your content as blocks. The content editing area is wide-open and spacious now compared to the previous version. You’ll need to actually click on a block now to edit it and bring it’s options into view.

Options Sidebar (on the right)

The options sidebar is where you can edit options for the overall page or post and also each block. If you have a block selected, that block’s options will automatically show here. At the top will show tabs that allow you to switch between options for the overall page or for individual blocks.

Extra settings below the Content Editor

If you scroll down to the bottom of the main Content Editor you may have extra settings from plugins or options that are specific to your theme.

Let’s Start Editing!

Creating a New Post or Page in the Block Editor

Start by clicking Add New under the Posts or Pages menu in your admin panel. This will take you into the new editor. If it doesn’t show the new editor you may need to update your version of WordPress.

The Title Block

Fill in your title, which is always the first block on your page. Note that this Title will become the name used in your page’s URL for example: https://example.com/title . After entering your title, press enter, or just click on the next block that says “Start writing” to start adding content to the page.

Adding Blocks to the Page

The “Start Writing” block is automatically a Paragraph Block so can get right to writing. Alternatively you can click the Add Block (+) button to the right to choose a different type of block. The Add Block button will show in a few different places when you’re editing:

Tip: Why write when you can Copy and Paste!
If you already have a word document or PDF with all your written content for your page, great! Simply copy the contents of your document and paste it directly into the Block Editor. Most formatting and even layout will be carried over saving you a lot of time!

If you’ve clicked Add Block, a dialogue will appear with recently used blocks and a search bar. 

Tip: Don’t see the block you want? There’s plenty of plugins like PublishPress Blocks or Ultimate Blocks that can be installed to add more types of features to your editor.

Once you select and add a block to the page, the right sidebar will show options specific to that block, in this case for the Paragraph Block:

Editing Blocks

The Block Toolbar

Once you select a block, the Block Toolbar shows directly above that block with options specific to it. The picture above shows options for the Paragraph block:

  • Changing the block type – gives you options to change the type of block. You could change a Paragraph to a Headline if needed or visa versa, you won’t be able to change incompatible blocks like for instance changing an image to headline.
  • Drag Block and Up/Down Arrows – Click and drag your block up and down the page or use the up and down arrows to move it:
  • Block-Specific Options – After the Up/Down Arrows you’ll see options specific to your type of block like font options in the case of the Paragraph block. The down arrow at the end reveals extra block-specific options:
  • More Options – Click the ellipsis (three vertical dots) on the far right to open the Other Options menu on the Block Toolbar:

Some notable options in the More Options are:

  1. Copy – Copy the block to your clipboard, you can paste the block using CTRL or CMD + V or using the menu again to paste
  2. Duplicate – Duplicate the block – helpful when you want to recreate the same settings and content in a block quickly
  3. Edit as HTML – If there’s ever an error in a block you can ‘look under the hood’ with this option. If you do have custom HTML in your block though, I’d recommend changing the block to the dedicated Custom HTML block
  4. Add to Reusable blocks – Make this block reusable on other pages and posts – we’ll cover this in the next section

Making a Block Reusable

One of the most helpful new features is the ability to make any block reusable. This is great for keeping content consistent across your site like contact information.

  1. Select the block and click the ellipsis (three vertical dots) on the far right to open the Other Options menu.
  2. Click Make a Reusable Block option and enter a title for your new reusable block.

Some important notes:

  • Now that you’ve made you’re block reusable, you can add it to other pages or posts by clicking the Add Block icon and searching for the title you gave it.
  • If you edit your reusable block, it will be updated everywhere that block is used. That’s great but also important to keep in mind if you have it on a lot of pages.

Page/Post Settings and Publishing

On the right sidebar you have two tabs available: the main Page or Post tab and the Block tab. If you click on the Page or Post tab you’ll see settings related to the whole page or post you’re editing. We’ll cover the most common sections. Your site may have more options than whats pictured here, depending on what plugins you have installed and your theme features.

Status and Visibility

Visibility

The Visibility setting allows you to control who can see your Page or Post:

  • Public: The default setting that makes it visible to everyone.
  • Private: Only visible to logged in site admins and editors.
  • Password Protected: Protected with a password you choose. Only those with the password can view this post.
Publish

Under Publish you can choose to publish immediately or you can schedule it for a future date. This is very handy if you need to post something when you’re away. Notice that after you set a future date, the “Publish” button changes to “Schedule.”

Stick this post to the front page

This setting is just for posts not pages. When checked, your post will stay at the top of your blog feed and/or Front Page (if posts show on your Front Page too).

Pending Review

Check this box if you want an Admin or Editor to review the post or page before it’s published.

Here you can change the title of your page that shows in your URL. Note that this doesn’t change your actual page title, so you can set your URL to something different from your page title.

Where and how a Featured Image shows really depends on your theme. For posts, the Featured Image typically shows next to it’s title on your main blog page and at the top of the post itself when viewing the individual post. For pages it could show at the top of your page depending on how your theme is setup.

Post or Page Attributes

Here you can choose a specific template for your page or post, depending on what is included in your theme. For pages, you can choose a Parent Page which sets what page the current page is organized under in page hierarchy.

Main Types of Blocks

Paragraph Block

This common block has basic style and editing options in the toolbar above as well as the right sidebar. You can change font size, color, and even add a Drop Cap (Large first letter) if desired.

Heading

It’s important to break up any writing into sections to organize content and make reading easier. With the Heading block you can choose headings 1-6 (they tend to decrease in size for later numbers). The Title of the page or post should be the only Heading 1 on your page, so WordPress will default to heading 2s to start then you can select lower headings for subsections. 

List

You can choose between a bullet or numbered list, increasing or decreasing indent for each item, and also add inline images if desired.

Quote and Pullquote

If you’re citing someone in your writing or just want to call attention to an important point in your article the Quote and Pullquote are great ways to do that. The Quote has a vertical bar on the left-hand side and the Pullquote has horizontal bars above and below. Both allow you to set a citation below.

Image

When you add the Image block you’ll be able to upload from your computer, choose from images in your website’s media library, or an external hosted image (URL).

After selecting the image, you can Change Alignment (left, center, right) from the toolbar or Crop. You’ll also see blue dots on the right and bottom of the image that you can use to resize it and a caption area below.

If you want more exacting control over your image’s dimensions, take a look at the sidebar that has more sizing options and display styles.

When adding a Gallery block you can select photos to upload or multiple photos from your Media Library much like the Image block

Tip: You can drag and drop multiple photos directly into your editor and it will automatically create a gallery for you!

New Types of Blocks

Columns

This one is a game changer. In the classic editor you’d have to use a complicated mix of shortcodes to implement columns. Now you have visual columns you can easily edit to change layout and sizing.

You can choose the number of columns to start but then also adjust their width by click and dragging their edges or selecting them and changing their sizing in the right sidebar.

Media & Text

This block makes it easy to create a clean layout with text and images side by side. You can select the placement of image on left or right and then adjust width of either side.

Spacer

Sometimes you need just a little more space between objects or text and the spacer is perfect for that. You can add it between any blocks and adjust pixels of space in the right toolbar.

Cover Images

The cover image is a beautiful way to introduce your content.  You can choose a large image, a transparent color overlay and title. You can also insert an image like a logo over your image as well.

Tables

The built-in Tables block is a definite improvement over the old version, but still lacks many customizations. We recommend a plugin that adds more user-friendly table blocks like PublishPress Blocks (pictured) or Ultimate Blocks for more control over the appearance of the tables.

Tip: Want to embed a YouTube, Facebook, or Instagram post? WordPress has made it easy, you can select the specific social media block from the Add Block menu or simply paste in the URL to the social media post. Voila! Social media embedded.

Making the switch to the new Block Editor

For many companies and organizations, switching to a completely new editor may take time especially with the dramatic changes the Block Editor brings. To ease into using the new editor, you can elect to have both editors available to users on your site. This way they can choose, each time they edit, which editor they want to use.

How to enable both editors on your site:

  1. Make sure you have the latest version of WordPress installed which includes the Block Editor.
  2. Install the Classic Editor plugin.
  3. In your Admin Panel go to Settings > Writing and under Allow users to switch editors select Yes. You can also select which editor you want to be default for all users. 
  4. Now every time you edit you can choose which editor you want to use. Just scroll down  the right sidebar and you’ll see an option to choose editor.

How to convert a page created with the Classic Editor into blocks

To convert an older page or post into the new Block Editor format:

  1. Open the page or post. If you’re still using the Classic Editor switch to the Block Editor using the setting on the right sidebar.
  2. Your content created in the Classic Editor will show as a Classic Editor block:
  1. Click the ellipsis (three vertical dots) on the right side of the block toolbar
  2. Click Convert To Blocks

Here are some great extensions to the new Block Editor:

PublishPress Blocks

Ultimate Blocks

Advanced Gutenberg

We hope you found this helpful! Feel free to contact us if you have any questions.

Written by Mark Pfaff