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:
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!
I watched the WWDC Keynote last night, and boy, do I have a few thoughts!
iOS 17
I love that now AirDrop has become very easy as bringing two phones close to each other. On the other hand (pun intended), this should have been in place long ago. Think infrared ports on ancient phones were doing exactly this (despite in a more cumbersome way!). And “NameDrop” to share your contact details with another iPhone user – I chuckled hearing Apple’s choice of words for their offerings!
Swipe to reply on iMessage. Thanks for copying WhatsApp, and do so more often. However, we hardly use iMessage here in my country anyway – so, not a big win for me.
Contact Posters are a way to customize your callee’s screen when you make a call to them. It’s a nice to have. So, is “Leave a Facetime message.”
iPadOS 17
While this is a bigger version of iOS, it has its unique set of features too. Interactive Widgets are an essential and has been on Android for ages. Apple finally gets it.
macOS 13 (Sonoma)
The new screensavers look really cool, and when Apple does something, they really make it look good, and this is no exception.
They have introduced a new way for Video Conferencing, where you appear over your shared screen as if you are using a green screen. You can be your own Weatherman on your work calls now!
They also have WebApps on the Dock now, which means you get to do what Chrome allowed you eons ago. It allows you to turn any site into an “app” and place it directly on the Dock of your Mac.
And yeah, you can finally have widgets on the Mac desktop (not just in the notifications area).
watchOS 10
There is a feature called “Smart Stack,” which allows you a widget-like view of the various apps on your watch – that was pretty neat.
They have also introduced Mental Health and Vision Health features on the Health side of things. Hopefully, it helps their customers live longer, better lives.
MacBook Air 15″
This is a device that caught my attention. It’s essentially a bigger version of the current 13″ MacBook Air. Apple describes it as the thinnest 15″ Laptop and while it is a boring device, there definitely is a target demographic that would love a bigger screen without having to pay a premium.
Mac Studio, Mac Pro, M2 Ultra
These three things are definitely overkill for your standard remote-working software developer.
While they are awesome for specific needs, the costs and the fact that you cannot travel with them make them less appealing to me.
Spec-wise though, they are brilliant and Apple continues to amaze us.
Thoughts on the Vision Pro
The Apple Vision Pro is one groundbreaking device, without a doubt. The level of hardware–software integration and the thought that’s been put into making it easy to operate is truly astonishing.
So is the sample content they showcased. Apple does know how to sell a product!
At the same time, it makes me remember Wall-E and imagine many “couch potatoes” mindlessly consuming entertainment content. We are already glued (not literally) to our smartphone screens, and this device literally places a screen to both your eyes. This takes up your entire vision; now, you see the world through a screen.
How long until we realize the dangers of the dystopia we are heading towards? Where the Vision Pro seems more appealing than what we see with our own eyes. Where you prefer to see pictures of someone instead of the “real” person.
If we are not disciplined with using such a device, it can wreak havoc on our lives. It can become a new addiction.
While exciting, I couldn’t help feeling pessimistic about Apple introducing such a device. Perhaps this post will age badly, looking back ten years from now; but I have to share my real feelings and thoughts.
iPhone revolutionized the mobile computing world, and this is set to do the same for spatial computing. It has the potential to change and disrupt certain industries. Although I can imagine certain real-world use cases for such a device, the skeptic in me says to be wary of it.
Personally, I would like to try this new technology but not buy it.
The Apple Ecosystem
I wrote about the 🍎 Ecosystem some time ago. Although I still use Apple devices for work and stuff, I am not happy with the declining reliability of their MacBooks. Hopefully, the newly introduced devices will be more durable, but our experience has been disappointing overall.
Having said that, Apple devices do make life easier in many ways. Like Continuity for switching between different devices, AirPods while working out, and Apple Watch for managing notifications without reaching for the phone every time it dings.
While I like to try out different OSes and ecosystems, Apple’s walled garden keeps pulling me back. Only time will tell for how long, though.
I had a phone call yesterday with someone I admire. We were speaking about various matters. Then the discussion came down to my career and how I got to be where I am. We were discussing the significance of a college degree to a successful career in software engineering.
This blog post is about using social media mindfully, from the perspective of a software developer who has benefited from it. Read on if you feel this will be useful to you.
I was having a conversation with a successful tech entrepreneur last year. He started coding in JavaScript when he was very young. I brought up the subject of teaching kids WordPress and he told me, “friends don’t let friends code in PHP”.
Something that I read about early on in my career was emotional intelligence. It was trending around the time I got into the “real world” and I took the opportunity to get familiar with that concept. As someone who was more fascinated by Maths and working on “hard things”, the knowledge about emotions and empathy aka “soft skills” was a breath of fresh air. I am no expert on this topic. However, it did help me navigate some of the challenges of work and life.
I was working on a website to change its font files yesterday. I had done everything correctly to the best of my knowledge. However, it did not seem to work – no matter how many times I looked over my pull request to see if everything was in order. I decided to call it a day and check back the following day.
