Getting started with Project Gutenberg? Here’s everything you need to know

If you are new to WordPress, first of all welcome, you might have heard talks about the “new editor”, “project Gutenberg”, the “old editor” etc. All these might sound confusing, so let’s clear things up a bit. The block editor is the set of content creation tools made widely available to users in WordPress v5.0. It is part of project Gutenberg and according to the project’s official page:

It’s a whole new way to use WordPress

In a bit more detail, according to project’s handbook:

“Gutenberg” is the name of the project to create a new editor experience for WordPress. The goal is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts.

The block editor was the first phase of the project, it allows users to create content using units called blocks, instead of free-form text with inserted media, embeds and Shortcodes. The next phases include full page editing capabilities such as creating and managing navigation menus, sidebars, widgets and more.

As mentioned earlier the block editor was merged in to the WordPress core in v5.0, the rest of the project is being actively developed in the form of a plugin available in the WordPress plugin directory for anyone to test out. If you are interested in following the development and testing out the new features first you can install and activate the plugin and give it a go. However we do not recommend activating it on a production site since some of the features in the plugin are experimental and potentially glitchy.

People are resistant to change and as expected the block editor, and project Gutenberg as a whole, was met with scepticism, especially in the beginning, by “fanatics” of the old content editing experience (now referred to as the “classic editor”). Initially the content creation experience with the then new editor was sub-par, which of course was problematic for beginners and experts alike. Truth be told the block editor’s launch could have been better, but when is that not the case? The good thing in this case is that the project moves forward very fast, the editor today is greatly improved and much more capable than it was at launch and it is getting better with every release.

Get the classic editor back

Let’s get this out of the way first. There are some use cases for which the block editor is not ready yet, or some workflows which might, at least at the moment, be slowed down by it and people need to switch back to the old editor, also some people are just stubborn, but we’ll gloss over that. This can be easily achieved by installing and activating the classic editor plugin, which is an official plugin maintained by the WordPress team. When activated the plugin brings back the editor experience as it was in versions prior to 5.0, restores the capability of various plugins to extend this old editor and makes metaboxes depending on the old editor work again. The plugin allows administrators to select the default editor for all users, it can also allow users to select which editor they prefer. A post will always open using the last editor used to edit it, regardless of who edited it, to maintain a consistent content creation experience.

Blocks and basic usage

Now it’s time to leave the old editor behind and check out the block editor in more depth! Below you can see what the block editor looks like when you first open it to create a new post.

On the top of the page we have a toolbar with the block inserter ( the plus sign ), the undo, redo buttons, the content structure button, the block navigation on the left side, the preview and publish buttons, the sidebar toggle and the options button on the right side. On the left hand side of the page the content area takes up most of the space. In the content area we have a place to add the title and an area where we can add blocks and/or type our text. On the right hand side we have a sidebar with two tabs. The document tab helps us setup our post properly, by configuring its visibility, adding categories, tags, a featured image, an excerpt and toggling comments. The block tab displays all options of a selected block, we’ll take a closer look at it a bit later.

We can add a block in two ways. One is by clicking the plus sign on the top left of the editor view.

This will open a tooltip window with a small explanation of what blocks are, essentially any distinct piece of content, such as headings, paragraphs, images, galleries, or layout tool, such as columns, spacers, dividers etc, is a block. Blocks in the tooltip are broken down into categories based on what they do. The built in categories are the common blocks such as headings, formatting blocks, such as the custom HTML one, layout blocks, like the columns block, widgets and embeds. On the top of the list you’ll always find the most used blocks, which will change based on your usage. To add a block in the content area simply click on it.

The other way to add a block is inline, by clicking the plus sign in the content area, the same pop up comes up where you can select any block you want.

Alternatively just type a forward slash ( / ) in the content area, this will trigger a tooltip with some popular blocks, continue typing the block’s name until it shows up and select it.

The top bar inserter always inserts a block below the currently selected one which is fine in most cases, but the inline method is especially handy when trying to add a block between already existing ones.

As our first block we will add a paragraph block (this is the same as just starting typing some text in the prompt).

Above each block there is a toolbar which offers some basic customization for it. The contents of the toolbar change between blocks. In the case of the paragraph text we are given the option to change the block type, the text alignment, font weight, style, add links and more. At the rightmost part of the toolbar we’ll always find the general block options button. Clicking it gives us options that are common to all blocks, including duplicating and removing the block. Pictured on the screenshot above is also the Block tab of the right hand sidebar, this houses block specific options mostly related to appearance and layout. In the case of the paragraph block we have text related settings such as font size and drop cap, we can also modify the block’s color scheme.  Once we are done with our paragraph we can add another block using one of the methods discussed earlier.

Now let’s add a gallery block. Insert the block and click either the upload button to upload images from your computer, or the media gallery button to select from already uploaded images. Once you add the images to the gallery it will look like this.

Check out the differences on the block toolbar and the block tab on the sidebar compared to the ones of the paragraph block. In the toolbar we have the universal buttons of changing type and the option one, and just one more which allows us to control the gallery’s alignment in regards to the content. In the sidebar we can select a column number for our gallery, toggle image crop and select where our images will link when clicked.

From here on it’s just rinse and repeat. You keep adding blocks until you achieve the layout you want for your post or page.

Before we move to more advanced block functionality we have some useful tips to help you improve your editing experience. Check out the screenshot below.

Notice any differences in the editor? Great, let’s go over them one by one. By clicking the options button (rightmost button) on the top toolbar we get a tooltip, we’re going to have a look at the first three options here. The first option called Top Toolbar moves the toolbar which appears over each block when it’s selected, to the top of the page, notice how the paragraph’s options are at the top? If you select another block it’s options will appear at the top replacing the existing ones. The Spotlight Mode makes the currently selected block stand out by fading out a bit all other blocks, this makes it easier for you to focus on the content you are working on and not get distracted by the rest of it. To further eliminate distractions you can toggle the Fullscreen Mode which hides the administration toolbars and just leaves you with the editor to focus on your content. Finally, notice the arrows just to the left of the paragraph block? These can be used to move the block. The arrows move the block one block up or down when pressed, additionally you can click-hold the middle of the bar and drag the block wherever you want to move it, neat right?

Finally let’s examine the content structure and block navigation options of the toolbar, these are pictured in the screenshot below.

The document outline shown on the left of the image above will give you an idea of your document’s structure and contents. It will list the number of words, headings, paragraphs and total blocks in it. It will also provide a tree-like structure for headings. The block navigation presents you with a list of the blocks used and allows you to focus anyone of them to make changes.

Reusable blocks

Do you find yourself using the same content over and over? For example, do you end your posts a certain way, with a shout-out to sponsors, or call-to-action buttons and prompts for readers to engage with you in various platforms? The block editor can make your life easier with its reusable blocks. Create the content once with the necessary block or blocks and once finished click the options button on the block’s toolbar and select the add to reusable blocks option. Name the reusable block and you are done.

To add your reusable block in the content click the add block plus sign just like you would do with any other block, scroll down on the list till you see the Reusable Blocks category, in there you will find all your saved reusable blocks. Click the one you need to insert it in the content, alternatively you can search for it by the name you gave it upon creation.

You can also click the Manage All Reusable Blocks link which appears below your blocks and you will be presented with a list of all your reusable blocks available for editing. From there you can edit any block you like, but note that once you edit and save the reusable block, all of its instances on your posts/pages will be automatically changed.

Custom Blocks

As is customary with WordPress, there are a lot of plugins that extend the functionality of the block editor by either improving existing blocks or adding brand new ones. For the time being custom block plugins are installed just like any other plugin, via the WordPress plugin repository or by uploading a zip file to your installation.

Custom block plugins, like GutenBee for example will usually add their own category in the block selection pop-up where you will be able to find all the blocks the plugin offers.

Custom blocks can be used the same way as default ones, but will offer awesome new functionality missing from the block editor’s default blocks. Like a Google map block to help you add maps to any page. Whether it is to improve your contact page or show people where you’ve been, map blocks are very handy.

What happens with content from the old editor

If you have content you created with the old WordPress editor it will appear in the Classic Block. This is a special back-compatibility block which will display your content as it was before and even give you access to the old editor toolbar.

If your content does not contain any obscure formatting you can convert it to blocks to avoid having content from both the old and the block editor in the same post. To convert it just click on the options button in the toolbar and select Convert to Blocks.

Summing up

In this “crash course” of a post we’ve talked about project Gutenberg’s beginnings and goals, got to know the block editor in its current stage, block usage, custom blocks and more. Project Gutenberg is undergoing heavy development and pretty much everything is subject to change, while we don’t expect to see major changes to things that made their way into the WordPress core, we’ll do our best to keep this post up-to-date with interesting developments, and update any information rendered obsolete by future changes.

What is your view about project Gutenberg and the future of the WordPress editing experience as a whole? Do you interact with first time users of WordPress, if yes, what is their opinion of the editor? Let us know in the comments below!