A Deep Dive into Block Bindings, APIs, and the LSX Tour Operator Plugin

Zach:
Hello and welcome to another episode of the Woo DevChat. I am here with Carl Alexander, as usual, and Carl, I see Carl board peeking over your shoulder there. How are the two of you doing?

Carl:
Always, always creeping out.

Zach:
Right? Right.

Carl:
I mean, he’s doing what he needs to do. Creep out people on Zoom calls and also scare children at birthday parties. That’s his retirement life.

Zach:
I am coming up on an interesting milestone. I believe the first time that we met was at a WordCamp Minneapolis and it’s just around the corner again.

Carl:
That’s good that you remember because most of my interactions with people are like, I don’t remember the first time I met you. I just know, I don’t remember not knowing you. We crossed paths so many times and I was like, but I don’t know when it was. I just don’t know when it was the first time. I think my most vivid memory of, okay, I really know this person was like, and we met a few times already, was at Pressnomics.

Zach:
Yeah.

Carl:
You were sitting in the lobby talking to someone, I don’t know who, but you were sitting in the hotel lobby having a chat with someone and I just remember, I dunno, that’s my most vivid memory of, okay, this is Zach.

Zach:
I think my most vivid memory was in one of the after parties. We were in a large venue and it was you, me, Michelle Schulp, and a few other people.

Carl:
Yeah. I think most people’s most vivid, vivid memories of me are after parties. I was going to say the same. If you ask Robert Jacobi, that’s all he talks about.

Zach:
Right, and I have to correct myself. It’s Michelle Schulp Hunt now. Congratulations, Michelle.

Carl:
Oh yeah, Michelle Schulp Hunt. Yes.

Zach:
Yeah. So WordCamp Minneapolis is right around the corner. It’s coming up on August 16th. I will be there. It’s at the Mall of America this year. So if you’re listening to this episode and you are anywhere near Minneapolis St. Paul, please come join us. Go to Minneapolis dot WordCamp dot org slash 2024 and I would love to see some of you there. Maybe we can have an onsite dev chat with some of the people. So yeah, I’m looking forward to going.

Carl:
Exciting.

Zach:
Yeah, it’ll be a good time. And then right around the corner after that is WordCamp US in Portland.

Carl:
Yeah, so I’ll be there.

Zach:
I will definitely be there as well. And it’s going to be, I think, a really good camp from everything that I’m seeing. The venue looks cool now. Everything looks like it’s going to be a good time.

Ash:
Is it going to be Portland weird?

Zach:
I think so. And I think that you may have just introduced yourself. So for anybody who is wondering what the third voice there is, that is Ash Shaw. Ash, why don’t you give us a little bit of an introduction of yourself?

Ash:
Hi, I am Ash. Yeah, I’m 43 now. I started my career in tech back in ’99 when Microsoft was trying to find cheap labor. So they came up with MCSE. I quickly learned that that wasn’t really that much fun and we’ve got a great Linux community in Cape Town called Plug Cape Linux User Group. I discovered them through a friend and a few people in the group showed me some tricks. I fell in love with open source, more specifically open source in the broader term. I got a CIS admin job at a university. Moved on from that to starting Lightspeed Development, which I shortened to Lightspeed back in 2003. We moved to working with WordPress in about 2007. The inspiration came from something called BarCamp. BarCamp Cape Town. They were kind of informal community organized events, not about specific tech, but about tech in general. I met a very interesting person back then, Jeremy Thurgood, who was working on Amazon’s cloud infrastructure way back then. I just remember he had this bizarre device attached to his laptop that was a security device, so anything in and out of his laptop was encrypted. Back then it was a brick of a laptop with this giant device attached. Very bizarre.

Carl:
That’s crazy. I’d never heard of that, but that sounds like really…

Ash:
I’d never seen that again.

Carl:
Yeah, it’s like crazy. And I did some work with law firms, so they were pretty security conscious, but the best we had was the original RSA 2FAs.

Ash:
Yeah, to be honest, I don’t remember what it was exactly. I just remember he said it was to encrypt the data and anything going in and out of his laptop. Yeah. Then I met another chap who introduced me to WordPress and blogging and I realized that there was a whole community behind it and communities have always intrigued me and I’m a social person, so I started getting involved in trying to find more events and then I think it was one of the first 10 WordCamps that happened in Cape Town. Matt Mullenweg attended. It was back in 2008. It was what sparked a serious round of inspiration and drive to actually learn more. My lead developer is still with my company. He joined us back in, I think it was December 2006. So that was a long time ago. And we’ve had an interesting journey through the different versions of WordPress and we built for a political party, the Democratic Alliance. We built a multi-site blogging network on an initial alpha of BuddyPress. We’ve never done that again.

Carl:
I wonder why. I wonder.

Ash:
It was the first forever. My lead developer said never again if I’m going to continue working.

Carl:
It’s so funny. One of my first projects at an agency with WordPress was around BuddyPress and I was like, what was the forum? The one that turned into the BBPress?

Ash:
The forum BBPress.

Carl:
It was BBPress. Okay, yeah. I was like, no, never again.

Ash:
No, they didn’t integrate properly.

Carl:
But it made it so complex.

Ash:
Yeah.

Carl:
It’s gotten better now, but it is still complex.

Ash:
I think Andy Peatling, who originally worked on it, I’m not sure if he’s still involved, but I know JJJ, he’s…

Carl:
Not, he’s not. He’s at Automattic. But I met Andy Peatling when we were using BuddyPress because I used BuddyPress as my initial way of structuring complex code and large code bases in WordPress. That was the only large code base I was aware of. So he came to WordCamp Montreal and I remember talking with him and just saying thank you. I would have no idea how to structure this code. Just like we were doing really large projects. And I’m like, how do people do this? It’s like, this is insane. And then the only example we had was BuddyPress.

Ash:
Yeah. So the BuddyPress was quite interesting. I worked with it for quite a while. And then my passion for the community and all of that drove me to organize a couple of WordCamps in Cape Town. Then I handed over to the community in 2014. I remember it was the last WordCamp San Francisco, and I managed to get in to join the WordPress Summit where we mapped out the next year of the roadmap. It was really fascinating. And somebody at WooThemes, I was complaining to them about Canvas theme and how they kept making changes and they kept breaking all of our site’s CSS classes changing and this and that, and it was a nightmare. And he said, well, if you have a problem with it, build your own. And I thought to myself, good idea. And we based it on underscores initially and that classic theme. We were stuck with Bootstrap three until, well, it’s still got Bootstrap three.

We didn’t know how to change that. And then last year we built, or the previous theme is LSX, the classic theme. And then last year we built LSX design, which was a block-based theme, and that meant we almost had to relearn everything. I took a bit of a sabbatical in 2020 to 2021, a one-year sabbatical. And when I came back in 2022, I started researching things again and I was like, what is happening? Everything’s changed. And at the WordCamp Porto I was inspired to go down that rabbit hole. And you guys mentioned ADHD. Well, I’m in the same boat and I went deep and yeah, it’s been a great journey, I must say, figuring out where to take this product, learning all new skills. My team has been on board and we’ve had a blast.

Carl:
I think that’s why a lot of people with ADHD like to be solopreneurs or start their own thing and stuff, because a lot of ADHD people that I know also just love learning. They love learning new stuff. You get a nice dopamine hit whenever you skill up at things. So what’s the easiest way to skill up at is to just do a whole bunch of things, which business requires you to do.

Zach:
It’s been a journey I’ve gone through multiple times, right? I’ve talked about this on the show before, but I was a flash developer and I don’t know if you’re aware, but that kind of disappeared overnight. So we definitely ended up having to retool a whole bunch of us into new technologies. And that’s how I ended up finding WordPress was as part of that retooling. I actually learned UX and went through a whole bunch of UX courses during that time too. And my first job after Flash was in

a role as a UX architect, so I stepped away from development for a little while and broadened my horizons a bit and learned some design, learned some other things around what makes good user experience, and then came back to development and WordPress basically full bore after that. And the gateway to me really getting involved with WordPress was WooCommerce, and that’s why I’m here. So yeah, I mean that whole learning new things, it’s something that we are remarkably good at when it’s something we find interest in. The problem is if we don’t find interest in it, it’s very hard for us to then focus and work on it. At least I find that for myself, if I’m not interested.

Carl:
I’ve had the luck that I am pretty good at delayed gratification. So that really helps I think for that because yeah, it’s really easy. I know a lot of people that are like, oh, and they’re shifting to new things right away, and it’s hard to stay focused and do the consistent work that is required to get good at anything. Really.

Ash:
The WooCommerce software got launched at WordCamp Cape Town 2012, and that was one of the events I organized. And at that point I was working with WPEcommerce by Dan Millwood and Jeff Ward.

Carl:
Yeah, I remember them.

Ash:
I think Dan Mill moved into gaming. I’m not sure what happened to Jeff. He was a really great developer.

Carl:
Yeah, I remember Dan. We were in a couple of private Facebook groups together. I hadn’t heard his name in so long, but yeah, I remember when because they tried to get it back up and going for a little bit and then you moved on to something else.

Ash:
Yeah, gaming.

Zach:
So my first real introduction to WooCommerce was building a digital marketplace for a record label that I was a part of. And so all digital, all downloads, and that was a benefit of WooCommerce that most other e-commerce platforms didn’t have at the time was the ability to create a digital marketplace really easily. We did that for every artist that was on our record label. We had a website where you could buy all of the music we had, and that was 2012 that we started the project for that. And that was built on the white light theme from Woo and just very, very early days of WooCommerce.

And last month we had Beka Rice on and we were talking about the wild west of WooCommerce development. And back then there was a board where you could go and choose plugins you wanted to develop. And that’s how all of the plugin development that became the marketplace started was with a board of ideas that people claimed things on. And so it’s really kind of interesting to see where we are today, and probably more importantly for this conversation to see that WooCommerce itself is inspiring some of the things that other people are doing, yourself included. So why don’t we talk just a little bit about where, first of all, you’ve done a large update to your plugin and that’s the LSX tour operator plugin, and you’ve been using some really, really new cutting edge features and WordPress. But first let’s talk about the inspiration that you drew from WooCommerce as you started this process of rebuilding your plugin.

Ash:
I’d say it all started with the block theme that we developed last year. We were working with Frank Klein from WP Development Courses. He was mentoring our team on block development practices, best practices, things like that. What an amazing man. He has a wealth of knowledge, I swear. He lives on the GitHub issues for WordPress and Gutenberg. You mention something and he is like, oh, well, and he goes and digs up a ticket that he was the one who either started or facilitated a bunch of information towards. So then because my company is a Woo expert company, we wanted our theme to be deeply integrated with Woo blocks. That was a bit of a nightmare last year and still somewhat of a challenge this year, but in the past six months, I must say it’s gotten better, exponentially better. So we decided to add support for a lot of the block themes. I mean, the blocks that were beta blocks because I didn’t really like the original blocks, to be honest.

The product blocks that they had, they had a number of separate blocks that they then replaced with the product collection block. And the way they did that, it was really impressive for me. It’s basically like a container. And then recently you would, when you want to add a product collection, it gives you a number of templates, like five specific templates and then one general kind of default one. And that really stuck in my head. Then another one of the blocks, which is still beta product collection, came out of beta recently is the gallery beta. And that one’s so much better than the old gallery block. And I have another e-commerce site back in South Africa. It’s a side project of mine, and I build that using my company’s open source theme, and it’s like a test ground for all of what we are doing. So when something comes out, I will test everything possible. I’ll try this config and that config and that config and figure out what doesn’t work. So then I write up GitHub issues for my teammates, and then they will add support. Either it’s new support for a new WordPress release, and I must say that 6.3, 6.4, 6.5 and 6.6 releases, they just bounce the functionality and capabilities radically. And then when I was at WordCamp Europe recently, I was demoing what we are doing with the Woo blocks to both the CEO of WooCommerce, and he and Pi were really excited about this. They loved what we were doing. We’ve got full compatibility for all their blogs.

And then we started on this venture of redeveloping our classic PHP-based tour operator plugin, which I was quite honestly scared of doing when we started building that plugin. It’s also an open source plugin, and it was built to work with our classic theme. And the reason it never really got adopted was because it only worked with that one theme. It was too much to actually get it to work with many themes. We would’ve needed to write so much code to add compatibility. Now with block themes and blocks, this opens a whole lot of potential. We haven’t done the testing with other themes yet, but I imagine that things are going to work pretty or better than ever they ever did in the past. So we’ve been looking at how I was just to unpack a little bit more about the tour operator plugin is it’s got three core post types with four or five taxonomies.

So you can imagine those are quite a number of templates. So these templates are needed to map out the block-based templates. They can’t all just run off essential all archives templates. They each need their own one because they have a host of custom fields. So what I’m working with my developer on is how we can approach this in a similar way to the product collection block where we’ll come up with hopefully one query loop type of block for all the post types, but realistically we’ll probably need to do a few for each of the main post types that we’re still experimenting with. So then another thing that I’ve got earmarked is the pattern assembler within WooCommerce for customizing the design.

I’ve been testing, it’s not in the main release yet from what I understand. I think it’s in a future release. It’s only in the beta versions, but I imagine if I had eight pairs of fonts for a tour operator site and the ability to then define site logo and site icon and all of that sort of thing through a similar interface that would radically reduce the time that we need to build sites. What we have done with quite a lot of success so far is migrated the many custom fields. So just to give you an idea, a single tour, we will have a couple of the main fields. It’s got its normal WordPress fields, title, excerpts, body, but then we’ve also got a, there’s a featured image, which is standard, but then we also have a hero image that could be a wide image that isn’t very tall or high. And then a host of values like price and day-by-day itineraries are repeatable groups of fields. So day one or day one to day three, we’ll then have a number of fields. We solved those in the past using CMB2, which is a good framework. It worked well for us. Have you guys got experience?

Carl:
That’s old? I’ve used it before. It’s been around.

Ash:
Yeah.

Carl:
I feel like I saw it almost 10 years ago.

Ash:
So we can bypass a lot of that. We need it for some of the things that we want to achieve, but with the block bindings API we’re able to hook into the original slugs that we’d created for the custom fields. And one of the things that we’ve developed for our tour operator plugin is an integration with a data partner. So they’re called whereto.com and they have two types of customers, accommodation providers and tour operators. The accommodation providers pump in their accommodation information like descriptions, rooms, all of that sort of thing. And then tour operators, when they create digital itineraries, they would say, I start in this city and I go to that city and I go to this region, and then they create a really rich media itinerary. But now to display that on a website, you could just embed it with an iframe, but that’s not great. So we built an integration to their rest API that literally connects to every single data point they have for destinations.

Carl:
You cache that?

Ash:
Well, we actually import it and we’ve set up triggers that it’ll poll a specified cron job to check at certain times. Is there a change? Pull it in. We’ve got rules that we can set up where if the WordPress side has been changed, then it won’t change. It won’t import and overwrite. Or maybe you do want it to, there

are a host of ways we can configure nonetheless, the where to importer.

Carl:
You happy with that?

Ash:
Yeah, it’s working really well.

Carl:
I’m a big fan of consuming API now. I think that’s way better than a lot of stuff that we had to do early on, like you said, iframes or I feel like that’s a nice change of the development landscape in the last 10 years as people are just like, now let me just do an API for this. And then they just let you pull the data and then you get it yourself.

Ash:
So much better. It does become somewhat unwieldy because imagine that you have 500 accommodation listings attached to 50 tours or a hundred tours and all of the images attached to that, and then the people who load the accommodation data, they don’t necessarily know that images need to be resized and whatnot. So we over the years had to develop methods to resize images on import scale things. And with the day-by-day itineraries, there aren’t actually images attached to an individual day. So we managed to create a way for it to automatically assign a random image to the day, for example. And that would be an image from the accommodation listing that’s attached to that day.

Carl:
Yeah, exactly.

Ash:
One of the things that we’ve done to interlink the different post types is to use a version of Posts 2 Posts by Scribu.

Carl:
I remember that. Yep. Oh my God. Yeah, he’s the OG WPCLI developer too, right?

Ash:
He discontinued development on that plugin, but that’s not an issue because we’ve modified it and brought it into our system.

Carl:
And it wasn’t a lot of code, if I remember correctly. It was easy to, if you wanted to just pull it into your own code base, it wasn’t a huge, it was one of those small plugins that do a lot, that can do a lot of lifting, but code-wise, it wasn’t like, oh, this is so big that there’s no way we can bring this into our own code base. It was simple. So it was good. It was easy for other developers to just look at what he did and bring it in.

Zach:
I think context is important here for people who aren’t familiar. So what the Posts 2 Posts plugin did was it allowed you to create many relationships between posts. And as we know, or you may not know if you’re listening to this, posts are everything in WordPress pretty much. So pages are posts. Posts are posts.

Carl:
It’s like the core data type of WordPress.

Ash:
WooCommerce orders are post types.

Carl:
Yeah, everything’s a post type, which is why the scaling issue that we basically were beating the dead horse of the high-performance order tables.

Zach:
Yeah, now that high-performance order storage exists, it’s not quite a post type anymore for orders, which is a good thing. Right.

Carl:
I was thinking about that too. You were describing your data model earlier and I was like, oh, I wonder how you were saying, I mean, you’ll have issues like scaling with anything with WordPress. You were talking about 500 accommodations and 80 tours, and that can have an impact as well on performance.

Ash:
With the importer, it does in time. So you can imagine the number of images that get imported into the database for each listing and all of that. So that’s something where we’ve learned how to manage the larger sites. Most smaller sites, it’s not an issue on the larger sites. We manage those on a case-by-case basis. But yeah, the post-to-post really helped us create the relationships. So for example, if you import a tour, you’ll have those accommodation items connected. You’ll also connect destinations. Destinations are hierarchical, like pages are hierarchical where you’ve got a top level and a sub-level. So a destination is to the top level is a country and the sub-level is a region. And those have different templates. So if you were on a country, you don’t display accommodation, but you do display featured tours. Tours move through a country, they also move through a region, but accommodation would only display on a region template, for example.

So yeah, one of the next things that we’ve got planned is obviously with all of this kind of data, searching for the information for the end user is critical. And we’ve used FacetWP for a long time and sometimes SearchWP, although I’m not sure that that helps the performance very much. It does sometimes help having a search engine. But FacetWP is a great plugin for our needs. So we built a little integration to the classic plugin. Now they have a block. It’s just really for short codes. It’s not really a true block, and we do some styling around that. Ideally, what I want to be doing with in the future, and it’s on our roadmap, is something like Woo filters where you’ve got your active filters, your price slider, filter by post type, filter by taxonomy, filter by featured, and something that we have that filtering on archives being your top level or category top level for a post type being all tours or a category archive.

And those filters can be relevant to that post type or that category. But then what happens when you search globally, because a lot of people want to search the site globally. So then we’ve come up with a solution using Facet WP where one of the filters will be content type. So say that user does a search in the header for Cape Town where I’m from, and it comes up with blog posts, pages, destinations, tours, accommodation reviews, special offers, and maybe a team members even attached to mentions Cape Town. So then that filtering allows you to filter by content type. So that’s something we haven’t started with that yet, but I mapped everything out for it today actually while I was chatting about things with my developer.

Then the checkout block is something I want to start pulling apart as an inquiry because I would like customers in the future, or not customers, but users of the plugin in the future, not to have to depend on a form plugin. And I was thinking that if we could do something like a checkout block, but an inquiry block where I drop it into either a section on the page or a mode or something like that, that would be really great to post that information to a post type like orders, but it would be inquiries. And if you think about the block bindings API, so if you’ve got a single tour, we’ve managed to get the vast majority of fields to output properly.

One thing I’m not sure how my developer is going to solve, but he has a plan is as I mentioned, that repeatable field, we have repeatable fields for gallery images as well. So if you add an image, you need to add alt information, alt tags, you need to add maybe a caption or you add a host of info. So that part that’s on the roadmap. But we are very happy with the first part of the rebuild. A lot of it was done via the site editor and I did that and with the help of my developer. Then once I designed all the layouts, he would help me add some of the block bindings code to the plugin, then I’d work with it a little bit. I’d do some designs, he’d take my block templates, he’d put them into the plugin, and then I’d do some more and back and forth like that. So it’s been a really fun journey and amazing to push the limits of the site editor.

Carl:
Yeah, because that’s all relatively new too.

Ash:
Yeah, exactly.

Carl:
Do you feel it’s stable enough? Like you worry that they’ll, one of the things that with the Gutenberg experiment is that things have not been always that stable.

Ash:
So one of the things that I’m a little bit worried about now, we’ve looked into it, and again, my worry has a plan for that, but that is the change of the theme to theme JSON 3, where there are now defined spacing values that are within the theme JSON and or name spaces. I’m not sure what the correct terminology is. And also for font sizes or font names, should I say the sizes? You can decide because when we started last year, I was in discussion with Carolina who had done an audit of a hundred block themes, and she had taken the average of different naming for both spacing and for font sizes. So they’ve changed a few things from what the average in the community was, and that is going to probably cause HAC because then those changes, either we are going to do a find and replace in the database or I’m interested to see how we do that. And I just redeveloped my company website, so I spent a lot of time setting font sizes and setting spacing and using our own theme JSON values. So I imagine that’s going to take some time to refactor.

Zach:
So it’s my understanding that it only uses the new defaults if there’s nothing set in the theme already. So it shouldn’t override anything.

Ash:
No, it won’t. But I’m somebody who likes to do things the WordPress way, and I would like future sites that we develop to use the new naming space namespace. And I think rather following what the standards are than trying to do your own thing is a better approach. And it’s becoming much easier to do that with theming, with block themes now, before it was the Wild West with themes, I mean classic themes that developed their own options frameworks, and that was a nightmare. So I want to steer clear of that sort of thing.

Zach:
Yeah, I think we’re finally getting out of the world where the theme could be a kitchen sink theme, right? Where it included a whole bunch of functionality that wasn’t in any way related to anything it needed to be. And so I think we’re finally moving away from that with block themes, and hopefully we’ll get away from the world where people had this necessity to package 482 plugins with their theme just to

make it look like it had more functionality than it did because that’s been a horrible practice the whole time. And that’s what I call a kitchen sink theme, right? It’s everything and the kitchen sink.

Ash:
Indeed.

Zach:
Those are really, really horrible practices to just have a theme do more than theme, right? That’s plugin territory and always should have been, but we ended up building themes that did way more than just the visual theming of a site. And so I think this starts to refocus themes as being themes and not theme plus functionality. Patterns are a theme-related thing. And the ability to set patterns in your theme JSON for your theme and share patterns that you’ve created in the pattern library is huge, right? That gives us new design capability. It doesn’t relegate us to only being able to use the things that are available inside the available blocks. We now have these groupings of patterns that are also available. And it looks like in your theme, you have a number of patterns. They actually look really great, and you have all of these available to make sure that people have all the building blocks they need, plus all of these design templates to start from as they’re building.

Ash:
Yeah, the patterns were an interesting journey for us when we started. We didn’t know what to do to be quite honest. Now we have a much better concept of how we could use patterns and what we need to use them for. So the patterns that are in our C1 WordPress dot org are quite literally following what a lot of people in last year were doing. Frost wp, for example, was our inspiration. So then we made some changes to our color scheme and the patterns aren’t looking great at the moment, so I’m busy working on some patent changes for next week’s release and we’re going to be sorting out colors and that sort of thing. As we were talking about earlier, the learning i dopamine hits, well, it was a bit of a light bulb moment when I started creating some patterns for our own company website in the most recent rebuild. And now I know what full page patterns I want to create, and those full page patterns are going to be made up of useful smaller patterns, not just random team patterns and random testimonial patterns and things like that. I know what I want now. I just need to finish building them.

Zach:
I think the other really cool thing I saw that you’ve done is you’ve actually released a Figma design system document that fits alongside your plugin and it’s a design system in general. You have a style guide, but you’ve made extensive use of Figma variables. And I think that’s huge because I’ve been digging further and further into Figma lately. I had a baseline knowledge, but I’m really digging into components and how creating components with variants works and being able to build a library of interactive things that you can build your prototypes with. And the power is just so deep in what Figma can do. So seeing that you’ve built a toolkit that’s built very similarly to the way that I’m trying to do the work that I do right now in Figma is pretty cool.

Ash:
That was an interesting journey as well, because we started the Figma file last year and we created three separate files, a style guide file, a WordPress file, and a WooCommerce file because we thought that was a good idea to separate them. It would be if you were in a large organization doing a large design system for IBM or something like that, or Uber, A lot of them do these separate files, and that’s where I took some of my inspiration from. But then this year we decided when we did a radical upgrade on the design system to merge everything into a single file, and we started with the LSX design theme, and we called it the LSX design system.

And there we created two sections within it, major sections other than the style guide and the cover, and that was for the WordPress pages and elements. And we broke those down by components and then blocks and then patterns and template parts and full page layouts and templates. And then we did a WooCommerce section in a similar structure. And then recently after WordCamp Europe, as I mentioned, they really liked what we were doing. So I got the idea to showcase what we’re doing with WooCommerce in a prototype. And my teammate, Zared, has done the most incredible prototype. The Woo prototype actually allows you to add to cart and you can add up to four products to your mini cart. You can view the mini cart, you can empty the mini cart, you can search. It’s insane. And we really pushed the limits of variables.

And last year, none of that was actually possible because what we were researching was the lead designer, I forget his name right now, the lead designer from GitHub was working on design tokens and it was a separate system. And we stumbled, I stumbled upon it through the WordPress vip.com websites and their blog where they were doing stuff in Figma and then exporting to theme JSON and pretty much populating the theme JSON with the colors and fonts and values that you would need or that you were working on in Figma. That was really powerful. But now this year, Figma has next leveled it. And when we started on the LSX tour operator design system, we put so much work into the variables and the naming conventions and all of that, we forked the file on the LSX design file, and we came up with that as a basis for the tour operator plugin came up with new colors because it has a different color scheme. We’ve gone from more of a safari color scheme. And then we left the Woo prototype in there while we were generating the tour operator prototype. We could only start that obviously once we’d finished all the templates for a tour operator.

And it’s been an interesting revelation because the WooCommerce prototype was very much variable heavy and quite technical and interactive. Whereas the tour operator one is more of a clickable prototype. There’s less that you can do with it. We don’t add anything to a cart. We also don’t really need to test doing filling in a checkout form or something like that. So that sort of thing is unnecessary. And we decided to focus on creating a very clear prototype design that will guide us for the coming months of our development on the tour operator plugin. So that’s, I’ve got to say, been very rewarding and satisfying. My teammate, Zared, has in the space of four months, gone from zero Figma knowledge to advanced Figma design. He wasn’t even a designer before.

Carl:
That’s awesome. That’s awesome. Now I want to be an advanced Figma person. All I’ve had is Figma stuff shared with me. And then I just look at it a bit and it’s like that’s the extent of my interaction is with Figma. I’m kind of hyped up just hearing you talk about it.

Ash:
It’s really, it’s amazing. And their videos on the YouTube channel, their own videos are incredible. They all come with Figma files, workspace files, you can learn so much. And unfortunately, they made a radical interface change this week. I think it was this week. I opened it up on Monday I think it was, and I was like, what’s happening? Where is everything? My teammates had the same thing. We needed to get stuff done, and the two of us were faffing trying to figure out, oh, where’s this? And where’s now we’ve got it. But it was the most radical interface change I’ve seen in an application in ages.

Zach:
Yeah, they announced all of that at Config that they were going to be changing the UI considerably. And just to bring this full circle to where we started today with talking about history, I have known Sho Kuwamoto, who is the VP of product at Figma, and I’ve known him for a very long time. He was the senior director of engineering at Adobe for the tools portion of Flex and was very responsible for the creation of Flash Catalyst, which was a design tool for the Flex framework. And so he’s been at Figma now for nine years. And so a lot of the beauty of what Figma is came out of learnings that happened in the Flash world. And so very, very cool stuff. And we are now seeing the benefit of all of that history. And so if you are interested in any way in learning a little bit about that history, there was a session during Config, which is Figma’s conference for those of you who are listening who don’t know about the impact of Flash on Figma and in general on the world. And so if you want to see where all of this stuff that we’re doing now came from back in the final days of we were innovating very quickly, and all of those innovations JavaScript has finally caught up to. So there’s been a very large gap in time that the things that we used to do in Flash have not been possible, or at least not as easy to do by any means. And so now we’ve gotten to a point where it’s all come full circle and tools like Figma exist because of that history. So really, really cool stuff. So I think that’s a really good spot to start to wrap up here today. It’s been really great getting to know some of your processes here. And I’m sure we could probably talk for another hour or two, but I think that Bob would give us trouble.

Carl:
We never got to the questions I have from pre-show. So definitely.

Ash:
I think that Bob might get in trouble if we keep him much longer. So I’m trying to not hashtag Bug Bob too much. I’m still trying. It’s going to happen. So if you’re listening to this and you want to help me make Bob smile, just post something with hashtag Bug Bob, and let’s see if we can get a whole bunch of things in his inbox. Go ahead and tag him in too @BobWP and let’s have some fun with that. But it’s really a remarkable thing that you’ve built so much on the new functionality that’s

in the block editor, the block bindings API is very new. A lot of these things are cutting edge, and it’s really cool to see some of that happening. And so I think it would be great to have another conversation at some point in the future. But before we do that, let’s go ahead and wrap today up. So Ash, where do people go to find you on this collection of tubes we call the internet?

Ash:
So our company website would be a good place. We’ve got LightspeedWP Agency, that’s for more agency-related things, or our product website, which is LSX design on the web. Generally, our social profiles are Lightspeedwp. So if you look at GitHub, YouTube, Twitter, those three are all LightspeedWP and Facebook and Instagram are LightspeedWPdev.

Zach:
Very cool. And before we close up here, I just generally ask Carl if he has a final question.

Carl:
We got to save Bob today. We got to save Bob.

Zach:
Okay.

Carl:
I was just excited by the Figma stuff.

Zach:
It’s really neat.

Carl:
I lit up at that because I was just like, for me, I think, and probably for a lot of developers and even yourself before you got into it, Figma for me is like, it’s a designer tool. You do mockups with it, and that’s about it.

Ash:
Well, I’ve posted two blog posts yesterday. I posted a blog post on announcing the new LSX tour operator design system and our process and a number of things just to explain more about how we got to the end point. And then today I posted a blog post kind of in preparation for this, about our journey from classic to cutting edge. That’s what I called it.

Carl:
Bob will link those in the show notes.

Ash:
Exactly. So there’s a lot more information there on exactly what you wanted to know.

Zach:
Very cool. Yeah, I’m sure that there will be a lot of people that have an interest in the other things that you’ve done here. Those blog posts are great resources. That’s part of what I was going through while I was asking questions here. And we will link some other things to the show notes for this show that we’ve talked about, things like FacetWP and that new store designer in WooCommerce and some of the other stuff. But yeah, I really appreciate the time you spent to talk with us about your process here. These are always really interesting conversations, and I’m glad that we were able to dig deep on some of the things. Let’s talk again in the future here. We’ll work out when, and we’ll have you back to talk some more.

Ash:
Well, thanks for letting me talk about my passions, and it was an absolute blast. You guys are very interesting, and I’m sure we could go on forever.

Zach:
We could. Well, as always, if you have any ideas for what you’d like to hear here on the Woo DevChats, Carl and I and Mike and Marcel are all open to ideas to hearing your feedback. So again, that’s hashtag Bug Bob on every social media platform, just to let him know what you want to hear or go to DotheWoo.io and let us know there. And we really appreciate the fact that you sit here and listen to Carl and I geek out with a guest every month. So thank you for being here, Ash. It’s been great getting to know you and we will talk soon.

Ash:
Cheers.

Carl:
Talk soon.