DE{CODE}: Front End: Building Future-Proof eCommerce Sites

The default WordPress Block Editor standardizes the way we integrate layouts and themes and it unlocks new features on the front end of your website. This makes it easier to maintain, change, and update your site while having less bloat, being more portable, and loading faster. But is the Block Editor right for your agency and your eCommerce sites? When is the right time to make the move? Hear from WP Engine Principal Software Engineer Mike McAlister in this informative DE{CODE}session to find out!

Session Slides

Full Text Transcript

MIKE MCALISTER: Hi, folks. My name is Mike McAlister, and I am a principal software engineer with WP Engine. I work on Team Genesis, and we are tasked with building the future of WordPress and kind of working on the bleeding edge of all things WordPress. You can find me on all platforms @MikeMcAlister. And yeah, follow me for more of this kind of content. 

Today, as you can see, the talk is about building future-proof e-commerce sites. We’re kind of at a new precipice in WordPress. New paradigms are being shown every day. And it can be hard to navigate that. And so that’s what we’re going to look at today, pros and cons of kind of moving forward with a new era of WordPress. 

So as I said before, I’ve been doing this a long time. I live and breathe WordPress. For over a decade, I’ve been kind of building WordPress products, WordPress businesses, bleeding edge stuff and all kinds of stuff. I had a theme business for a while called Array Themes, kind of a beautiful little collection of WordPress themes for designers, photographers, portfolios, et cetera. 

And then I started experimenting with the WordPress block editor. And that’s where Atomic Blocks came from. And this was a really kind of first of its kind plug-in, kind of getting started with the block editor. And I used it to help show others how to learn blocks and what’s possible, and kind of the code that you need to do it. So that was a really eye-opening experience. 

And then when I joined WP Engine, I started working on the suite of Genesis products, and we sort of brought a lot of that block technology from Atomic Blocks and Array Themes into the Genesis framework. And so it kind of powered a new generation of kind of theme building with Genesis Pro. And I also help teach WordPress creators how to turn these themes and plug-ins into products and product businesses with my Liftoff course. 

So that’s a little about me. Before we hop into this, let’s just do a quick refresher, right, because you’ve heard of the block editor, you probably use it, but there are folks who haven’t had a chance to dig in yet, or maybe aren’t sure what it’s fully capable of. So the block editor, as you may remember, three– about three years ago, maybe a little longer, was introduced into WordPress. 

It was probably the biggest change WordPress has ever seen. It was massive. It took us from kind of a lot of different meta boxes all over WordPress and kind of that stale old layout that everyone was used to to a more alive kind of active content building experience, where now we’re building our websites with little blocks of content and buttons and images. These things are all easily moved around into different layouts. And it’s just a much more powerful designing experience. 

But that was only part of the equation, right? That was like being able to build the content area is one thing. We’ve been able to do that for some time, to some degree, with short codes. But now we have the block editor. But the full vision is to be able to build your full website with blocks and patterns and all of these new tools. 

Parts of that have been released somewhat recently, in the past few versions of WordPress, but this summer, we’re going to kind of get the fuller kind of block site editing experience. And so I want to touch on some of that today because, again, with the paradigm of the blocks, now we’re going to have this incredible new paradigm with full site editing. And I really want you to start using it because it’s so powerful and exciting. And it’s going to be huge for everyone. 

So I get this question all the time, when’s the right time to jump into the block editor, right? People have hesitations. They’re not quite sure. I would say about two years ago is the best time, but you know, now is an OK time, too. With open source and these kinds of community projects, they get better the sooner people start adopting them, right? 

The sooner we start building with it and exposing the problems, the shortfalls, the pitfalls, the sooner we fix those, the more powerful it becomes. So I’m an advocate of getting in there early and building that kind of stuff. And that’s why I started with Atomic Blocks really early. It was probably the first block plug-in out there. But we all learned a lot from that experience. So there’s still time to get going on the block editor and full site editing. And we’ll see why here. 

So again, I hear these things all the time, the perception of the block editor, it’s expensive. If you’re an agency, I know how costly it can be. I’ve worked with agencies in the past, and changing workflows is expensive. You’ve kind of got your stuff in order, and to swap that out for a brand-new solution, it’s costly. And sometimes we don’t have the time to financially make that transition. 

I also hear that it’s unstable. People say like, well, it’s not quite finished yet. Is it ready for production? We do a lot of e-commerce stuff and money’s on the line, so we can’t really afford to have things go down. I get that. And then the other big thing is JavaScript. We went from a PHP framework to now WordPress has a huge JavaScript engine in it. And so again, that’s costly, because now you have to learn JavaScript, you have to train your devs. And that is also time and money consuming. 

But the reality of these things is that it’s quite different, actually. It is expensive, sure, but it’s only going to get more expensive over time. The longer you kind of put it off and the more you kind of get dependent on solutions of doing things the old way, it’s going to be a lot harder to transition, and transition away from some of these third-party plug-ins that maybe aren’t doing you any favors, which we’ll explore when we talk about performance. 

Also, whether or not it’s stable, it actually is quite stable right now. We have a robust API for building blocks. And plenty of Fortune 500 companies, agencies, there are plenty of reputable people building and going live to production with full site editing stuff. So it’s there. And again, we’ll kind of talk about getting in there and figuring out for yourself how powerful it is. 

And then JavaScript, if you’re a dev, and I’m assuming a lot of you are, you know that JavaScript is bigger now than it has ever been. And the same is true for WordPress now. With the power of the JavaScript engine and WordPress, that opens up a lot of opportunities for you, actually. 

It can be seen as like a positive because all the capabilities, but also you can now tap into a new cohort of developers that you probably wouldn’t have had access to before. A lot of people in the JavaScript community maybe overlooked WordPress before. Well now, guess what? I mean, it’s a huge opportunity for jobs for a lot of people. So I think there’s a lot of pros of having JavaScript in here, as well. 

All that to say, you know, WordPress, it’s not going anywhere. I mean, it’s growing massively. It’s almost 45%, powering 45% of the internet. And it grows still very healthily every year. It grows about the size of a Shopify market size each year. For reference, that’s, pretty huge. 

And like I said before, the longer we put this off, kind of adopting some of this new technology and figuring out how it fits into our workflows or our agencies or our freelance businesses, the more painful that is going to be. And you are going to want to transition eventually, simply because it’s going to be so powerful that you’ll be missing out on a lot by not doing so. So I say invest now. Set yourself up for, like, long-term growth, long-term e-commerce growth. And yeah, come on over to the block editor. 

There’s plenty of reasons to hop into this new technology– more control, better performance and saving money. I don’t know any freelancer or agency who wouldn’t be interested in any of these things. It’s sort of the cornerstones of growing your business, right? So let’s hop into a few of those. 

Yes, if you only knew the power of the block editor. This is something that I think people kind of get the idea. It’s like it’s new, it’s more powerful or whatever. But it’s one of those things where it’s like you really have to get in there and understand what’s possible from a development perspective, the kind of stuff you can tap into, the stuff you can do now that you could never do before. This is the stuff we’ve always wanted in WordPress, but just have not had the opportunity to have yet. So we are in, like, a prime opportunity here. 

Control. This is something that a lot of agencies need, right? When you have clients with specific needs, brand needs, or you need to put up guardrails, control and being able to have really fine-tuned, granular control over the whole thing is paramount. So for the developers, when it comes to the code base, there are so many more options now that you have a JavaScript-powered engine in WordPress. 

Headless is another thing that’s becoming huge. Being able to have your content and your presentation layer separate, WordPress provides you those kinds of opportunities now. And in fact, WP Engine is working on Headless WordPress, which is their Headless WordPress solution. And if you haven’t checked that out, you should. It’s super cool. It’s like, again, the kind of things developers dream of, being able to use WordPress for that kind of stuff. 

Again, for developers, you can choose your own JavaScript language. Although the blocks are written in React, you can write Vue You can write Angular. You could write Vanilla, if you wanted. It’s really up to you because it all gets compiled down and shipped, and it doesn’t matter in the end. And along with that, you can use your same JavaScript workflows. You can use integration CI/CD stuff that you hadn’t had before, automation build tools. All that is possible by kind of tapping into this new JavaScript future in WordPress. 

And again, I mentioned this, alluded to this earlier, but the pool of JavaScript developers that’s out there is huge. It’s massive. And so the sooner we kind of start adopting some of these technologies and bring these people into the WordPress fold, the more powerful the ecosystem becomes, the more valuable the solutions become, the products, the plug-ins. These things all rise when we start bringing that talent into WordPress. 

I mentioned before being able to shape and mold WordPress. That’s huge for being able to create custom apps, or just even launching custom sites for your clients. Now, it’s so much easier to modify the admin. Say you want to add a toolbar to kind of expose some of your e-commerce tools or data. That’s super easy now. They have options to be able to slot in into these different toolbars and throughout the interface fairly easily. It’s quite impressive. 

Similarly, you can go the other way. You can lock down the UI. Say you want to kind of control the experience a little more. You can totally do that now. And because it is powered by JavaScript, there’s a lot more control you have over, like, UI interactions. So the guardrails that you can set up, much better, much easier. 

And in terms of the experience, we’ve all had a situation where a third-party plug-in updates, it changes something, all of a sudden the button that you put here is now missing or it’s gone. Well, by kind of tying in yourself and being able to control the experience yourself, you can prevent those mishaps from happening. Your clients don’t see those issues happening because you kind of have more fine-tuned control over the experience. 

In terms of controlling your destiny, this is something I’m going to keep coming back to about third-party plug-ins. Plug-ins are great, but they can be detrimental, and you can build up a dependency on them that is not healthy. It can limit your growth, in a lot of ways. Being able to tie directly into WordPress yourself and kind of having that control, and knowing that the things you’re putting in are tested and maintained and can be updated at a moment’s notice, that’s huge, right? That’s like much more reliable than potentially relying on a third party to make a fix. 

And then finally, portability. It’s everything, right? We can’t have our content or websites locked up in proprietary solutions. It’s very costly, expensive. It’s dangerous. And we chose WordPress so that we don’t have that situation, right? So that’s important. 

Performance. This is something that we’ve kind of always been dealing with, but now it’s more important than ever because we just can’t afford not to have great performance. Google will not be kind to us. You’ve all seen this quote before, a single-second delay in page load results in 7% loss in conversions, fewer page views, and decrease in customer satisfaction. 

I don’t know anybody on the planet who would be OK with this, especially in terms of e-commerce and your customers. So if you have plug-ins that are loading extraneous files and stuff that you’re not even using and it’s costing you money, that’s something you have to look at very seriously. You have to take action and control your situation there. 

Again, don’t get me wrong, I love plug-ins. I use them all the time. But these powerful plug-ins are made to run on millions of websites. And when you have to make plug-ins that work on millions of websites, you have to add stuff that is not helpful for everyone. You have to add extra scripts and extra styles to account for different browsers. And oftentimes, this stuff all gets loaded for you. There’s rarely fine-tuned control to be able to turn this stuff off. So you’re getting the bulk of the whole plug-in, and you don’t necessarily need it. 

Now, if you’re a sharp developer, you can get in there and unhook things to kind of go a little faster, but still, I would argue at this point you could take that time and write some of the stuff yourself and, especially with the new pool of talent that’s coming to WordPress, take control there. You have more granular control over the build. You can do tree shaking, minifying, all these things are possible now. 

And so I think the sooner we kind of reckon with what kind of relationship we want to have with third-party plug-ins, especially on the page builder side, you know, now that we’re going to patterns and all of these awesome tools, you don’t necessarily need page builders. And a lot of these plug-ins are not really planning to transition to the block editor. So you kind of have to make a decision. You know, do you go with this plug-in that maybe helps you build now, or do you kind of start adopting WordPress, which is going to future-proof you, is going to give you the tools you need and the control you need? So there are some big decisions to be had there. I totally get that. 

In terms of page performance and SEO, we all know page speed and Core Web Vitals, they’re becoming super important now. It is the paradigm that we aim for. You want those green circles. And it can be hard to hit those, again, with some of these WordPress plug-ins because they’re loading all kinds of assets. And unless you get in there and you’re really kind of fine-tuning things and unhooking things, you’re going to be dealing with that problem. 

WordPress with kind of this new wave of developers in there, we all realize the things we need that we didn’t have before, such as being able to say you have a page with a bunch of blocks on it. Well, you don’t want to necessarily load your whole entire scripts and styles for all the blocks. You only want to get the styles that are loaded on your page. I’m sorry, the blocks that are loaded on your page. Well, now we have functions to do that. 

You can see down here at the bottom this Should Load Separate Core Block Assets function. Well, that will just scan your page, see what blocks are on your page, and only spit out those styles and scripts. And so you can see that we’re moving towards that more, like, performance tiny file future, where we’re only loading what we need. And this will get better. Again, as soon as we kind of get in there and start building, the sooner, like, WordPress itself can adopt these features and we’ll have them in core. And then we don’t have to have plug-ins because core has adopted them. 

A lot of folks are digging into this kind of performance work. You can see here I have a list. This is just a small sampling of people who are doing this great work. Follow them. Follow the people they follow. Pay attention to their retweets because there is a lot of brainpower going into this era of WordPress and a lot of smart people coming up with clever solutions every day. So yeah, follow some of these folks. 

Finally, I want to talk about saving and making money with this technology because, again, we’re talking about long-term growth, long-term opportunities with growing with WordPress. And there are so many new opportunities for generating revenue with this kind of technology, you can come up with all kinds of ways of providing new services and new products. And we’ll talk about that a little bit, too. 

When it comes to page designs and page builder plug-ins and things like that, I mentioned now we can replace these with patterns. Well, patterns are just basically page layouts, sections of page layouts that WordPress is implementing so you can build out beautiful pages. Well, being able to use patterns as a jump off point for every project so you build a collection of patterns that you can use for every client project, and then you customize them to the client, you can create a whole library of starter patterns that you can use for every project so you’re not having to reinvent the wheel every time. You’re saving that time. You’re saving that money. 

Another bit of new technology is theme.JSON. This is almost like a global way of styling your website, which we hadn’t had previously. So being able to load your patterns in and then make global changes to the styles of your buttons or your links or your header colors to, like, really fine-tune them to your client’s needs or your brand, again, these are things that would take so much time before, as you know, going back and forth between the editor and the customizer and trying to get things right. 

And then when you move the site, you have to do it again because WordPress doesn’t necessarily remember that stuff. These are all huge time and money savers now. So the sooner you adopt these things, like theme.JSON, global styles, and soon there’ll be typography controls, the sooner you start saving that money and making that money. 

Paring down your plug-ins is something I’ve kind of been talking about, but again, I think the sooner we start looking at maybe and questioning the things we have installed on our sites, do we need those, you might not need a caching plug-in anymore. There are plenty of hosts that have implemented caching at their level. And if you’re able to ship minified resources and smaller builds, we’re kind of getting to that point where big caching plug-ins, anyway, may not be necessary. 

Same thing with some of these page builders, as I mentioned. Can we offload that page building experience to WordPress now? Can we start using patterns with theme.JSON files and kind of building our own set of designs? I think we can. I think we’re almost there. And that’s not to say that there isn’t a use case for page builders for certain projects or anything like that. I think there is. 

But again, I think when we’re talking about long-term growth, the future of WordPress, the future of your business and WordPress, I see a simpler future, one that you’re in more control of. And I think the we’re seeing the start of that now. It can be hard to see in the moment, sure, but that is where we’re at. And so yeah, this is your opportunity to create the toolset that you want, that you need, that’s yours, that’s fine-tuned to you. And it’ll help you move a lot faster, way faster. 

And finally, this is something that I’ve also been writing about a lot. You know, WordPress is, as you know, it’s going through this transition. And with that comes the need for new solutions, right? Even the most common plug-ins, like a form plug-in that’s on every website, well, now we need block versions of that. 

We need better JavaScript-powered versions of that that we can customize right in the editor and change. And the market has been pretty slow to catch up to this. I don’t know if it’s because of a lack of JavaScript developers or– there’s a lot of reasons, but the point is the market’s wide open right now. So previous plug-ins that were like the top plug-ins for the past 10 years, you might be able to turn this stuff you’re doing for your clients and your sites into a product. 

In fact, it’s I’m seeing it done already. I started doing that with Atomic Blocks. I wanted to replace things like short codes, and started making blocks to do that. And simply because it was one of the few doing it, it became very popular very quickly. And so there’s a lot of opportunities to monetize and figure out new niches to kind of dig into. 

E-commerce, particularly, has a lot of difficult problems to solve, as you know. And customers, they pay a premium for these things because we’re solving really tough problems that they can’t solve themselves, especially time and money-saving solutions. So I can’t state it enough how much opportunity there is in WordPress right now. Like never before, the market is ready for these new solutions, these new kind of more intuitive, better UI, tighter builds. 

The customers are ready for these things, and they will pay money for them. Yeah, again, here, there’s never been more opportunity than there is now, especially for e-commerce stuff. I’m seeing more and more people looking for solutions. And the folks who are the best at it should be making these things for the block editor. We need to unlock that long-term growth, and that’s one way of doing it, turn your work into products. 

OK, so with all that said, where does one start? It’s a big task to start learning this stuff. The way I work and I think a lot of people probably work, it’s easier to learn by just building something. So whether that’s building a new thing or taking one of the things you’ve built in the past, a client project or your own personal site, try taking that, and if it was done with a page building plug-in or whatever, try taking that and building it in the block editor. 

I mean, no excuses, just get in there and start working with it. Make your first block. Turn a header or a feature section into a pattern. Figure out how the relationship between the setting sidebar with the content area and blocks and the different ways of tying in settings. There are all kinds of avenues to explore here. Modifying the UI, getting in and adding a custom button to one of the toolbars. Tie it to some settings from one of your blocks. 

These are all things that, again, these are fairly easy to do now. I’ve provided a few links here. There’s links to the docs, the block editor docs. But there’s also a repo, the WordPress GitHub– I’m sorry, Gutenberg repo, where they have examples of building specific things out. So they might say this is how you build a block. Here’s how you pull in data via an API. They’ve done a pretty good job of providing pretty detailed examples for developers. 

And then once you’ve built that, go through the process of launching it, or even mock launching it, because there are things that you’ll find after you’ve built something, that’s one thing. But kind of taking it live and taking it through the process of getting it on a production server and setting your site up to launch it, we all know there’s things that pop up in that little pocket of time, as well, right? So go through the process of launching it. Take note. 

And then I think at that point is when I started to realize this thing is ready, right? This thing’s powerful. This thing’s ready to go. Again, there are certainly going to be quirks with it, like there are any pieces of software. And we’re in the open source community, so the beautiful part about that is you can contribute back the things that you find and the little quirks you find. 

You can either simply just report it, which will get somebody’s attention and get it fixed, or you can fix it and provide a fix. And hopefully, that just gets merged in. So going back to what I said before, I mean, whether or not you adopt it now or later based on how stable it is, it’ll get more stable the sooner you start using it and reporting this stuff up. And I think that’s an incredibly valuable part of this whole thing, is that we have this opportunity, and it’s largely in our control to make it better. So I hope that you do. 

So anyway, yeah, where to start? Start here. Start to build something. Get in there. Make a few blocks. And you’ll see, I think. 

And that’s it. You know, again, I want to just encourage you to get out there, make something. Take a look at all the opportunities. And share it with me. Send it my way. Find me on Twitter @MikeMcAlister and show me what you’ve built or ask me any questions. All right, thank you so much for your time.