Gutenberg Editor – 10 Useful Tips and Tricks

WordPress 5.0 is now in full swing, and you’ve probably been getting your head around the new Gutenberg Editor. We have certainly been making the most of some of the new features, and have picked up a few clever tips and tricks that we would love to share with you.

If your an existing client of ours, your website will currently be running on the latest version of WordPress meaning you will already be running the new visual interface. Alternatively, if you don’t currently have a website with us (you should) and haven’t tried Gutenberg, you can head to WordPress.org and trial a live demo.

WordPress does offer a small selection of tips that it will show when you first use the Gutenberg editor, I would suggest that you follow these as they do introduce some of the basic functionality. This article will start with some general tips and then really dig down into some real hidden gems.

WordPress 5.0 Gutenberg Editor - Tips and Tricks

 

Getting accustomed with the Gutenberg editor layout and view modes

This may seem like a given, but like any new tool, learning the new environment is vital. Feeling comfortable with the Gutenberg editor will be key to speeding up your workflow and making sure you are being efficient.

WordPress 5.0 Gutenberg Editor - View Modes

 

Firstly, we now have three main sections, these make up the Gutenberg editor:

Editing Toolbar: This is positioned at the very top of the screen, and is outlined in orange.
Advanced Settings: Located on the right-hand side, outlined in red.
Content Area: Large content area on the left, outlined in green.

The workspace aesthetics and functionality can be adjusted using three layout modes; Top Toolbar, Spotlight Mode and Fullscreen Mode.

Top Toolbar simply adds additional functionality to the Editing Toolbar. Spotlight Mode and Fullscreen Mode both add a level of clarity to your workspace essentially reducing clutter, and removing distractions, allowing users to edit page content in a much more focused environment.

 

Gutenberg Editor Keyboard shortcuts

Spending less time sat in front of a computer is something that I always aim to do, and so should you. Learning simple keyboard shortcuts can help achieve this, WordPress 5.0 has incorporated a handy Gutenberg keyboard shortcut cheat sheet, this can be accessed via most standard keyboards using Shift + Alt + H shortcut or hit the three dots to show more tools and options.

WordPress 5.0 Gutenberg Editor - Keyboard Shortcuts

 

Adding and searching for elements

Adding a new item to a page couldn’t be easier since the WordPress 5.0 update. The Gutenberg editor now has a nifty “insert” button (plus icon) that will open a pop up containing all available elements that are clearly displayed with there own icon. You can also search for blocks by name, this will be useful when looking for custom built reusable blocks that i talk about later in this article.

WordPress 5.0 Gutenberg Editor - Adding Blocks

 

Moving blocks up and down with ease

The original TinyMCE rich text editor usually involved a lot of cutting and pasting to rearrange your content. Moving blocks with the Gutenberg editor is much easier, and you have two convenient ways of doing so. The easiest way for me is dragging and dropping a block up or down within the content. To do this, you need to hover over the block and then hover over the six dots icon on the left (this can not be done in Spotlight Mode). Alternatively, you can hover over the block and use the arrows on the left to move a block up or down.

WordPress 5.0 Gutenberg Editor - Moving Blocks

 

Transform blocks into different blocks

Have you ever previewed a post and been unhappy with the formatting or visual hierarchy? Well, WordPress have conveniently tackled this issue by allowing users to convert one block element into another with the click of a button. The most simple example is transforming an oversized Heading 2 into a much more subtle Heading 3, but you can also convert other block types – like turning a regular image into a cover image. To access the transform options, you use the Editing Toolbar.

WordPress 5.0 Gutenberg Editor - Transfrom Blocks

 

Adding a table blocks

Inserting tables in WordPress have always been somewhat difficult, previously we would install a 3rd party plugin or use HTML code to allow users this functionality. Gutenberg editor now has a table building feature as part of the editor. Currently, only basic tables can be inserted into content, but we hope that future release will include advanced table building properties. You can add a table by clicking the “insert” button (plus icon) and searching for “table”. Choose the number of columns and rows you would like and your away.

WordPress 5.0 Gutenberg Editor - Inserting Tables

 

Adding buttons and Call To Actions (CTAs)

Call to actions are a crucial marketing tool on any website and although we design buttons and CTAs into legacy pages on our website designs they are often forgotten about once clients start editing pages. In previous versions of WordPress, we have used 3rd party plugins or custom shortcodes when a client has needed to add additional buttons. The Gutenberg editor has built-in functionality for adding buttons to content. Buttons can be added using the “insert” button (plus icon).

WordPress 5.0 Gutenberg Editor - Adding Call To Actions

 

Word count and page/content structure

The content on your website is essentially what allows people to find you online. For our B2B website clients, search engine optimisation is vital, page structure and page content is a small part of this. Although there is no definitive answer to how much content a web page should have, we do recommend a minimum of 300 words per page and correctly formatting pages in a hierarchical structure. What I mean by this is using Headings 1, 2, 3, 4, 5 and 6 in the correct order. Gutenberg has incorporated a simple informational popup that allows you to quickly analyse the build-up of your page. This can be accessed via the i-icon in the Editing Toolbar.

WordPress 5.0 Gutenberg Editor - SEO Page Structure

 

Adding a well designed section to reusable blocks

Often when creating a new page within a WordPress website you can spend valuable time tweaking the layout until it is formatted in a way that is aesthetically appealing. The new Gutenberg editor now allows you to store layouts that you are likely to use again, these are called “reusable blocks”. To create your own reusable layouts, all you need to do is select your pre designed section, click on the three vertical dots and then “Add to Reusable Blocks”. All Reusable blocks can be found by clicking on the ‘+’ symbol and then scroll down the “Reusable” section.

WordPress 5.0 Gutenberg Editor - Reusable Blocks

 

Additional plugin options

Although Gutenberg is very powerful by default, and you may be more than happy with the new tool, there is always room and demand for additional functionality. A range of 3rd party plugins have started to surface that help enhance capabilities and functionality. We will be posting an article on our favourite Gutenberg add-ons, so watch this space.

If you have any questions about the new Gutenberg editor, just give us a call or contact us and we’ll support you in any way we can.