Co-hosts, Birgit Pauli-Haack and Grzegorz Ziolkowski discuss with Ryan Welcher the Gutenberg 12.0 release, the updated WordPress 5.9 Release Schedule and a lot more.
Ryan Welcher, Developer advocate, sponsored by Automattic.
WordPress development environment by Marcus Kasmierczak
WordPress 5.9 updated Schedule
- Updated Release Schedule for 5.9
- WordPress 5.9 Revised Release Schedule by Core release lead Tonya Mork
- Why I voted to delay WordPress 5.9 by Anne McCarthy, release co-lead for testing
- WordPress 5.9 Revised Release Date Confirmed for January 25, 2022, Sarah Gooding, WPTavern
- A Look at WordPress 5.9 with the newly published video via WordPress News.
- Video: Exploring WordPress 5.9: Block theme flows, Styling, Patterns Explorer, & more
- Block Styles Previews (34522),
- Featured Image block Visual Enhancement in the Site Editor (36517),
- the Site Editor Welcome Guide (36172) and
- the updates to the JSON schemas for block.json and theme.json.
- GitHub discussions on Developer Experience.
What’s discussed and in active development
- Pull Request by Ryan Welcher related to ordering slotfill/panel: Plugin sorting via priority property in registerPlugin
- Enable React Fast Refresh for block development coming to @wordpress/scripts by Grzegorz Ziolkowski
- Gutenberg: How to test the latest updates w/ Birgit Pauli-Haack, Andy Fragen and George Mamadashvili via GoDaddy Pro
Stay in Touch
Ryan Welcher: I’m good. Hi, thank you for having me. I’m excited to be here.
Birgit Pauli-Haack: Well, howdy-howdy and Grzegorz, how are you doing?
Grzegorz Ziolkowski: Hello, Ryan, and hello Birgit. I’m fine. It’s a little bit dark outside because the winter is coming to Poland, which means that about 4:00 PM, you don’t see anything outside. So it’s just a little bit depressing, but I’m happy that we have a lot of exciting things to discuss today.
Birgit Pauli-Haack: Yeah. So we all have to have our sun in the hearts. Right?
Grzegorz Ziolkowski: And all the warmth from the Florida, you send us.
Birgit Pauli-Haack: Yes. I’m pushing it all towards Canada and Poland.
Ryan Welcher: Yes. You can’t see it, but I’m wearing a toque right now during the recording of this.
Birgit Pauli-Haack: Yeah. I have one of those and I need to take them to Canada when leaving.
Ryan Welcher: You’ll definitely need them. Yes, you will.
Birgit Pauli-Haack: So Ryan, you just completed your first Gutenberg release from the release candidate last week to this week’s final version. What did you learn?
Ryan Welcher: It was a fun experience. I’d never done it before. I went into it with my imposter syndrome kind of pinging in the red, I have to say. I learned that it’s pretty foolproof. You click a button and wait for the actual process of creating the release and the zip file and all that. Really, it’s all done in GitHub actions, which is really. It was really, really simple. I did a live stream of both, and it was a lot of fun, but it was like a lot of action, and then nothing while we waited.
And so, it was a lot of me like trying to fill in the awkward silences, and then things would go, and then, we’d be done. Probably the biggest, the most amount of work on my end was definitely the changelog, was sort of organizing the release notes and moving some things around and making sure that the various pull requests were in the appropriate locations and all that sort of stuff. But I had a lot of help from a couple of folks at Automattic that had done releases before to give me a hand, sort of know what to look for.
I also learned that I don’t need to know, as the release lead, you don’t need to know what every commit did and how, like it’s not your job so much to make sure that the code works, because at this point, the code should be working and as automated process is in place that will flag things if stuff’s not working. So that was probably the biggest sort of learning for me was that like, I don’t… I wasn’t going to break 42-1/2% or 43% of the internet by pressing this button, it was by this point things are usually good. So yeah. It was a fun experience though. I’m looking forward to doing it again.
Birgit Pauli-Haack: All right. Good. Good. I know that there are always a few more contributors wanted to do releases to walk us through. And so, I’m glad that you are here and tell us that it might not be, and we should all put us on imposter syndromes and just get started because there are some security nets there not only for security technology, but also for, it’s a safe place to get started contributing.
Ryan Welcher: Yeah. Absolutely. Absolutely. One thing I did want to mention is that not anybody can just go and click the buttons. You have to be part of the contributor team, the Gutenberg contributor team, which you do by just getting involved, doing a couple pull requests, getting some eyes on your code. And then, it’s pretty straightforward to get added. You just have to put in a bit of work to get some sort of clout, I guess, behind you to get that that ….
Birgit Pauli-Haack: Right. But it’s not the first good issue kind of contributing is definitely a progression. Yeah.
Ryan Welcher: For sure. For sure.
Birgit Pauli-Haack: Yeah. So we will also talk about a new section, the change up a little beta, a little bit later. A little beta. It’s a nice kind of-
Ryan Welcher: It sounds like a beta version, right?
Birgit Pauli-Haack: A little bit later. It’s called the developer experience and we’ll talk about it as I said. So before we head into the changelog and the announcements and everything, I want to take the opportunity to introduce you to our listeners and also discuss briefly some of your great work of the last couple of months. So how long have you been working as developer advocate and what did you on before you came to Automattic?
Ryan Welcher: Well, my road to developer advocacy was a long one. I haven’t been a developer advocate professionally for, well, since I started at Automattic. This is my first official role as a developer advocate. I’ve always wanted to try it out. I remember, I tell this story to anybody that will listen. But way back in the day when I was doing flash work back in 2005, something like that. I saw this guy at a conference, and he was doing all this really cool stuff. I’m like, “That’s the coolest job in the world. You just go around doing cool things and showing people.” And that’s what I thought developer advocacy was.
So, yeah. So I joined Automattic, I guess, it was in, I think it was August of this year. So that’s how long I’ve been a developer advocate. I’ve been a developer for about 17 years. Prior to joining Automattic, I was at 10up. I was there for about six years. And then, before that I worked at various places where I’ve done a lot of… I had my own agency. “Agency,” if you want to call it that. And yeah. Done all kinds of developing stuff.
Birgit Pauli-Haack: What did you do at 10up?
Ryan Welcher: 10up, I left as a lead web engineer. So my job was to be the technical lead for many… Well, all the projects that I was on, I was usually the technical lead. So doing a lot of estimating and kind of like driving, sort of like guiding the ship as far as from a technical standpoint. Got to do some really cool things with Gutenberg. Really, really, really cool things with Gutenberg. I did a standalone Gutenberg implementation that was tied in the Larabel that was it was so much fun to put together.
I can’t say the client or anything like that, but it’s lots of, they do really cool stuff there. So yeah. That’s what I did there. Yeah.
Birgit Pauli-Haack: So I know that you, because you are on the same team as I am and you started the same time as I did, and we had our Chicago meeting and we were talking a little bit more and you were doing some great work on the Gutenberg examples repo. What was that about?
Ryan Welcher: The examples repo is an awesome resource for learning how to do blocks, how to build blocks basically. It was very out-of-date. So what we did was we just, we updated it. And I live streamed it all. We updated all the blocks so they use the most recent versions of the block API. So now they all support block JSON, and they’re using the most recent version of WP-scripts and take advantage of all the sort of built in CSS stuff and all the goodness that really comes with the tools that we have available to us as WordPress developers, right?
We have some really cool ones like scripts package, the EMV package for just quickly spinning up a development environment, which is like such a pain point for so many people. Like, “What do I use?” And I don’t want to install VVV or docker or whatever, right? Well, I guess you need docker for EMV, but some of these more complicated things, right? And so, that was the effort.
The effort was to get the examples repo up-to-date and get some more examples in there. We added one for a slot fill, which we didn’t have before, which is great. Yeah. And I’m super excited about it. Super proud of all that work and it’s been a really good, a lot of people in the community have really kind of like jumped on the bandwagon with that and been really supportive of keeping it up-to-date.
I know that there was talk of maybe retiring the repo, but I think it’s been referenced in so many places across the internet that I think we just need to keep it up-to-date and keep it moving forward.
Birgit Pauli-Haack: Yeah. And I think that’s a great tool to really get into the examples and see how it’s actually done. And then, transfer that to your own Gutenberg block building experience. Yeah. So you mentioned your Twitch streams. I think people kind of watch that. How often do it? Do you have any additional plans?
Ryan Welcher: Well, it started out as an experiment. I always wanted to… I’ve always thought I’ve never really seen a Twitch stream for WordPress specific stuff. I know there are a couple of streamers out there that do like one that they might do something with WordPress once or twice in a month or something, or maybe less. But I stream every Thursday, 10:30 Eastern, usually. Try to do it for about two hours.
Still, I’ll do some ad hoc ones now and again. You can find me at Ryan Welcher codes on Twitch, and also on YouTube. So I stream to both Twitch and YouTube at the same time. And, yeah. I mostly just fight, struggle through writing code live. And people get to watch me type horribly and do write really bad CSS, because I am not a front end developer. So hopefully, it’s… I’m sure it’s tarnishing my reputation as a developer, which is great. But also, I hope that it’s showing people that like, people, even folks like me who’ve been doing it for a long time still have to look up how to do like a ray filter, right? Or how to float something left, which you don’t even do in CSS anymore. That’s how long it’s been since I’ve written CSS.
Birgit Pauli-Haack: Yeah. It’s a real pleasure for me when I get the time to watch your stream because you have a similar correction on typing that I do. I kind of have two or three times. So it kind of takes care of my imposter syndrome as well.
Ryan Welcher: Yeah. Totally. I hit the daily key more than I hit any other key on my keyboard like without a doubt.
Birgit Pauli-Haack: The backspace key.
Ryan Welcher: Yeah. Exactly.
Birgit Pauli-Haack: Yeah.
Ryan Welcher: Yeah. It’s worn out.
Birgit Pauli-Haack: Yeah. Yeah. So did you stream… So we are recording this on Friday, November 26th. And did you do a stream yesterday?
Ryan Welcher: I did. I did a stream yesterday. It’s a part two, actually, Birgit, you gave me the topic of creating a pole block in Gutenberg. And so, we did. This is the part two, and there’s going to be a part three, because it’s actually a pretty complicated block. More complicated than I was expecting, but this series is going to be fun because I think I approached it one way in the first stream that we did last week. And it was bad.
It kind of worked, but it really demonstrated the power of inner blocks. And because I didn’t use inner blocks, basically what I wanted was a block that allowed you to put in options and you create as many or as little options as you wanted. So I was kind of rolling my own solution. And that’s never a good idea, not when you’ve got really powerful tools already available to you.
So in last week or sorry, yesterday’s. I refactored the block to use inner blocks and it went so much smoother. And now, I’m just trying to get the front end working, and so that’ll be next week most likely so.
Birgit Pauli-Haack: Awesome.
Grzegorz Ziolkowski: Front end is the most difficult because that’s something that it’s a new territory. That’s not so much exercised, especially by the core team. And we are looking at that, like started looking into that for the comments form block, which is also a quite complex thing to move to front, and then to the block concept. And yeah, so like I’m looking forward what you come up with just to like see and what the ideas you have and how people have to struggle with that today.
So, yeah. So I just want to also thank you for updating the Gutenberg examples repository, because we just didn’t have contributors that would actively work on that one. And the way you did it with live streams was just amazing so people can see everything how it works. And also, a good way for people to, and bring up-to-date their own configuration and use the latest and the most great approaches for the goal.
Ryan Welcher: Awesome. Thank you. Yeah. I really enjoyed doing it and I think… I don’t have a huge following on Twitch. I think I have something like 60 subscribers or whatever, but I really feel like it’s helped a little bit to get a bit more exposure to some of the great tools. Like I said before, some of the fantastic tools that Gutenberg and WordPress have available. So build processes are pain. Well, we have scripts package. It just handles it for you. You don’t need to worry about it, right?
And so, I think as part of updating that, I think I hopefully got a bit of sort of exposure for those tools and just how powerful they are.
Birgit Pauli-Haack: Awesome. Yeah. So I’m so glad that you’re here and let’s get a little bit further into the show.
So dear listeners, if you haven’t heard it yet, WordPress 5.9 release has been postponed to January 25th, 2022. A few modules needed two more weeks to get it into the release before the feature freeze. So instead of the first beta to come out on November 16th, it’s now scheduled for November 30th, 2021, because of the holidays in America and Europe, the release schedule now spans a bit longer. And instead of December 14th, the WordPress version is not to be released until end of January.
In the show notes, I have two, three links for you. One is from Tonya Mork. She’s the core release lead for this release and she published on the make blog, the decision making process about the postponement. She shared links of the issues list, and also the reasoning, the why the postponement was favored over removing the features was that weren’t ready yet.
And then, Anne McCarthy. She’s the FSE program manager, but also core release lead on this release for testing, posted a personal blog post with her thought process on why she voted for the delay. And in her post she also walks us through the issues and why it made sense to give them a few more days to land in the core release rather to rip out the whole FSE from the release, and then release it in 6.0. Turned out that the release lead from editor, Robert Anderson’s also was, of course, he found that it would be almost more work to rip out the features from the core than just wait two weeks and finish the little things that needed to be added to that.
Grzegorz Ziolkowski: Yes. And in fact, all the blockers are already resolved so there is no more risk that the release would be further postponed. So you don’t have to worry about that at all. And one more note about that, if there wouldn’t be a holiday season, New Year and such, then we just have a two-week delay. And because of that making sure that everyone can get back to work after New Year’s, like then don’t have to rush and update their website and prepare for all the things that are usually connected with that so people will have much more time.
And I guess I also saw some opinions from people that they are happy that it’s happening in January, because it’s not so tight schedule before the New Year and Christmas and holidays. And so, depending on the parts of the world what people celebrate.
Ryan Welcher: Yeah. I’m in a few different sort of communities that are not in WordPress Slack, but across the place or the internet. It’s either been like everyone’s sort of like, “Yeah. That’s the right decision,” or in some of the more… Hostile is not the right word. In some of the more lively places, it’s silence. Which usually means that it’s good. So if no one’s complaining, then that’s probably a good thing.
So I think it was the right move. Obviously, everyone seems used to be on board with it. And it’s just going to move us to a much more stable release. It’s very cool.
Birgit Pauli-Haack: Yeah. And I really heard a collective big sigh of relief from the WordPress e-commerce community to spread, to be spared yet another major WordPress release during the biggest e-commerce time of the year of the holidays. Yeah.
Grzegorz Ziolkowski: Oh that’s a good note, because in the past when I was in the e-commerce business, like there was a feature freeze of on everything in December and sometimes even in November. So I now can relate to that. So I see where it comes from.
Birgit Pauli-Haack: Yeah. Although I think John Baptiste Audras who has been a core team rep, he had a comment on one of the comments on the release, first release blog post, who said, “Well, in the life of WordPress, we had 46 releases in December before, and there will always holidays and there will always, and yeah. It’s a global community.” And yeah. So there is a sense of, “Okay, it’s not only the American holiday or the European holiday season there are other holidays that are not, they are not so much in that are considered to blocking a WordPress release, so why should this one?” But I get it.
So if you need a fast overview of what will come for WordPress 5.9, the WordPress team published a fabulous video on the news section to show that you can or watch yourself, but also then show your clients, meet up members and others. So it’s really fabulously made. I also will have a link for you to a little longer video by Anne McCarthy about some of the full site editing features a little bit more in detail, also in the show notes. So the show notes will be quite big now.
So for the community contribution, I wanted to point out Marcus Kazmierczak kicked off an interesting discussion and you mentioned it as well, Ryan. Discussion about what would be a, should be a WordPress recommended development environment in view of the Dockers change of license for the desktop app. This developer discussion certainly can use your voice, you listeners as well.
Grzegorz Ziolkowski: I think it’s-
Ryan Welcher: Really interesting. Sorry. And unfortunate that Docker’s going to a paid model for their Docker for desktop app. I thought we had a good thing going with the E&V in environment like the WordPress/E&V package. I hope there’s something similar. I have a feeling we’re going to end up, we, being the community, will end up kind of rolling another solution, which is unfortunate because the more solutions you have, the sort of more diluted the waters get, and that it’s hard to kind of support all sorts of things.
I know VVV was used a lot. Having used it, I wouldn’t, I don’t really want to go back to that personally. Not that there’s anything wrong with it. It was just, if you’re doing a lot of sites, just the way that the… And this may have changed in the time it’s been since I’ve used it, but it took up a lot of space on your computer. And there’s a running joke about hit up, and then run them. And then, go have a coffee and watch a movie and come back and it’ll be done. But yeah. No. I hope that we can… I hope something changes there, but maybe not. I don’t know. What do you think, Grzegorz?
Grzegorz Ziolkowski: Yeah. I think that’s very interesting what’s happening here because my initial thought would be that the post is about unifying everything and like picking one of the solutions. The benefit of WP/E&V and using Dockers is that it works out of the box on Linux. So all the continuous integration that we use with Gutenberg, and now also with WordPress core, it just doesn’t need any special handing. It just works.
And by installing this single command, WP/E&V install, you recreate the same setup on your local machine, which is like just amazing, because you can easily go back when something wrong happens and that was the whole idea. And it’s like Marcus mentioned that in call, we use a bit different setup, however, it’s also based on Docker. And there is something else used in one of the different products that is also used to by the WordPress project.
And yeah. So basically, it’s also a bit strange because the license for Docker allows open source usage, but with a special remark that if you work for a company and you are a paid contributor, if the company has over 250 people, or it turns like over $10 million revenue, then you need to pay for the license, which means like, for the most of the contributors from the committee, it’s not a blocker, however, there is no paid contributors like us, which we can afford the license, but for some people from different companies, the policy might be different so that creates friction.
So that’s really unfortunate that it happened, because instead of picking a right solution, now we need to decide what to do about Docker like for the whole community.
Ryan Welcher: Well, do you think that this reminds me a bit of when React’s license conflicted with WordPress? I wonder if there might be some conversations that could happen down the road? I’m not sure. I mean I think this is a fairly recent licensing change. Is that accurate?
Grzegorz Ziolkowski: Yes.
Birgit Pauli-Haack: Yeah.
Ryan Welcher: I mean WordPress can’t be the only community that has paid contributors that this is going to affect. So maybe there’ll be some changing of the wording in the license. I don’t know. I mean I’m being cautiously optimistic that there’ll be some adjustments that will allow the usage to continue. Because I mean from a project point of view, it’s very hard to have that argument of we’re going to keep using this tool, but some of the people in our community have to pay for it and others don’t. And that’s kind of goes against the whole free, and what am I trying to say here? The open source.
Birgit Pauli-Haack: Easy access. Yeah.
Ryan Welcher: … mentality. Yeah. Yeah.
Birgit Pauli-Haack: Yeah. So to be continued and to see what’s happening, but chime in on the discussion on the make blog post. So your opinion will be heard as well.
What’s Released – Gutenberg 12.0
So now we are coming to our what’s release section and Gutenberg 12.0 was released. Do you want to do the honors, Ryan, and start us off going through the changelog?
Ryan Welcher: Sure. I can do that. Yeah. So 12.0 was released on, I guess it would’ve been the 24th of this week. And then, there were 86 pull request it looks like. So we can start with the enhancements. So there’s 28 enhancements. We can go for the start with the block library. There’s a move WP Rest block navigation areas controller from Gutenberg to core. I should actually backtrack and mention that this release has a lot of sort of maintenance style releases.
So there’s a lot of like little bug fixes and little things. And so, some of these features might not be, or some of these enhancements and things might not be super newsworthy, but they’re all needed.
Birgit Pauli-Haack: Yeah. And we won’t go… Yeah. For our listeners, we won’t go through all 86. We highlighted a few, each one of us to kind of see what we want to talk about. And so, just kind of make sure you’re not preparing for a two-hour listen.
Ryan Welcher: I’m not going to read through every single one. Okay. Great. So for the block library, there was some changes of some verbiage from website to site. One of the ones that we probably should talk about are the featured image. The featured image now looks like a placeholder, which is a really nice addition. So if you remember the featured image block prior to this release would have sort of a placeholder where you could click a button and upload something, but it didn’t really give you a sense of what it would look like in the post.
And so, they’ve changed that now. So now there’s a nice sort of like mountain scape dotted line graphic and it actually does respect the height attribute as well. So it’s a lot more representative of what it’s going to actually look like in your site layout, which is really nice.
Birgit Pauli-Haack: Yeah. The featured image block is actually one of the theme blocks for the post template in the query loop. So if you’re not using any block themes, you won’t see that yet, but I really like how it kind of adapts to the dimensions the width and the height. So cool. Yeah.
Ryan Welcher: Yeah.
Grzegorz Ziolkowski: It also has a border that is always visible. So even if you unselect the block, you will still see the shadows of the feature image. And also, I want to mention that is the similar approach was taken previously for the site logo block. So if you are familiar with that, it’s just the same concept.
Birgit Pauli-Haack: So the next item on our list is the navigation block now has enabled previews for the link blocks. We saw this on other editors, but now it’s also in the site editor for the navigation block. So when you hover over a link, it shows you a preview of the text, the image and the excerpt, if it’s available in a little popup window there. So you know exactly, okay. Oh yeah. That post is, or that page that I link to is the right one without having go to it and looking it up kind of thing. So this really enables a few more faster user interface for checking up on the links.
Ryan Welcher: Yeah. And I think changes like that, which this release has a sort of a lot of sort of visual changes for the user. I think they’re great. I mean it makes, like WordPress historically has been a lot of like save it and hope for the best. Right? And these things kind of get us further away from that close. Much more to like a true what you see is what you get editing experience, right?
Birgit Pauli-Haack: Yeah. I like how Helen calls it, “The save and surprise.”
Ryan Welcher: That’s it. Save and surprise. Yes. Helen. That’s great.
Yeah. Helen’s great. I guess there’s a few more in there. The next one that we wanted to sort of talk about was the paragraph block. We’ve merged the typography settings all in the same one. Specifically the drop cap setting had its own kind of section in the block inspector sidebar. Now that’s been moved into the typography panel, which I think is a nice, again, it makes sense.
It’s a typography change. It should go with the rest of the typography control. So that’s a nice little feature in there.
Birgit Pauli-Haack: That we also pointed out for the people who are looking for it now, and don’t find it. You find it in the typography panel, which might not be expanded when you open up your sidebar.
Ryan Welcher: Right.
Grzegorz Ziolkowski: Unless the team author decided that you shouldn’t do that and they disabled that, because now we have this possibility and that’s a really great feature of block teams that basically any control can be disabled, like removed from the view in the sidebar.
Ryan Welcher: Yeah. If you want to test this, I was testing this this morning actually with the TT1 theme blocks and that the drop cap is enabled. It’s in there and it’s good to go. And I believe drop cap is really the only block that really supports… Well, I shouldn’t say supports it. The block that you’d find it in the most is paragraph. I don’t know of any other blocks that have drop cap off the top of my head.
Birgit Pauli-Haack: Yeah. It’s only the paragraph. You’re right. Yeah.
Ryan Welcher: And just a side here. The way that they’re handling the typography and the borders, and there’s a new component. Well, it’s new to me. I think it’s tool… No. What’s it called? It’s the component that you click the three dots and you get the… It’s the tools, the tool panel? I think it’s… Yeah.
Grzegorz Ziolkowski: Yes.
Ryan Welcher: It’s very, very slick. I think that’s such a really nice way of combining lots of controls that I’m going to… You know what? I’m going to do a live stream where I use that in a block, because I think that would be super, super handy. Because historically, you would have the sort of the inspector controls and every little thing would, every panel would line up and you have a really long, like really tall, tall experience with a very complicated block. And I think this is going to be a really nice sort of tool for the block developers’ toolkit to be able to put lots of complicated related things together and not take up the entire screen.
Grzegorz Ziolkowski: Yeah. The idea we discussed this on the show previously that the idea is to have more control over that. So block authors could also register their own controls that would be displaying one of those groups. So to have even better organization there.
Ryan Welcher: Yeah. I think that’s a great addition.
Birgit Pauli-Haack: Yeah. I got a question from some of the, from someone in the community, if there is an idea to actually, or is that in the future that you, as a user can change the order of those panels that maybe the featured image can go a little higher in the priority rather than being on the bottom of things, because it’s some, like in a post editor controls?
Ryan Welcher: I can kind of speak to that a little bit. I’ve done a fair amount of work with SlotFill. And one of the things that I was in a lot of conversations with was this concept of, because… So in the post editor, there’s a SlotFill that allows you to insert a custom panel just below the publish panel. And we had this idea of priority, because what if there was five panels, how do you set the order?
And so, that devolved into a different conversation, but the idea… I think it’s a fantastic idea that those panels be sortable by the user. I mean I don’t know if anyone’s actually tried to do that, but that’s where that conversation of SlotFill priority ended up was first, we should allow the user to pick the order. And then, we can have… Then, we don’t need to worry about it. Then, they can order anything including panels that have been added by slots. So that doesn’t answer that question, but I think it’s on people’s radar. It’s definitely a fantastic user experience that we should probably be moving towards.
Birgit Pauli-Haack: Yeah. So I’m going to scout out that issue and assuming it was in an issue discussed, kind of see if we can surface it again and another-
Ryan Welcher: Yeah. I’ll find it for you. For sure.
Birgit Pauli-Haack: Okay.
Grzegorz Ziolkowski: Yeah. I remember that discussion. And the blocker that we had was that if that said developers’ tool that not necessarily would be in favor of user when those priorities would be set. So we were in favor of having more organized way, like the groups we have now and giving the power to users to move those panels however they want. So that’s like something definitely some rather, and always being discussed this way.
Birgit Pauli-Haack: All right. Let’s continue. And the site editor, it comes now with a welcome guide that gives you four panels, I think, and explains a little bit where you find things on the new site editor for the full site editing experience.
Ryan Welcher: Yeah. You get a pop up when you first load the site editor. And then, when you first click on the little icon for the global styles editor, you’ll get a secondary sort of walkthrough there.
Birgit Pauli-Haack: Right. Yeah. For those styles specifically. Yes. Awesome. Yeah.
Grzegorz Ziolkowski: Yeah. I think it has four steps the last time I saw it, like it walks you through the different concepts of the site, which is pretty handy for new users.
Birgit Pauli-Haack: Absolutely.
Ryan Welcher: Yeah. I think it’s a great introduction to it.
Birgit Pauli-Haack: Yeah. Sooner or later we will find a place where, or find a way to actually put this on the user data instead of in the local storage, because those are going away. And then, you see all the welcome guides, again, when you come in with a new one, but that has been an ongoing issue or maybe now that most editors like the widget editors done, the site editors done, the post editors done, there’s one more coming that’s the navigation editor. And maybe after that, there might be a unifying idea on how to store that on a user basis.
Grzegorz Ziolkowski: Yeah. The next thing I would like to highlight in there is the styles. And there we have now in the section with blocks, we have now icons. So it just like a nice visual change that helps you to much easier to find the block you are looking for if you are familiar with the icons.
One thing that I miss there is like the section to get to there is like blocks. It doesn’t have an icon. So I had trouble in trying the place in the sidebar. So that’s could be next enhancement on the-
Ryan Welcher: Yeah. When I was looking at that issue before this, I was also like, I don’t know how to get there. I’m just going to ….
Birgit Pauli-Haack: Sometimes things are right in your face like a welcome guide and sometimes things are very subtle and I think it’s more like the… It’s still in the process of getting better. Yeah. So you don’t want to… Yeah. It’s not that you want to point people to it when it’s going to change a lot, but what it does, it’s in the style section of the style editor and you could with that do a side wide configuration or settings for any of your blocks. But right now it’s the core blocks, so you can say, “Okay, which is the default style for my heading? And which is my default topography for the paragraph?”
If your theme doesn’t do that, you can change that or you can override your theme, because you don’t like how the theme does your quotes, for instance, or something like that. So there is a place to make those changes for the full site, but on a block, individual block basis. So that’s for those who have done adventure into the full set editing experience with 5.9.
Grzegorz Ziolkowski: The next feature that we want to cover is for the block stars. In the past, we would have in the cyber of the block, for instance, the quad block is a good example. It has several styles to pick from, and you would see the currently selected, like the preview for the currently selected block version.
And the change now is that instead of showing that, you are presented with buttons, and once you hover or you go with the, when you are using keyboard and you move focus to the button. Then, the preview is shown, which is pretty nice, because it was a bit too much, because it was too prominent and that’s not definitely something that’s the most important for the block. So that’s a nice change.
It also like the PR was quite big. So the changes were also included in the transform, like drop down menu. So when you go to the block tool bar, if you click on the icon of the block, you are presented with the ways how you can transform, for instance, the paragraph block, you can transform to the least, to the quote, and so on and so on.
And for some blocks, if they have block stars, there is also a list of possible options to pick from. I believe that before when you would hover over the option there, you would see preview. At the moment there is no preview. I don’t know why it happens. So I couldn’t identify that information. And yeah, but definitely something that would be just unified and the people will look the same at some point, at least this is what I hope for.
Birgit Pauli-Haack: Yeah. I read through this and I think the biggest hurdle was that, so what I like is that it’s in both places, it’s in the sidebar and the styles are also in the transform on the block toolbar. So if the sidebar is not open, you still have the choices to go to the styles. And that there has no preview. It seems that there is a little bit of a placement issue there that all of a sudden, this gets really disjointed when you have the toolbar, and then you transform and have another preview kind of on that block tool.
So that is a little harder to solve them, but this PR had a lot of comments and different explorations on how to solve that. And it really made me realize that there is, even for the smallest things, there are a lot of things that need to be considered and there are quite a few people who have a lot of experience with that still trying to figure that out. So even if it’s a small, yeah, if it’s a small line item kind of show style preview over hover and focus, but there’s a lot of thought that goes into it, and even if you….
Yeah. So I really marveled on that that how people or designers and developers can articulate all the different things that they need to think about when you do that for. As Ryan mentioned, 42 million, 42% of the internet, these are heavy decisions to make. All right, Ryan, do you want to take the next one?
Ryan Welcher: So the next one we have highlighted is the allow additional props on tools panel. I think this is just a nice little developer addition, be able to add whatever you need in there. I’m not that familiar. It’s a pretty small PR, looks like just basically spreading some props in there. So that one, again, I love it that this is sort of like thinking about the developer experience as well. Like one more tool for the toolkit so to speak, right?
Birgit Pauli-Haack: Right. Yeah. If the developer has a custom block or something like that, and I need an additional top for the tool [crosstalk 00:39:34]-
Ryan Welcher: Yeah. And which is….
Birgit Pauli-Haack: … Yeah. Then, now there’s a relatively easy way to accommodate that through that component. Yes.
Grzegorz Ziolkowski: Oh I think that takes us into the bug fixes.
Birgit Pauli-Haack: Bug fixes.
Ryan Welcher: Bug fixes, fiction? Bug fixes?
Birgit Pauli-Haack: That’s a good band name, right?
Ryan Welcher: Yeah. Bug fixes. There we go. First of all, it’s fixed background colors nested sub menus. I’m not that familiar with that particular PR. I’m just going to take a quick look at it. I don’t know. It just looks very, very, very small. So one liner, my favorite type of PR.
Birgit Pauli-Haack: Right. But it solves a big problem, because the background [crosstalk 00:40:11]-
Ryan Welcher: Yeah.
Birgit Pauli-Haack: … from your sub menus should be propagate over all those sub menus. Yeah.
Ryan Welcher: For sure.
Birgit Pauli-Haack: And quite a few have noticed that that’s not handled, even if it’s handled by the theme. Yeah. You still need to have it actually work on the core rather than every theme handling that problem. Yeah.
Ryan Welcher: Next one here is the page list using entities instead of direct API Fetch, which I think is really nice, because we have it available to us to use the entities and why kind of not use what’s already there. So that’s a nice little change too.
Birgit Pauli-Haack: Yeah. And that if you go and as you listen, if you go and look at the PR that’s three, six, five, three, one, and you see the difference of what the effect of it is, and that is on the second load, there is no going back to the server and get it again. So there is no delay on the editor side, so which are… That’s pretty much the promise that the block editor has for, even for dynamic content that comes in that it’s immediate and it’s, doesn’t have another one at the server grabbing the information.
Grzegorz Ziolkowski: Yeah. It’s also start locally so whenever some other part of the code base wants to access the same data, it’s already there, unless there is some update that’s going from the server, there will be still the same data source used. So which is always a great improvement in terms of performance.
Ryan Welcher: It also allows you to tie into some of the other, like some of the other tools like invalidate resolver, if you wanted to update this query, you can just pull, because we know how this query is built inside of get entity records. It’s sort of there’s a standardized approach. You could invalidate that and have it reload.
And also, the pull request has more removals than additions and that’s always a nice little pull request when you have less code. When you’re taking code out, but making it better. That’s always a good way of approaching things.
Birgit Pauli-Haack: That’s the best way.
Ryan Welcher: Yeah. Exactly.
Grzegorz Ziolkowski: Yeah. There’s one which I don’t think that should be counted as back fix, because it’s a feature for the full site editing, and in part for the theme JSON, you now are able to opt out of color palette. So in your theme JSON, in the setting sections, if you go and you use update the color subsection, there is no color palette and color gradients, two fields that you can set default, which basically will disable the default color, probably have some gradients.
And you can go the other way around and use the same concept to enable that for a given block. So you it’s up to you. You can disable that for the block, enable for everything. It’s like you just can decide whatever is good for your team.
Ryan Welcher: Yeah. That’s really interesting. I wasn’t aware, like I know that… I just did this whole deep dive into theme.json to kind of get an idea of what block support and what don’t, what they do and don’t support and all that stuff. And I didn’t realize that, I knew that you could turn it off currently, like before this release on a per block basis, but I didn’t realize that you couldn’t do it at the sort of the settings level.
So that’s nice. That’s a really nice enhancement, because there’s definitely going to be times where you don’t want to use that or maybe you only want to opt-in in certain places. So that’s really nice. That’s definitely an enhancement, I think. I don’t think it’s a bug.
Birgit Pauli-Haack: Yeah. I feel the same way that that is really a good new feature kind of thing for the theme developer. But if I understood that correctly though is that the core color palette is still available on the back end of it. Because thinking about a theme switch, if the color palette of the thing goes away there’s still a color palette from core that will pick up some of the colors when the theme is a different theme and your content wouldn’t go just all white or all black or depending on the background.
Yeah. So what it switches off is the use of panel on the sidebar for the blocks as well as for the site editor.
Ryan Welcher: Yeah. So if I understand it correctly, if you have a theme and it defines a palette, you could also say, “Here’s my palette, but also let’s use the core ones.” And then, yeah. And then, like you said, “You can opt out on a per block, but a basis.” But you’re right. You won’t lose anything to just get the core palette by default, I guess.
Birgit Pauli-Haack: All right, so next. One of you, all the WebP extension.
Grzegorz Ziolkowski: Yeah.
Birgit Pauli-Haack: Yeah. Hang on. I had one that we skipped over it and there’s use… So the block API now also has use first child and last child when parsing lists from MS Word. That’s not so much a bug fix. It’s more like an enhancement of the parsing when you write something in MS Word, in Microsoft Word, and then copy-past it into the block editor. You now have a better list experience, because it uses these new, what is it, functions? So you can have a better parsing experience. That’s just for the content creators and those who are not writing in the block editor. So now it’s up to you. Back to you, Grzegorz.
Grzegorz Ziolkowski: Yes. So in the block editor there was a block fix solution, which has change that add WebP extension in file past handler and get by even data, which for like visibility, for the same experience you mentioned with Microsoft Word, like when you copy and paste if you want, remove, you may just start use those extensions. Before, it was just removed or just like sanitized by the parser.
Birgit Pauli-Haack: So now it can handle images at all of the WebP format, before it wouldn’t be a good image file.
Grzegorz Ziolkowski: Yeah. It was added to WordPress core so it just a sequence of that, that it has to be rolled out to all other places and it was easy to miss.
Birgit Pauli-Haack: Okay. And there was some CSS and styling done now also for the code block, which didn’t get a lot of love before. So now you can do a few more things with the code block then. And your theme JSON, I would think or maybe it’s mostly to take the code out. Oh it’s still… Yeah.
Birgit Pauli-Haack: Which brings us to the documentation section and there were quite a few updates in the handbook concerning the theme JSON file. Do you want to talk about it, Ryan? I think you quite a few….
Ryan Welcher: Well, yeah. The theme in block.json has been sort of my… I’ve been kind of focused on it myself and Marcus and Greg as well. Well, many people, not just us. But we probably talked about this a bit more in the developer experience as well. But some of these documentation things just sort of indicate things like there’s a schema entry that you can put into the theme in block.json. That is only for… Like it’s VS Code specific. You don’t need it if you’re not using VS Code, but VS Code is used by, I don’t know. I don’t even know what the percentage of people using VS Code would be.
Yeah. A lot of people. And we’re just sort of referring to this, they have to do the gif, the schema. We actually have it posted on like there’s a WordPress URL for it, which I can’t remember what it is wp.org. So it’s just updating that. It’s also hosted on schema store, but they’re all connected. So, yeah. So if you refer to it from the host and there’s more in the developer experience. I’ll talk about that but later.
Birgit Pauli-Haack: And also updated that, and I just want to point it out for our listeners. There is a contributor handbook page that has a list of which version of the Gutenberg plugin landed actually, in which WordPress version, because there’s always a little bit of a disconnect like we have now Gutenberg 12, and only some pieces of that make it into the 5.9. But when 5.9 comes out in January, there might be about four more Gutenberg plugin versions and the people need to look up, especially a plugin developer is it kind of, what can I expect with sites that have 5.9 versus the plugin?
So that page has been updated and it’s in the developer.wordpress.org block editor contributors section. And so, you can make that a bookmark or something like that.
Grzegorz Ziolkowski: Yeah. It’s very handy because I already forgot which one goes, the last version of Gutenberg blog that fully goes to the WordPress 5.9 release.
Birgit Pauli-Haack: Yeah.
Ryan Welcher: It’s 11/9.
Birgit Pauli-Haack: It’s 11/9.
Ryan Welcher: And 12 didn’t make the cut, but who knows? Maybe there’ll be some features.
Birgit Pauli-Haack: Well, I saw a few of the PRs on 12 that had the labeled backboard to 5.9, and that made it, I think this morning or Eastern time or no, Australia time. I think they were already rolled into core now. They are the backboard ones. So if you want to look at that, look at the release handbook, the release project to kind of see which made it in, which of the PRs from here made it into 5.9.
So now we come to Ryan’s favorite section of this release.
Ryan Welcher: Yeah. So this is a new section that’s been added to the changelog. Recently, a lot of contributors have been spending time trying to improve the developer experience. That’s something that, as a developer advocate, we hear a lot that the documentation could be better. We need more examples. We, being like the royal we of developers who work with WordPress are like struggling a bit to get the information.
And so, yeah. So that’s what we’re doing here so like probably the biggest thing that we’ve done is the schema for block.json and theme.json. And that might not seem like a big deal, but when you are dealing with something like a theme.json file that has so many entries and so many possible combination of entries, having sort of a common source of truth, where in your editor, you start typing and it prompts you and shows you what can go in there.
That’s such a big win, both for ease of use and also for learning. And I think that’s really going to help a lot of people really get their head around… Like I’ve been spending a lot of time in theme.json lately, and I still don’t really get what goes where. And it just can be a lot. Right?
And so, some of the things that have been added is there’s a schema definition for block.json that was added. Block.json also supports custom blocks. So we’ve added sort of like a RegX to have a name in there. We’ve updated the schema URL to wp.org domain, which is really cool. Just a couple of fixed things like the attribute type can be an array, as well as some other things. Fixed schema tool allow for custom blocks and theme.json.
So there’s a lot of really nice enhancements, and we’re still working through some more enhancements. It’s kind of become a bit of a pet project of mine. There’s an open issue right now where we’re talking about valid versus supported when it comes to blocks. So for example, the button block. If you were to go into the button block, and then in its settings, go to border and turn off all four items. There’s only one of those items that actually affects anything in that block.
And so, the question becomes, technically that’s valid, because that setting, that border object supports four entries. But for this block, three of them don’t do anything. So that’s kind of a confusing developer experience. So how do we handle that?
So we have sort of have a conversation around making the schema a bit more granular. It’s more work, but it’s going to mean that when I, as a developer, sit down to start, trying to customize some of my blocks in theme.json, and I put an entry in, and I get that little squiggly green line that says, “This is wrong.” It’s because that block doesn’t actually do anything with that thing. Right? So anyways, lots more on the horizon there. That’s not part of this release, but I just wanted to go on a bit of a tangent there. So thank you for indulging me.
Birgit Pauli-Haack: And we welcome that. Yeah. So I also want to add that there’s now… So GitHub discussions have been open for maybe three months now to get a little bit closer to the developers and get questions answered, but there’s now a separate sections that’s called Developer Experience. And I really appreciate that, because I think the problem that a lot of extenders have, so extenders or developers for plugins and themes and agency developers is that so many new things come with each plugin release that it’s really hard to keep up.
And the developer, none of our tools really accept a changelog, and you have to study them really carefully and to find those things that are actually relevant to your own work. There is no way to bubble that up into the… This is new section and this replaces that. So if you use the old one, yeah, like what you said, updating the Gutenberg examples, when you have the older method on how I’m doing things, which is still valid and it still works, but it’s so much easier to use some of the new tools that can be surfaced here in the developer experience section as well, much easier.
And so, I’m really happy that we have that. I still need to curate the things for people that come in three months later and don’t, can’t go through all the discussions there. But that’s a different problem solve. Yeah.
Ryan Welcher: I’m also excited because it does, it gives us a place where people, like a sort of a central repository for people to drop stuff. And be like, “I don’t want to do that.” It’s not support. It’s not like, I don’t know how to do this. It’s more like, I don’t know how to find this or I don’t know where… The documentation is confusing. And that’s the kind of stuff that me, as a developer advocate, if I hear that. I’m like, “Well, show me where and let’s make it work.” Right? Because if it’s a small fix that brings so much joy to developers then we can make it happen. Right?
Birgit Pauli-Haack: Right. Yeah.
Grzegorz Ziolkowski: So the GitHub discussions, the motivation for that was also to give a space for people to propose some ideas? And because creating an issue is not something that is actionable if you don’t have the solution. So you need to first do some sort of research, discuss with other people, exchange opinions, and then that could be solidified and you can come up with a final solution and file an actual issue that people can work on.
So I really like this whole concept of discussions that GitHub introduced some time ago. And I’m glad that we finally have that on the Gutenberg repository. And one more note, there is also for the issues, there is also the same label developer experience, which is used to generate in the changelog those items that I uncover.
Birgit Pauli-Haack: So what else is in the… Did you see anything in the code quality section or in the tool section that you want to talk about today?
Ryan Welcher: The only thing that I noticed was TypeScript.
Grzegorz Ziolkowski: That one.
Ryan Welcher: Yeah. That one.
Birgit Pauli-Haack: Opening a can of worms, right?
I do know that many of the packages do support TypeScript now. They do to some TypeScript definitions. There’s one package that I can’t remember which one it was that was written entirely in TypeScript. But getting that, trickling that into like block development or theme development and using TypeScript inside of that, I think will be really interesting.
Grzegorz Ziolkowski: So we already have TypeScript support in Gutenberg. So that the idea if someone is using WordPress scripts, they might want to use the same setup. I mean we do not entirely rely on TypeScript in the Gutenberg. So it’s like it’s mixed. Anyways, it’s possible so why not to open the same door for everyone else and they can benefit from TypeScripts? And if they are familiar, they will definitely be happy to start using that.
And this one is in WordPress script. So it’s not yet published to NPM. So you need to wait probably a few bit, more weeks because of the delay of WordPress 5.9, and the way how we do NPM publishing that is tied to the major WordPress releases, but once it’s out and something that people can explore. And the idea came from Marcus Kazmierczak, who opened a repository with an example of the block written in TypeScripts. So I just like look at the code and it didn’t seem to be very complex to replicate.
Ryan Welcher: Yeah. Well, maybe I’ll just steal Marcus’ repo for my live stream. Or get him to come on maybe. Maybe we can do it that way, give him some credit. Yeah. I think that could probably have gone in developer experience as well, to be honest. I mean I think that’s a, even just to… This is what’s coming. It’s not published, it’s not ready in scripts yet, but it’s there. Yeah.
Birgit Pauli-Haack: All right. So I’m taking it that this is kind of the end of our changelog discussion. I don’t have anything else and I’m looking at our time, we are quite into it already. And it’s so good to have you on this show, Ryan. So before we end the show, have any of you a final announcement or reminder that you want our listeners to know about?
Ryan Welcher: For me, just if you’re interested in watching me code or type badly while I write code, check me out at Twitch. I’m Ryan Welcher codes on Twitch. I’m also Ryan Welcher codes on YouTube. Yeah. And there’s a repository associated with all my streams where if you want to see a specific topic, you can add an issue, mark it as a topic idea. And I love getting topics from the community. I’d rather do it that way than kind of come up with my own, because that’s speaking to what people need rather than what I think they need. But yeah. So yeah. I’d love to have you all drop by.
Birgit Pauli-Haack: Awesome. And I’m looking forward to the part three of your full block.
Ryan Welcher: Part three of 38.
What in Active Development or Discussed
Grzegorz Ziolkowski: Me as well. So I have one small thing also to mention. So we spoke a lot about developer experience. So this year, because I started that in January, I was exploring. I think react fast refresh to the WordPress script. So that’s basically allows you to write something in the code editor. And once you save that, it’s automatically gets updated or React code, and then also CSS, which is pretty nice when you are developing with WordPress scripts.
So yeah. I had breakthrough this week, actually, today in the morning and it’s all working and we are preparing this and together with the TypeScript changes, we mentioned in a few weeks that will be a part of WordPress scripts. And I hope that will improve the experience for all the people that develop blocks.
Birgit Pauli-Haack: All right.
Ryan Welcher: That sounds amazing.
Birgit Pauli-Haack: Yeah.
Grzegorz Ziolkowski: Yeah. And I will leave the link to the pull request so people can check and see what’s that about.
Birgit Pauli-Haack: Yeah. That’s great. I saw it kind of flowing by this morning, so I definitely want to dive into that. So last week I participated in a webinar with wonder for contributors, George Mamadashvili and Andy Fragen. And we talked through the various ways you as listeners, you can test Gutenberg and the workers releases and help us get, help the contributors to find all the little bugs and big bugs and how to test PRs.
George demonstrated that. You can use the Gutenberg nightly from the Gutenberg times to test what’s already emerged into Gutenberg, but not yet in a plugin. And then, you can test upcoming WordPress releases like the beta release and the release candidates by using the WordPress beta tester plugin that Andy Fragen and other contributors update all the time.
And if you’re new to testing, this webinar will hopefully get you started. And if you have questions, all three of us, George, Andy, and I are reachable via the WordPress Slack? And I’ll keep those links also on the show notes. So speaking about reachable, Grzegorz and Ryan, how can people get in touch with you?
Grzegorz Ziolkowski: Ryan, maybe you go first?
Ryan Welcher: Okay. Sure. Yes. I’ll go first. You can find me basically everywhere. I am @RyanWelcher. I’m @RyanWelcher on Twitter. I’m on make WordPress Slack. You can find me in there. I’m on post status, basically my full name, Ryan Welcher. My website’s ryanwelcher.com. And like I said, I am Ryan Welcher Codes on Twitch and on YouTube. So feel free to reach out. My DMs are open on Twitter and I’m always up for a conversation.
Birgit Pauli-Haack: All right. Excellent.
Grzegorz Ziolkowski: The same for me, like most of the places where I’m @GZIOLO. So that would be Twitter, GitHub, WordPress.org, WordPress Slack. So you can DM me or just shout at me publicly and ask of everything related to WordPress Core.
Birgit Pauli-Haack: Excellent. And yes, I’m reachable on Twitter @BPH as well as the WP Slack @BPH. And as always, the show notes will be published on gutenbergtimes.com/podcast. This is episode 56 and if you have questions, suggestions or news, you can also then via email. That’s a blast from the past, but email at email@example.com. That’s firstname.lastname@example.org.
Well, thank you, Grzegorz. Thank you, Ryan. It was a great fun to have you again and talk to you about this nerd and gig out over all the good things Gutenberg. Thank you all for listening. This is goodbye for me.
Grzegorz Ziolkowski: And thank you, everyone, for spending with us another hour. And hopefully, see you in two weeks.
Ryan Welcher: Thanks for having me. I really appreciated it. And thank you for indulging all of my tangents on today’s podcast.
Birgit Pauli-Haack: Oh, you know what? We might invite you again.
Ryan Welcher: Oh, I’d love to come back.
Birgit Pauli-Haack: Good. Yeah. Awesome. All right. Let’s get out of here. You take care. Bye.
Ryan Welcher: Bye.