How to Get Started with Gutenberg

How to Get Started with Gutenberg

If you’re curious about the new WordPress editor, Gutenberg, then this post is for you.

Gutenberg is the new kid on the block for the WordPress Editor. It was developed on GitHub using the WordPress REST API, JavaScript, and React. The editor feels modern, easy to work with and very modest. Comparing Gutenberg with the Classic Editor is like comparing two houses: one with a lot of furniture and one with almost none. Even if you feel the minimalist style is a bit daunting, once you start using Gutenberg, the overall experience can be a pleasant one.

Of course, Gutenberg has its drawbacks and if you’re very experienced on the Classic Editor, you may feel that working with Gutenberg seems like a step backwards.

In this article, I’m going to try and cover as much ground as possible and give you a clear picture of what to expect with Gutenberg. I’ll discuss the pros and cons, as well as how you can improve upon those drawbacks so the transition is more seamless.

To get started, you can use Gutenberg just by updating WordPress to the last version. Gutenberg is now a part of core for WordPress. If you still have the Classic Editor plugin, you can start by removing it and get ready to use Gutenberg.

First Steps

Gutenberg and Divi have come a long way integrating. In the early stages you could not save a post made by Divi with Gutenberg without the risk of losing all of your content. Today those kinds of problems are gone.  You can easily save a post made with Divi on Gutenberg and you will still be able to edit it with Divi. The same applies with Elementor.

Gutenberg functionality is now seamless, you can have Divi, Elementor and Gutenberg all working perfectly fine on the same site and you can even create different content using different builders without any issues at all. Of course so long as you don’t switch back to Gutenberg editor while using Divi and then forcing a save, in which case it will surely overwrite your Divi Content, the same will happen if you try to discard and save content with another builder.

General Structure and Blocks

Gutenberg is composed of a general structure of blocks, each block is represented and divided by the HTML characteristics, so, for example, if you have an H2 title and a Paragraph, you’re going to see 2 separate blocks. The idea behind Gutenberg is to separate blocks by HTML classes, although this seems strange at first, it has its merit.

To view editing and styling options, hover over the block with your mouse. This will display various block-specific options, such as offering H1 to H6 for Titles or different styles for Paragraph text such as Bold, Italic, Links and so on.

The Add New Block Button

A bit contrary to the editors fluid building experience, the Add New Block button is a bit out of reach. To add to a layout, you’ll need to move your mouse to the top left corner and click on the plus icon.
The position of the new block button is somewhat out of the way. Once you’ve added a new block, keep in mind that the position of the second Add Block button will appear directly after the last block.

A problem with Gutenberg’s minimalist editor is that the second button can get lost. You need to hover the mouse over empty space for the button to appear. This only happens when adding new modules that are not paragraphs Paragraphs are easily added with an “enter” from your keyboard.

Block Management

Once you start to get the idea of blocks, you’re going to see there is much more to Gutenberg than just empty space with a few buttons.
Gutenberg installs with all kind of blocks by default and each new block added either by plugins or themes is going to show on the add new block structure.
Finally, after adding a block, you can edit, clone, or delete it. This functionality is hidden under the 3 dots on the right. Click on these to open the block editing menu. Fortunately, as you can see, the vast majority of options have a shortcut so you can easily remember them. This opens up possibilities for easily cloning blocks and moving them around.

Once you have added blocks, you can move them over the content, up and down with the arrows and so on.

The Sidebar

The sidebar is the easiest of all the settings for Gutenberg. You will have 2 blocks on the sidebar, the Layout itself, with identical information that is found in the Classic Editor and the Block tab.

The Block tab displays detailed options for a particular block. In this example, we can link pictures to the Media File and select the number of columns we wish to display. Each module has its own set of configurable options under the sidebar Block tab.

Moving Forward

The best way to approach Gutenberg is to play around and do as much typing as you can. Using the Enter key is the best way to spur a new block. For example, if you decide to add a new paragraph block, you will have the option to convert that block to an image, or image gallery.

Creating new blocks with the enter key is the best way to skip the hidden “new block” button. Trying to add it while using your mouse will severely impact your editing skills. By spawning new blocks with the enter key you can later add an image by simply selecting the image icon on the right of that block.

Remember, however, Gutenberg does not have a shortcut key for adding new images like the Classic Editor. This forces you to use the mouse, which is something that completely breaks the flow of writing. If Gutenberg added a shortcut for inserting images and galleries, this could render the old Classic Editor obsolete quickly.

By creating Paragraphs, Titles and Image galleries you can see why Gutenberg is easier to work with when you have tons of blocks in need of re-arrangement. Once you have your article ready you can publish it and enjoy your first Gutenberg post. Just remember that once you start creating Gutenberg posts you can’t go back.

Gutenberg adds code to each post that will make it look awful if you later decide to disable it, so, even though you can start experimenting with it, just remember that if you start using it on your site, you won’t be able to revert without having to modify each post manually afterwards.

Extra Features

The Unified Toolbar and the Spotlight Mode are two nice additions to Gutenberg. The Unified mode does exactly what it says, it unifies the toolbar on top, for all the modules, so each time you edit a module, all the toolbar content is going to be on top, this is really handy and mimics the Classic Editor in some way.

On the other hand, the Spotlight Feature dims the brightness of all the content except the section you’re editing. This is handy when you have a very complex article and need to concentrate on what you’re doing. Both modes can be accessed under the Gutenberg Configuration options – the 3 dots at the top right corner of the screen.

For Editors

Gutenberg is amazing for editors. It’s much easier to handle general copywriting as you can easily change and swap blocks without breaking anything. Also, you can edit blocks independently and you have an easy Information menu that allows you to count words.

The 42 Theme

Take a sneak peek at what’s to come, our new project based on WordPress’ new visual editor, The 42 Theme. It will be released on the Aspen Grove Studios site soon, as well as in the WordPress Repository .

In Conclusion

Gutenberg is an easy to use editor once you learn the nuances. If you train yourself to write using the enter key and add images and other blocks from that point forward, Gutenberg can positively enhance your website-building experience.

If, however, you prefer using the mouse, then all the beauty of Gutenberg will be lost and your productivity can suffer. For those extremely adept to the Classic Editor, Gutenberg can be a challenge but if you follow my advice here, you can easily adapt to Gutenberg in no time.