In this episode, Birgit Pauli-Haack and Mark Uraine discuss WordPress 5.6, Gutenberg 9.5, Global Styles and the State of the Word 2020.
Case Study: The Making of Open-Source Story by Yoast with Blocks – Live Q & A on December 10th, 2020 at 2:30 pm EST (19:30 UTC)
- WordPress 5.6 RC 4
- WordPress 5.6 Field Guide
- WordPress 5.6: Core Editor Overview by Isabel Brison
- “What’s New in WordPress 5.6 (Accessibility, Performance, Security)” by Carlo Daniele
- What’s new in Gutenberg? (2 December) Gutenberg 9.5
- Gutenberg 9.5 Improves Site Editor and Adds New Options for Cover and Code Blocks
- Keeping up with Gutenberg: Index 2020
What’s in active development and discussed?
What’s next in Gutenberg? (December) Focus Post
- Preparing a v1 that can land as core patch early in the 5.7 cycle.
- Initial list of things for v1!
- Block Styles Breakdown (Overview Issue)
- A pagination block with different style variations to work alongside the Query Block.
- Query Block toolbar controls revisions to make it easier to show the content you want.
- Exploring the idea of a Query Block builder UI to scale the experience for advanced users.
- PHP experiments https://github.com/WordPress/gutenberg/pull/25316 Template Loader: Allow PHP in block templates and parts
- This year’s keynote will be streamed on Facebook, YouTube, and Twitter on Thursday, Dec 17th, 2020 at 1600 UTC. (11am EST)
- To submit your question, upload it as an unlisted video (YouTube works great for this) and send a link to firstname.lastname@example.org.
Birgit Pauli-Haack: Hello, and welcome to our 34th episode of the Gutenberg Changelog. In today’s episode, we will talk about WordPress 5.6, Gutenberg 9.5 and State of the Word.
I’m Birgit Pauli-Haack, curator of the Gutenberg Times and I’m here with my co-host, Mark Uraine, designer at Automattic and core contributor to WordPress. Hi, how are you, Mark?
Mark Uraine: Hi, Birgit. Well, I’ve got plenty of Figma prototypes all over the place right now and still trying to work through incorporating blocks into the customizer. So going through a lot of iterations. It’s a fun process, but I want to make sure all solutions or proposed solutions have been explored before we make our way into development. But things are going well, and I’ve been building some interactive infographics lately and having a lot of fun with those and it’s the end of the year, so infographics abound in plenty. How’ve you been?
Birgit Pauli-Haack: Well, I’m freezing, and our listeners will definitely laugh at me because I’m one of those Floridians who starts complaining about the cold weather when it’s below 70 degrees, and the rest of the country is kind of dealing with ice and snow and the really cold weather.
Mark Uraine: So you’re suffering over there in Florida, huh?
Birgit Pauli-Haack: Yeah, for a day and a half or something. But it’s also just a transitional period. Yeah, we had this hot summer and hot days and all of a sudden it’s cold, but it’s really good.
So there’s a lot going on in WordPress space right now and I’m reading a lot. Speaking of that, we have a listener question. So once in a while, a few listeners have sent us emails to email@example.com. In episode 31, we talked through many changes of the block editor that will come to WordPress core with the next week’s version, 5.6, and listening to our recap, Bud Krauss had this question regarding the captions and gallery block and he wrote, “You said that if you don’t use Alt for the image and you use caption, then that’s the fallback.” So he tested it and then, “the words in the caption didn’t populate Alt if Alt is not used. What am I missing here?” Well, thanks for that question, and of course, Bud, you’re right. It doesn’t work.
Mark Uraine: Oh, yeah. I remember saying that too. It was supposed to work that way.
Birgit Pauli-Haack: Yeah, and we led you all astray because this change was reverted and I wasn’t aware of that when we were going through that. Yeah, so I totally skimmed over it, and the reason why it was reverted was that it did not add anything to better accessibility of the editor. Turns out that screen readers read actually the copied text twice in the caption and in the Alt text. So that’s why it was reverted. And we will have a link in the show notes with all the discussions about it.
So yeah, I didn’t catch this reversal and I’m sorry about that. So glad we could fix that or mention that again.
Gutenberg Times Live Q&A
That brings us to announcements and we mentioned it briefly two weeks ago in our episode because it was just coming to pass, but we are thrilled to have Yoast’s partner and Chief Technology Officer Omar Reiss and block team lead Willemien Hallebeek on our next Gutenberg live Q&A.
Omar and Willemien will take us behind the scenes of the making of their open source story that they build which is richly illustrated and quite interactive and they did this all with blocks and I think it would be a great case study, and so Omar and Willemien will share how they built it and explain their approaches and answer your questions. For the first time, Anne McCarthy, developer relations wrangler on the WordPress open source project will join me as a co-host. So that’s going to be some fun too. So join us December 10 at 2:30 Eastern, which is 1930 UTC.
Yeah, that’s going to be a real good one because several developers from Yoast were actually actively developing the Gutenberg plug editor in 17 and 18 and some of them were still around on working on it. So let’s see how what a huge content company does with blocks.
Mark Uraine: Yeah, and I bet you, they have a great warehouse of knowledge between all of them being involved so early on like that. That’s excellent.
Birgit Pauli-Haack: Yeah. And then they also have this SEO part of it where they probably can help us out with a few things.
Mark Uraine: So, Birgit, we got a new podcast review. Yes. From our listener, Bud Kraus, he wrote, “From the start of Birgit Pauli-Haack’s ‘We hear this all the time’ to her sign-off, the Gutenberg Changelog with her sidekick, Mark Uraine, is a weekly not to be missed podcast for me. It’s not just that they do all the hard work of curating news of the block editors development from the four corners of the web, their enthusiasm for the Gutenberg project is infectious. They keep me smiling. You can hear it in their voices and their giggles. Thank you, guys.”
Birgit Pauli-Haack: No, no. Thank you, Bud. This is a review that warms my heart. This is awfully nice. And I hope we can soon stand together again at a WordCamp party and have a drink. Cheers, Bud. Mark, I’m however, sorry about the sidekick comment.
Mark Uraine: Oh, it’s good. I love being your sidekick.
Birgit Pauli-Haack: Well, I don’t think of you as my sidekick. It’s more like adult supervision.
So dear listeners, if you like the show, we would love to read a review from you too. Thank you to all of you who already sent us emails with ideas and updates. We’ll answer every one of them. So, yeah, review and emails. We would love to hear from you. So thank you again, Bud.
Mark Uraine: Bud, you’re spot on about all our laughter and giggles. When Birgit and I get together it’s so fun. I mean, who thought we’d laughed so much in a changelog, right?
Birgit Pauli-Haack: Yeah.
Mark Uraine: We’ve come to community contributions. So there is a recent post on speckyboy.com from Eric Karkovack who explored the question, “When do you need a custom WordPress Gutenberg block?”
So there are already plenty of ready-made blocks available, but maybe the existing options don’t give you enough control or isn’t as feature rich as you need it. Karkovack goes through a few scenarios. It’s a thoughtful read about how to make the best decision for a client project. He also lists the various ways how developers might be able to lock down what site owners can do with blocks without locking them in.
Birgit Pauli-Haack: I think that you can do so many things with blocks now to extend them to make them different. So there are block styles.
Mark Uraine: Yeah.
Birgit Pauli-Haack: There are block variations, there are block patterns, then there are block templates and then there are whole new blocks.
Mark Uraine: Yeah. Extending blocks is a great way. Just chances are there’s probably an existing bot block that gets you most of the way there and if you are a developer and you know how to extend it with few more features, you can do that instead of having to create a whole new block for yourself.
Birgit Pauli-Haack: Yeah. So back in summer, Marius Jensen, WordPress support team lead, created a plugin to make the choice about the full screen mode persistent in the user meta field. So you don’t have to constantly update the setting when your browser cookie expires or when you change the devices. Now, Marius just recently has expanded that plugin scope to also let you persist other block editor settings, for instance, the setting to switch off the welcome message or the focus mode or the fixed toolbar above so there’s just a different storage. But if you store it in the browser cookie, every time you clear those cookies out, you have to do the settings again, and with the plugin from Marius you can actually set them per user on your WordPress site.
Mark Uraine: That’s really cool. I want to just check out that plug in to see how some of this stuff is even done. How does Marius… I’m not familiar with how to set those settings in the database. I mean, I’m sure there are a lot of developers are but I’m not. This would be a great way for me to learn.
Birgit Pauli-Haack: Yeah, absolutely. And I definitely think that this kind of user-related settings should be in core, but I think core is not that far yet because there will be always new settings and tools right now. But it’s a good plugin, yes. So thank you, Marius Jensen.
We are in the section of what’s released and WordPress 5.6 is just around the corner. At the moment of this recording release candidate 3 is available. And if all goes well, it is the last pre-release and now that has already changed. I think they wanted to do a release candidate 4 but the final release is still scheduled for December 8, 2020. And it’s the time for what’s new in WordPress 5.6 posts to mushroom around the net.
Mark Uraine: Yes.
Birgit Pauli-Haack: Yeah.
Mark Uraine: Got to get ours already.
Birgit Pauli-Haack: We will share again, as we did for the last episode the field guide from the release team, which is quite extensive and maybe in two weeks, we can highlight all the other ones that are out there for different use cases or target audiences.
Gutenberg 9.5 Release
Mark Uraine: Perfect. And that brings us to Gutenberg 9.5, which was released this last Wednesday or this last week. There were, let’s see, two features to note. Full height alignment control, implementation and cover block integration. So the cover block now has an ability to set the full height alignment on the image from the toolbar right there. Code block adds support for font sizes. So if you were particular about what size your code should look there is now a font setting, font size setting.
Birgit Pauli-Haack: Yeah. That’s really good because sometimes the lines are too big to kind of…. You have a horizontal scroll bar and then if you can make it a smaller font then you actually can see it in the post, it’s really cool.
Mark Uraine: There were three enhancements that came with this release. Number one, improving block patterns preview in the inserter. So a few more adjustments going in there. Setting like some preview widths, I think, viewpoint widths on those. Enhanced social links placeholder to look more like the end result. Oh, cool, that’s nice. And adding labels. Add labels to image zoom control.
Birgit Pauli-Haack: OK. The social links are still kind of a little bit wonky, I would say, but the placeholder now looking like the real thing is definitely an improvement. I also saw some quirks when it’s in dark theme. So if the background of the theme is a darker color, it kind of looks a bit funny but you’ll get around it.
So there were also two new APIs, one about data and the new storage, and then something about the instant URL. So in the local environment that comes with the plugin, you can now set the URL for your instance.
Mark Uraine: Nice.
Birgit Pauli-Haack: Then we had 23 bug fixes and they are definitely tightening up the interface and fixed a few things there with spacing and adding PX units and all that. One stands out is to restore the gray background on the post editor. Again, in previous versions it was kind of taken out and just white but that didn’t give enough borders for the preview of the tablet or the mobile version.
Mark Uraine: Made the content smaller, but you still had a full white background, so you, weren’t kind of, “Where the edge of the screen, it’s supposed to be?” Yeah. So now you can clearly see that, which is better.
Birgit Pauli-Haack: So another bug fix I wanted to point out is that the authors dropdown is now fixed also for the editors. There was a permission problem there and that has been fixed and so for websites that have multiple teams and multiple editors that they can definitely work with that now. Then the gallery block got some fixes as well as the search block and the image block, the zoom slider width is now fixed and it doesn’t double paste from clipboard now.
Mark Uraine: I didn’t realize that it was a problem. Someone caught it though.
Birgit Pauli-Haack: Yeah. Oh, and then there were two performance enhancements and they don’t tell me anything. So we’re all in behind the scenes. But it seems when we look at the benchmarks that are on the bottom of each release notes or not every one of them, but this one, there seems to be a decrease of load time between the WordPress 5.5 and the Gutenberg 9.5 with half a second shaved off that load time, and with 9.4, the key press event was slower. But it’s now almost back to the previous speed. Those benchmarks they always amaze me.
Mark Uraine: Yeah, right.
Birgit Pauli-Haack: I don’t know if you’ve ever read through it, that it’s a particularly sizable post. It’s kind of the British understatement of the year because the posts that they test us with has 36,000 words.
Mark Uraine: Oh, my goodness.
Birgit Pauli-Haack: And a thousand blocks. So that’s how they measure that. It’s really interesting.
Mark Uraine: And then we had, let’s see, this release had 49 experiment changes. So experiments has gotten huge now, Birgit. A lot of work going into these.
There was also adding theme taxonomy to templates and template parts. So when you’re going through some of these templates and template parts, you’re going to start seeing some taxonomy updates. I know one of those PRs had to do with, which is great. They’re trying to simplify some words and get still keep them aligned with what people understand when dealing with templates and WordPress. Full site editing blocks saw some updates. So let’s see, make the post title block editable, which is nice. So there’s a post title block and it’s editable.
Post comment updating the placeholder there. Enabling post featured image to be set and replaced. This was a good one. So the post featured image block. Yes, you can set and replace the post featured image there. Initially we were rolling out with allowing you to completely remove the featured image from that block but then it would just leave the block there. And so a lot of conversation went back and forth on that and we decided against that. From within the block you can replace or update that featured image but you couldn’t remove it from the post. You could remove the block but just not…. You’d have to go to the sidebar. So the query block is seeing a lot of updates like the grid view was introduced, adding a post list variation of this block, new settings icon and the block toolbar, updating the query blocks icon in the query loop using inner blocks props as well.
Birgit Pauli-Haack: Yeah. With all those changes now in the experiments, I think it’s time for me to make one of our test sites of full block-based theme that will trigger those full site editing features.
Mark Uraine: Yeah. I was talking to you about it, Birgit, how I had one of my sites I was using the theme Q, the block-based theme from Ari, and initially I was still kind of struggling through the Gutenberg interface, the block editor interface or the site editor interface with it but it’s been coming along really nicely. I just accidentally stumbled upon it because I went to that site again and I was relieved by what I saw.
Birgit Pauli-Haack: Yeah. Now that my block that is in production actually using WordPress trunk and PHP 8 for the testing part that we did for 5.6. I think now when 5.6 comes out, I can switch it over to a block-based theme and I probably will do the one that Frank Klein just landed in the repository, try to work with that.
Figure out the editor which also got quite a few changes and updates. The site editor is the one that’s now the block editor or the post editor it’s the site editor. And it will replace the admin bar customize to site editor and then update the new templates dropdown list and have some dependency removed and the navigation gets some changes in terms of menus and handle. What happens when the search doesn’t have any results and add the search block to templates and template parts.
Then the global styles is another section of the experiment. I think you cannot switch them all on. They’re all part of one experiment. The full site editing. The global styles got some additional updates like the font appearance for global styles, the block panels, default sizes in PX units in the theme, json. Well now you get a button to reset actually the color palette to something that was previously there.
Mark Uraine: That’s good.
Birgit Pauli-Haack: Yeah, and if you got yourself lost.
Mark Uraine: “Let’s try this color? No, let’s try this color. No. Oh.” And then before you know it.
Birgit Pauli-Haack: And then you look at it and all looks kind of psychedelic colors. That actually reminds me that my first website had blue and red and then white text on top of it. And it was really kind of… You looked at it and it was like, “Meee.” I’m sure I can reproduce that with the global styles.
Then there is another section I like that there’s changelog now that was published, has a more granular approach to all that, but didn’t have the separation between full-site frameworks and full site blocks and there’s also a additional feature in the WP admin where you can manage the templates and template parts. So you’ll get additional columns of views and you can also extend the WP template admin list with views and columns. There were some bug fixes in the separate experiments section. So that’s how big it actually is already.
Mark Uraine: Yes, nine bug fixes in the experiments section. That’s hilarious.
OK. So documentation saw about 12 changes and the documentation one was creating a block-based theme tutorial. There was an update there. The document about the data, improving documentation for new API added around stores and WP and V saw an update to the improved documentation for the ‘run’ command and plenty of typos and tweaks as well.
Code quality. There were 16 updates in the code quality section of which I am not going to go over any of them.
Mark Uraine: There you go.
Birgit Pauli-Haack: Yeah. And that’s a nice calendar.
Mark Uraine: That’s right.
Birgit Pauli-Haack: From the meta team.
Mark Uraine: Yeah. They put that together.
Birgit Pauli-Haack: But at least it’s not wordpress.org. but it’s make.wordpress.org/meetings.
Mark Uraine: Oh, make. So it’s getting the clever, crafty page not found. Graphic.
Birgit Pauli-Haack: Yeah. It’s not Wednesdays, it’s on Tuesdays.
Mark Uraine: OK.
Birgit Pauli-Haack: Tuesday, 10:00 AM, Eastern, 1500 UTC.
Mark Uraine: OK. And then build tooling saw about 11 changes with this release, GitHub actions, building the plugin zip and storing as an artifact on every PR. Birgit, what do you think about this?
Birgit Pauli-Haack: Yeah, it’s interesting. I think that it could replace our service on Gutenberg to do a S.I. Pro Master where people can download it and have it updated in their site. I need to research that a bit and to see where you actually can download that and what happens when you update and how that works.
Mark Uraine: Yeah. It seems like a lot of files to be stored as artifacts if it’s for every PR but I’m not certain how that’s taken care of. But I know you and I were looking for it a little bit and it wasn’t easy to find for us.
Birgit Pauli-Haack: No. Yeah. Although there were screenshots, but I wasn’t able to identify where it is. Might have been the rush going through that before our show. So if you have more time, leisure time, sometimes our brains are a little bit you … when somebody else watches over your shoulder?
Mark Uraine: Right?
Birgit Pauli-Haack: Yeah. So I’m going to research that. Yeah.
Mark Uraine: Another one of these toolings was adding support to WP and ENV for setting the PHP version. Okay. So you could set the version to run your local site on PHP version and … correct?
Birgit Pauli-Haack: If you want to change it, send it to PHP 8, because then you can test all the plugins and all the core.
Mark Uraine: Yeah, there you go.
Birgit Pauli-Haack: For PHP 8 compatibility.
Mark Uraine: End-to-end test saw a change. Fixing the randomly failing end-to-end test that seems to be occurring. Although for me, my end-to-end tests always fail regardless, so even though this got into 9.4, I’m still getting 9.5.
Birgit Pauli-Haack: That’s right.
Mark Uraine: Maybe because I was on 9.4.
Birgit Pauli-Haack: Yeah, could be. But you didn’t get the new version of it.
Mark Uraine: Then finally, our last little bucket of changelog items, the various bucket and there’s a couple here we’ll throw out simplify … there were 10 total of these. First one being simplify the CSS for the code block. OK. Another one being decreased scrim when in the modal overlay. So the scrim is kind of like the overlay when you pull up a little modal and the screen gets blacked out a little bit. That’s what’s called the scrim and so the opacity has been decreased a little bit so it’s not as dark.
Birgit Pauli-Haack: Yeah.
Mark Uraine: And then the blocks supports separate opt in for font style and weight options. Okay.
Birgit Pauli-Haack: Yeah, that’s for themes and blocks, so to speak. All right. This is the end of our … not our show but the changelog from Gutenberg 9.5.
Mark Uraine: That’s it. It’s 9.5.
Birgit Pauli-Haack: That’s it.
Active Development or Discussed
So what’s in active development and heavily discussed amongst the team and then we have the three sections there. One is global styles. We will share the show notes an initial list for things that the team thinks need to be in version 1 and how you can track those. So the global styles, the focus remains on tightening up and fixing the flows with the goal of preparing for version 1. So it can land in an early version of WordPress 5.7 cycle. Then we have these additional links down.
In the full site editing, there is a pagination block in the works with different variations alongside the query block. The query block tools have … the controls need to be revised and kind of help with the discussion. Would be good if you could kind of just go in there and let your opinion be known. Then the team is exploring the idea of a query block builder UI to scale the experience for advanced users.
Mark Uraine: Yeah. I think we veered away from that for now, but there are some prototypes there if anyone wants to check that out.
Birgit Pauli-Haack: Well, it could also be quite the plug-in territory for a lot of people, yeah?
Mark Uraine: Yeah. It could. But it seems just because that query blocks is so complex, we thought, “Well, what if we brought everything up to the foreground before you even saw the block?” And so that’s where this builder comes in.
Birgit Pauli-Haack: Yeah. But a few developers who are listening here might be interested in the PHP experiments for the template loader that allow PHP in-block templates and parts. I think that is something that a lot of people would like to see how that would work out.
So after pausing in November, the widget screen is in more focus again and currently the work involves an exploratory phase and to find the best path for adding blocks in the customizer. And you mentioned something like that, Mark, that you’re doing some designs right now. I think it could be really interesting to see how that actually turns out.
Mark Uraine: You know we’ve really come to the point where that customizer is going to be around for a long time. So how can we bring blocks in? Initially we were thinking of a faster way to do this, that kind of relied heavily on the mobile web, but now that we realized it’s going to be around for a long time, so let’s see if we can bring them in and also kind of improve that experience for people while they’re in the widget section of the customizer.
Birgit Pauli-Haack: Yeah. I’m glad there is another focus on that, but just today I opened the widget screen on the Gutenberg Times and I saw a lot of error messages there and I said, “Oh, OK. I definitely need to test this later on.” It didn’t get any attention for a while and that’s what happens. It kind of deteriorates by its own.
Mark Uraine: Oh, yeah.
State of the Word 2020
Birgit Pauli-Haack: So this brings us to almost the end of our show. Before we leave, so to speak, I just wanted to point out December 10th, is our live Q&A but one week later, there will be a streaming of the State of the Word 2020. It will be streamed directly to Facebook, YouTube and Twitter on Thursday, December 17, 2020 at 1600, which is 11:00 AM Eastern. Normally there is no WordCamp US where normally the State of the Word would be, so this is now a separate event and you can submit your questions by uploading it as an unlisted video to YouTube, and then send a link to the email address firstname.lastname@example.org. We will have a link to the announcement that just came in before we started our recording, of course, in the show notes. So I’m really looking forward to that.
Mark Uraine: Yeah?
Birgit Pauli-Haack: Yeah.
Mark Uraine: I will say I’ve gotten a peek at some of the designs possible directions for it and it’s going to be fantastic.
Birgit Pauli-Haack: All right.
Mark Uraine: I’m excited for this one.
Birgit Pauli-Haack: So are you going to be involved in the slides again?
Mark Uraine: Not so much lately. I am not. Another designer is taking this on and so I’m definitely there if she needs any help or support, but there’s several of us that are familiar with this process and what’s interesting is that because this is going to be live streamed or it’s going to be streamed, that the preparation time up to it is going to go a little bit smoother, I think, rather than actually being at the WordCamp, trying to dial it in. It’s going to be a little better process, I think. We have a good idea for what needs to get in there.
Birgit Pauli-Haack: Yeah. Excellent. So dear listeners, as always the show notes will be published on gutenbergtimes.com/podcast. And this is episode 34. If you have questions or suggestions or news you want us to include, send them to email@example.com. That’s the email address firstname.lastname@example.org. Well, thank you all for listening, and this is goodbye for me until the next time.
Mark Uraine: Thank you, Birgit, for hosting with me today, and to all our listeners, have a great December.
Birgit Pauli-Haack: Thank you, Mark. Yes, bye-bye.