While it’s tempting to reach out to build a custom block every time you need custom functionality, it may not always be the best decision. Before committing to developing a custom block, it’s essential to evaluate the needs of your website.
Custom blocks can offer flexibility and can provide a precise set of features tailored to your content. They can integrate with your site’s unique design system and provide custom experiences that generic blocks cannot. However, developing custom blocks requires time, expertise, and resources.
You can use the core blocks alongside Gutenberg filters to customize its looks or behavior. You can also use block variations to create a slightly different way of utilizing the same core blocks. Or, if you want to change the look of the core blocks, you could employ block styles to achieve it.
Having said all that, what if your requirements differ from the above? What if you want the flexibility of creating using the block editor, utilizing any color and style you want? But you also need to make that bit of HTML you built behave precisely how you want.
The following is my take on using core blocks with some custom JS sprinkled on them to create a mini-app.
Demo
This is a Stopwatch mini-app that uses some blocks and JavaScript. You can play around with its functionality:
You might notice I have used a few class names. This is so that I can use JavaScript to select those elements.
After adding the above HTML and Block markup into this post, I wanted to add some JS.
While I built the script locally using an enqueued .js file, I wanted to see if I could do it any other way on the website. Thinking about it, lead me to the WPCode plugin, which allows you to add a snippet of code at the place of choice.
The JavaScript
This is the JS I added via a Shortcode using WPCode:
This idea that I presented is familiar in the WordPress world. We have used HTML generated using the classic editor coupled with enqueued JavaScript to power up custom experiences for ages.
Also, this idea is excellent for when we need to add Google Analytics scripts, for example. We can have buttons with a certain class name and use a global script to target all those buttons to then add tracking scripts to them.
Hope this small demo and explanation helps anyone out there!
A brief introduction to Gutenberg and its purpose of existence
Introducing the Gutenberg Developer and their skillset
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:
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.
The “content editor” which replaced the post/page editor which was using TinyMCE.
The Full Site Editor also known as the “site editor”.
Now, Gutenberg has 4 phases:
Content Editing, which was started in 2018 with WP 5.0
Site Customization, which started last year with WP 5.9
Collaborative Editing which is being worked upon
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:
Block Pattern (synced and unsynced)
Block Template Parts
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!
I created this Venn Diagram to represent what I believe makes up a Gutenberg Developer.
It essentially comprises of the skills of the following 3 job roles:
WordPress Developer
React Developer
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:
React
Some basic build config knowledge like webpack and friends
PHP
HTML + CSS
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:
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.
If you have read up to this point and want to become a Gutenberg Developer, here are some steps you can take:
Learn as much as possible from the courses and resources listed above.
Build out a simple block using block.json. This is a helpful tutorial.
Build more blocks!
Build out a basic block theme
Apply for jobs
???
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!
Gutenberg is the future of WordPress, and it is just around the corner. Brace up for it by learning how to build your own custom Gutenberg block. I wrote this post for Smashing Magazine, which was published 10 days ago.
