Tips for the new WordPress Editor – Gutenberg

If you work with WordPress, by now you’ve probably heard there’s a new editor for making pages and posts. You may even have tried it. If you have not yet tried it, or took a look and did not know where to start, this post is for you.

The new editor is called Gutenberg, though the name is not used for WordPress.com. This is a quick introduction to the new editor, outlining some features and providing tips from my experiences. For details, refer to the links at the bottom of the page. (Skip to the links.)

The biggest change is the introduction of blocks. In the past, your post or page was one ‘block,’ into which you’d type your paragraphs and add your photos. If you wanted to mark some text as a heading or a quote, you’d highlight it and change the format to heading or quote.

Now your post or page consists of multiple blocks. Each paragraph is its own block. There are different types of block, and a paragraph of plain text goes in a block type called paragraph. If you add a photo, it goes into a block type called image. A heading goes into a block type called heading, a quote goes into a block type called quote, a list goes into a block type called list, and so on. If you start typing without selecting a block type, you’ll be in a paragraph block, but you can change it to a heading, quote, or other type such as list.

Screen capture of a block and menu.
The block menu for a paragraph, with More Options selected. The drop down at the far left lets you change the block type. Lorem ipsum text from https://lipsum.com/

For a simple page or post consisting of some text and a photo, blocks might seem extra work to do formatting, with minimal benefit. However, they become more useful if you are doing complex layouts. You can move blocks up and down, and duplicate them. You can also save blocks. For example, if you are an author, and add a paragraph about your books and purchase links at the bottom of every post, you can save that paragraph as a reusable block the first time you type it. When you write a new post, you simply add the reusable block at the bottom.

The use of blocks brings changes to editing options. The menu that used to appear at the top of the page now floats, and appears at the top of each block as you work on it. It’s smaller, as it only has options applicable to the block you are working on. It disappears if you are typing, but moving the cursor within the block will make it show again. There are more options on the right sidebar. Use the tabs there to select between options that apply to the block, such as font size or alternate text for an image, and options that apply to the entire page or post, such as category and tags.

If you work with HTML code, you now have two options for editing the code. You can edit a block as HTML, by selecting More Options (three dots) / Edit as HTML in the block menu. Or you can edit the entire page as HTML, by selecting Tools and More Options (three dots) / Code Editor in the upper right of the screen. If you want to add some HTML such as an anchor for a bookmark, you’ll need to add it in its own Custom HTML block.

If using the new editor is not working out for you, you can go back to the old editor, now called Classic Editor. For WordPress.com, select Tools and More Options (three dots) / Switch to Classic Editor in the upper right area of the screen. For WordPress.org (self-hosted), install the Classic Editor plugin.

The new editor has other changes besides blocks. Images can now be uploaded directly to the page, instead of to the media library. They still get saved to the library. Captioning images and adding alternate text is easier. The window for adding URLs, and setting them to open in a new tab, is cleaner. Now that I am getting used to formatting by block, I’m enjoying the new editor.

If you use WordPress.com, the details of these features and lots more information is here: https://en.support.wordpress.com/wordpress-editor/#adding-a-block

If you use WordPress on a site you host yourself, the information is here: https://wordpress.org/gutenberg/

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.