WordPress Blocks and Gutenberg

Kathy: Hi, this is Kathy Zant and welcome to Woo Visions. I am here with my co-host Ronald Gijsel and our special guest Birgit Pauli-Haack. How are you guys doing today? I hope you guys are surviving the summer heat.

Birgit: Hi Kathy. Hi, Ronald. It’s so great to be here. Oh yeah, summer heat in Florida, well, it’s just a difference to winter, it rains more?

Ronald: Yeah, it’s certainly hot.

Kathy: That’s it. Ronald is the one that’s really having the hard time with… You guys don’t do heat in England. What’s going on?

Ronald: No, we certainly don’t. Nothing is made for it. But I am enjoying it. I might not have the skin color to absorb all that heat, but I’m making the most of it.

Kathy: Excellent. Well, it won’t last for long, at least that’s what I hear.

Ronald: Yeah, exactly.

Kathy: Although here in Texas, I hear it’s going to be lasting for a while. Anyway, kind of like the Florida scene. So Birgit, how have you been? I haven’t seen you in so long. Just wanted to catch up with you just conversationally at first and hear how things are going. I think I haven’t seen you since you started your new position at Automattic. How are things going?

Birgit: Oh, going very well. I’m coming up to one year anniversary end of August. And it’s been a great ride. And I’m so happy that I’m kind of in the mix of things, in the midst of good work development and yeah, theme development and all that. And can do even more in terms of Gutenberg Times and Gutenberg Changelog. Yeah, that I’m still keep doing that. But now I’m actually paid to do that. I also got myself a little bit involved, more in the documentation team. I was documentation lead for 6.0 or one the documentation leads and I’m pretty sure I can continue doing stuff like that for the release in 6.1, which coming up in October. Yeah.

The feel of Gutenberg in the wild

Kathy: That’s amazing. Gutenberg, it has come a long way since it first was introduced in decor where I was like, “Okay, I can see where this is going. I can see where this is going, but I’m not quite sure if it’s ready.” But where it is today, and we’re recording this in July of 2022, it has really matured and there’s so much more useful settings and things like that with blocks. How has that process been? Having something out in the wild where people are actually using it and then having to improve upon it as other people are using it?

Birgit: Well, that’s actually the WordPress way, to kind of bring some initial functionality and then see from the feedback what needs to be improved, what other features need are needed, and also where yeah, some plugins have problems or themes have problems and then figure those out. So there are for the… It’s an interesting way to do this. Yeah. But it’s also, the Gutenberg team really iterates very, very fast. So the Gutenberg plugin comes out every two weeks, is a new version there that’s for those who use the plugin from the repository. And we get already about, I think it has about 400,000 and 500,000 installs, I’m not quite sure, maybe it’s only 200,000. But it’s enough people that use it on a regular basis to have feedback from the plugin. So when then those features come into a WordPress Core, they are at least tested by the users that use the plugin.

But we also have an additional program. I don’t know, so it’s this FSE program, ever since I started developing on the full site editing features, I think we talked about it in January of 2020 already. So it was a two year process. Yeah. But in December of 2021, the full site editing outreach program started with a lot of calls for testing. I think the 15th test is now out. Anne McCarthy has spearheaded the program, and she did a Marvel job creating those test calls for testings, and then also manage the feedback and put in new issues or surface more issues that come up quite a few times. So one of them for instance, is the confusion. When I edit my post template versus editing a post, there are still some confusion. So the design team goes back to the drawing board and kind of looks at how can that be a little bit offset there.

So a good way to find the new features and to work with it is actually to participate in the FSE outreach program. There’s a channel in WordPress Slack, FSE-outreach-experiments. I think that changes a bit, but it’s definitely there. And then following the make test blog, or the Gutenberg Times to learn more about the calls for testing. So this time it’s definitely around creating category template pages and how to navigate those custom post types in full site editing. So, that’s actually a good way. And the summary posts back then are read by all the developers and they see how they can alleviate some of the pain points that surfaced there.

Full-site editor and Gutenberg teams working together

Kathy: Excellent. Yeah, I’ve been really watching the full site editing initiative and it kind of feels like it’s definitely an experimental type of situation right now, but I can really see where it’s going in the usefulness for building out custom pages and things like that. What do you see in terms of how Gutenberg is facilitating that? How do those teams work together and how does the development that’s happening with Gutenberg then feed into full sight editing?

Birgit: So it’s the second phase of the Gutenberg development project, the four phases of it. So we are kind of halfway maybe, a little bit less than halfway through the Gutenberg project. So the four phases. One is the content creation part, so the post block editor, the page, using blocks for the pages and posts. The second one is what’s FSE is now that everything is a block, now blocks can also be used for templates and template parts. So people have now the opportunity and the features are ready to actually customize their site without needing a theme developer. That’s actually kind of a goal, but also put in the hooks and the blocks locks for if a designer says, “Okay, I don’t want anybody to mess up my design.” Yeah. You can lock down the designs. Also, agencies that do a lot of development for WordPress sites and for clients that need to be very restrict on their design systems and their color changes. So they can lock down all the features, that’s really good.

And then the third phase. So we are coming up to 6.1, 6.2 is probably kind of the end of phase two. And then next year, the team is also thinking about using blocks and the editor for collaborative phases. That’s a collaborative phase like a Google Docs where, collaborate on posts on pages, and then have the communication in the WordPress field, in the WordPress editor with comments and yeah, suggestions or yeah, whatever it is. But it’s going to be really interesting to see, because up until now, it was more a catch up of what the whole WordPress ecosystem went to. Yeah. Kind of the, not the blocks, that is really new. But some block designs are out there already, and page editing, that was all already in the WordPress ecosystem. But the next phase is going to build up on that with collaborative editing.

And there are only a few things that are already doing that, but there’s not a whole concept around it to make it all a holistic approach. And then the fourth phase of the Gutenberg development is multilingual coming to Core. Yeah, that’s something that, yeah, itself is the work of Europe actually, where a question was there for Matt, who were at this town hall with Josefa together and was the question, “Can we not switch this around?” Yeah, have the multilingual first and then collaborative and yeah, it’s going to be in the bad order. And so how does it all fit in? So we have multiple editors now, we have a post editor, we have a widget editor, we have a template editor and a site editor, and there will be, what do you say? Consolidated into one edit screen.

And then depending on the context, the blocks will be available, be it the query block for templates, or the post template block that shows you a list of blocks. Yeah. And it’s a brave new world. For me, I’m really excited. Well, I’ve been following the Gutenberg project quite since 2017, but I’m still very excited about that way that I can actually change how my posts are showing up on the category page. I have really control over that. And that’s really something that I like and all the things that come with it. Yeah. I need a post title block, I need a post date block, I need a post featured image block and all that kind of thing. Now I can change that. I’m really happy without having a developer.

Ronald: I’m particularly excited about the collaborative feature. I think that’s to work async and not having to use a special, separate docs from your post to work together. That’d be a really good streamline. But I guess, for everybody, they have a different preference of what they want to see first.

And you need some sort of management to say, “No, let’s do this the right way.” It’s the same for the translation or the multilingual aspect of Gutenberg. For some it’s super important and I’d like to see that developed first. But I think as far as I remember, Matt’s comment on that was to do things in the right order, so we don’t have to do it twice or redesign it later down the line.

Working with WooCommerce

The part you’re so excited about, the post editing and the layouts, I think that’s what I hear from the WooCommerce user merchants, that they’re particularly excited about the product pages and the category or product category pages to be able to start working with that because, page builders have been doing that for a very long time. And then of course, visually that’s the most impact you can have because the homepage, well, it is what it is and you can add different sections into that, but the product page and the category page is so standard, it has been for such a long time. Do you work with WooCommerce as a way of testing how that looks? And I know the WooCommerce team, they have their own full site editing and blocks developers that work on this project. Do you have any communication with them?

Birgit: Yeah, there’s definitely synergy there. Yeah. Because, WooCommerce is also a plugin that’s on the outside that kind of uses that for their own purposes. So there’s definitely some communication back and forth on what’s good and what doesn’t work right now. But with the plugin version 13.7, those category pages and those product or custom post type pages templates are coming to the block editor. And some of the work was actually from the feedback from the WooCommerce team or from WooCommerce users to get this right. But there’s the additional hurdle there that it also needs to be a dynamic with a different post types. Yeah, and have different custom fields for that. So that is definitely a back and forth and the WooCommerce team is really working on making the plugin also ready for full site editing themes. And there’s now the first full set editing theme is now in the marketplace. So there is definitely some testing going on.

Ronald: And with dynamic, you mean things like sorting by price by color red, for example, by popularity and…?

Birgit: Yeah, it’s also showing the ‘for sales’ plugin, the ‘for sales’ product next to the highlighted target or the new products that need to be kind of in one view, yeah, and how does it come, because they’re attaching different fields to the same label kind of thing. So it’s getting a little bit technical there, but I think there is some back and forth that needs to be figured out there. And the custom development definitely will help WooCommerce team to get over that hurdle.

Ronald: Yeah. Would third party plugins need to do something to, and obviously testing is a big part of that, but would they need to do anything extra in order to work with the category blocks, for example?

Birgit: That is not clear yet, because the feature is not ready yet to actually look at it from an extensibility point of view. That’s kind of the process is, “Okay, what would a user use?” Yeah. And then once that is finalized, yeah, where would a plugin or agencies or plugin developer need to hook in and then make those available and open that up? So it hasn’t been in the first phase yet, it’s coming out on July 20th, the 13.7 release. And so if you listen to this afterwards, it’s already there, go and test it.

And I’m not sure it will be published by then, but there is a make block post coming about that and what the nature is around this and yeah, different kind of applications for that and also different examples on how to use it in and then it will also show, ‘Okay, what do plugins do?’ For plugin custom post type is not the biggest problem, I think the plugin for plugin is the biggest problem are the custom fields that they have for that because there need to be register extra. And then yeah, the block editor is not picking up on that right now. So you need to either have a separate block for that. Yeah. And it seems that block building on block development is still a little bit of a higher hurdle that some plug-in developers haven’t gone yet. Yeah.

Keeping an eye on third-party block plugins

Kathy: There’s a number of different companies like Kadence that are developing blocks. How much does what some of these other black companies or companies that are developing block plugins, what they’re doing, how much does that influence the Core team? Do they watch this kind of development and does that influence what the Gutenberg plugin is doing and what might end up in Core as well?

Birgit: I don’t think there is a full process there. And I think whatever contributor is kind of picking up a certain feature that is requested or where people think that could make sure to have that. For that particular feature, they definitely look around the plugin space and also what’s outside of WordPress to inform how a feature could be implemented, and then how does it fit into the components framework that the Gutenberg developers have. Yeah. So there is a whole set of components. Yeah. Be it, the inspector controls or be it the toolbar or be it an email control or link component, those all things are standardized and they are available to any plug-in developer or contributor or theme developer to use. And those pretty much are standardized now after four years. They did a whole overhaul of all the components, I think two years ago.

Yeah, to make them a little bit more flexible and prepare for the full side editing. But yeah, definitely, table of contents block, for instance. Yeah. That definitely informed the developer on how other people do it or what do people do with it, yeah, from other plugins and other blocks. Yeah, definitely. Yeah. I don’t know how that’s actually also go back to the plugin developers saying, “Okay, now that Gutenberg has all the tools like the color tools for links and backgrounds and text and the dimensions controls and the border controls, yeah. Are plugin developers like Kadence actually rethinking what kind of blocks they actually built or what extension of blocks they are building? Are they kind of taking back and say, “Okay, let’s use the Core block there.” And I know that a few, like Extendify and others are actually looking towards the Gutenberg development to kind of say, “Okay, whenever it lands in the development, in the plugin or later in WordPress, yeah, we cannot take some things back or reframe things to have a lesser for maintenance barrier there.”

Kathy: Yeah, definitely. I mean, if it’s in Core, the tendency is obviously going to be for people to use that rather than using something else, because it’s in Core and that’s kind of foundational.

Birgit: Well, I can see that someone who has the Kadence theme and the Kadence Blocks installed seeing the Kadence Block and have used them over the years, yeah. That they keep using it, despite that it’s already available in Core. Yeah. So I didn’t see anything wrong with it. Yeah. To say that. Yeah, it doesn’t…

Kathy: Well, a few years ago we saw all this page builder kind of excitement and all these people adding a page builder on top of WordPress. And now we’re seeing all of the innovation happening, sort of in the block space, you can really see innovation happening that is much more ingrained and much more flexible within the Core of WordPress. Whereas like if you have Elementor on a page, you’re locked in. If there’s a Kadence Block or a Core Block that you want to use on that page, well, you’re kind of out of luck. But with the whole block ecosphere, if you can have a Core Block, you can have a Kadence Block, you can have an Extendify, you can have all of these other different kind of blocks intermingled. I mean, there’s some debate about performance with that, but you’re not locked in, you’re not stuck into an ecosystem that you’ve made this commitment and there’s no flexibility on that page.

And so in that regard, I’m seeing so much innovation and I see, this is the future of WordPress and the future of high performance sites. And it’s really exciting to see. And so, I mean, if we could go back to 2018 when everybody was having pain points with Gutenberg and they could see where we are today, I think it would be a different story. Now, with a lot of the changes that are happening, with full site editing, I think I’d see a lot of people wondering if that’s going to be painful. And I kind of see that same type of experience. In a couple of years, we can look back to where we are right now and say, “Oh, well now we see how all of these pieces fit together. That WordPress is innovating and it’s bringing new tools to a new audience without ever having to touch a line of code to be able to build something that a highly professional developer could build just a few years ago.” So it’s kind of interesting.

Birgit: Yeah. I find that too. It’s really remarkable how this all has developed. And giving so much more creativity back to the user is really empowering. Yeah.

And to all the non code designers, they have now all the tools that they can do it in the site. And I know that some of the theme developers say, “Well, I was able to reduce my custom CSS file from 2000 lines to 140,” Or something like that, because everything else was actually in the theme.json file or yeah, available through the global science.

Thanks to our Pod Friends Dotstore and Jetpack CRM

The vision of Gutenberg beyond WordPress

Ronald: Birgit, I know you were very much involved in closely monitoring when Gutenberg was released in WordPress 5. And I guess, you could summarize that expectation as well. It’s a new page builder, it should do almost the same as an Elementor or a Beaver Builder would do, which of course it didn’t. And I think you’ve just summarized where we are in the project. We are just sort of coming through as phase two out of four, that we are not even close to where it should be. So I think it’s a two part question where, maybe you recall some of the things and thoughts that you had a few years ago, but I think more importantly, where you think in your view, in your vision, this could go to in a few years time where we see it, maybe beyond WordPress?

Birgit: I had an epiphany, I don’t know, maybe a year or two ago, where I found that there is a segment of the WordPress community that has not been involved in WordPress development at all. And those are the no code page builders that use Beaver Builder, Elementor and that is it possible to get them actually into an open source idea where a release is only the first, iteration and not the first perfect version. Yeah. So that is kind of a mindset that is in open source, especially in WordPress a little bit different than having a whole corporation, just doing one thing and releasing on a constant basis. So that is definitely a switch and I have not yet been convinced that we are really welcoming no code page builders as much as possible. But what I see is there’s additional effort from the project to create training.

Yeah. the learn.wordpress.org site has now, and they only started maybe a year ago and they have really publishing a lot of content that is connected with the block editor that is not developer oriented. Yeah. So WordPress normally, yeah, what comes on the make blog or what is in the release note? It’s more so developer oriented rather than end user oriented or someone who logs into WordPress. So these efforts are definitely entertaining that, and I really like that is there because that I found the community was a little lacking before for that to match, “Okay. I can see what’s not working. And a lot of people have trouble because that one thing that they really need is not working yet.” But there’s also kind of, “Can we approach things differently? Can we start making the same sites, but it’s a different workflow?”

And I see that there is a learning process going on and that’s for every person differently. There are some people are jumping on the new thing and can put up with the first version that is not perfect, or the third version that’s still not perfect. Yeah. Is web development ever perfect? Yeah. But I also see that there’s a lot of help now there for those who are not comfortable with code and using WordPress Core. So I think that was a piece that was missing two or three years ago. And now with the Learn team, they have really stepped up to the plate and have these workshops online. They have a lot of WordPress TV, videos there. So it’s workshops and courses to accommodate all this new users, so to speak, that come to WordPress Core.

Kathy: Because I’ve run into, in this new role, I’m running into people who have been in WordPress for a very long time and kind of just do maintenance now. And then they start seeing what’s happening with blocks and they want to start building sites again. So people who’ve been around WordPress for a very long time and just kind of get burnt out with building a new site, they’re seeing the new, innovative ways that people are building with blocks rather than page builders. And it reinvigorates them. It’s almost like they’re reborn into the Gutenberg world of wanting to be a web developer again, where they were burned out before, because all of the tools are making things so much easier. And that’s so empowering.

Birgit: Yeah. You brought it all back to the other side again. Yeah. Where, what is the excitement that people have and that it is, I see that for theme developers actually. Yeah. Where they say, “I can prototype my theme within hours and yeah, I could even yeah, get it to a client and they can look through it and then we just fiddle with a little things anymore,” But it’s very easy to go from zero to hero on a theme now. Yeah. So I really like that development.

How Gutenberg evolved in the years to come

Ronald: And on that note, I think that’s probably leads into the second part of the question is, where you would see Gutenberg evolve in years to come? And I sort of tease you on the idea of going beyond WordPress, whether Gutenberg would be adopted by other hopefully open source platforms that would use it.

Birgit: Yeah. There are definitely some experimental ways already going on with using Gutenberg or the block editor outside of WordPress. One is that the Drupal community very early, jumped on using the block editor answer for the Drupal CMS on the way is using the block editor also for Tumblr, which is outside of WordPress, but it’s a different kind management system. And of course, well, Automattic barred Tumblr in 2019 and is now kind of working on using the block editor also for that. And then there’s another app out there, it’s a diary app called Day One, which has many, many users both in the App Store, as well as in the Google store and to migrate some of the editing pieces also to the block editor, there are others that are trying, not so much outside of WordPress, but using the block editor also for the plugin settings pages.

So they can have all the things that need to go into a plugin have a same experience that people have with other content. So I can see, well, I don’t know, particularly the vision, but of course, there is the everything is going to be blocks. And I can see that we have, yeah, the flow of the web page. If we have a different browser that will come out, that’s not a kind of from top to bottom browser, I don’t know if that’s ever possible. I think blocks would be very interesting to see how they functions there, because it still would need to be HTML. But I think there could be some great innovation on the browser side, especially with Google Chrome being a little bit controversial now in other pieces of the world. And yeah, so there is certainly a lot to be done.

Ronald: Because we are experiencing well, web in a different way now, with mobile and tablet, where you sort of pinch and zoom into a webpage rather than always scrolling. I know it’s probably the muscle that’s most trained for some teenagers, but there is a way to innovate and blocks would be very interesting how that could work as part of that.

Birgit: Yeah. There’s still some work to be done to make the block editor entirely responsive. Yeah. There is still something. Well, but the team is working on the fluid expand and contract kind of on the site without having special viewpoints for different devices. So it’s more like the intrinsic design rather than the media query kind of thing. And that is still in the works. So there’s definitely a lot of testing to be done to find a way to make those complicated decisions, like what is a minimum widths and what is the maximum width? And when the minimum width is, how does the font size go? And when the maximum, how does the font size go? So there’s a lot of things that a designer kind of has in the DNA to know, “Okay, I need to have a dial there.”

But an end user has no idea what this all means when they kind of see the technical terms on the site. So I think that it’s still a little bit hard to make the interfaces not being for designers, but for users that have no technical knowledge. Yeah. But in spite of that being really good in making those work out of the box. To bring it back, what’s the team working on right now? I think the global styles and the standardizing styling for themes is definitely a big topic.

Woo builders, help with testing

Ronald: Do you have a particular ask from maybe the WooCommerce builder community? Whether this is to think about or to do, or to collaborate on feedback? This is your time. Share your wishlist.

Birgit: It definitely helps to go for the call for testing that is available now. So the FSU program testing column is for category customization. It has quite a few testing instructions and also to test the feature image again for the categories, and to make sure that the categories that come, you can add additional content to a category page there. And then also the patterns that come in with that, there are two patterns and new event announcement. And another one is a event recap post for patterns to see how they work with your category pages.

That will be definitely a good way to first learn and also give a lot of feedback to the team with the first iteration of those category templates. Even if it’s not a product, a specific one yet, but if you have a test site that has WooCommerce installed and products in there, it would be really good to see how that works for you and what is still missing. Because that would get it on the to-do list quite faster for the developers to kind of see, “Okay, where does Core need to adopt what WooCommerce plugin developers kind of, where’s the demarcation lines, so to speak? The boundaries between those two. Yeah. Because it will also introduce the boundaries for other plugins to using that efficacy. Yes.

Kathy: Well, being on the forefront is exciting, and I am really excited by what I’m seeing with blocks in terms of just publishing content. What I’m really looking forward to see is how, as this moves into WooCommerce more and more, the innovation that will happen in online commerce, I don’t even think that we can fully like, see what’s going to happen there. But obviously, bringing in a new tool brings in innovation, it brings in new ways of looking at things, it brings in that experimental spirit and new ways for merchants to be able to connect with their customers, could change the face of WooCommerce. So I’m really excited with what’s happening with the block editor and all of these experiments happening with WooCommerce. So yeah, if you want to be on the forefront of having those experiments happen, definitely follow that advice to get a little uncomfortable and think outside of the box and play with some of these tools and give your feedback. I think that’s just exceptional and great.

Birgit: Yeah, it’s hard to get real good feedback, because if it’s something new people don’t have opinions yet. Yeah. And I have seen, working in an agency or working or leading an agency for a long time, it was always hard to get the clients to test their site before we go live kind of thing. And it’s really a different mindset. So I get when not a whole lot of people are comfortable with doing that. But thank you so much for giving this the WooCommerce spin on that. I really can see the personalization is definitely important. Yeah.

Reaching out to existing customer, making them not treated like other people, like they’re already have given the money, so what is there to make them feel more at home and tie them to your brand is definitely something that I have not seen a whole lot of innovation there, but there was a wonderful talk at WordCamp Europe. And I think it’s already online on WordPress TV by Sean Blakeley, who works with American Eagle, and they have open source their plugin to personalize WooCommerce sites and or any other site, their membership sites or subscriber sites. So definitely also yeah, check it out. That’s the future, pretty much. Yeah.

Kathy: Yeah, definitely. I’ve had some very, very powerful personalization experiences shopping. I’m just watching how, just the connection between an email experience and a merchant online and personalization and how that really draws you into a shopping experience, where it just hasn’t been done before. So yeah, tons of innovation can happen there. And I think, well, I know that, if innovation in commerce is going to happen, it’s going to happen in the WooCommerce space, it’s going to happen in the WordPress space, because more people here are going to experiment than say, in the Shopify world where you’re locked into a closed source system and you just get what they give you and not a lot of room and flexibility to really try something new. So, yeah. So this is all very exciting.

Ronald: And that’s thanks to you Birgit, because that’s the great thing about the WooCommerce, it’s on top of WordPress and there’s so much happening at WordPress. And I’m, I’m glad to hear that WooCommerce is contributing and supporting you in that part because it’s a great gift to be given in this, all this innovation.

Birgit: Definitely. Thank you.

Ronald: Great.

Kathy: Well, any final thoughts?

Birgit: Subscribe to the Gutenberg Times newsletter. We have a weekly roundup post about what’s happening around the block editor in WordPress, in the ecosystem and what other people write about. Not everybody has a whole view that, it’s very specific to the block editor. So we are not getting into any other peer WordPress drama.

Ronald: I don’t know what you’re referring to, but…

Birgit: Yeah, I don’t know either, but no drama at the Gutenberg Times. That’s why I don’t know about it. Yeah. And the Gutenberg Changelog is a podcast that comes out every two weeks with the release of the next plugin to hear what’s in there that’s not in the release post, or where we talk with Gutenberg developers on what was the special feature they’re working on. So it helps you yeah, stay on top of Gutenberg development in a very less keyboard screen kind of way. It’s gutenbergtimes.com and gutenbergtimes.com/podcast. And it’s on any of the podcast podcatchers.

Birgit: So thank you so much. It was a great conversation with you two. Thank you so much for inviting me and having me on the show.

Ronald: You’re welcome. Thank you.

Kathy: Thank you so much for being here.