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?
- What are Custom Gutenberg Blocks?
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.
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 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.
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 on this site was created using Gutenberg. Beginning from headings, up to paragraphs, quotes, links and more.
What Are “Blocks”?
Blocks are elements that the Gutenberg editor can use in order to achieve a drag & drop experience and usage.
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.
What Are Custom Gutenberg Blocks?
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.
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.
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.