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