WordPress 2020 – Gutenberg and Your Website

From WordPress 5.0 onwards the block editor will be the default editor for WordPress. The block editor, code-named Gutenberg, has been designed to make content creation easy for non-coders. You don’t have to be a geek to blog with WordPress.  

Anything you can do with the classic editor can be done using the block editor. But there are some things you can do with the block editor that can’t be done with the classic editor.

This article explains how the new editor changes the way you create and edit your WordPress website’s content, helping you to make the changeover to the block editor easy and painless.

Until WordPress 5.0 is released you can access the block editor through the Gutenberg plugin. If you haven’t installed it yet you’ll find it available from your WordPress dashboard home page or through Plugins > Add New.

The Gutenberg plugin is now active on over 1 million (1,000,000) websites. Is yours one of them?

The New Interface

Content creation is fairly intuitive. You just give your post a title and then start writing. When you reach the end of a paragraph just hit the Enter key as you would using any other writing app.  The editor will create a new paragraph block so you can just keep typing without thinking about formatting and layout.

When you go back to your post for editing you can insert headings, images etc. Or you can convert a paragraph into a heading or vice versa. Of course, if you prefer to add headings, and images etc. as you’re typing you can do that too.

The three blocks most people use the most are Paragraph, Heading, and Image. Paragraph is the default and the others are available for each new block when you hit the Enter key. Just hover your mouse over the new block and you’ll see pale grey icons on the right.

For those who like to format their text as they’re typing, the main formatting options appear above the block when you hover your mouse over the active block.

When you’re editing, just click into the block you want to format and you’ll be able to access the formatting options for that block just as you could when you were typing.

There are more options available for each individual block type which you can access from the column on the right of your screen. Different types of blocks have different options which can be accessed via the drop-down menus. 

Editing

One of the big advantages of using blocks is that they can be rearranged without resorting to copy and paste.

To move a selected individual block hover your mouse over it and use the up and down arrows that appear on the left-hand side of the block.

To move an entire section of blocks hold down the Shift key while you click on each of the blocks to select them. Then use the up and down arrows to move them into position. I found this particularly useful when I wanted to move a heading, a few paragraphs and images all in one go. 

Document Options

The column on the right also accesses the Document options. All the options relating to the document as a whole are available here. Just click on the Document tab to add your featured image, tags, etc. 

Accessing Other Blocks

There are dozens of blocks available in the editor, just click on the plus sign  (+) in a circle icon, top left, to access them.

The blocks you use the most will appear at the top of the list with the other available blocks sorted into categories.

Classic Editor Plugin

People who have been using WordPress for a while may want to continue to use the classic editor. It’s now available as a plugin which will be supported for some time to come. As it’s available at WordPress.org you will still be able to download and use the plugin even if updates and support are eventually discontinued.

The Classic Editor plugin is currently active on over 600,000 websites.

There’s only one setting to tweak when using the Classic Editor plugin. Go to Settings > Writing and choose either: 
“Replace the Block editor with the Classic editor.” or
“Use the Block editor by default and include optional links back to the Classic editor.”

The first option allows you to keep using the classic editor for everything, even after WordPress is updated to version 5.0. With this setting active, it’s as if the block editor, with all its advantages, does not exist.

The second option is my choice as it gives you the option to use the block editor by default but allows you to revert to the classic editor on a post by post basis. If you have a lot of existing content which may require editing this could be the way to go.

New WordPress installations won’t need the Classic Editor plugin as there is no existing content to worry about.

Classic Block for Old and New Content

As WordPress 5.0 comes with a Classic block you can have most of the functionality of the classic editor without installing the Classic Editor plugin. The main difference between a document created or edited with the block editor and one created or edited using the classic editor are the page level (Document) options. Most other functions of the classic editor are available using the Classic block.

When you need to edit your old content it will be converted to a Classic block. The entire post or page will become a single Classic block which you can edit in much the same way as you would have before the new editor. It’s a scaled-down version of the TinyMCE editor you’re familiar with. 

Although the option is available, I don’t recommend converting the Classic block to blocks as this may break something in the process. While using the Gutenberg plugin I converted one of my old posts to blocks and the jump links no longer worked. So, I recommend that you keep your old content as a Classic block. You can edit it in the same way as you would have prior to WordPress 5.0. If you want to add extra text within the Classic block you would do that just as you would have using the old editor.

You can also add a Classic block anywhere within your articles should you need some of the old editor’s features. The new editor has the option to change the text color for the entire paragraph but if you only want to change the color of a word or two then you can do that within the Classic block. 

If you have either WP Edit or TinyMCE Advanced plugin installed their features may be available when you use the Classic block.

A classic block can contain paragraphs, headings, images, and the other stuff you used to use. It does a pretty good job of emulating the old (classic) way of creating and editing content.

When Will WordPress 5.0 With Gutenberg be Released?

At the time of writing the date last mentioned was 27th November 2018. But the WordPress.org blog tells me that it’s been postponed and that a new release date will be announced shortly. Chances are that it won’t be until at least January 2019 so as not to disrupt website owners during the busy end of year holiday season.

The first release candidate is now available for download if you’re interested in testing it now. I don’t recommend testing on a live production website, I always use a test website for experiments.

Tests on the release candidate will determine when this version of WordPress 5.0 will be available for regular users or if it still needs more work. If necessary, further release candidates may be made available for testing prior to full scale adoption.

I want the new block editor now, but I don’t want it if they still have bugs to fix. The devs understand this and they are not prepared to release WordPress 5.0 until they deem it ready for production use by regular users.

Hate Change, Love Improvements

The new editor is different. But the old editor has had its day. More and more people are doing their internet browsing using a mobile device and sites built using the old editor are sometimes not all that user-friendly. We all know that the user experience (UX) is a vital component of a successful website.

So, moving forward, you’ll want your content creation to be done with the mobile user experience foremost in mind.

I’ve seen some criticism about the impending change to the WordPress editor. It seems that much of it is coming from those who resist change, especially people who have been using WordPress for a long time. And, of course, some developers who need to make changes to their themes, plugins, and code tweaks. For them, it’s extra work. 

Most of the plugins and themes we use are kept up to date by their developers. But not all devs are so professional. Sometimes plugins and themes get abandoned and, if they don’t get updated, compatibility and security issues can ensue.

Most of the developers of popular themes and plugins have been working on getting their creations ready for WordPress 5.0. I’ve seen lots and lots of updates just about every day. Then there was a break of a few days with no updates. This is a good sign that many themes and plugins are already ready for WordPress 5.0.

in my opinion, the block editor is an improvement to the way we create and edit our content. It’s the biggest change to the WordPress editor in around 10 years since WYSIWYG was incorporated. And WYSIWYG got its fair share of flack when it was first introduced. 

How You Can Help Yourself

Please check all your plugins and your themes to make sure that they’ve been updated within the last few months and are compatible with the latest version of WordPress. If not, then consider changing to better-supported plugins and themes. You can do that easily by going to WordPress.org and typing in the names of your themes and plugins into the search box.

And, of course, whenever updates occur, you’ll want to update the plugins and themes you’re using on your own website. See this article.

Remember to always backup first before you do the updates.

Don’t worry, your premium themes and plugins have been developed by professionals, and professionals usually keep up with progress. You can expect your premium plugins and themes to keep working as usual. Should this not be the case then reach out to the theme/plugin’s support team for assistance. 

If things don’t go according to plan then you can use the Classic Editor plugin as a temporary workaround.

The Interface

Now let’s look at what you can expect to see when you create a new post or page.

Screen Options are still available in the usual place for many sections of the WordPress Dashboard, but they’re not often needed when you’re creating and editing content. Everything you do need is available while you’re writing but most of it is kept tucked away so as not to distract you from your content creation. 

Top Left Icons

At the top left of the screen you will see some icons.

The plus sign within a circle is where you can access all the available blocks. Next to that is the undo button to undo your last action(s), followed by the redo button to reverse your last undo(s). 

The last icon is Block Navigation which is a list of the blocks in the order that you used them. You may find it easier (or harder) to use than the Document Outline, as it gives you more precise navigation.

Top Right Buttons and Icons

Save/Save Draft, Preview and Publish/Update

Save/Save Draft, Preview and Publish/Update should need no introduction except that Publish is a two-step process. You have the opportunity to double check your settings before publication. 

Gear Icon

Ellipses (3 dots) Opens and Closes the Options Window

The 3 ellipses opens the Options pop-up window which you can close to minimize distractions. The Options window houses the View, Editor, Tools, and Options sections.

Top Toolbar

Each block comes with its own toolbar which usually appears at the top of the block when the focus is on that particular block. When you select the Top Toolbar option the toolbar is moved to the top of the page next to the icons at the top left. I like to have the toolbar at the top of the active block but sometimes it gets in the way, especially when I’m editing. You can change the setting at any time to suit your own personal preferences. 

Spotlight Mode

The selected block appears as normal and the rest of the content is grayed out, so you can concentrate on the block you are working on.

Fullscreen Mode

Fullscreen Mode removes a lot of the distractions including the side menu helping you to concentrate on content creation. 

Editor Section

At long last, the code editor is called the Code Editor instead of the Text Editor. This should make for less confusion. This is where you can switch between the WYSIWYG (Visual) Editor and the HTML (Code) editor for the entire document. To access the code for an individual block you’ll use the three ellipses on its toolbar and select Edit as HTML.

Manage all Reusable Blocks

Once you create some reusable blocks you’ll manage them from this link.

Keyboard Shortcuts

There are numerous keyboard shortcuts you can use when creating and editing your content. You will find a list of them here. This image shows just a few. 

If you like using keyboard shortcuts then this is for you. Many of the shortcuts are the ones you’re used to using in other applications. Others are just for the block editor.

Extra Option for Individual Blocks

There are also some extra options available when you click on the 3 ellipses at the far right of a block’s toolbar.

The one I use the most is at the bottom “Remove Block”. 

New Plugins

There are some new plugins which have been specifically created for the new block editor. Go to WordPress.org, plugins section and search using Gutenberg as your keyword. You may like Atomic Blocks and Advanced Gutenberg amongst others.

That silly little ad you see scattered thoughout this article was created using Atomic Blocks.

I hope I’ve covered most of what you can expect when you start using the block editor. If you have any questions or would like to express your opinion then please leave a comment below.