What Makes up a Gutenberg Developer?

This article contains 3 things:

1. A brief introduction to Gutenberg and its purpose of existence
2. Introducing the Gutenberg Developer and their skillset
3. How to become a Gutenberg Developer

Gutenberg, which started off as the codename for the new WordPress Block Editor has been used to define many things. The new editor has been built to replace the previously used TinyMCE editor which has been in WordPress for a long time. Gutenberg started off as a plugin and was merged into WP core in WordPress 5.0 which was 5 years ago. Time flies, right?

Coming back to the point. Gutenberg has been used to define the following items:

1. The plugin that was built to replace the “Classic Editor” also known as the TinyMCE editor. Unfortunately, it has a very low rating on the WordPress plugin repository. As a developer, it’s difficult to understand the hate for this plugin, but it is what it is.
2. The “content editor” which replaced the post/page editor which was using TinyMCE.
3. The Full Site Editor also known as the “site editor”.

Now, Gutenberg has 4 phases:

1. Content Editing, which was started in 2018 with WP 5.0
2. Site Customization, which started last year with WP 5.9
3. Collaborative Editing which is being worked upon
4. Multilingual Support which is scheduled next

Replacement for page builders?

Although it did not start off as as replacement for page builders when first released, it has become so. Since the site editor allows you to replace every bit of the site using blocks, isn’t Gutenberg essentially another page builder? That’s what I believe so. It’s not “just another” page builder. But it is the de facto page builder that is built by the team building WordPress core. In other words, if you want to use the default way of page building / site building, you are best off choosing Gutenberg,

Atomic in nature?

Another important point we must realize is that Gutenberg has atomized the aspects of site building. The idea is that the site is broken down into smaller and smaller pieces of blocks until you get to the smallest “single block”.

A group of blocks can be categorized as the following:

1. Block Pattern (synced and unsynced)
2. Block Template Parts
3. Block Themes

I first saw this idea in WordPress, but other CMSs (primarily Headless CMSs) also have adapted this idea of slicing up the site into atomic pieces or blocks (as referred to in WordPress).

Gutenberg Developer 101

This is a popular job role within the WordPress space. It is still a hot and trendy job title although it’s been over 5 years since we first heard of Gutenberg. So, what makes up a Gutenberg Developer? Let’s find out!

It essentially comprises of the skills of the following 3 job roles:

1. WordPress Developer
2. React Developer
3. Frontend Developer

You might think that’s a lot of things to learn just to be able to do one job role. Well, that is not the case so!

How do I say that?

For example, if you have rudimentary WordPress skills, but are very good at React, you can still do a lot by reading about the Gutenberg documentation and learning the WP REST API as well as brushing up on CSS.

If you are a WordPress expert, but have basic React skills, that’s more than enough. Because building blocks requires little React knowledge to get started.

Likewise, if you are a frontend developer strong in CSS and JS, you might have to learn some React and the WordPress knowledge necessary to build blocks or a block theme.

In other words, you do not need to ace all 3 of these roles just to be able to build with Gutenberg.

So, what skills do you need to get there?

Gutenberg Developer skills

Matt Mullenweg said in 2015, “Learn JavaScript Deeply”. It still stands true. You need to know JavaScript. I believe most WordPress developers and Frontend Developers already know JS. React Developers definitely know it since React is a JS library.

Apart from JS knowledge you might need these core skills to work with Gutenberg:

1. React
2. Some basic build config knowledge like webpack and friends
3. PHP
4. HTML + CSS
5. JSON

How do I learn to become a Gutenberg Developer?

There a few aspects to becoming a Gutenberg Developer.

For example, you can build individual blocks or be able to build block themes, or plugins that house multiple blocks to solve specific problems.

For example, the Jetpack plugin uses an array of blocks to solve niche problems with content creation. Twenty Twenty Four is an example of a block theme – a theme built entirely out of blocks.

There are a few resources I can recommend to learn these:

1. Gutenberg Blocks for WordPress and React Developers by Ali Alaa – this is a great course for someone who has knowledge of React and WordPress but wants to speed up their learnings with block building.
2. The Block Theme Academy by Fränk Klein – this is an awesome set of courses to be able to build out block themes, the right way.

I have taken both these courses and have found them to be very helpful.

Getting a job as a Gutenberg Developer

There are many companies hiring for this role. WordPress development agencies look for these folks with this skillset as they need to build client sites and apps that make use of Gutenberg.

So are product companies looking for these roles. Product companies need to “blockify” their products sooner or later. If their products do not play nicely with the block editor, it could mean death to their product as more and more users adopt the new block editor and move away from the Classic Editor.

Theme shops also need Guetenberg Developers as they start to replace classic themes with either hybrid themes or block themes.

Mindset of a Gutenberg Developer

As Gutenberg Developers, we need to think of future/modern WordPress sites as pieces of a blocks inside blocks inside blocks, up until we reach a single block.

What makes up a block? They can be made using PHP or JS. The editor side is mostly written using React. The frontend uses a React-like structure, but is not, in fact, React that powers it. It gets serialized to HTML. You can also use PHP to replace the frontend code, which I quite like because of the power of PHP within the context of WordPress. I will stop here because speaking at length about this topic is cannot be covered in a single blog post.

Having said that, it’s important to decide which language to use where. You can even use React by enqueueing it to the fronend and make use of its dynamic nature to build complex UIs. However, it’s better to use PHP and vanilla JS as much as possible before reaching out to React for the frontend.

Here is an architecture diagram of a block:

It looks quite complex to understand. But you will soon realize how it works once you start working with it.

Some helpful resources

Here are some resources that can help you start off in this journey:

1. WordPress Builders playlist by WP Engine Builders YouTube channel
2. Block Editor Handbook as a reference point
3. Jamie Marsland’s YouTube channel
4. Tutorials by Bill Erickson
5. The writings of Rich Tabor
6. The works of Nick Diego

So, you want to become a Gutenberg Developer?

If you have read up to this point and want to become a Gutenberg Developer, here are some steps you can take:

1. Learn as much as possible from the courses and resources listed above.
2. Build out a simple block using block.json. This is a helpful tutorial.
3. Build more blocks!
4. Build out a basic block theme
5. Apply for jobs
6. ???
7. Profit

Let’s keep in touch!

I hope you found this piece helpful. Let me know if you’d like me to cover another similar topic, or something else you’d like to read!

If you have questions about blocks or block themes or want to get in touch with me, feel free to reach out! I am also active on X and LinkedIn if you want to follow me over there. I also provide consultancy as a Gutenberg Developer, so feel free to get in touch!