The Gutenberg Editor

When the WordPress platform updates to version 5.0 in the undetermined but not too distant future – the current WordPress TinyMCE editor will be completed replaced. Instead, every updated WordPress site will default to the Gutenberg editor and in this “How to” blog post, we will take you through using the Gutenberg editor in 5 simple steps. After all, half the battle with change is knowing what to expect.

If you haven’t heard about Gutenberg or would like to know what this change could mean for your WordPress website, do check out our previous blog  Don’t make the mistake of ignoring Gutenberg,  which gives an overview of what Gutenberg is, what it’s capable of, and what it could mean for your WordPress website. 

Gutenberg heralds in a substantial change in WordPress – and because of this, all WordPress users will have the chance to give Gutenberg a go before it is officially released. However, because Gutenberg is still in beta and under development nobody would recommend you doing this on a live site just yet, just in case. If you can trial Gutenberg without too much risk do login to your WordPress dashboard and follow our step-by-step guide. And if you dare not risk it just yet, hopefully this blog post will give you a great overview of what it would be like. And so let us begin – how to use the Gutenberg editor in 5 simple steps.

• 
  Step 1: Installing and activating Gutenberg
  
• 
  Step 2: Creating and deleting blocks
  
• 
  Step 3: Selecting the type of block you want
  
• 
  Step 4: Editing your block content and characteristics
  
• 
  Step 5: Moving your blocks around
  

Step 1: Installing and activating Gutenberg

When you login to your WordPress dashboard you may notice a “Try Gutenberg” button. If you have deactivated Gutenberg in the past and kept with the Classic (TinyMCE) editor, you might not see this and instead you will need to install the Gutenberg editor via its plugin which is just called “Gutenberg”.

To install Gutenberg just go to Dashboard > Plugins > Add New and search for “Gutenberg”. Once found, click on the “Install Now” button and when the installation is complete this button will change to become an “Activate” button. Just click on Activate when ready and you will be ready to go.

While Gutenberg will work with any WordPress theme just like the current WordPress TinyMCE editor, choosing a theme that is specifically Gutenberg compatible will give you an immediate perk. You will be able to access some snazzier built-in styling for the Gutenberg blocks inside the editor so depending on your theme, the Gutenberg might look a little different in parts, but it all works in the same way. Here at mitsgriffin our site pre-dates Gutenberg like most will do. So, our theme isn’t Gutenberg compatible. If yours isn’t, don’t worry. Non-Gutenberg themes can still use Gutenberg. It just won’t look quite as polished as it could be. For us when we created a New Page, our Gutenberg editor opens up and looks like this:

All in all, the Gutenberg editor looks pretty clean and spacious (if slightly cryptic in places).

Step 2: Creating and deleting blocks

Because the fundamental principle behind Gutenberg is that of blocks, the most important thing to be able to do is to be able to create and delete them. 

Creating blocks

With every page/post created, the Gutenberg editor will automatically add a Page Title with a Paragraph block below it (notice the greyed-out text with the words “Add title” for your page title and the text “Write your story” or “Add text or type / to add content” which form your first paragraph block). To create other blocks, you can select the Add New Block icon, which looks like a cross within a circle. You will find this icon at the top of your editor next to the undo/redo icons:

Alternatively, when you hover your cursor key to the left-side of an existing block area (like the automatically generated Paragraph block) the Add New Block icon will magically appear by its side. When it appears to the left of your block, you will be able to add a new block below your selected block:

For some blocks, you will need to hover over its top centre for the Add Block icon to appear. When it appears above the block, it means you will be able to add a block above your selected block:

Deleting blocks

To delete a block, select the block you want to delete and then use the delete shortcut key i.e. the combination of keys that will initiate that action. For delete, the shortcut key is: Ctrl+Alt+Backspace.

If remembering or using shortcuts isn’t your forte, do not fear. You can select the block that you would like to delete, and then from the menu-bar that will appear above it, you can select the final option of “More Options” which is typically represented by three vertical dots stacked above each other. Once “More Options” is selected, a drop-down menu will appear, and you can then select the “Remove Block” option to delete it.

Step 3: Selecting the type of block you want

The joy of using blocks is that each block can be a unique entity. Different blocks with different properties can be re-used, duplicated and even put into other blocks. So an important thing to be able to do is to be able to do, is to select the type of block you would like to work with from the range of possibilities. When you click on the “Add Block” icon a search bar will appear together with a drop-down menu displaying all the block type possibilities open to you. The blocks will be grouped into the categories: Most Used blocks, Inline blocks, Common blocks, Formatting blocks, Layout blocks, Widget blocks and Embed Blocks, in the hope that you will be able to navigate through the selection fast.

At first you might find that your Most Use blocks will be the main thing revealed with all your other options hidden – but if you collapse that menu down by clicking on the little upward pointing arrow at the end of the menu name – it will reduce that menu and you will be able to see all your other menu categories. You can then look into each category by clicking on the downward pointing arrow at the end of the menu name, which will expand that menu out:

The different types of blocks

No doubt the types of blocks will expand in the years to come, but for now there’s still a fair collection of possibilities. Your Most Used category will list your most used blocks for fast access (handy when you get the swing of things and are adding and manipulating your content fast). And depending on your set-up, you might have the category of Inline blocks available to you too, where you will be able to add an image block that is in-line with your text:

The category, Common Blocks will contain all your basic building blocks. These include things like image blocks, paragraph blocks (essentially text blocks), heading blocks, gallery blocks, list blocks, quote blocks, audio block, cover image block, file blocks and video blocks:

Blocks under the Formatting category will let you add more formatted content like pull quotes, tables and verses, and some of the blocks here will allow you to input code, custom HTML or use the classic WordPress text editor.

Under Layout Elements you will be able to create things like column blocks, button blocks, separator blocks or spacer blocks etc.

Widget blocks will allow you to you add shortcodes, latest posts/comments, or categories etc.  And Embed blocks will be the blocks to use when you want to embed content from external sources like Twitter, YouTube, Facebook, Instagram etc into your website.

Once you have created a block you can just hover over it and a label signifying its type will appear in its top right corner:

Step 4: Editing your block content and characteristics

Once you have selected the type of block you would like to use, you can now begin to edit its content and style it. The great thing here is that any changes won’t affect your other blocks, but if you wanted, you could duplicate your block or even make it a template to use not elsewhere in your post/page, but elsewhere on your entire website.

Editing block content

For basic block editing where you will want to input its content, just select the block and begin to input your content using Gutenberg as a visual editor. For tweaking how this content will look, you will need to select the block so that its menu bar appears. This menu bar will comprise different components, depending on the type of block it’s associated with. But it will always appear just above the block. When you select your page/post title, a menu won’t appear, but instead there will be the option for you to edit your permalink (which is the URL link displayed for that specific page/post):

When you select a block, a menu will appear allowing you to edit your blocks content in terms of its content text, bullet point formatting, its alignment, basic styling and functionality:

Styling your block

For more sophisticated styling (like changing your block colour settings, font size, alignment etc). and the ability to tweak things in CSS, you’ll need to select your block and then go to the Block tab to access its specific features. You’ll find your block tab on the right-hand-side of your editor and it will look a little like this (NB. The Document tab next to it will overview your post/page settings):

If you can’t see your block tab, it might be hidden – in which case click on the settings icon which will toggle between hiding and displaying your document and block tabs:

Step 5: Moving your blocks around

Once you’ve created your blocks and input your content, you might like to re-position them in order to design and structure your page. To move blocks around you will need to use the little drag and drop hand that will appear, or the blocks directional arrow keys. To access these tools, just hover outside the top-left area of your selected block and you will notice arrow keys appear which you can then select to move your block up/down, or in-between them six dots which indicate the ability for you to drag and drop your block. When you hover over the drag and drop feature your cursor will transform into the drag and drop hand, allowing you to pick up, drag your block to another place, and release it:

NB. If you have a block within a block you will need to be accurate in your hovering to get the bit you’d like! Your selected block will be highlighted by a blue border around it and to get the drag and drop, or arrow keys to appear, you’ll need to aim for its left edge:

Nice touch Gutenberg

For certain, Gutenberg is a work in progress and compared to other ways of creating and organising content it might seem rather crude or a great improvement depending on your past experience. However, it does have great potential and a few nice touches already. One night touch is that previously, widgets were only place-able in the sidebar or footer sections of a website. With Gutenberg these snippets of additional functionality can become part of your main post or page which is fun. And the ability to place widgets in posts and pages is novel, alluding to Gutenberg’s bigger plans of one day allowing for full site customization of every website part (for more on that do check out our previous blog post on Gutenberg).

Also, the information icon represented by the lowercase letter i within a circle at the editors top left, is handy tool for over-viewing your page structure and breakdown. Once you page is more developed, you will be able to view your breakdown of headings and overall structure which is great for tweaking things for your in-page SEO (search engine optimisation).

Another nice touch is that every block has space for you to tweak its CSS code in. In the past, you could edit CSS in numerous ways (like through your Dashboard editor or your Theme Customizer) and because code concerning many different things would reside in these places, things could get messy or complicated. And although Page Builders might allow you to tweak the CSS of individual elements like Gutenberg, typically this is only accessible through purchasing their Pro-versions.

As with almost all new beginnings, Gutenberg has a simplicity in design that often gets clouded as things develop and change. And although Gutenberg still has a way to go in terms of its functionality and capabilities, it’s certainly worth considering because it has the potential to severely change WordPress as we know it. As with any change it can always be a little strange and frustrating. Gutenberg can certainly seem rather cryptic if you don’t feel so technically-minded with things hidden away and out of immediate sight, and its main functionality represented symbolically with icons (tricky if you are not familiar with such things). But once you understand its basics you and where to find things, you will hopefully find it intuitive and fast to learn. After all, Gutenberg has been created to break-through the techie barrier and propel the WordPress platform into the future. 

We do hope that through this blog you will be able to navigate your way through the Gutenberg editor. And remember that when it comes down to it, you can cover all its basics in just 5 simple steps.

Cover Photo by Clément H on Unsplash