The WordPress Visual Editor – your complete guide

WordPress Visual Editor-Header

Later this year wordpress version 5 will be released and with it the new wordpress visual editor, Gutenberg.

So you may be wondering where you’ve heard the name Gutenberg before. When I first heard it I had a rough idea that it had some historical significance but that was as far as I knew.

Gutenberg is named after Johannes Gutenberg, the inventor of the mechanical printing press. He introduced it to Europe and it sparked the printing revolution. Calling it Gutenberg is wordpress making a statement. They intend for Gutenberg to be the start of something big.

You can actually get your hands on it now. The WordPress visual editor is available right at this very moment as a plugin. And it would probably be a good idea to install it now, in fact wordpress are actually encouraging it so that you get used to it before it becomes the default editor in version 5.

If you install it now and in the early days of version 5 you can choose whether or not to use the wordpress visual editor or the classic editor. There will come a point where wordpress will stop supporting the classic editor, so if you want to make sure your site keeps up to date with the latest security releases you’ll need to be using Gutenberg.

Reputation/Reviews

When I first saw the wordpress visual editor in March this year, I was totally underwhelmed. It looked clunky and didn’t seem to work properly. Fast forward to July and I’m loving it!

You’ll notice that the Gutenberg plugin doesn’t have too many great reviews. My regulars will know that poor reviews might turn me off a plugin, especially if coupled with a low number of active installs. However, the new wordpress visual editor is an exception when it comes to my usual criteria for plugins.

A lot of these reviews, in my opinion, are from disgruntled wordpress developers and users irritated that they need to get used to a new way of working having been set in their ways since the stone age. Some people just have nothing better to do than complain. They were probably delighted when wordpress announced they were overhauling the editor so they’d have something new to moan about. Damn keyboard warriors!

Look and feel

The look and feel has had a big overhaul too, 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.

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 this is where you’ll go to add new blocks to your posts (more on blocks a little later) using the Add block button in this toolbar.

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.

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

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.

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.

How to report issues

As I said before, Gutenberg will become a default part of the next major WordPress release, WordPress version 5. But why have they released it as a plugin now then?

This is for only one reason, WordPress want to get real end users using the WordPress visual editor so that we can find and report any faults we find. Once we report the faults they will then put them into a big backlog and work on fixing them in priority order.

If you think you’ve found a fault with Gutenberg check out this article on what to do next.

Create/edit new post/page the WordPress visual editor

At the moment, you have two options when you create a new post if you have Gutenberg installed. You can either use the WordPress visual editor or the classic WordPress editor.

If you select Add New from the Posts menu, a new post will open automatically using Gutenberg. If you want to use the classic WordPress editor you’ll need to click on All Posts in the Posts menu on the left hand side of the WordPress dashboard. When the screen with all posts is displayed you’ll notice that the button at the top of the screen to add new, now has an arrow to the right of it. Clicking on that will give you a drop down list with the option to use Gutenberg or the classic WordPress editor.

The process for choosing which editor to use when creating a new Page is exactly the same apart from that you need to use the Page menu on the left hand side of the WordPress dashboard.

When editing an existing page or post to use Gutenberg click the edit link below the post (appears when you hover over the page/post in the list) you want to edit, if you’d rather use the classic editor click the Classic editor link.

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

Before I talk about how to schedule posts using Gutenberg I want to say that I’ve had a couple of people tell me that it hasn’t been publishing scheduled posts. At the time of writing I found an issue logged with WordPress about it, and the issue said that using the classic view to schedule posts was fine. So if you find that Gutenberg doesn’t publish a post you scheduled, switch back to the classic editor to set up the scheduling options.

When the issue is fixed and you’re happy to try to schedule a post using the WordPress visual editor you’ll find it really similar to scheduling posts in the classic editor.

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

It’s really easy to switch between the classic and the visual WordPress editor. All you need to do is save your current changes, go to All Posts and then select whichever editor you want to use to edit your post. There’s been a bit of talk in the blogging community recently about Gutenberg not workign with a very popular plugin, but it’s not a big problem right now because you can switch between the editors and the other plugin still works with the clasic 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.

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

Get more bang for your buck!

To get your hands on this post in a downloadable PDF with loads of extra content sign up to my email list, where you’ll get it as a welcome gift.

The VIP’s on my list regularly get extra little freebies like this, so be there or be square!

If anyone who is already on my mailing list is reading this, I’ll be sending you the download link in this week’s newsletter (28/08/18), so you don’t have to sign up again to get it.

You may also enjoy:

WordPress Visual Editor

5 things you didn’t know about Project Gutenberg

How to install a WordPress theme in 3 easy steps

How to hide Pinterest images in your blog – the easy way

My Random Musings

4 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

Leave a Reply

Your email address will not be published.