WordPress has just released it’s update to WordPress 5.0, which brings with it a new style of content editor by the name of Gutenberg. We’re here to teach you how to use it.
What is Gutenberg?
Gutenberg is a new style of content editor introduced with the WordPress 5.0 update. While this new style of editor may look intimidating at first, it’s goal is to make adding content a more intuitive and smooth process for all of WordPress users. Below you can see a picture of this new interface.
While WordPress 5.0 functions the same as it always has at a technical level. Adding content as a whole has received a bit of a makeover. Throughout the rest of the page we’ll be going over some of the changes that we find to be the most important.
Starting a New Page
When creating a new page in WordPress 5.0 you will be greeted with the following screen. As Opposed to having a completely separate block at the top of the page for your Page Title you will have a content block labelled “Add Title”. You would then place your page content into the block labelled “Start writing or type / to choose a block”.
What are Blocks?
In Gutenberg each individual item in the text editor is given its own “block”. For example, in the photo to the right the title tags and each paragraph are all their own blocks.
Similar to custom fields these blocks can easily be dragged and dropped throughout the Gutenberg editor to easily re-organize content. Alternatively, when selecting/hovering over a block you can use the arrows on the left hand side of the block to move the up one block at a time.
Adding a New Block
There are a variety of ways you can add a new content block using Gutenberg.
The most intuitive way is to simply press enter after typing in a text block. At this point the editor will take you to a new line and the following symbols will appear:
These symbols in order are for: Creating a heading tag, adding an image or adding pre-formatted text. Alternatively you can simply continue typing to add more paragraph text.
The second method of adding new content sections to Gutenberg is to use the add block button at the top of the page:
Once this button has been clicked on it will bring up a menu of options for what type of content block you would like to insert into the page. These different options range from simple text and images to more complex options such as code view, which allows you to insert snippets of code directly into the page.
Another method of adding a new content section is to hover at the top or bottom of an already existing content section. At this point you will see a + symbol that you can click. Doing so will add a content section above or below the section you are currently hovering on. This method will also bring up the same set of options available when you using method 2.
This method can be seen in the photo to the right.
Another way of adding a new content block with Gutenberg is to click on a current content section. This will bring up a menu (pictured below) with a variety of options to choose from. In order to use this menu to add a new block select that last available option which looks like three vertical dots. There are then options to insert content blocks before and after the currently selected block.
Adding Images with Gutenberg
In order to add an image using Gutenberg you will first need to create an entirely new block and select it to be an image block. This block will then display the following options:
At this point you will be able to select whichever options you would like to use and add an image as you have done in the past.
Updating The Page
The principal behind updated WordPress pages and posts are the same with Gutenberg, however the placement of the buttons has now changed. Instead of being located on the side of the page, the options to save or update the page are now found along the top of the screen.
Using Shortcodes with Gutenberg
With all of the updates to WordPress you may be wondering if shortcodes work the same. Well there’s no need to worry. Shortcodes work the same as they always have. The only difference is that each shortcode is now it’s own block.
An example of how this looks can be found in next to this paragraph.
If You Still Need Help
These are the basics of what you need to know in order to use Guternberg effectively, however if you’re still running into issues feel free to contact us by following the link below.