A Talk About the Upcoming WooCommerce Blocks

BobWP:
Hey everyone, welcome to the redo, the Woo, known as Do the Woo. This is a show that was recorded at WordCamp US, but some nasty spurts of background noise resulted in spots of inaudible conversation in Episode 30. Hey Brad, how was that for a title?

Brad:
I like it. Nothing like starting out by admitting our mistakes.

BobWP:
Yeah, I know. I actually spent some time listening to a few crowd background noises, murmuring and stuff, and there was none that would allow—none of them had Gutenberg mentioned every few seconds, so I thought it was unbelievable. So I nixed that idea and thought we’d just fess up and outright say that Bob blew it. Yeah.

Brad:
Well, it’s tough at a conference because obviously there’s a lot of noise all over, but the assumption is the microphone’s going to just pick up our voices with a little bit of stuff in the background. But when you do things live, it happens.

BobWP:
Oh yeah, whatever. There we are. I think a few people meandered a bit closer than I anticipated, so next time, we’ll get a really big stick and we can poke. Yeah.

Darren:
I think we’re just drawing a crowd.

BobWP:
I just did this… I did a whole bunch of these at WordCamp Seattle, and we actually had a big sign—a quiet sign. Sometimes people wouldn’t see the sign; they’d come and wander over, and I would just pick it up and start kind of shoving it right in their face, and it worked really well, actually. Well, alrighty. Well, we have our returning guest who hasn’t been on the show but technically has been on the show—Darren Ethier. Darren is from Automattic/WooCommerce, and we were at the booth and had a great conversation. We’re going to have a second great conversation. How are you doing, Darren?

Darren:
I’m doing great. Glad to be here. Glad to be here again, I guess.

BobWP:
Yeah, so Darren’s going to tell us a little bit about his role with WooCommerce, and we’re obviously going to be doing the whole discussion around that because some of the new stuff with Woo plays into that really well. So just tell us a bit about what you do, Darren.

Darren:
Sure. I’ll give a little bit of background on myself. I’ve been involved with WordPress since WordPress 2.1, so it’s a little while ago. I did freelance for a number of years, and one of my main clients was Event Espresso. If there are any Event Espresso users out there, you’ll recognize that name. Then, about four or five months ago, I was hired by Automattic, came on board, and was placed with the WooCommerce division. The team I’m on works on the new WooCommerce admin and the Gutenberg blocks, so it’s some pretty cool new stuff coming down the pipes, and I’m excited to be a part of that team and to explore what WooCommerce can look like in the next few years.

Brad:
Why don’t you dive into that a little bit more? I’d love to hear anything you can share in terms of additional Gutenberg support, WooCommerce, and blocks we might expect to see in a future release. And maybe some of the things you guys are working on internally?

Darren:
Yeah, sure. I should say, too, one of the cool things about the team I was placed on is that prior to being hired by Automattic, I was involved with development on the Gutenberg project itself. I’m on the Gutenberg core team, so it was really neat stepping from that into continuing to work on the WooCommerce side. If anybody in WordPress isn’t aware of Gutenberg by now, that’s pretty concerning because it’s essentially the future direction for WordPress.

On the WooCommerce side, it’s really interesting because we’re looking at ways to improve usability for merchants managing their stores, especially for things where they may have previously needed to hire someone to customize. Now, with blocks, we’re designing experiences that let them easily customize aspects of product displays, the add-to-cart button, and so on. All those good layout customizations that used to be more complicated are now more straightforward, and developers can still add and extend their own blocks as well. This is important for us because we’re not just helping the merchants; we’re creating an ecosystem of extensions. So in terms of what’s coming, WooCommerce 3.8 was just released, and it includes new blocks like review blocks for displaying product reviews and a product search block for easy placement anywhere on the site that supports Gutenberg blocks.

In WooCommerce 3.9, something I’m personally excited about—something I’ve been involved in developing over the last four months—is something called the All Products Block. Essentially, it’s a concept of atomic blocks, where you can edit how each product in the grid or list appears. You’ll be able to zoom in and, for example, put the title below the product image, or color the product title, or move the add-to-cart button above the image. You have flexibility in how you design that, and when you save, it applies to all the products in the grid. This demonstrates the possibilities for other Woo elements, giving merchants more flexibility. And maybe in the show notes, you can drop a link to the beta version of our next feature plugin so people can see how it works.

Brad:
And that’s the WooCommerce Blocks feature plugin, right?

Darren:
Yeah, that’s right. We’re developing new stuff in a feature plugin, and once it’s tried and tested, it’s included in core. This is how we’re releasing things.

Brad:
I love that approach—quicker iteration through a plugin, and when it’s passed checks and balances, it’s a good candidate for core. It also gives extension developers a heads-up about what’s coming.

Darren:
Exactly. I highly recommend any developers who are concerned about changes coming to WooCommerce to check out these feature plugins, including WooCommerce Admin, which also gives insights into upcoming features.

Brad:
It’s cool to see. I’m curious—going back to the All Products Block, I love the idea of flexibility, but it’s also a bit of a curse. If you give users too much flexibility, it’s easy to make adjustments that could hurt your site or sales. So as you’re working on something like the All Products Block, what kind of discussions go into what should and shouldn’t be configurable?

Darren:
That’s a very important point. Our goal, especially with WooCommerce, is to help merchants succeed because that, in turn, helps us succeed. We always balance what we know works in the e-commerce space with the flexibility merchants want. One concept we’re looking at is “curated” views. For example, with the All Products Block, the default view would be ready to go as soon as you drop it in, but you’d also have the ability to drill down deeper if you want to customize further. This approach lets us maintain best practices out of the box, especially for things like carts and checkouts, where design can impact the user experience significantly.

Brad:
That’s awesome. I think it’s important that this message gets across—that best practices are the defaults. The All Products Block isn’t just something you put together and say, “Here, figure it out.” These defaults are the result of research, so if you start changing things, make sure you know what you’re doing or work with someone who does.

Darren:
Absolutely. Communicating the research behind our decisions is key. For some blocks, flexibility won’t impact much, but for blocks like cart and checkout, we may restrict what’s possible for good reason.

BobWP:
Yeah, I was thinking of the product search one, and hopefully some of this would be common sense. For example, if somebody thought, well, cool, now I can drop in the search bar somewhere more easily available to the customer and they drop it in right below the product, like the actual product description, something right there and thinking, well, maybe they didn’t find what they wanted, they can search something right away. But then the problem with that would be it would be too inviting to search right away and they might end up leaving something they wanted. So using something like that easily on a 404 page or something like that is where that comes in really handy. And it’s having worked with beginners and sometimes some of them just if you don’t have an agency to handhold you through the process, sometimes they just learn it by silly little mistakes they might make like that. And maybe even looking at it after a bit and thinking, is this really a good move or is this going to just really screw things up?

Darren:
Yeah, I’d love to get, just to the point at least, obviously I’m pretty sure this is something WooCommerce will work on at some point, and because I’m new to the ecosystem, there may already be a solution out there. I don’t know. But I’d love to get us to a point where we’re able to open up AB testing really easily for merchants where they’re able to try something and see how it works on their store. Because regardless of how much research has been done in a larger ecosystem, there’s always edge cases with people who have stores that may sell something really unique where it contradicts what the research has shown. So having AB testing allows the stores to really target what works well for their particular case. But of course, that opens a whole can of worms in terms of what is good AB testing and all that stuff.

Brad:
Yeah, I mean I love that approach. I love AB testing. Sometimes testing something as simple as the text on a button for “Add to Cart” or “Purchase” or whatever you want to put there can have an actual major impact.

Darren:
It can.

Brad:
And having the flexibility within Gutenberg to modify some of that stuff via block customization versus going into code is going to open that up to a much wider range of users to do that. I recommend Crazy Egg a lot. It’s a really cool service for that. There’s some other ones out there, but just heat mapping, doing even recordings of people on your website, AB testing based on some of that data. Sometimes the results are, like you said, pretty astonishing.

Darren:
Yeah, it is.

Brad:
So anything to help with that I think would be awesome, especially on the small business side of the house, that’s usually smaller budgets. Maybe they’re managing their own store versus hiring an outside agency to help manage things like that, that they could actually get into some basic AB testing and to see what’s working and what’s not.

BobWP:
Watching those things on… I think it’s the one service you mentioned where you can actually watch and record some of the live…

Brad:
People moving around.

BobWP:
Yeah, sometimes you wonder, are these people drinking while they’re on my site? What are they doing? Really? It is a learning experience for sure.

Brad:
I mean, we’ve run it on our own site and found where we had maybe text on a certain page and there was an arrow and they were clicking the arrow, assuming it would be the link, and it was the text, and it was like, oh, okay, I can see how that’s confusing. So we went in and made the arrow a link, just silly stuff like that, but it was frustrating for that user and it was quickly identified that that was a problem and we fixed it.

Darren:
Yeah, it’s pretty amazing how, like you said, some simple things can make a big difference in WooCommerce. We do internal user testing on different designs and concepts that we’re thinking through, which I think is huge for the merchants who use WooCommerce because they’re getting the benefits of some of that customer testing for their customers that will be using these products out of the box. Again, it’s important for them to have.

BobWP:
Yep, we make too many assumptions sometimes, and they’re not always—you got to really take several steps back and think of just, you’re not a web developer or a designer, you’re a normal person now and you don’t know all the bells and whistles.

Brad:
And they’re compounded with the idea of if you’re staring at the same thing, a store owner’s got to know their products inside and out. They’re going to know their product better than anybody. And if they’re always staring at the website trying to figure out how to improve it, they might be too close to it, who knows? But sometimes stepping back to test things is the right way to go. So very cool to hear that’s coming. When can we expect… you got any tentative dates around some beta testing on the cart or checkout process blocks? That sounds super interesting.

Darren:
We haven’t got anything released on that yet. Is that what you’re asking?

Brad:
Yeah, a little too early to give us some hints on when that might start showing up.

Darren:
Yeah, it’s very early in the stages where we’re just mostly talking about what it might look like. I think—I may be wrong—but I think there’s some history with wanting to improve the cart checkout default in Woo. So I think it’s just something that’s finally getting, or is getting some movement now, but I think that’s something that my team is going to be working on in the near future. It’s one of their next things we’re investigating, but we’re still early in the design user testing stage of the design. But it’s exciting stuff.

Brad:
Yeah, I think what strikes me as why that is so interesting, obviously it’s the most critical component of the store is people being able to check out and pay you. But I feel like that is a use case of Gutenberg in a really interesting way where the products grid and working with products, and that all is kind of traditional Gutenberg, if you will…

Darren:
When…

Brad:
You start modifying a shopping cart or a checkout screen that isn’t… you know what I mean? So I think not only from a WooCommerce standpoint, but just WordPress and open source standpoint, seeing those types of Gutenberg use cases that are outside of just working with content data…

Darren:
And with the post editor particularly, right?

Brad:
Right. That’s like the next phase of Gutenberg that we’re all kind of getting excited about. So having somebody as big as WooCommerce on the front lines of that saying, yep, we’re doing it and this is how we’re doing it, will be extremely validating to Gutenberg and to the community. I think it’ll be really fun to see when that the beta and the teasers start coming out around that.

Darren:
I agree. I agree. One of the things that I see happening in the next few years even is seeing more of that happening where… see Gutenberg itself, the editor is kind of the major presentation of Gutenberg, which people are used to seeing right now—I should say the main interface to Gutenberg. But the concept of blocks is really, I think, where Gutenberg shines because on the development side, behind blocks are components which are individual units of constructing a view, and these components may be wired up to data or different sources, that kind of stuff. But that opens up the door to really streamlining the generation of different views and different contexts in a way that’s reusable. So one of the things that I think we’re going to see happening is… even I’ve been watching the community as well and still involved… the WordPress project is WordPress components. The package which contains a lot of the components that compose the blocks is going to become more prominent as a source for common design elements that can be used throughout WordPress and outside of the WordPress context. So definitely with some of this stuff we’re exploring for WooCommerce, we’re really grabbing on to this components idea. The WooCommerce admin itself is using a lot of WordPress components out of the Gutenberg project, so it doesn’t even look anything like Gutenberg, but it’s still using some of the behind the scenes elements of Gutenberg and the things that the Gutenberg editor interface uses. So think of blocks too. I could see the, for instance, WordPress dashboard page, what we know right now… that could be blocks really. So there’s lots of examples how this concept of blocks, which is really I think what the main thing that Gutenberg brings to the table can be used throughout the site, and I’m excited about that.

Brad:
Yeah, I think it is exciting and just again, kind of going back to the idea of a company like Automattic WooCommerce, other large companies, seeing them kind of blaze the trail I think is important because there aren’t many companies of size within the WordPress community doing premium stuff or even free stuff to kind of push that needle. So seeing WooCommerce, like I said, it kind of validates it. I think it helps guide with some direction for smaller agencies, freelancers, shops, even one-off like plugin and theme developers. I think it helps validate the approach in ways that they would have trouble doing because they don’t have the audience and they don’t have the amount of people and funding behind it. So it’s cool to see WooCommerce especially lead that charge, and I think it is going to be kind of trailblazing in that sense. And it is exciting. You’re right, everything can be a block. It’s rethinking everything we know about WordPress development and hopefully as we’re seeing for the better.

BobWP:
And I think that’s why all three of us got into technology. I mean, if things don’t change and get more exciting, it just gets boring, boring.

Brad:
Boring, and if we don’t flip up on our heads at least every other year it would not be as exciting. And Gutenberg is definitely a head spinner. So it’s exciting times for sure.

Darren:
Yeah. Well, I was just going to say, one of the things that developers especially have to keep in mind and even with this whole topic of Gutenberg is it’s the potential it holds to make the user experience much better for the end user using the products. And I’m not just talking about longtime WordPress users, which has its own set of challenges because people are used to using things the same a certain way. Even for WooCommerce, that’s a reality. We have people who are used to the interface the way it’s right now. And as we start transitioning to a more client-first mentality with JavaScript running the show and all that kind of stuff, that’s going to be a challenge for people used to that interface. But thinking about new users coming into the ecosystem where they have less of a hurdle to get to use the stuff out of the box and customize things without worrying about shortcodes… Shortcodes are a super powerful thing. And once people get used to using them, that’s fine, but with blocks, you drop it in and you see visually exactly what you are expecting right out of the box. That’s like a light year ahead in terms of usability. And so I think that’s one of the challenges for any new thing, especially Gutenberg, is to try to remember the why behind what we’re doing. This is not just for something new to keep up with what’s happening elsewhere, but to really improve the user experience. And that’s, I think, one of the potential benefits of Gutenberg. The way I see it is doing exactly that.

BobWP:
Exactly. Yep. Good stuff

. Well, this has been good and despite the fact we had to do a second time, I say the second show’s better anyway, so I’m going to be optimistic here and go with that. So anything exciting going on before we wrap things up? I know we all were at WordCamp US and I know I was just at WordCamp Seattle and I’ve done two weekends in a row, so the furthest I’m going to travel is the kitchen and bathroom over the next few months, I think. Anything coming up for either one of you? How about you, Darren?

Darren:
Anything exciting coming up for me? You mean just in the WordPress space or…

BobWP:
Anywhere? Yeah, yeah. Or are you traveling to any exotic island and sipping Mai Tais? I dunno.

Darren:
Well, one of the perks of working for Automattic, we’ll say, is getting to meet up with your team in different locations. And so the first team meetup I’m having is in Kelowna, BC, and that’s in February. So I’m looking forward to that. I might get some curling in.

BobWP:
Cool. Alright. Alright, Brad?

Brad:
I’m not curling, although that does sound fun. It’s a good time of year for that right in February. So no, nothing on the radar. WordCamp US was the last one for me for the year. So now I’m just grabbing hold and riding through the holidays and making it to the new year.

BobWP:
Excellent. All right. Well, we did it. I think we survived the redo of the Do the Woo redo. That’s a tongue twister. Darren, thanks for putting up with my mistakes and coming back and joining us a second time. Brad?

Brad:
I’m used to putting up with your mistakes, Bob.

BobWP:
Yeah, I know. It’s been a while. Well, thanks, everyone, for tuning in and we’ll be back soon again. It’s another Do the Woo. Well, that’s a wrap for today. And if you enjoyed the show today, a review or a share is always appreciated. You can follow us on Twitter at Do the Woo podcast or subscribe on any of your favorite podcast platforms. Thanks for listening and make sure and join us again for some Do the Woo.