The WordPress Visual Editor – your complete guide

WordPress Visual Editor-Header

The new WordPress visual editor also known as the WordPress block editor or Gutenberg, has been around for a while now and is only getting better.

I’m a huge advocate of getting people tot switch to the new editor for several reasons, but the main one is that it will save you time creating content in the long run.

The use of ‘blocks’ as discussed in detail later on in this post means that it’s much easier to re-use content. Things like affiliate link disclosures, email opt-in forms and links to your other content to name but a few.

It’s much easier and quicker to embed other media in your content too, including YouTube videos and posts from social media.

Add to that features like full screen mode, which removes all distractions as you write and you’ll find that the WordPress visual editor is designed to make you more productive while you’re in there.

Now lets look at these features in more detail.

Can’t wait to check out the WordPress visual editor? Check out this video

Look and feel

The look and feel has had a big overhaul, and I love it.

It’s clean and uncluttered, and much less overwhelming to new users and those who aren’t comfortable with techy looking stuff. I know a lot of this stuff comes down to personal taste but I love a simple white background, which is why the WordPress visual editor is right up my street.

The post/page title is now part of the editor itself, rather than being a separate text box above. You’ll also notice that the permalink that used to display beneath the page/post title textbox has disappeared. It will be displayed just above the page title when you click the page title and you can edit it under the document tab in the right hand sidebar.

You’ll also notice that the text editing options aren’t at the top of the editor in Gutenberg either. This is because those options now only become available when you’re actually editing text. So there’s more space on screen to see your content.

Top left toolbar

This is where a lot of the magic happens.

The furthest button to the left is the Add block button, to it’s right the Undo button, the next right is the redo button and the button with an ‘i’ on it is the Content Structure button.

Most of the time to add new blocks to your posts (more on blocks a little later) using the Add block button in this toolbar, but hitting enter on any highlighted block on screen will add a new block too.

The undo and redo buttons will probably come in handy for people who’d rather click buttons than use keyboard shortcuts (Ctrl + z undo, Ctrl +y redo).

The Content Structure button is a nice little addition, in my opinion. Here is where you’ll find your word count, along with stats on the number of paragraphs, headings and blocks within the blog post.

Below that is the Document Structure which shows you which headings are where, and how they relate to each other. Click on an element in here to get the editor to jump to it on screen.

Right hand sidebar

The biggest improvement to the look and feel of the new WordPress visual editor is the right hand sidebar. There are two tabs a document tab, which is selected when you first view the screen, and a blocks tab that you can use to see the settings of any block you have selected at the time. More on blocks to come.

By default everything is collapsed within the Document tab, which means there is less for users to process visually when they first load the screen. There are no spaces between sections, it just a plain straightforward accordion with sections that you can expand and collapse as and when you need them.

If there’s no block selected when you click the Blocks tab, the sidebar will be empty otherwise you’ll see any settings associated with the block you have selected.

Yoast SEO

As I was writing with this post and playing with all the features, I noticed that in the ‘More’ menu (top right hand corner button with 3 dots stacked vertically) there is a plugins section. In that section I found Yoast and when I clicked to enable it a Yoast icon appeared in the toolbar above the sidebar. Clicking on that hides the sidebar and shows the post’s Yoast scores/options.

If I’m being honest, I’m not overly keen on Yoast being displayed in the sidebar. When both the Reading and SEO sections are expanded I get a second scrollbar, and because the width of the area is so narrow it looks like there are more issues than there actually are, because some of the problems Yoast finds wrap onto the next line.

But don’t panic if you feel the same way, you’ll still find the Yoast section below the editor just where it used to be.

Blocks

Each bit of content you add to a post or page is added using blocks. It’s much better and less faffy than it sounds. Each block is a specific type, so if you want to add text you choose to add a text block, if you want to add an image you just add an image block etc.

Building your blog posts and pages this way makes it much easier to add and format different types of content. I was bowled over at how much easier it is to now embed content from other platforms within your blog posts. There will be no more using code to embed YouTube videos in your posts (unless you really want to), adding Facebook and Twitter posts is just a case of copying and pasting links into the new block. Honestly, you won’t believe just how easy it is to do this stuff using the new WordPress Visual Editor.

To add a new block to your page or post you click the small + button at the top left of the editor and a window will open so that you can choose which kind of block you want to add. I’ll go more in depth on adding different types of block further down.

Block Settings

When you click on a block, any settings for you to set up will be displayed in the right-hand sidebar. I think this is especially useful with blocks like images, so you don’t have the bulk of your screen blocked by a popup just to add your Alt description.

You’ll also find a block toolbar is displayed when blocks are highlighted. In the screenshot below you’ll notice that it’s shown just above the block in question, but you can also have it displayed at the top of the screen next to the Content Structure button.

To do this hit the Show more tools and options button (3 stacked dots) in int he top right hand corner of the screen above the right hand panel. Click the Top Toolbar option and it will move the block toolbar to the top of the screen.

On each type of block there is a ‘More Options’ menu, which is the 3 stacked dots button on the top right hand corner of the block. Here you’ll find options to add blocks before or after the selected block, whether or not to make it a reusable block, edit it as HTML or remove it from the post.

Transforming blocks

Some block will let you transform them into other types of block. For example an image block will give you the option to transform it into a file or gallery block.

If the transform option is available, you’ll see an icon on the top left hand corner of your block when you hover over it.

Rearranging Blocks

Gutenberg isn’t a drag and drop editor but that doesn’t mean it’s hard to rearrange blocks once they’re on screen. When you hover over a block you’ll notice two arrows appear on the left side of the block. Clicking the arrow pointing upwards will swap that block with the one above. Clicking the down button will swap that block with the block below. It’s as easy as that.

Existing posts/pages

Unless you want to convert your old posts and pages to Gutenberg blocks, they will stay unaffected.

If you decide that you want to convert old posts to the new WordPress block editor, you can.

All you need to do is head in to your old post where you’ll find that your content has been placed in a classic block. To convert to blocks just hit the More options button (3 dots stacked) and click convert to blocks.

You might need to make the odd tweak to your post, but in my experience I’ve had to change very little when I’ve converted my own classic posts to blocks.

Create/edit new post/page the WordPress visual editor

If you select Add New from the Posts menu, a new post will open automatically using the block editor.

Publishing Posts

Publishing posts in the WordPress visual editor is the same as doing it in the classic editor, only that the button is in a slightly different place. You’ll see it right up above the right hand sidebar next to the Preview button.

Scheduling Posts

Scheduling a post using the WordPress visual editor is pretty much the same as the classic editor, just that you need to view the document settings to do it in the right hand sidebar.

Expand the Status & Visibility section at the top of the right hand sidebar and click the date hyperlink opposite the Publish label.

A date picker will appear, once you change the date/time to one in the future the Publish button (top right hand corner of the screen) will change to Schedule as it does in the classic editor.

Switch between classic and visual

If you decide that you want to keep the classic editor you can by installing the Classic editor plugin. WordPress have said that they’ll support it for a couple of years, at least, to help people transition to the WordPress block editor.

What this will do is add an extra link below your posts on the All Posts page. So they’ll all have a link to edit using the classic editor and a link to edit using the WordPress block editor.

Adding Blocks

To add a new block of text your your blog page or post you click the + button at the top right of the WordPress visual editor. Then a small popup will appear and you can choose the type of block you want to add.

The really neat thing about this popup is that it remembers your most used blocks and you can use the text box to search for them too. So no need for endless scrolling if you know what you’re looking for.

When you hover over a newly added block you’ll notice a button on the top right of the block with 3 dots stacked vertically. Clicking on this gives you more options for the block itself.

You can also add a new block using this menu if there’s at least one other block on the screen. You can choose to Insert Before, Insert After or Duplicate. These buttons are pretty self-explanatory, Insert Before and Insert after insert blocks before or after the block the menu has been clicked from. The Duplicate button will create a duplicate block after the currently selected block.

Want to be more productive with the WordPress block editor?

Check out my new workshop designed to help you master the features of the Gutenberg that will make you super productive.

Quicker content creation with Gutenberg the WordPress visual editor aka the WordPress block editor

Common Blocks

Here’s a list of blocks that I use most regularly in my blog posts and how to add them to your posts. There are loads more kinds of block to choose from, they’re all pretty straightforward to add and set up.

Add text

To add a new text block you’d choose the paragraph block. When your block is selected and you hover over the text, the text editing options will display just above the text. So this is where you’ll get the option to change your text alignment, add a strikethrough, make your text bold or italic and turn it into a link.

Add headings

To add a heading using the WordPress visual editor you choose the Heading block. You’ll then see a new block appear on screen and you’ll be able to choose the heading size, and whether you want it bold, italic, have a strikethrough or make it a link.

Add links

To add links to your blog post or page, choose a text based block e.g. paragraph or heading, then highlight the text you want to use for the link so that the text options menu appears above and then click the link button.

Add images

Adding images using the wordpress visual editor is pretty similar to how you’d do it in the old editor.  Add a new block and choose image. Two buttons will display in the middle of the block Upload and Media Library, which is slightly different to the classic editor which would display a pop up window with upload and Media Library as tabs rather than buttons.

Clicking Upload will show you a window to choose an image straight from your computer, clicking Media Library will display a popup window with Upload and Media Library tabs. The Upload tab will have a button which, when clicked will let you choose an image from your computer. The Media Library tab will show you all the images from your media library (who’d have thought, eh?).

Click whichever button you need to find the image you want and it will display in the block on screen. As with the other editor, clicking on the image once it’s been added to the post will show the image options – left, center and right align and the edit button. The edit button now opens the media library, which I think is much better than the old editor which opened a screen which just opened a popup with the option to change some of the image attributes.

Gallery

Adding galleries is really straightforward too, just add the block and choose the pictures you want to display in your gallery. You can change the number of columns in the right hand side bar and the gallery will update in real time to reflect the number of columns as you change it.

Others

Other types of block you’ll find in the common block section:

  • Quote
  • List
  • Audio
  • Cover Image
  • File
  • Subheading
  • Video

Reusable blocks

Reusable blocks are the jewel in the crown of the WordPress block editor. You can add any block to a post, add some content to it and then save it to be used again.

I use them for loads of stuff. My affiliate link disclosure is stored in a reusable block, I add my email opt-in forms to HTML blocks and save them as reusable blocks too.

For each post category that I have, I put links to my top 3 most popular posts to add links to my other content with a few clicks of a button. The sky is the limit with reusable blocks and they are by far the stand out feature of the WordPress block editor.

Embed blocks

Ever felt the pain of messing around with embed code from places like YouTube and Facebook?

Not any more my friend.

All you need these days is an embed block and a link to whatever it is you want to add to your post.

WordPress visual editor – verdict

If you’ve not tried the WordPress block editor yet I definitely recommend that you try it sooner rather than later.

I’ve not gone into detail on all the different types of block in this post (you’d still be reading this in 3 days time if I tried!), but I’ve highlighted the more common blocks as well as reusable and embed blocks.

Those 2 types of block, in my view, are the 2 that really take Gutenberg to the next level. The ability to save content into blocks that can be added with a couple of clicks of a button will save content creators hours of time every month.

Couple that with the embed blocks that just need a link to whatever it is you want to include and WordPress has already streamlined 2 potentially time consuming parts of content creation.

The block editor is being improved all the time with lots of new features planned for the immediate and long term future. I literally can’t wait to see what comes next and I highly recommend that you get on for the ride sooner rather than later.

The WordPress Block Editor aka the WordPress visual editor

You may also enjoy:

3 ways Gutenberg can save you time in your biz

5 things you didn’t know about Gutenberg

Gutenberg FAQ

10 Comments on “The WordPress Visual Editor – your complete guide”

  1. This has made me feel so much better. I use Course Craft for all of my courses and the whole block thing is their exact set up. I find it a bit more of a faff than just using HTML, but at least it’s easy to understand (I say this now, famous last words haha)
    Debbie

    1. There’s been a lot of scaremongering where Gutenberg’s concerned and it’s totally unfounded. So many people have said how much they like it after they’ve tried it

  2. Very helpful as usual. I need to update and get using this ASAP. Don’t know why I was putting it off as it does look better

    1. The main thing is to not panic. If you’re short of time right now, you can install the classic editor plugin which will mean you can still use the old editor until you have time to get to grips with the new one.

Leave a Reply

Your email address will not be published.