Block Themes, WordPress 5.8 and WooCommerce with Daisy Olsen

Do the Woo - WooCommerce Podcast, Community and News
Do the Woo - WooCommerce Podcast, Community and News
Block Themes, WordPress 5.8 and WooCommerce with Daisy Olsen
/

WordPress 5.8 is on the cusp of release. There are many exciting things coming our way and one, specifically, is seeing a growth of block themes. To chat about this we asked Daisy Olsen, Developer Advocate from Automattic to join us.

Daisy has a long history in WordPress, loves educating the community and is an advocate of block themes. She shares some great insights as well as how WooCommerce builders can take advantage of the power of block themes.

A Chat with Daisy:

Anna and myself talk with Daisy about:

  • What drives her to the love of educating people
  • Daisy’s three takeaways from her talk at WCEU about the future of themes
  • How theme developers will focus on integrating WordPress core blocks and existing blocks vs creating new blocks
  • Where settings for easy to adjust design for users vs needing help with CSS
  • What is the idea of universal or hybrid themes and how that is so important to WooCommerce builders
  • How blocks can be more useful to the user for branding guidelines and how block patterns can play a role in that
  • What does blog variations bring to the table
  • What might be a bigger concern that developers have talked about around 5.8
  • Why is TT1 blocks such a large milestone
  • What is the biggest advantage developers will see by turning their focus to block themes

Suggested Resources

Connect with Daisy

Thanks to Our Pod Friends

OSTraining


OSTraining has a great collection of WooCommerce tutorials that will help your clients get the most out of their site. And, as a bonus for the builder, you can also find training to enhance your knowledge as they continue to grow their WordPress and WooCommerce developer training.

Yoast


Yoast SEO has released version 16.5 with a Social preview feature where you are able to optimize the posts and pages even faster by filling in a social appearance template for every content type, including social title, description and image.

Bob: Hey everyone, BobWP here. And we are back with episode 131. My co-host Anna joins me today. Anna, how are you doing?

Anna: Hello. Thank you for having me. I'm sending you warm regards from Vienna, Austria, at this time, we have beautiful weather here and a lot of great food and great vibes. So this is a nice time to do this podcast right now.

Bob: Now, that sounds nice. When you're talking with the guest, I will dream about Vienna, even though I've never been there, I'll dream about it because I can do that, so, anyway, we have a great show lined up, so we are going to dive right into it. Our guest, Daisy Olsen is well, one of those people that pretty much is immersed in WordPress, works at Automattic and thought it would be great to bring her on and talk a little bit about, just what she does and this and that, but also a little around block themes. Daisy, welcome to the show.

Daisy: Thanks so much for having me. I'm really happy to be here today.

Anna: Welcome Daisy.

Bob: I'm excited because we had Ann McCarthy on, talking about some of the stuff around coming in, 5.8 and all that good stuff. And you are the perfect part two piece of that because of even specifically the block themes, but before we get into all that good stuff, why don't you tell us what you do at WordPress?

Daisy: Sure. So I am working for Automattic as a developer advocate and I'm really privileged that I have the opportunity to work really closely with the WordPress community. And bringing information and details about the project out to those that might not otherwise know where to look for that information, particularly theme developers and plugin developers and site builders and agencies. And outside of the inner circle of contributors I have a chance to work a little bit further out from the center. It's great.

Bob: Cool. Well, you have a rich history in WordPress. Can you give us a nutshell of that? Maybe first, how you even got into WordPress and just a little bit about what you've been doing, up until your position there at WordPress?

Daisy: Sure. So way back in, I think it was 2007 and blogging was extremely popular, I decided to teach myself to knit, I had never knit before. I didn't know anyone that knitted but it seemed like something that I might want to do a blog about it. And so I figured it all out. I had a little bit of background in web development, but nothing really had ever stuck. And when I found WordPress and got the site set up, it became apparent very quickly that I was not much of a blogger, but I really liked the backend of WordPress. I loved the modularity of the themes and the plugins and how the core stayed secure and updatable, even as you added layers on top of it.

And I was probably a bit of a plugin addict in the early days, but it got me started on the road to being more and more involved in not only the WordPress development itself, but I was fortunate to speak at a WordCamp in 2009 in New York City. And that one thing led to another and I helped to coordinate the WordCamp, Boston, first WordCamp, Boston. And through that event, I was able to start working for the StudioPress Theme company back in 2010. And I worked there for quite a few years, and I've also worked in agencies and done freelance. And so I've been able to do a lot of different roles in WordPress. And so it's really cool now that I can bring all that experience together in some interesting ways.

Anna: Wow. What a background. I understand that there's been more than 10 years since you were involved in the WordPress ecosystem in general, or since your first acquaintance with WordPress. And I also saw on your profile that you were a speaker for WordCamp Europe. Would you mind sharing with us what motivates you into this idea of contributing to the community, because this is more than just developing or giving feedback or helping with support. You also talk about things and you teach people, why is it that you do this?

Daisy: I actually really love having the chance to teach people how to do things that I've had to learn myself.

Anna: Nice.

Daisy: I personally am the kind of person who likes to learn by digging in myself, but then I can take that learning and I can apply it in a way that will hopefully help others learn, in a way that will work for them, whether that be through video or audio or text-based instruction or attending a work camp presentation, or going to a discussion group through the learn WordPress platform. So I really love that a lot, it's a great thing that I have an opportunity to do.

So yeah, I did participate in a panel about the future of themes in the WordPress world. So it was very interesting to have a chance to talk about that in that group.

Anna: Would you share with us two, three main takeaways from the panel discussion?

Daisy: One is that full site editing is going to become more and more a part of the way that people use WordPress. And what that will translate to for themes is block themes. These are themes that are almost entirely created with blocks. So rather than having lots of PHP and a loop and all of the templating and somewhat complex and difficult to learn coding, it will be possible to create a large part of a WordPress theme with just the block editor as your primary tool, and then adding on a style and layer with CSS.

And then also all the power of the WordPress API to be able to add in additional bells and whistles, I guess you could say. So it'll be really interesting, but I think one of the cool things that came out of that panel was the idea that the barrier of entry for a them creator will be lowered significantly with the way that these block themes will be created. It'll be a lot easier for new developers to get involved earlier in their learning process.

Anna: It sounds like they will have access to a new standard of building themes or making things a good way. Right?

Daisy: Sure thing.

Anna: That's nice. Thank you, Daisy. Thank you.

Bob: Yeah, on that note, what you just said, and I'm playing a bit naive on this too, aside from reading and listening to what everybody's talking about, the ability to build those themes. Do you see more, as we moved towards this with the block themes, more of them building their own specific blocks, or because of the fact that there's so many blocks available, first of all, in core, and then more and more building, providing blocks here and there and everywhere. Will theme developers focus more on creating their own blocks or will they take advantage of this vast world of blocks to incorporate what already exists?

Daisy: I would say that in an ideal setting, there would be all of the blocks that you need either in core or in the block directory, which is accessible from within your block editor on your site. If you search for a block and it doesn't exist, or it doesn't find something with that search term, what will happen is that the WordPress will reach out to the block directory and try to find block plugins or blocks that would meet the needs that you're trying to accomplish. So I think that there's still space for new blocks to be created, but as the blocks become more feature complete, the ones that are in core, I suspect that what you'll have is instead of creating an entire block, you might create block patterns where it's a saved configuration of one or more blocks. You might create blocks styles where you can effectively add a class to the block wrapper on the front end and apply styling to it, to make it look a certain way.

Or a little bit further into the weeds, you could say, are block variations, where you can take existing block an inner blocks, in some cases and remix them and then have it listed in the block listing as its own block. An example of this that already exist in core would be like the embed blocks. The embed blocks are registered in such a way that they're actually relying on the code for one block, but are being used in different ways and listed as individual blocks in the block editors inserter. So block variations could be a way for you to extend the block editor without creating your own block from the ground up. You could do it so that it adds styles in it, it sets the configuration ahead of time. It could even include inner blocks that also are configured. So it's another way to do that.

Anna: Easier and probably safer and less prone to errors. This is what I understand from what you've been telling us Daisy. And maybe what is important here, I would think of the idea of helping builders which are maybe not that experienced with building their own websites, helping them understand the principles behind the building with using blocks. Because what we're doing right now is a little bit of a freestyle, especially when it comes to rookies like me for example. I had an experience where I tried to build a very basic WordPress site using a go theme. And it seemed really natural and simple and intuitive until I got to the point where I had very specific needs and I needed some CSS help. And I was like, okay, what do I do now? Should I change the theme? Should I do something else? How does this work?

So I had to dig a little deeper and to do a little bit of research to understand how the go theme was being built, because it was built for a specific type of business. So I understand that this would be something similar that the builders would have to face, not necessarily the theme builders, but the people who will use the themes, because it's really helpful to understand what's the anatomy of the website that you're trying to build before starting from scratch.

Daisy: So I would say that there's going to be a few layers. The theme developers are going to be able to, I say theme developers, because we think of them as developers. But I see a future where we have theme designers that are implementing designs that can be used with WordPress and to get back to that design. And so the CSS becomes the domain of the theme designer, and then there will be the ability to take that design and then to tweak it a little bit as a user using global styles, that if you say, well, my theme designer set this up to look in this way, I can change this font to something else, or this color to something else. And a lot of that will be possible to change from within the theme editor in WordPress, when we're moving into block themes.

And then the power that we have now, I've been able to very finely tune the design of the front end, will still be available to those that need it. So it's a mix of both worlds, the very powerful designers that need to be able to control everything as well as the average user that just wants to be able to make a change to their website.

Sponsor: Hey BobWP here and I’d like to take a moment to thank to of our Pod Friends for their support of Do the Woo.

When you build a clients site, after the fact, you are doing one or two things. Continuing to help them maintain the site or simply handing it over. Whatever the case may be, you need to give your clients even more confidence in running their Woo shop? OSTraining has a great collection of WooCommerce tutorials that will help your clients get the most out of their site. And, as a bonus for the builder, you can also find training to enhance your knowledge as they continue to grow their WordPress and WooCommerce developer training. So whether it's for yourself or to help your clients understand their Woo shop more, OSTraining has you covered at OSTraining.com

You know that moment when plugins just keep on getting better. Well, just recently Yoast SEO has released version 16.5 What really stands out in this release you you will now find a Social preview feature. This means that whether for yourself or your clients, you will now be able to optimize the posts and pages even faster by filling in a social appearance template for every content type. And with this new features, it streamlines the time it takes to fill in a fitting social title, description and image. So make sure and update or grab yourself the Yoast SEO plugin over on Yoast.com

And now let's head back to the show

Bob: One of the things you had mentioned, Daisy, when we were chatting earlier, when we were talking about some of the direction of this is the idea of universal or hybrid themes, what stood out from that is you said that it really feels like this could be an important piece as far as Woo, the part it plays in it. So why don't you just elaborate, I'm just opening this up for you to elaborate on this and give your thoughts on this because it does sound intriguing to me.

Daisy: Sure. So let's start with the definition. So basically, universal theme is going to be a theme like we're used to now, that has a lot of the PHP templates, is using the old, at least some portion of the existing theming system. And then they can start to integrate in block theme components so that you get a little bit of both. You might get, some of your theme is being controlled by the PHP templates, some of your theme might be controlled by block templates or block template parts, and they can mix and match to some extent. And in its first iteration, a hybrid theme, a universal theme is the final naming that they've decided to go with, would just include what's called a theme.json file. And what that will allow you to do is just set presets and styles and configurations and add and remove support for certain things in the block editor from a single file.

So presently, a lot of these are possible, you do them in function step PHP, sometimes in queuing, JavaScript, and sometimes with helper functions in PHP. But it's like you have to know all of the things that you need to do for that specific thing. And theme.json, it really simplifies the process. So once you've learned how to use it, it's all very much the same. And that's the first piece of these universal themes that we're going to get access to in the next version of WordPress. So it's pretty exciting to see that coming out into a place where anyone can start using it.

Bob: How does that play an important part as far as WooCommerce is concerned?

Daisy: So from a WooCommerce standpoint, all, any blocks that are specific to Woo can be set up to have presets, like every time I use this block, I want it to start off like this. I want it to start off with these style settings. Then you'd be able to do that in your theme.json file. And then it would be ready to go every time you use it, instead of it being just the defaults. And then you have to apply your settings every time you want to use that block. So it could speed up the setup process time for someone that's often using these blocks on their WooCommerce site.

Anna: So there's still a lot of conversation around same customization, and I'm mainly thinking about branding guidelines. And I was thinking, should people feel like building blocks are a little bit maybe restrictive or do they need a lot of CSS to make it work according to their branding guidelines? Of course, assuming that they don't have really complicated requirements.

Daisy: I think that stepping back to just the idea of block themes, I think block themes are going to help sites maintain their branding guidelines. If you have a specific color palette, for example, you code that pallet in and then it's, those are the colors that are surfaced for you to use in your site. If you have a site logo that can be set at the site level, there's going to be a site logo block that will be available for use, primarily for theme developers or at the theme level. But I think that that block will be making in until 5.8. And then ideally, the design of your theme is going to do everything it needs to do in order to help you maintain those brand guidelines.

One area that I think is really useful for maintaining brand is block patterns. Because when you have a block pattern created, you already have everything all put together in the way that you need it for your brand, and then you just add your content to it. So it acts like a template of sorts, that can already be set up in the way that you need it. Particularly, like you could have block patterns of products for a WooCommerce site, so that every time you added a product, it has all of these pieces already almost configured for you. So all you have to do is change the image out, add the description, just the minimal things that are going to be unique to each product. It'll speed things up, it'll make them more consistent, which really at the end of the day, is the thing with maintaining your brand guidelines.

Anna: Yes, that's beautiful. Consistency, I think is really important. Especially when you have maybe hundreds of products on your WooCommerce site, really helps a lot.

Daisy: Absolutely.

Anna: And how about block variations? I saw you mentioned something about it and I was wondering this would be like the next level of block building blocks.

Daisy: Yeah. So rather than building an entirely new block, if let's say there's a block that's part of core, or that is part of a plugin that you're using such as WooCommerce and everything works great, but you just want to have it so that it's a little bit tweaked, but you want it to be its own thing. You don't want it to affect the original block. You want it to be listed as an entirely new block. So one example of a block variation could be that you'd have, maybe it was a media and text block where you have an image and you have some inner blocks that would be to the side of the image. So that's basically how this block works.

So you could have your median text block with, let's say you wanted a headline block and you wanted a paragraph blocking, you wanted some buttons, pretty simple. You could build a block that does exactly that with placeholder texts that can then be replaced once you've added it in, but it would be listed as a block in the inserter. So it would be really easy to access, but it wouldn't be as design oriented as a block pattern where you might have lots of blocks going on. The block variation would be just a single outer block with potentially some inner blocks that are already partially configured and ready to add content to.

Anna: This is really cool. I love it. Creating your own library of blocks.

Daisy: Absolutely. Yeah.

Bob: Have you heard anything, and you can say, no, I haven't and we can leave it at that, but we've got these developers that are in, I mean, I'm in Slack sometimes in some of these channels that I've been recommended to watch. And I'm amazed, first of all, I'm amazed at the amount of time people give to WordPress. I mean, that can be reflective in a lot of those channels itself. What are some of the concerns that, I mean, I'm sure you're dealing with those all along, but is there a one or two concerns that are standing out to you that need to be ironed out over time or there will be solutions, but it can't be obviously, bam, 5.8, everything works perfectly. Anything you want to share with us?

Daisy: There's a lot of ongoing work surrounding tightening up the user interface, so that there's really good consistency across the different menus and blocks. I think one of the big concerns is trying to get as much adoption of block theming as possible. It's going to be, it's so different, the way that a block theme is structured is such a different thing from what we were accustomed to. And honestly, the overall idea behind a theme for WordPress has not changed since, I don't know, 2.0 anyway, so it's a big paradigm shift and that could be something that some people might have a difficult time adjusting to. But hopefully others will see it as an opportunity to come in when something is new and to try it out and see if it works for them. So I find that to be really exciting. But I would say that one of the concerns would be that things are coming out, some on a piecemeal basis. So it's not like we're getting everything all at once. We're not getting all a full site editing or all a block themes in a single release.

So things are rolling up a little bit more slowly as we feel that they're ready for use in a production environment. And that's the challenge, right? Is that when we put something into core, it's going out to millions of production websites, people's businesses and livelihoods depends on their websites. And so there has to be a lot of concern for what goes out there, being backwards compatible with what is already out there. So that's part of the reason that the pacing has to be somewhat slowed down, I guess you could say, or just a couple pieces at a time so that we don't overwhelm or introduce something that we didn't intend to.

Anna: So what would be some ways to encourage people to adopt the use of block patterns?

Daisy: So adopting block patterns, I think that something that will really help that is that coming soon, it's actively in development and it's not directly tied to a 5.8 release, is a block pattern directory. Where you'll be able to, I believe this is still the plan, that you'll be able to go and build a block pattern and submit it to the directory for others to use, but also copy that code and then put it into your own site. So it's like for yourself, but also for others. And then you can see all of the other block patterns that have been created by other people. So right now it's being, they're working, a lot of the designers are working on making sure that there's a really good selection of interesting block patterns available from the beginning.

And then in terms of what a theme designer or developer can be doing now, one is to start exploring block themes as a concept, there's a GitHub repository in the WordPress space that's called theme experiments, where you can go and you can look at the block themes that some people have created, including the core team, has created a 2021 block version, which is also available incidentally in the theme directory. So you can actually install it right by searching TT1 blocks. You do have to have the Gutenberg plugin installed and activated in order to use these themes right now, that'll change at some point, not in 5.8, but probably in 5.9, it'll be possible to directly activate a block theme in your WordPress site. And just by taking a look at the code that's in those things, you might be surprised to see how simple it really is. So a lot of HTML rather than PHP, which is kind of cool.

Anna: So I read something about TT1 blocks in an article on WPTavern and you find they're saying, well, this would be the block-based version of the 2021 theme. And I also understand that you were involved in the team who contributed to updating the old theme, I'm I right?

Daisy: No. I was not directly involved in that, but a lot of my colleagues were.

Anna: Close enough. Why is this such a major milestone for the WordPress community?

Daisy: It's the first of the block themes. And it is built in a best practices way. So this theme is kind of the flagships of the block themes that we have at present. And part of the reason that it was created in the way that it was, as a block version of the default theme, is to show that you can do the same thing with a block theme that you could with a classic theme, that we can create two versions of that same theme. They look the same on the front end, the way that they work on the backend is different. That's part of what I think is interesting about it is that it's a way to show, demonstrate what you can do with this block theme idea.

Anna: So it can be pretty on the back side, as well as on the front side, just as in knitting, right? I saw that you knit as a hobby, is it?

Daisy: Yeah.

Anna: And my grandma always says, if it's pretty on the front, it has to be pretty on the back or otherwise you don't know how to knit, so I don't know.

Daisy: That is true.

Anna: It triggered this idea. Yeah. I think that's really cool. I can tell that this is something that really passionate people will think of, normal people, like the rest of us who are just making use of the cool technology that's out there or just like, does it work? Yes. Does it look good? Yes. Okay. Then that's fine. We don't need to do much about it. But yet we're lucky to have people like you who are concerned about improving and updating and making it pretty on the other side as well.

Bob: Let's say you're at a Word Camp physically, and that will happen someday soon. You've given us a lot of different reasons and I want to narrow it down to this single, what is a selling point to these developers? If somebody came up to you and said, "Daisy, hey, I know you're doing a lot with theming at WordPress. Tell me right now, why I should turn my energies and my focus to block themes. And what's the big advantage here for them."

Daisy: I would say, one of the big advantages from my perspective would be predictable and consistent base to work from. So if you're a theme developer and you're out there either producing themes for a commercial or to distribute to a wider audience, or if you're working for clients, it is a huge time saver if you know that you open up one of the themes that you created and you know what to expect, the market is going to be familiar to you. And what could happen with block themes is that you could open up a theme created by someone else, and the markup is going to be familiar to you.

So if you were to inherit a site, for example, you would be able to get up to speed pretty quickly. And I think that being able to tool up fast is such an important thing. Whether you're working as a theme developer in a marketplace, or if you're working as a site builder or an agency or a freelancer even, how quickly you can get your work done is super important.

Anna: Yeah. That sounds really necessary and helpful. Daisy, would you share with us some resources that people could visit so then they can learn more about the topics we've approached today?

Daisy: So Birgit, is a community member who has this website called the Gutenberg Times, I think it's just gutenbergtimes.com and she has done a fabulous job of pulling resources about the block editor into one place. And basically, anything you want to know, you'll be able to find a link out from there. There are a lot of that, it's not, she doesn't necessarily create all of these resources, but she pulls them together in one place. And I would say that that is a really good place to start if you are looking for the fire hose of all the information. If you're interested in getting involved in block theming, then there's the theme review channel in Slack. There's a block theme focus group that meets periodically that you can go and get involved. The theme experiments repository is a place where you can contribute a block theme if you want to get involved in that way.

Anna: Awesome.

Bob: And if people want to reach out to you directly and have all these questions or just want to connect with you, what's the best way for them to do that?

Daisy: I am Daisy O, on the Make WordPress Slack. And I am Daisy on Twitter and on LinkedIn. So those are the best places to get me.

Bob: Excellent. Alrighty, well, man, there's so much going on at WordPress and I love I'm able to bring in, yeah, we touch on Woo, but bring in the foundation especially to Woo builders, what to expect. And every time I hear something about what's coming out with 5.8 and all these different things, I think of all the opportunities down the road for these builders, as far as what they're going to be able to do. And these block based themes are amazing. And I'm anxious to see what transpires with all of that.

So I am going to quickly thank our pod friends again, we mentioned earlier in the show, OSTraining and Yoast for their continued support. You can check them out at ostraining.com and yoast.com.

Other than that, Daisy, I really appreciate you taking the time to join us.

Daisy: Thanks so much for having me.

Anna: Thank you, Daisy. It's been awesome to have you.

Bob: All right, everyone. Until the next time, keep on doing the Woo. And yeah, do the WordPress too. You got to do them both at the same time. So just go for it.