Building WordPress Applications with Custom Blocks and Genesis Pro

It used to be called “Block Lab”

Back in 2019 I worked for a company called “Culture Amp” and another developer and I introduced Block Lab into the ecosystem there to allow us to build blocks for the new (at that time) block editor that were totally customizable, stackable, copy-/paste- able, etc. We found at the time we could even build fairly complex blocks that had a more “app-like” feel by combining not just PHP & HTML to form a template with a custom GUI for a content manager to input their content easily, but also add Javascript/jQuery and CSS combined with WordPress’ ecosystem of capabilities at our fingertips in just a few AJAX calls.

Well, the concept evolved from there. What could we do? What couldn’t we do? What shouldn’t we do? I worked at CA for a bit over a year and when my time there was up I decided the route forward for me was to develop a library of modular blocks that could be used (usually with modifications…) for any number of projects with new blocks being added all the time as I built them for clients. Each project would widen my library, each block built would reduce future labor requirements — at least in theory…

It’s mostly worked out that way, for many customers I can recycle/alter, re-combine blocks and add new blocks in each project to take a development time that might have been 6-8 weeks down to 4 or 5 weeks. Not bad. But was that what it was all about? Churning out cogs that I could deploy en-masse? No… actually that’s the thing I kind of hate about software development. The one size (even with customizations galore) fits all model. That’s what attracted me to web development and being a custom WordPress “full stack” freelance developer as a career. The fluid freeness of what was possible. Pushing boundaries and building cool features for clients.

Evolution

Fast forward a few years, today it’s called “Genesis Custom Blocks Pro” or just “Genesis Pro”, and I’m still at it — with dozens of projects completed using the custom block methodology I’ve developed, I am integrating APIs and other custom functionality into WordPress blocks to create interactive GUIs for users where they can manipulate the DOM without needing to reload the page and still making the admin experience intuitive with zero coding required. Custom blocks can be combined in a series and used in conjunction with custom themes to create a true app-like experience when on a WordPress site without abandoning the default block editor or polluting your admin experience with a drag and drop builder such as Elementor, Divi, Beaver Builder, Visual Composer, WP Bakery, or any of the others…

In comes The Houston Museum of Natural Science via a contractor who found me. They were “2 developers in” already to a redesign and both of the previous devs had been trying to use Elementor to replicate a design that was done in Figma (or maybe it was webflow and then figma – it’s been a while…) down to the pixel, but were unable (it’s pretty much impossible without modifying the design). There’s nothing wrong with building a site with Elementor, mind you… but it has it’s limitations and in my experience it tends to slow down the admin experience to a crawl. And when it came to some of the specific functionality that had been requested, there was just no way to do it with Elementor without a HUGE host of plugins that would further complicate the UI, slow down the admin more and make the site unwieldly. Fortunately, my custom block method was just what they needed and I stepped into the work without delay.

A little over 2 years in at HMNS!

It’s been a bit over 2 years. The first iteration of their site has been up for about 18 months now. Which brings me to the present where we’re about to release a major overhaul of our ecommerce and ticketing integration. HMNS uses a software called Tessitura, which is fairly common with museums now, though it was primarily built for opera houses and the like where you’re selling seats to an audience for a show. Well that same software is adaptable for museums as well where you are selling entry rather than seats (well, most of the time at least). All of this today that the Tessitura API integration via a secondary custom database using MongoDB and all of the back and forth interactions between WordPress and MongoDB via an API, WordPress and the Tessitura API and WordPress and the TNEW software that Tessitura built is ALL done with custom blocks that were created with Genesis Pro! And what’s more is this new “phase 2” project also includes modifications to our theme templates to display persistent UI data (such as a cart, login status, any promo codes you might have, etc) right on our WordPress site rather than needing to use the somewhat slow and tricky to use TNEW alternative. The blocks contain most of the API interactions with the exception of our functions.php file, header.php file and footer.php file. All in all, the new API-integrated blocks function seamlessly with our custom WordPress theme and multi-site configuration for HMNS’ three locations.

Stay tuned if you’re in/around Houston, or will be taking a trip there anytime soon. The new experience is set to go live in the next week or two!

Looking for a WordPress developer to take your idea to the next level?

Well… Hi! You found me. Feel free to reach out anytime.