A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

Short Introduction to WordPress Gutenberg

A Short Introduction to WordPress Gutenberg

The Classic Editor is something all of us WordPress users have grown accustomed to. The Classic Editor was more than a habit – it was something we knew and understood well. There was the old title field, the content field, a field for inserting shortcodes. On our right-hand side, all the page options at our disposal – Status, Visibility, and so on.

All of a sudden, we’re facing a major change. At first glance, the WordPress Gutenberg hardly seems like an editor at all. Where are all our options? Where do we write the text? What’s with the title? Yes, changes are rough. But oftentimes, changes bring improvements. Gutenberg was created with the purpose of making it easier for the users to work with WordPress. That is definitely a change worth embracing.

At First Glance

Let’s take a quick look at the new editor. At first, it’s like nothing we’ve seen or used before. But look closer and you’ll find out it’s actually rather intuitive and easy to use.

gutenberg basic tutorials

The first thing we notice about it is that the title is no longer a separate field. Instead, now we have a single working area that displays its parts as a continuum.

wordpress tutolials

What’s All This About Blocks?

WordPress Gutenberg is based on the concept of blocks. One of the purposes of this approach was to assure continuity in the way classic content elements are created. We can obtain vastly individual and completely different results but we do so using the same way to create blocks. What this does is it assures the security, stability and ultimately the scalability of WordPress as a platform and as a whole.

But what exactly are these blocks? To put it simply, the new editor replaces the old single edit field with a bunch of new, individual blocks. A block can be a lot of things. A block of content – plain text, images, videos, but also a widget, a button, a table, and so on.

Managing Your Blocks

Let’s take a look now at how we add these blocks in WordPress Gutenberg. The good people of WordPress have divided them into neat categories for our convenience and easier getting around. You can browse these categories or simply use the name of a block you want to use, if you know it, typing it in as /name.

There are different ways to add blocks. For instance, you can use the little plus sign in the upper left portion of the editor.

Introduction to Gutenberg

The good ol’ Undo and Redo are located just next to it.

Introduction to WordPress Gutenberg

New Things

A useful new thing here is the Info button, which displays the content structure of our post. It shows how many words, headings, paragraphs and blocks we have in our post and helps us keep track of our content structure.

There is always one empty block that sits there before any content is inserted. This block is there by default, much like the title block.

gutenberg

Another very useful thing that we didn’t have before is Block Navigation, also located in the upper left menu bar.

It shows the structure of all blocks on the page and allows for easy getting around your content.

For example, if you want to modify a piece of content located in the penultimate paragraph of your post, instead of scrolling all the way down to it you can simply click on that particular paragraph in the Block Navigation dropdown.

gutenberg wordpress blocks

After we have inserted content into any of the blocks, we can click on Save Draft, just like in the old editor, or on Preview or Publish.

A lot of things that we are used to finding in the right-hand side of the Classic Editor are still there, except they are tucked in under the Document tab.

One of the elements that used to be located below the main field in the Classic Editor is the Discussion, which we used to allow or disallow comments on a page.

It is now located in the Document tab, which, by the way, can be temporarily removed, just like its neighbor, the Block tab, by clicking on the cogwheel to access the settings.

basics-gutenberg-wordpress

Customization Options

We can customize the view of the workspace by clicking on the three vertical dots in the upper right corner, which will take us to the More Tools and Options Menu. From here, we can customize the workspace to our liking, as well as the sequence of elements on it. In addition, you can also pick the editor you want to use – Visual Editor or Code editor. There is the list of shortcuts, as well as some additional options.

wordpress-gutenberg

And now, the most important part. By clicking on a block, in this case the first Paragraph, you open the options related to that particular block. Once you have selected a block, some of the options will be located under the Block tab to the right.

Some other options for the same block will be located in the top left section of the editor, and there will be other options around the block itself, depending on the specific view you have set.

gutenberg-wordpress

And that’s pretty much it. In its essence, WordPress Gutenberg is as user-friendly as the Classic Editor, and probably even more so. We recommend you give it a shot and play around with it for a while. You’ll see that you’ll get a pretty firm grasp on it in no time and you’ll be happy about all the improvements that came with this change.

We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply