Using the Gutenberg Wordpress Editor

· 6 mins read

The default post editor in Wordpress is a powerful tool. By default it may hide some of its options to make it easier to use. Unlike any other page in Wordpress, the “Screen Options” button for the new editor is not on the top of the page, instead you find it under the … on the right top and then the Options choice.

Under that same menu you will find options to change the view to full screen or to focus only on 1 block at the time and you can switch to the code editor if you are into writing HTML code.

The gear icon lets you show/hide the right sidebar.

You almost always want to have the right sidebar in view as it will have important settings for the whole document, and for each individual block once you click on a block to edit it.

Working with blocks

The editor works with “blocks” of content. There all all sorts of building blocks available and you can get access to even more by installing plugins.

To see the available blocks you click the + button on the top left of the screen. There you can browse trough the different categories of blocks. You probably want to take a look first under Common Blocks and Layout elements.

A normal text block is a “Paragraph”. Between the Paragraphs you may want to insert an image block or a Media & Text block or a Gallery (and so on). The best way to figure out what each block does is by just playing around with it a bit in a “test post” that you never actually publish.

You can move a block up and down by dragging the icon that appears on the left side of a block when you move the mouse over it, or clicking the up or down arrow.

To insert a link in your text (inside a Paragraph block for example), start by selecting the text you want to be clickable and then click the link button in the toolbar that shows once you select text. In the field that pops up after clicking the link button you can type a full URL or you can start typing the name of a page or post on your site. Within a few seconds Wordpress will show you a list of posts matching the name you started to type and you can click the one you want to link to. Don’t forget to press enter to save it.

For more options, for example to set the link to open in a new window, click the … on the right when creating the link. If you want to insert Amazon links or banners, or Adsense or anything like that, read this document specifically about how to insert advertisements.

Align text left, right or center

To see the toolbar to make text bold, italic and align it left right or center you have to select some text first and the toolbar will show above your selection. If you want the toolbar to be in view on top of the screen at all times like in the old editor you can click the … on the right top of the screen and click on “Unified Toolbar”.

##Featured Image

On the right bottom you can set a featured image for each post. It’s important that you use this feature as it is used not only by your theme but also to let Facebook and other social platforms know what image to display when you share a link.

Images and Files

To insert an image you can use an Image block (under the + button) or a Text and Media block and so on. After inserting the image from media library or upload you can do further settings for the image block on the right side or the page, such as the size of the image and where it should link to (if it should link to anything at all). If you want it to link to the larger version of the image you can set Link to to Media File.

Read more

Many of you will have the homepage setup to “Show latest posts” under Settings > General. But you might not want to show the whole posts there, instead jut display a little teaser and let your visitors click a “read more” link to see the whole posts. You insert the read mode button as a block, you will find it under Layout Elements > More.

Although not every theme supports this, most do. Some themes like you to use the “Excerpt” field instead. If that field is not already visible somewhere underneath the post editor when you scroll down, you can scroll all the way up and click on the … and then Optiosn on the right top of the screen. There you can check the box for “Excerpt” to make that field visible.

Categories and Tags

While you are editing a post you can add it to one or multiple categories and add tags to it with the boxes on the right side of the editor under the Document tab. On smaller screens those boxes might display underneath the editor. You can add new Categories and tags right from this screen without leaving your post. Read more about Categories, Posts and Pages. What they are and when to use what.If you want to add one of these categories to your menu, you can read more about how to use the Wordpress menu here.

Publishing settings

Once your post is all ready, you can publish it with the options on the right top. This box let’s you preview your drafts, set the Visibility of your posts, lets you switch back to an older version of your posts via the Revisions and lets you schedule a post into the future or change the Publish date once its published by clicking the date.

Please mind that the scheduling system of Wordpress depends on wp-cron, and that only runs when you have visitors on your website. Because of this if your site is not visited every minute Wordpress can sometimes miss the scheduled time on not publish the post. A way to solve this is to setup an uptime monitor that will check your website status every few minutes, that will also trigger the Wordpress cron job.

Save as Draft

Wordpress Gutenberg editor will automatically save your changes, you don’t need to do anything for that! If you navigate away from the page, or your browser crashed there will be a yellow bar on top of the screen next time you visit the editor for this post, warning you that there is a saved version that is newer than the version you are working on and giving you the option to switch to the saved version.

Statistics / Word count

You can click on the i icon on top of the editor to see some important statistics about your post.

Font options

By default your theme controls the font that is used on your website and all you can do is use the Block settings in the sidebar on the right when editing a “Paragraph” block, and select the text to show the toolbar to make the text bold and such.

It’s usually best to stick to whatever the theme offers to keep your website loading speed to a minimum and to keep the styling as it was intended by the original designer. If you really want to use different font you can use a plugin like Easy Google Fonts. Once that is installed and activated you can go to Appearance > Customize > Typography to change the default font family of each part of your website to any Google font.

Need more advanced blocks?

If you need even more blocks or you need for example more detailed settings for columns and such, don’t switch to a page builder, instead install Gutenberg Blocks – Ultimate Addons for Gutenberg you can find it for free under Plugins > Add new.

Warning: This will add A LOT of more advanced blocks with a crazy amount of settings for each block, only install this if you actually need it. No need to make things complicated for no good reason.