WordPress Gutenberg Blocks Explained

Hello everyone! Welcome to my WordPress Gutenberg Blocks tutorial article. For those of you who are unfamiliar with the new Gutenberg editor, well, this is the time and place to get to know it because we are going to see a lot more of it.

In the following WordPress Gutenberg tutorial, we will talk about key features, in addition, we will cover the following topics:

  • What is Gutenberg Editor?
  • Why is it Important?
  • How It works
  • We will take a look at live examples
  • What are Custom Gutenberg Blocks?

Without any further delay, let’s begin!

WordPress Gutenberg Editor

So, what is this new thing called the “Gutenberg Editor”?

For those of you working with WordPress for a few years, you must know that its visual editor didn’t have any significant changes over the years. It pretty much stayed the same and kept to its original design over the years. However, with the advancement of web developing technologies and particularly the release and usage of advanced and exciting front end frameworks and libraries such as REACT or Vue gave birth to a whole new playing ground.

Meaning, Things changed in the way we create for the web. For instance, take a look at WIX, its drag and drop concept is very similar to the goal of Gutenberg and what it’s trying to achieve in the future. Giving the end-user control and flexibility over his/her website.

In short, this move is meant to ease things and make the editor more powerful, flexible and friendly.

WordPress Gutenberg Blocks – Why is it Important?

Altho it’s still in development and has bugs, the guys at WordPress stated that this is the future of WordPress. Meaning, we will be seeing a lot of it in future updates, ultimately we as developers and users must adapt and learn the new way of how things work.

How Does The Gutenberg Editor Work?

Gutenberg uses and utilizes the React & Redux frameworks in addition to PHP. Meaning, in order to develop new things for it, or in other words, EXTEND IT, one must have strong knowledge of the technologies mentioned above.

Let’s take a look at a quote taken directly from the official WordPress codex:

The WordPress Editor uses blocks to transform the way you create content: it turns a single document into a collection of discrete elements with explicit, easy-to-tweak structure.

In short, its kind of a page builder, it uses JSX components as BLOCKS to allow us to easily add new types of content.

For instance:

  • Images
  • Paragraphs
  • Embeds
  • List
  • Galleries

And a lot more! In fact, everything you see here in this article was created using Gutenberg Blocks, they are all blocks, each component on this page. Beginning from Headings, up to paragraphs, quotes, links and more. Take a look at the screenshot below for a live example:

What are “Blocks”?

As mentioned above, blocks are elements that the Gutenberg editor can use in order to achieve a drag & drop experience and usage. Moreover, to better grasp it, take a look at the screenshot below, its an “Image Block”:

wordpress gutenberg editor

Well, you can see its pretty neat and simple right? That’s the whole idea behind it. Of course, there are more components to it, things like:

  • Color Options
  • Background Options
  • Font Size options
  • Heading Types

And a lot more. Finally, you can read more about blocks at the official WordPress codex here.

What are Custom Gutenberg Blocks?

As I mentioned earlier, the Gutenberg Editor has a built-in “BLOCKS API” to it. It’s built-in into the CORE of WordPress (version 5 and above). This API lets us design and construct custom blocks of our own to serve our purpose and design.

Think of it as a like WordPress advanced custom fields, but on a larger scope! Let’s say I want to build a calculator widget and I want to allow the user to display and customize some options. I build a custom Gutenberg Block, register it, and make it available for usage everywhere with a simple drag and drop. Ultimately, the user can place it inside posts and have as many versions of it as he likes, and each can be different of course.

This is a great way of achieving things. However, this is all still too new and in development. The WordPress development team encourages developers to develop using Gutenberg blocks. Meaning, they are getting better every day and improving it. Nowadays, it’s relatively very stable.

Gutenberg Blocks Plugin

You guessed it, there are already companies and developers out there building their own custom Gutenberg Blocks Plugins. I personally don’t use any sort of Block plugins, however, there are a few solid ones out there. Feel free to check out the WordPress repository and search it up with the keyword: Gutenberg blocks plugin

Final Words

I hope this article made things a bit more clear in regards to the new visual editor WordPress has to offer. As I said before, we are going to be seeing it in the future so we might as well prepare our selves and get familiar with Gutenberg Blocks. Moreover, it introduces more flexibility and control. Despite all of that, no one knows what the future holds, so I guess we need to stay tuned and find out.

Leave a Reply

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