Welcome, How I Built It Listeners! Your discount has been automatically applied!

Implementing Gutenberg: Justin Sainton & A Custom Light Builder

WordPress 5.0 and Gutenberg are coming out this month! To help you get an idea of how you can use Gutenberg in your own client sites, I’ve put together a miniseries on implementing Gutenberg.

Up first is Justin Sainton of Zao, a small WordPress agency based in Portland. Justin immediately surprised me by telling me they didn’t just use Gutenberg on a basic client site – they built a multi-part light fixture customizer/builder. Come out swinging, right?

I love the conversation and how we talked about the good, the bad, and we end with advice he has for those looking to start implementing Gutenberg now. As a reminder, there’s a WordPress 5.0 beta out now, and the official release is slated for November 27th.

Full Transcript

Joe Casabona: Hey, everybody. Joe Casabona here. Welcome to this miniseries I’m doing about implementing Gutenberg in the real world. I’m excited. My first guest today is Justin Sainton of Zao, and he graciously agreed to come on the show and talk about a site that he recently implemented with Gutenberg. Justin, how are you?

Justin Sainton: Good man. How are you doing?

Joe: I am fantastic. Thank you for piloting this series with me. I don’t usually do the Zoom call recorded and uploaded to YouTube, so we’ll see how that goes.

Justin: Sounds fun.

Joe: This shouldn’t take too long. People say that YouTube videos should be less than 15 minutes to keep the attention span, and I just wanted to run through a couple of questions with you. Maybe you could talk a little bit about who you are and what you do, and then about this project?

Justin: For sure. My name is Justin, and I run a small agency called Zao. We’re out of Portland, Oregon. Most of what we do is the upper end of the WooCommerce market. We don’t spend most of our days doing theme builds and basic setups and things like that. A lot of times its migrations, a lot of times its custom front-end apps with viewer React, or whatever. That kind of stuff. Or solving migration problems or workflow problems. That type of stuff. That’s what we spend our days doing, and this project was a cool project. It’s from a company in Charleston, and South Carolina called The Rochambeau which is– For anybody who’s ever watched South Park it has a very different connotation. That’s not the connotation they’re going for. They–

Joe: I suspect they’re probably named after the Revolutionary War, was it a general? There was a general named Rochambeau.

Justin: I’m going to say yes. I’m no history buff, but sure. Anyway, they’re a great client, and they sell high-end lighting. Some commercial, some residential. Their focus for their client base is wholesalers and interior designers, things like that. These are not like the $200 ceiling fans with lights that you buy at Home Depot, and these are like $80,000 chandeliers that you’d put in a $3 million dollar house. Lighting like that. So they came to us with a bunch of problems. They had a WooCommerce, and their existing developer had reached his capacity on what he could do, so they came to us to get some increase in capacity.

One of the issues that they had was they wanted to build a “design your own” page where people could come and pick out a frame for a chandelier, and they could come and pick out beads for a chandelier, pick out the lights for a chandelier and then they could do whatever they want. They could build their own. Again, their client base was built off of a lot of designers. Having this kind of functionality was important. This wasn’t when we came into this problem, Gutenberg wasn’t the most obvious way to solve this issue. But at the time, Gutenberg was not totally stable but stable enough.

This was maybe two or three months ago, and it was stable enough to say, “Let’s give it a go and see what we can do with it. Maybe it’ll be a good fit, and maybe it won’t.” We decided to use Gutenberg as a rapid prototyping tool for an app. Normally we might build this front end and reactive view or whatever and have a real custom solution, but with their timeline and budgetary requirements and what we saw as the potential for Gutenberg, we thought it could be a  cool use case for this. We didn’t dive into using Gutenberg as– What we like it, for now, is writing blog posts and then going back over and adding flavor to it.

Right now it’s perfect for that, and it works beautifully. It doesn’t work great as a page builder or as a prototyping app, but we decided to use it that way anyway. That’s how we hopped into it, and where we found some powerful things about it, and then some pain points about it that we can see a lot of potential for in the future. So while it’s great for basic blog posts, you can go back and add images or galleries or quotes, or whatever. Super easy. We wanted to build a system that was a step by step system.

You have to start out with the whole  grid of chandelier frames, and then once you select the chandelier frame you have to select, “Do you want the 18 or 24 inch?” Then you have to go and select the beads you want and the light that you want. We had to build this process that we ended up adding a lot of CSS and JavaScript flavor to, but we’re able to build the overall layout. Doing that was pretty easy and pretty powerful, and this was at that point, and I’m embarrassed that I’m not following it closely enough. But this was at the point when the columns block was fairly new, and it was still in beta. I don’t know if it’s out of beta yet or not.

But having that was helpful because it helped us lay things out in such a way that  this client, their customer base is designers and they have designers themselves, so they were able to send us these semi low fidelity mockups and say,  “Can it look like this?” We were able to take those mockups, prototype it in Gutenberg and then get something that’s really close to their vision. Being able to use it as a rapid prototyping tool, and then add all the extra flavor to it with some extra CSS and JavaScript was cool and a cool way to use it.

Joe: That’s interesting because  a lot of people might expect to hear, I was certainly expecting to hear something like, “We just took this vanilla site and converted it to Gutenberg, and  now we can manage posts and pages a little bit easier.” But right out of the gate we’re talking about a straight-up application built with Gutenberg, and I like that you mentioned you were going to use React. You decided on Gutenberg, and this was a good starting point, almost. You had to add some extra stuff in there, but this was a good kick start for the project. My next question is, what do you think was maybe the easiest– Or, what was made a lot easier with Gutenberg? I’m sure you definitely said a few things there, but what’s a standout thing for you?

Justin: When you’re talking about part of this application building process, it is ultimately page layout and UI component building. When people hear “React,” sometimes if they’re not familiar with it feels big and scary. But ultimately all React review is just a codified framework for UI components. So having the ability to use Gutenberg in the same way as React, it’s not necessarily code as much as it is the purpose of the code. It’s this codified library of UI components,  that’s really what the blocks are. Having that consistent component library to be able to use to build out this application, that was a lot easier, and being able to use something that was built in such a way that you know it’s good.

Sometimes we like  to use different metrics and heuristics of what’s good code, and you can look at something  like [inaudible] Composer, and be like “For all of its robust powerfulness, whatever, it’s not good.” But then you can look at something like Gutenberg and say, “For all of its flaws and failings it is good.”  So there’s that gut feeling of, “Is it good or is it not good?” Being able to go out of the gate with something that was good, that to me was the real benefit and the real power of Gutenberg. It was like, “I’m building something that I know is built and will continue to be built on good foundation.” For right now, I don’t know when this will air, but the big thing is “Is it accessible?” In some ways it is, and in some ways, it isn’t. I’m not the expert there. But  I have enough trust in what it is to say, “Yeah. It’s good, and it’s going to get there.”

Joe: I love that point of view. Because you’re right. At the time of this recording, the dates have been announced, and I’m people that think it’s too soon or too close to Black Friday. There’s the accessibility discussion happening right now, and there’s just a lot of bad press. But since January, I’ve been saying “This is a good thing. It’s a really good thing for new users,” and maybe part of the reason I’m doing this series is to demonstrate that, and I can’t imagine a better project to start with than this one. Because again, you’re coming out the gate, you’re saying Gutenberg is not just a blogging thing. It’s a  good framework for– I like what you said. “The purpose of the code.” I . But on that same token, you mentioned this a little bit, but maybe what’s a standout thing that didn’t go as expected for you?

Justin: Sure. This is simple, and it was really simple to fix. One of the things that I wished worked a little bit better was– The layout of the site on the front end was widescreen. It wasn’t totally full screen, but it was pretty wide, and by default in Gutenberg it is very much not wide. The default window that you work with in Gutenberg is 6 or 700 pixels or something like that. It’s in no way reflective of most front ends of websites. I wish there was a way, at some point there was either a feature plugin, or maybe it’s already included with the customizer where you can drag the size of the customizer. Because a lot of people were doing these interesting layout things with the customizer and you needed more space in that little sidebar you get with it.

At some point, there was a way to drag it to make it bigger. I would love if there was an easy way to do that Gutenberg, where you didn’t necessarily have to go overwrite some CSS which is what the handbook says to do, and what we did eventually. Update the CSS and say, “Here’s a full width, a wide width, and a standard width.” It would be cool if it would let you as a user stretch it and do that, because once we did that the actual reflection of it from the front end to the back end, there was a lot less discrepancy there and it made the layout a lot more predictable. That was a really little thing that was simple to fix, but it made a huge difference, and I wish it was a little bit more natural to do that.

Joe: That makes sense too, because the  big problem with today and the 4.9 and before editor is that it’s not a ‘What you see is what you get” experience, and Gutenberg starts to solve that a little bit but you’re still not getting the real– It’s not like moving into a page builder like Beaver Builder and actually seeing your site layout and how things will  look. When you click “Done” the only thing that changes is the bar disappears. But having a wider, especially– I could see why they did it. Because people have different screen sizes, and you want to make sure the content looks really good in the editor to showcase what it’s doing, but I have a 32-inch screen. It’s a 4K monitor or Ultra HD, or whatever they’re calling it these days. But that doesn’t utilize the screen real estate. I  like that was the problem you ran into, and I like the fix for it. That’s a really good piece of feedback, and it definitely could be a feature plugin or something to be included in themes. I believe that’s probably what the handbook recommends.

Justin: Yeah.

Joe: Cool. My last question, this has been great, my last question is for those who want to start working with Gutenberg on their projects today. What recommendations do you have?

Justin: I would say, start slow. There’s a lot of people who like to be on the cutting edge. I would say I’m right there with them. We’re not quite ready to go with our clients and say,  “Let’s build out your entire site in Gutenberg and you have nothing to worry about six months from now.” We don’t feel that comfortable, but with this client, it was a great example of, “We’re not going to go rebuild your entire site. We’re going to take this one section of your site and rebuild it in Gutenberg.” Even on our own company website, for all of our new blog posts, we’re starting to use Gutenberg instead of the classic editor. I would say for somebody who is looking to get started, don’t feel like you have to start with everything immediately,  start with just a new blog post. Start with maybe one page on your site, or site for a client, and start at your feet wet a little bit.

Once you do and once you start to familiarize yourself with it, my hunch is there’s a lot of lurkers with Gutenberg right now. There’s a lot of people who are listening to all the feedback and saying, “It’s not ready. It’s not good. There’s all these problems with it.” But a lot of those people probably don’t even use it, honestly. If people say,  “I’m going to start small. I’m going to start with something and start to use it, I’m going to read the handbook, and I’m going to understand the code a little bit. I don’t have to learn React, and I’m just going to learn a little bit. If people start somewhere and start with a little bit and get used to it, I love it.

That’s been my experience so far, is that starting with a little bit, a little client project here, a little piece of the website here. Our own company blog. It’s like, “This has come a long way from when I first tried it  a year ago,” and it’s quite good to go back to that heuristic and that gut feeling, “Is it good?” So start small, start somewhere, and get that sense of “OK. This is pretty good.” Then you can build from there.

Joe: That’s great advice. I love that. I will link this in the description for the video below, but Gutenberg Ramp by the Automatic team and the WordPress VIP team is a  very good thing to help you implement Justin’s advice of starting slow. Justin, thanks so much for your time. I appreciate it. Where can people find you?

Justin: Yes. Twitter is always good. @js_zao on Twitter which is great, and our company website, Zao.is. Those are the main places I hang out.

Joe: All right. Awesome. Thanks so much, and thanks to everybody watching. I hope you enjoyed this series. If you did, click the thumbs up button down below and subscribe, because I’ve got more of these videos coming out. Until next time, get out there and build something.


Leave a Comment