What is WordPress Gutenberg and how to use it?

Having written quite a few posts and built pages we can say that the editing experience on WordPress has been pretty much the same over the past few years. Platforms like medium gave a refreshing new way of editing for writers and it was about time WordPress did the same. And, they did!

What is Gutenberg?

WordPress Gutenberg is the new update for WordPress that includes a completely new editor. It consists of what they like to call ‘Blocks’ which basically are elements one uses in a rich post. The writing experience on the new editor is like a breath of fresh air. The Gutenberg editor is smooth, flexible, easy, and includes all the options one needs when writing a post.

To write a rich post you needed to have the basic understanding of HTML and CSS, only until now. With the new Gutenberg update the blocks would help you add many elements like heading, paragraph, images, videos, separators, spaces, etc., among other things to your post. The best part is that you can add these elements only with a click or two.

Installing Gutenberg?

Right now, the Gutenberg update is available as a plugin so that people can try this out and help the developers with their feedback. You can download the plugin from here.

If you like the classic editor better, you can always deactivate the Gutenberg plugin and go back to it. However, with WordPress 5.0 update coming soon, Gutenberg will be the default editor (without the need of the Gutenberg plugin). If you want to switch back to the old editor you can install Classic Editor when the new update is released. The Classic Editor would help you bring back the old editor layout on WordPress 5.0. The Classic Editor is an official plugin maintained by the WordPress team that restores the traditional WordPress editor and the ‘Edit Post’ screen.

Alternatively, you should see a block named ‘classic’ under the formatting drop down in the add block menu. Though this doesn’t take you back to the old layout, but it does provide a few options from the old editor. More on blocks and how to use those below.

Exploring Gutenberg

To experience Gutenberg after installing, hover on posts in the WordPress dashboard and click on ‘Add New’, the Gutenberg editor will show up on the page. At the top of the screen you should see a plus sign which means ‘Add Block’ followed by undo, redo, information and content structure.

wordpress gutenberg

On the right you should see a preview button, a publish button, and a settings symbol. The heading block should be present by default. You can type the heading of your blog post into this.

To add a paragraph click on the plus button and you should see an array of options. These are the many kinds of blocks that that the Gutenberg editor offers. The ‘Most Used’ dropdown should be open by default with the available blocks. The most used dropdown is followed by inline elements, common blocks, formatting, layout elements, widgets, and embeds. Each dropdown contains blocks that fits the category.

Click on paragraph and it will add the paragraph block under the heading and you can start writing your blog post. Click on the plus sign again and you can select ‘Image’ to add the image block. Similarly, other blocks can be added as per your requirement.

wordpress gutenberg
wordpress gutenberg

Additional settings for the selected block appear in the right pane. If you don’t see this option click on the settings icon beside the publish button. The right pane would consist of general block setting and some advanced settings as well.

The most used drop-down consist of paragraph, heading, image, gallery, list, quote, audio, cover, and file. You should also be able to see a search bar on top two blocks which helps you search for a block easily by typing into the search bar.

The Inline drop-down consists of only one option at the moment which is inline image. As the name suggests, it helps you add an inline image as shown below.

The formatting drop-down will show you a options you can use for your post. The options includes code using which you can add code to your post. The classic option which provides you the traditional editing options. A custom HTML block will help you add HTML code if you need something more customized. These options are followed by Pre-formatted, pullquote, table, and verse which help you add pre-formatted text, pullquotes, tables, and verse respectively as the names suggest.

The layout elements include button which helps you add CTAs, columns of text, a ‘Media and Text’ block which arranges media and text in a certain way, a ‘Read More’ block, page break, separator, and spacer. These elements are pretty important and give you more flexibility as compared to the traditional editor. Layout elements help you with elements which you would add via HTML or CSS otherwise.

The widget options includes shortcodes, archives, categories, latest comments, and latest posts. These would appear as widgets wherever you place those.

The Embed option includes a huge list of Platforms you can embed videos and images from. The most popular ones include YouTube, Twitter, Vimeo, Spotify, and Tumblr among others.

When you hover your cursor slightly to the left of the block, 3 icons should appear. These would help you grab and move the block to a desired position on your post.

Also, clicking on any block other than the heading one, you should be able to see three dots. Clicking on this should show up some additional options for the block. These options are common across all blocks and include hide block settings, duplicate, insert before, insert after, edit as HTML, add to reusable blocks, and remove block.

Reusable blocks are blocks that can be reused at any time on different blog posts. For example, if you have a disclaimer at the end of every post, you can create and save this as a reusable block. Once you do that, a ‘Reusable Block’ dropdown should appear in the list of dropdowns in the add block window.

You should also see three dots on the top right corner of the page. Clicking on this will open up some more options. The first 3 options include ‘Top Toolbar’ which puts all the tools used by a block at the top of the screen

Spotlight mode which puts focus on the block you are currently editing.

And full screen mode which stretches the editor to fit the screen and removes all distractions from the page.

The next 2 options are ‘Visual Editor’ and ‘Code Editor’. The visual editor is active by default and the code editor would help you make all the changes you need through coding in each block.

The next set of options are ‘Manage Reusable Blocks’, ‘Copy All Content’, ‘Keyboard Shortcuts’, and ‘Options’.

Clicking on Manage Reusable Blocks takes you to a page where all the stored reusable blocks are displayed. You can edit and delete the reusable blocks from here.

Keyboard Shortcuts includes a huge list of keyboard shortcuts that you can use while creating the post. Though the number of shortcuts are too many for us to remember, you sure would find a few that would make the editing experience easier.

Copy all content would copy the entire content to the clipboard.

The Options menu will open up a set of checkboxes as shown below

These help you enable or disable the Pre-publish Checks, Tips, Featured Image, Discussion, Custom Fields, Smart Notification, etc.

Should I install Gutenberg?

Yes! Absolutely! Of course there’s a little bit of cleaning to be done here and there but for guys that do not code, the editor will work flawlessly for them. The test post in the screenshots was created in 10 minutes. It would take double the time had we been doing it on the traditional editor.

We were also surprised how mobile responsive this was right out of the box.

We say, go ahead, try it out and we are sure that you are going to love it.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *