Custom WordPress Blocks have always been a mystery until I had to build one.
WordPress was initially built as a platform for bloggers in 2003 by Matt Mullenweg and Mike Little. The platform was very user friendly and had a convenient WYSIWYG editor that allowed millions of people to build a website quickly.
I got involved with WordPress in 2010, when I accidentally built my first WordPress website. I coded my first website with HTML and CSS. I could have sworn these events are reversed chronologically but my first post is dated 2010. Anyway…
Shortly thereafter, corporate America realized the built-in SEO features of WordPress and saw it as a great way to move their company website up the proverbial search engine ladder. I started writing PHP and built some custom projects during this time, custom themes for small clients, a plugin or two, basic stuff.
Then the Page Builder Era came. “Coding is obsolete” was the cry. My agency and development team experience consisted of working with code editors. It was frowned upon that I code anything and that anyone should be able to build a page and follow strict guidelines.
In 2018, WordPress 5.0 was launched giving users a much greater freedom to build their sites as they wanted to. The move was the first step into the quest for Full-Site Editing, or the ability to edit any section of the website the user wants to. It also put the WYSIWYG editor on notice that it’s days are numbered.
Most of my clients freaked out and many still are not interested in working with the new WordPress blocks. It’s just too…different.
What is Different about Gutenberg Blocks?
To get there, let’s start from where it started in my opinion. Google search has been the number one search engine on the planet since it dethroned Yahoo! around 2004. Google basically invented search engine marketing as we know it today.
Google developed Angular.js, Facebook bought Instagram and took over React.js and page speeds got fast. Lightning fast.
WordPress is a PHP platform and PHP requires a database, SQL out of the box although I have heard of others. That makes WordPress much slower. A lot of the page builders are built with Reactjs involved and help speed up their page loading speeds.
WordPress’ answer to this was Gutenberg blocks which are constructed with React facing the front-end and also help make these websites much faster in the browser. Gutenberg blocks helped answer the markets need for faster WordPress websites and reclaimed some of the ease-of-use that WordPress is known for.
My Early Experience with Gutenberg Blocks
When it first came out, I thought my days as a coder were over. You could have a block and drag it anywhere in the page. I thought gone were the days of registering sidebars, keeping track of the WordPress hierarchy, and writing custom page templates.
I got curious one day about Gutenberg blocks and watched a very informative video on YouTube about building custom blocks from scratch. It made the conversion of HTML to JSX (React’s rendering code) simple using Babel.
I got distracted, chased another shiny object, COVID hit, I got involved with HubSpot’s content management system, and everything was put out of mind.
It would be until March 2024 that I would take another look at building custom WordPress blocks again.
I Begin a New Project Built on Gutenberg Blocks
In April 2024, I begin a new WordPress project. They just want to get started and I recommend WP Engine for the host and to build with Genesis Custom Blocks. The client goes one step further and goes with Genesis Pro. I worked with the Genesis framework and StudioPress themes for several years before WP Engine bought them, so I thought oh, why not? After all, I’ve been writing PHP for a while now and I think I can figure it out as I go.
And so I get into it. The first custom block was pretty easy and I had to write a little HTML and CSS to make it appear in the browser the way I wanted. Then I realized that Genesis Custom Blocks didn’t allow for custom JS. And I needed to add some custom JS to make the block do what I wanted.
Next Stop: WordPress CLI
I have been staring at the WordPress CLI for quite some time. I was trying to download the wp-cli.phar file to my Windows machine with Linux terminal commands to get started. That doesn’t work by the way.
If you are getting started with WP-CLI, there is no way that I am aware of to download that crucial file without downloading it manually.
I finally started using the WP-CLI to build custom blocks. Then are they supposed to be static or dynamic? What other commands are needed to make these work.
This is Just the Beginning
I would love to make this blog post the be-all-end-all of my journey into custom WordPress Block and Theme development…oh yeah, I haven’t even mentioned custom block theme development yet. Based on the videos I have seen so far, it is a completely different animal as well.
So stay tuned and check out my YouTube channel. I’ll be working on solving these mysteries there.
Categories
