WordPress Core and Blocks with Grzegorz Ziółkowski

Do the Woo - WooCommerce Podcast, Community and News
Do the Woo - WooCommerce Podcast, Community and News
WordPress Core and Blocks with Grzegorz Ziółkowski
/

The talk around blocks has been with us for awhile. And with everything moving at the pace it is in WordPress core, there’s always room for more talk. As we bring more peeps from WordPress core into the Woo conversations, this time around we are chatting with Grzegorz (Greg) Ziółkowski who works diligently on blocks and JavaScript in core.

We catch up with what’s happening and get some insights from Greg on how WooCommerce blocks play into the bigger picture.

A Chat with Grzegorz

Mendel and I talk with Greg about:

  • The potential for blocks and how it might change the experience and extensibility of WordPress
  • How WooCommerce is ahead of core in terms of how it uses blocks
  • What makes blocks so special that they belong in core
  • The opportunities and challenges from Greg’s point of view for WooCommerce extenders
  • Where he sees blocks going with WooCommerce
  • If the direction of blocks will change the way site builders (plugins) operate
  • The best ways to stay on top of blocks in WordPress core

Connect with Grzegorz

More useful links

Thanks to Our Pod Friends

wayflyer

Don’t forget to check out Wayflyer, they specialize in revenue based financing to help your clients with their marketing and inventory at wayflyer.com

Elastic Press by 10up. Getting the right search solution is a no-brainer for you or your clients Woo shop. Check it out at elasticpress.io

Mendel: Ladies and gentlemen, cats and dogs, people of all ages. Welcome to Do the Woo episode 118.

Bob, I am so excited to be here today. How are you doing?

Bob: Excited that you're excited to be here and I'm excited that you're welcoming them all, our four legged friends too, because that's important to do.

Mendel: Yeah. Well, you know what I'm thinking about inclusivity these days and I'm thinking, let's have everybody listening to this podcast. Let's invite people from outer space, anybody really? Because everybody needs to know about a WooCommerce, Do the Woo and the good things that we're doing on this podcast. The good things that you're doing on this podcast.

It is heating up here in LA. It was like 80 degrees one day and that's pretty hot.

Bob: Yeah, that's too hot for me. Yeah. I like it where I keep it in the sixties. And low seventies is our usually our highs and I'm fine with that.

Mendel: But the water's nice and cold there all the time, I know that. Here I've tried dipping my toes in a few times, but it never works out well. My foot freezes the second it touches the water, but nobody wants to hear about my feet.

We have a really great guest today, but before we get into that, I just want to thank our sponsors. Now we have some pod friends they're really cool way.

Wayflyer is helping Woo DTC merchants improve their cashflow to accelerate growth through revenue based financing. They're the only trusted funding partner on the Woo marketplace and are featured in the Grow Your Business collection. Sign up is free and takes five minutes. Check it out wayflyer.com.

And of course we have 10up as a pod friend too. Supercharge you e-commerce stores search with Elastic Press by 10Up. Lightning, fast search with support for faceting and auto-complete. Give your customers the experience they expect. Use promo code, DOTHEWOO. You know, what Do the Woo is. DOTHEWOO at checkout for 10% off.

So those are our pod friends. Cool people. Well, Bob, why don't you go ahead and introduce our fascinating guest for today because I'm excited, but people have been listening to me talk about my feet and pod friends and all that stuff. So you go ahead, go for it.

Bob: Okay, I'll do it because we are welcoming even more individuals from WordPress Core to come in and tell us what's going on there because I believe all Woo builders should be on top of that, including Mendel. And because just because it's, it's great to hear. And they also give a little bit of perspective. I mean, a lot of them are not immersed in WooCommerce, but I think from the outside looking in, it's always great to hear their thoughts on it. I'm going to introduce Greg from Automattic.

Now, Greg has a very unique name and I know I would totally butcher it, even though he gave us a lesson on how to pronounce it. Welcome to the show, Greg.

Greg: Hey, hello. I'm glad to be here. So my name is Grzegorz Ziółkowski. So I live in Poland. It was snowing this week, if we talk weather. So people have really hard time pronouncing my name abroad, so that's why I ran by Greg and just to make people's life easier.

Bob: Yeah, I was, I would have given a stab at it, but I just know that there's something about it just runs off your tongue and it would not. It would get bundled around my tongue and I would probably meet the latest. So Automattic. So you work it Automattic. You don't really Do the Woo, but you do the WordPress, I guess I could say. Tell us a little bit what you do at Automattic.

Greg: So I've been with Automattic for nearly six years now, and the company is sponsoring me to work full time on WordPress Core for nearly four years. And I'm focused on the Gutenberg block editor. I spend a lot of time working with WordPress Core, as you said, I don't have any experience with Woo.

I am a software developer. And most of my time, I champion all the work towards the core of Gutenberg, the block editor, and making sure that it runs smoothly. And one of the things that I greatly enjoy is championing care for improving the block API. So all the things necessary to build the blocks to extend the detour. And I also, I'm spent some time improving tools that can be used by the community like WordPress Create or WordPress Create Blog. So all the things that help the community to extend and integrate with the Gutenberg project.

Mendel: Now, Greg, I know that you must know that there has been a lot of controversy around Gutenberg, and I don't want to talk about the controversy. I don't want to talk about, but what I would love to know is what potential do you see in the block system or the Gutenberg system to revolutionize even further. Maybe beyond the editing system, maybe other things within WordPress and how it will change the experience, maybe the extensibility, all of those things involved with WordPress.

Greg: Oh yeah. So I listened to the episode when you had guests from our Automattic store, it was Darren and Gary. They talked about WooCommerce blocks. And I think that's very interesting because in my opinion, Woo is ahead of core in terms of how they use blocks. So they don't only use those blocks to build the HTML code or the interface that is static, but they also work on providing the interactive experience on the front end.

And this is something that is like, it wasn't the focus for the Gutenberg project so far, mostly because we are now trying to bring the full site editing experience. So bringing the concept of blocks outside of their single post or single page and making sure that everyone is able to use the same patterns on or the same UI experience to create a full website. And I think it's still not enough for more complex enterprise solutions, like in many cases for WooCommerce, it has to be. So I'm really looking forward to see how it evolves and how we can find ways to make sure that those requirements that all the stores have can be fulfilled within the same paradigm.

Mendel: Yeah, that makes a lot of sense. So it sounds like what you're saying is that what has been done with blocks and WooCommerce has not been anticipated, but is kind of a nice bonus for what they were intended for and what they're being used for might be two separate things.

Greg: It depends how you look at this. I mean, from the beginning, even my first time in the conference discussing the block editor, it was three years ago in Miami. So the first question was right away, how do you use those blocks on the front end?

So that's something that was always on the road map, the challenges that you need to scope what you work on, because you cannot provide all the features in a year. Especially if your goal is to build something to stay in WordPress for multiple years. So I guess it's something that I personally struggle that we cannot focus on more, but we need to keep our development roadmap intact to make sure that we deliver the full site editing. That is like the first step.

And if you think about the full site editing and how it fits with the new trend, that is headless WordPress. So that will also open a lot of possibilities because now your page is built from blocks. So you can identify every chunk of your website and use all the caching mechanisms.

You exactly know how every piece of the content should behave. According to time, it's very important, especially in terms of Woo, when you have prices and you have a stock and it's something that changes very often, but you might have a much better control how to update that and cache appropriately. So the scope is so huge with blocks and it definitely bring a better architecture for everything and opens new possibilities. It's just, we are still talking about the written content, which isn't something that opens their discussions in the right direction. In terms of the use cases for extenders that work on some more complex applications on top of WordPress.

Mendel: Yeah, so before Bob jumps in, because I know he has a question or two, I want to press a little bit harder on this question about blocks, because when blocks became a thing, when Matt talked about, we're going to do this Gutenberg thing, we're going to do this block thing. There were a lot of questions. And I guess, my big question is why do blocks push the project forward? Because full site editing exists with site builders in different ways. Blocks in different paradigms of editing content exists in different places. So what is so special about, about blocks and why does it push the WordPress project forward?

As somebody that is passionate about this and contributes to blocks in particular, it's a curiosity. Is it standardizing the project? Why does this even belong in Core? And before you answer, I'm going to tell you I'm a big supporter of blocks, okay. [laughter] So I'm not asking you this because I'm looking for a specific answer; I'm curious.

Greg: Yeah, so as you said, this is a way of standardizing how the development goals, and I think it has multiple layers. By using HTML as a way to store the content of those blogs allows for back part compatibility and the future compatibility, because HTML is something that not only the browser understands, but it's also something that RSS readers understand. Email clients understand. So by sticking to this concept, we ensure that is something that will work in the internet for the past and for the future.

So the next layer that I think the most about is that a single block you can consider as a small application. So now there's this popular concept of micro-front ends. So you can think that block is your periodization of that concept in practice. So, because the way he structures in the world is a great example, because there is this products block that you are able to edit in the front end, in dynamically uses like the short metadata or like some settings to build interactive interface.

So this is a small app that works independently on everything other, but also blocks then can compose something bigger, so you can use a few smaller blocks and connect them together using a wrapper block that gives you another set of opportunities and how we interact with each other. So from the user standpoint, from the site owner or the site maintainer, it gives you this coherent experience because when you are using the block editor, you have the same UI whenever you interact with the block that either comes from Core or was built by someone from the community, or even a site owner can create their own experience. And there are multiple concepts on top of that, like the first one was reusable blocks. So you could craft some simple block or several blocks and convert that into something that you can really use in other places.

And the next concept that was introduced is block patterns that combines on the higher level of blocks and allows you to do the same reuse of content. However, it's a bit different because it's something that is only the snapshot you use during when you interact like the insert that into the content of your page or in the future to the template of your page. And then you are free to modify the way you want. So it's something that we are building. Something that has multiple layers that are built on top of each other and empower users to do things that were never possible before because you had to learn everyone how to use it even plugging because they use different interfaces and such things like that.

Bob: Let's drill it down just a little bit here, because you've touched on it in several different ways. And it's something I've asked others, especially from WordPress core on the show, as far as our listeners who are extenders of WooCommerce, they're building extensions and plugins. From your experience working hands-on with blocks, what is your response to those builders who say, I'm a bit worried about all this and how it's going to affect my particular product and what opportunities I might have or should really be paying attention to. I don't expect you to have the perfect answer, but just from your experience, if somebody else was doing that with WooCommerce products and building that stuff, what would you say to them if they were hesitant and felt like this might be more of a negative response than really looking at the opportunities for them?

Greg: So, based on the experience from the first rollout on the Gutenberg, there was a lot of negative responses. So it's something that we had to deal and it's a change. Change is always hard and people, at first, thing that they need to do something to align. So in that case of Woo, the service side on the backend is much more complex because you have much more requirements. So building a blog that works for Woo has a bigger set of challenges. When I listen to the podcast that I mentioned before, they talked about the checkout block. So it's definitely something that is difficult to create. Even if you can do whatever you want, it's ultimately very hard to do.

So those people are very experienced if they are able to provide extensions of this scale. I think the concept of blocks will benefit them when they start doing multiple extensions. Because, as I said, this is a standardized way of doing so if you go through the pain of learning the API. It's always a pain, let's be honest, like working with the new API isn't something that people want to do.

But if you go through that and you learn how it should be crafted, then the next step is much more easier because you use the same ways. So I think that WordPress as a platform is so powerful because it provides hooks. And on the side of blocks, it's a bit different because JavaScript has its own set of challenges because of asynchronity. So on the server side, you're just around the code and you forget about that.

In JavaScript, it must be done differently. That's one thing that I would say that people would struggle the most at first, but once you go through that, it's going to be only simpler. So, it's hard to tell, depends. It all depends on the use case you have. So the most implementations I know of blocks are related to how content is displayed on the page.

As I said, it's mostly because this is the type of extenders that are mostly active in exercising how this concept of blogs works as of today. So I don't have clear answers, but definitely using integration with server will be the most work necessary to be done. And we'll be ensuring that the connection between the server works seamlessly. And the UI is like if you have a checkout page. UI is always simple as just a couple of form fields and that's all that happens behind the scenes.

Mendel: I know that your specialty is building the architecture to allow other people to build blocks, but where do you see full site editing. We've all heard about full site editing. We know that it's coming. We know that that's exciting, a little scary. After that, where do you see blocks going? And where do you see blocks going in particular for a WooCommerce? Is there any creative thoughts in your head? You're kind of like the Matrix and the Oracle. You're like the Oracle of blocks. So where do you see this going?

Greg: Yeah, it's really hard to answer, but let's try it. [laughter] So, first of all, I think that the way full site editing is structured. It opens a new way to extend for new custom types because the new blocks that get introduced, they sort of duplicate what already was explored, like having a new block. Post title or post content or post featured image is small, more or less the same, what is what you would consider as a post title, all the taxonomy pages.

So those are things that will be in the core. So we'll probably we'll be able to do some abstractions on top of that, so that will remove a lot of maintenance work for the WooCommerce core, but also there is a new, very exciting block cord, which is very technical, it's called Query Block. It's more or less abstract way of doing WPQuery, which recently was updated to match requirements for Woo as well. So you will be able to create different types of representation of products because of that abstraction. And I think that's very powerful for people, especially when they really want to build some special landing pages.

So they won't have to depend on the WooCommerce and the development. They will be able to create their own blocks that will display whatever type of products they want. I think the most important part next is just to make sure that we can bring interactivity to the front end because seeing a static HTML is not enough for more advanced websites.

Even now the Query Block on the front end, that will be static. And I think the next step for WordPress core would be to explore how to bring interactivity there and ensure that people can use those blocks in some ways. If it needs crawling, so you can have a catalog of products and you don't want to refresh the page each time you want to see more products, you want to scroll down, you want to use filters. So that's a challenge. And I think it will be beneficial, not only for Woo, but also for other websites.

Let's say you are a photographer and you have a gallery with images and that will be something that works on both in terms of how you can navigate on the same page. But also on the Woo side, there is a lot of work necessary to make sure that there are a lot of stuff like the checkout. There are things that you need to have on your website.

Mendel: Yeah, makes sense. It sounds like just more capabilities to customize more is the bottom line. And that's pretty exciting.

Greg: Yeah. One thing I'm actively thinking of, because you have this template. You create a template for a page, but you want to have a way to show your product, but usually you want to optimize that to make sure that you have the best possible revenue from your website. So one thing that would be great into exploring more in WordPress core is how to provide a set of micro templates that you'd be able to use inside, let's say product a block.

And this way you can do some sort of integration, most likely for plug-ins, but you know how to measure the success of your AB tests, things like that. So it's definitely a lot of things that we can incorporate later, as soon as the full site editing is out. So I hope that WooCommerce will join the efforts really soon, and they will start exploring those concepts because there's so much thing we can do once the concept of blocks is present individual pages on the site.

Mendel: Yeah.

Greg: So one thing that I'm pretty excited about 5.8 because it's scheduled as the the possibility to use a template for a single page. So that will be great for Woo sites because you will be able to use block concept to create a landing page or something like that. So that should also ease the process for people and how it fades and start thinking about the blocks that could fit in that field.

Mendel: Yeah, so do you think that blocks or full site editing in particular is going to change the way site builders operate? Full site editors like Beaver Builder, Elementor or products that are duplicating the abilities of full site editing?

Greg: Yeah. Well it doesn't. It's a one to one comparison because the idea for WordPress Core is always to provide the basic set of tools you want to build your website. However, it's usually something that it's really hard to use on a more ambitious website because those designs are not opinionated. So I don't think that if you want to have a successful business, you would be happy to use the default WordPress theme because you won't stand out from the rest of people.

So one thing that site builders is that they provide a very wide range of designs or some integrations that make the experience of building your website much easier and also to maintain it easer. So, one thing that the block editor and the concept of blocks tries to solve is just to unify the way you manage your WordPress. But I don't think it necessarily solves the way that it gives this flexibility that everyone can build their website they want.

Mendel: Yeah, I'd really like to see some of those builder plug-ins starting to integrate more into these interesting core capabilities or these paradigms of Gutenberg, because I think that it can become even more powerful if you integrate blocks into the building process of these site builders. I think there's a way of thinking about it that maybe they're thinking about, or maybe they haven't started thinking about. But a lot of people say it's either, or. Right?

Greg: Mm-hmm (affirmative).

Mendel: It's either blocks or it's editing with one of these page builders and yeah. I'd like to see some sort of integration. I think that'd be interesting.

Greg: Oh yeah. Definitely. I think that's the biggest power because only by using a few blocks that even if you would use something that blogging developers created, it's really powerful. Once you can use that also beside builders because of the design, so some of the blocks are really neat. I think that the way people think about that and with the very sophisticated tastes, it builds a great experience. So I hope that it will happen because that will also help to improve the blogs because they will be exercising another environment.

Bob: Yeah. And I think of it as, like you said, integrating them rather than separating them. And also on the user side of things, I love the idea of having template blocks, that help. Whether you're building a site for somebody to hand it over. And these template blocks are very easy for them to continue to give some consistency to their site, from product to product and having the page builders, you know?

Yeah, if you want to build something from bottom up and make it very customized, a lot of these users don't, or maybe don't really understand what should be on that product page and a simple template for a product page would be a lot. It doesn't give them so much to have to think about rather than, okay this is something I have some variety here. I can pick from these templates. But anyway, I think that's great.

I'm kind of reiterating this with every guest I have from core is where is the best place for them to stay on top of what's happening with Gutenberg blocks? For they can make sure and have themselves tuned into everything that's going on.

Greg: The best way I think to follow that and from the official resources is make wordpress.org/coreblock and in particular, every month we publish a post that says what's next in Gutenberg. So that's one way to catch up, just check what's in active developments or if there is something that people are interested in, they can chime in and just go through things and find their area of interest. Definitely, they should check out GitHub and on GitHub there is WordPress slash Gutenberg repository. They can open the issues there or check something if it isn't already there.

Also I'm now co-hosting with Gutenberg Changelog Podcast. So every two weeks we talk about the latest plug-in release. So we try to highlight the most important feature that we will be enabled, but we also talk about all the things that happen, so definitely check it out.

And from the higher perspective, I think that's enough. And we also have weekly meetings for core editor and they happen on Wednesday. I don't remember at the time it's for probably 14 UTC because we are all over the world. So we need to operate in unified time. And yeah, so once a week we meet, there are also summaries posted on the same WordPress make.wordpress.org core block from those meetings so people can attend a sync or catch up on the block. Also, they have a block post with highlights of the most important features that will be included. And before the WordPress meetings there is this field guide with dev notes and all the important changes are always highlighted. So the next one should happen around June when you know the work on 5.8 is close to their release date.

Bob: Excellent and where can people connect with you if they want to connect with you personally, besides hearing your wonderful voice on the podcast?

Greg: So I'm online as gziolo and I'm on Twitter. People can reach me out also on WordPress Slack? I also have my personal website, gziolo.pl.

Bob: Yeah, all right. Excellent. Well, cool. As always a great conversation, I think it's important to keep everyone on top everything. And I hope I can with this podcast to play a little part in that before we head out.

I want to thank our two pod sponsors. Again, don't forget to check out Wayflyer. They specialize in revenue based financing to help you with your marketing and inventory. You can go to wayflayer.com.

And Elastic Press by 10Up. Getting the right search solution is a no brainer for your clients or your own Woo shop. So you can check that out at elasticpress.io.

Greg, this has been a pleasure. It's great to finally have met you. For anybody listening, we will be having Anne McCarthy on here soon talking about the full site editor as well. So we have some cool stuff planned in the future. Just like to thank you very much, Greg, for joining us.

Greg: Thank you both. Thank you, Mendel. It was a pleasure to talk to you about blocks.

Bob: Alrighty everybody. Well as always, just make sure to keep on top of Do the Woo. Go to dothewoo.io/subscribe.

And until the next time, keep on doing the Woo.