Gutenberg Changelog #16 – Gutenberg 7.7 Release, #WPBlockTalk and Block Patterns

Mark Uraine and Birgit Pauli-Haack discuss the release of Gutenberg 7.7 Release, #WPBlockTalk Conference and Block Patterns as well as bug fixes, experiments and what’s in active development.

Birgit Pauli-Haack: Well, hello, and welcome to our 16th episode of the Gutenberg Changelog. In today’s episode we will talk about Gutenberg 7.7, the new version of the plugin, WPBlockTalk conference, Block Patterns and so much more.

Mark Uraine: This sounds exciting.

Birgit Pauli-Haack: Welcome everybody. Thanks for joining us today. I’m Birgit Pauli-Haack, publisher of the Gutenberg Times and owner of Pauli Systems, a web development company for nonprofits and small businesses. I’m here with my co-host, Mark Uraine, designer at Automattic and core contributor to WordPress. How are you today, Mark?

Mark Uraine: You know, Birgit. Hello. I am a bit under the weather today. I’ve been coughing and sneezing and sniffling, all that stuff. But I’m excited about today’s show with you.

Birgit Pauli-Haack: I hope you feel better. That’s awful. I’m sorry.

Mark Uraine: I know I have a religious talk coming up this weekend, tomorrow actually. And I’m hoping to be tip-top shape by then. But how have you been hanging in there?

Birgit Pauli-Haack: Yeah, hanging in there. Yeah, we had so many cancellations of WordCamps. So one of the stories today, I’m really happy about that. And other than that, I’m hanging in there. I’m good, I’m a little bit behind on some projects, but the weekend I can catch it up, so. And I’m so glad we are back together on this Gutenberg Changelog and with you, our dear listeners. So speaking of listeners…

Mark Uraine: Yeah, Yeah. There was a Jofran Lirio who asked us a question on Twitter. He says, “Hi, do you know the better way to build archive and taxonomy templates using Gutenberg?” That’s a great question. Thank you so much for that, Jofran. It’s not in Gutenberg, it’s not quite possible yet. I mean we do have the latest posts block things of that nature, but we have — there’s a search block and stuff, but we haven’t really explored or solidified the details around the archive pages and these taxonomy templates. But we’re exploring that right now. And in Gutenberg on GitHub, if you look up post blocks, you’ll see a lot of these various blocks that we’re designing right now, figuring out how they integrate with each other. You’ll even see there’s a query block. And this query block is about really displaying all your posts. So on the archive page, basically you would have a page and you’d call it the archive and that’s where you’d put the query block. But everything is a block in Gutenberg. So figuring all that out, how all those translate into blocks is really a fun experiment for us right now.

Birgit Pauli-Haack: And interestingly enough, the archive page for our podcast didn’t have the information about the podcast, like the links we have to subscribe and the description of the podcast, and I put this in there in PHP and recreated it. But then I thought, well, I have this reusable block with all the links to Spotify and iTunes and that all, and I could just use the… Can I use the reusable block? Now you can’t.

Mark Uraine: No.

Birgit Pauli-Haack: It’s not working yet. But that’s pretty much the use case for that as well. That you can put additional information in your archive page that are blocks. So I’m really looking forward to that. Yeah, Enrice told me that’s not working yet.

Mark Uraine: It’s coming. It’s very close.

Birgit Pauli-Haack: So close, so close.

WPBlockTalk Conference

Birgit Pauli-Haack: Yeah, and I mentioned that at the beginning. So after all of those WordCamp cancellations that happened this week or the week before, Mark and I are super excited to tell you about the WPBlockTalk Conference. It’s planned for April 2nd, it’s all about Gutenberg, a WordPress community event in the works for several weeks, way before the crazy coronavirus hit home. We will have some awesome speakers who have done some exceptional work around the block editor. So there will be case studies, tutorials about block patterns, themes, shortcode conversions, tooling, and lots of Q and A. The exact schedule will come out in a few days from when you are listening to this episode. It’s probably already out and we know about some great speakers. On the website you see already headshots of Matias Ventura, Rich Tabor, Mel Choyce. Of course, Matt Mullenweg will start with the big picture overview of where Gutenberg is headed. And then we’ll hear also from K. Adam White, Enrice Sanchez, Tammie Lister, Greg Ziolkowski, Bill Erickson, Beth Soderberg, and a lot more.

So save the date, block the whole day. See what I did there? April 2, 2020. You can subscribe for updates at the conference site, which is WPblocktalk.wordpress.stream, S-T-R-E-A-M. The URL is a bit quirky, modern, so again, WPblocktalk.wordpress.stream. Oh, I almost forgot. Who do you think is going to be the MC of the conference? That’s right, Mark Uraine, my brilliant co-host.

Mark Uraine: Oh, this is going to be such a fun event. It’s the first one, everybody, of its kind. So we’re going to be streaming these things live, Q and A with people. Please go to the website, sign up, follow the Twitter. I think there’s a Twitter account now as well. It’s going to be a fun event with some very amazing people in the community.

Birgit Pauli-Haack: I’m looking so much forward to that. And it will, then all the talks will be also uploaded to WordPress TV, but the live Q and A is actually the one that we’re really… you learn so much about it. So join us, April 2nd.

Mark Uraine: Birgit, I want to thank you so much for all the work you’ve put into this event. I know you’ve spent a lot of time helping to plan this.

Birgit Pauli-Haack: Oh, it was a great pleasure. I’m not the only one planning this. There is a whole team around it. And none other than Brian Richards from WordPress is kind of doing the infrastructure and setting that up on the livestream because he has so much experience. So, he’s the master of ceremony there in the background. Yeah. And then there’s Andrea Middleton is on the team. Josepha, Rebecca Collins. Megan Marcel. Yeah. So Selena. Yeah, so it’s going to be really cool.

WordPress VIP Webinar

Mark Uraine: All right, so let’s see, what else do we have here? So a week before the WPBlockTalk Conference, so this is going to be happening on March 26th. There’s a webinar hosted by WordPress VIP. It’s called Build an Enterprise Newsletter in Minutes. WordPress VIP and Gold Agency partner with rtCamp. They’ll show you how the Mortgage Bankers Association slashed the time it takes to produce a monthly newsletter from several hours down to 10 minutes. To learn how the WordPress Block Editor can speed your time to market, get fresh ideas for building replicable, scalable workflows, study real life examples of Gutenberg and participate in a live Q and A with rtCamp’s Guten-experts.

Birgit Pauli-Haack: Oh, here it was again, the Gutenberg joke, pun.

Mark Uraine: Love them. Love that. So yeah, we’ll have the link in the show notes for that webinar as well. Let’s see, so that brings us to community contributions.

Birgit Pauli-Haack: All right, yeah. Munir Kamal is behind Gutenberg Hub, gutenberghub.com. And he released a new site, a library of block patterns at templates.gutenberghub.com. So the templates are all sorted by categories like stats or pricing or logos, testimonial, team. And each category has quite a few variations and it’s growing. So some categories have four or six and some have 12. So really, it’s really interesting. Once you find a pattern, you can use the button, copy code. And it’s not really code, it’s the HTML code for a block. And you can paste it directly into an empty row of your content.

And if you need additional CSA, you can copy that too. But that will be a little bit… So you need a plugin to actually paste it onto a site. And the plugin is called Blocks CSS plugin from the WordPress Repository built by Themeisle and Hardeep Asrani. And it gives you a little small box in the block sidebar settings and called Custom CSS like you know from the customizer. And for each particular block you can then paste those block patterns, CSS directly in the sidebar section. It’s actually quite easy to do once you get those three steps going. So try them out. It’s really remarkable what happened there.

Mark Uraine: Have you noticed Birgit, is the CSS, that plugin, is that used mainly for some of the animation that he’s included with those block patterns?

Birgit Pauli-Haack: No, not necessarily. He has a separate CSS for those block patterns so if you don’t want it, you don’t have to use them. But the block patterns CSS, if you want to change some of the things, it helps you so you can just write the CSS code into a sidewall pattern instead of kind of going out and going into the customizer and start writing it there. Yeah.

Mark Uraine: Yeah. That site is just beautifully filled with patterns that are really fun to look at. Even how they all really tie in this blue color, and just kind of share a very common theme throughout many of them. Just fun to see. Well done. 

Share a Block

That brings us speaking, you know about patterns. We’ve talked about Share a Block from Jeffrey Carandang, his site, shareablock.com where people can upload patterns and share patterns. There’s been some recent additions. Let’s see, Mel Choyce and Anders Noren. Mel added “Get in touch” text overlaying a fixed background image, kind of like a hero block pattern. Anders uploaded the landing page for the demo site of his Chaplin theme over the shareblock.com. Those are both available right now and you can grab them and mess around with them on your own site.

Birgit Pauli-Haack: Yeah, and those really… It’s growing. Yeah. Jeffery has uploaded quite a few, so check them out. There’s quite a few that you could use on your own site or can grab some ideas for your own custom blocks.

Automattic Tests Page Layouts

Mark Uraine: Then we also have something from Automattic. There was a recent post about page layouts from Ian Stewart turning a page with page layouts and this is on the wordpress.com blog, talking about how wordpress.com is providing templates, page templates or layouts ready to go for you to incorporate into your site and edit as you please. There’s some really beautiful layouts there. And a while ago they had released a plugin for full page editing that anybody can use on the wordpress.org plugins directory for full site editing, which I believe they’re incorporating with these page layouts.

Future of Building Block Patterns

Then we have Rich Tabor. He wrote an article about block patterns, about a discussion on the dev team, how they might look in the future. So anybody wanting to learn more about what some people are talking about regarding block patterns, that’d be a great blog post to read on richtabor.com/block-patterns. And in addition to this, there’s the new Go Themes by GoDaddy. These were also created by Rich Tabor and his team. I believe they used the Automattic plugin for full site editing as well to offer their patterns and page layouts. That sounds right, Birgit?

Birgit Pauli-Haack: Yes, yes. That’s quite interesting, I saw it in testing. To use that you also need to use the experimental check for full site editing and then also the plugin needs to be… Automattic plugin needs to be installed. But those block patterns and page layouts are very nicely coming in then for you when you click on new page, that’s the first choices that you have in starting out at faster speed then. So it’s really cool.

WordPress 7.7 Release

So what’s released is our next section here. So Gutenberg plugin version 7.7 was released on March 11th. A day later, March 12th, we had a 7.7.1 with urgent bug fixes for the columns block followed. WordPress 5.4 is now in release candidate too. And none of the new updates of the plugin will be in the next WordPress release. That’s of course by design as there are big updates, a MVP for block patterns. Here’s the word, again, a repaint of the block UI that we mentioned before under the moniker G2 Project. And so the target for this landing in core is 5.5, that’s in August 2020. And as Matias Ventura wrote, “This should give us a full release cycle to test, tweak and gather further feedback.” Mark, do you want to walk us through the two big items of this release?

Mark Uraine: Yeah, I’d love to. So, the first one as Birgit mentioned was block patterns. The MVP is integrated in the plugin now, so you’ll see an icon in the upper right hand corner. It looks like a layout of a few blocks. If you click that, that’ll open up a sidebar with some really preliminary patterns right now inside there. We’re currently building several other patterns out right now. We’re kind of focusing more towards some common patterns that people use on their sites. So we can get these patterns in there and ready to go for people to use. And then we’ll make our way more towards maybe some opinionated, beautiful patterns. And one thing we’re learning with this, Birgit, is there’s a lot of people right now creating patterns. And they’re really trying to, from a very aspirational aspect right now or point of view to really create something that are beautiful, opinionated and just make… They’re just amazing to look at, but you can’t really necessarily build that in Gutenberg yet.

So some of these patterns are going to inform us, the people who are building this, to kind of what needs to happen in the interface and what we need to build so that these patterns are possible. One of the big ones is like overlay of text on top of an image where the text only overlays maybe halfway across the image, right? That’s a very beautiful pattern and people like that. But we can’t really do that perfectly or easily in Gutenberg. So this block pattern work is coming along really nicely right now. Check it out, try to add a few patterns everyone. It’s going to be amazing because also we want to make sure we open this up for people like Jeffrey, people like, let’s see, who was a Munir Kamal, so that they can use the interface in Gutenberg to really share their patterns outward through a plugin or something.

Birgit Pauli-Haack: Yeah. So, but block patterns, I think we are not quite sure yet what it all is, is a page layout block pattern or something like that. But there have been in some of the block collections for quite a while. And I know the first one I think was Mike McAlister, yeah. And he had some nice block patterns. And then most of the block collections right now in plugins have some kind of patterns, so.

Mark Uraine: A lot of them do, sure.

Birgit Pauli-Haack: So going through them and figure out, OK, how can we mark them all standardized and then in display? And it’s very interesting how that development goes.

Mark Uraine: Yeah, and the patterns ideally are really just a section of your webpage that contains a few common layouts of something to… a specific design you’re trying to achieve for your page and it’s completely editable, customizable. You just add the pattern and then you have to kind of make it yours. The other one, Birgit, was this new block UI which you covered called G2. If you haven’t tried out the plugin, please try it out. I’ve talked to a few people now who said they were a bit hesitant with this whole thing at first, but they gave it a little bit of time, worked with it and it’s grown on them. I was probably the same there. It’s definitely a step away from kind of what you’re used to in Gutenberg right now. It’s very high contrast, black and white. There’s a lot less UI, so you’re not going to get all those block borders where… All the time we’re hearing like there are borders still, but for only for a specific use case.

So, otherwise it’s just content and you’re just typing and there’s a whole new icon library getting merged in. Beautiful icons, really good work. Yolan and Pablo and Matias, they spent a lot of time working on this stuff and they’ve been doing it all out in open, too. So it’s all there on GitHub. There’s been an issue out there. People can chime in. A lot of feedback has been given, but it’s still a work in progress. It’s not complete. So you’re going to open up the editor in 7.7 and the plugin and you’re going to see a different interface, but then you’re going to open up the sidebar and you’re going to be like, “Oh, that’s the same still.” So, there’s a little bit that needs to carry over into the sidebar and into the other elements of the page. We’re working on that though.

Birgit Pauli-Haack: I really like it. Yeah.

Mark Uraine: You do?

Birgit Pauli-Haack: Yeah.

Mark Uraine: Oh, that’s so good to hear. I was hesitant to ask you because on the air I was like, “Oh, maybe I shouldn’t put you on the spot.”

Birgit Pauli-Haack: Well, and I can be opinionated and I’m not shy about it, so.

Mark Uraine: That’s good to hear. I’m glad you enjoy it.

Birgit Pauli-Haack: Yeah, it was a lot of work. I know that there were months and months people were working on it to make it less busy, less noisy but also very accessible and these kind of things.

Mark Uraine: Yeah. Yeah, and it wasn’t one where you could like do incrementally with little PRs here and there. It was like if you’re kind to do this, just have one PR and just completely change it all. And so that and then it branched off into what was called the G3, which was other elements. So the UI is in 7.7, the new UI. 

What else did we have on this docket here? I was just going to add like the making the editor default to full screen was one that got in there. This is definitely been a conversation in the community because this merge was… Or this particular default screen was added in prior to the RC2 and was it prior to RC1 or RC2? I already forget.

Birgit Pauli-Haack: I think it was RC2, yep.

Mark Uraine: RC2, OK. And this was something that Matt Mullenweg has been wanting to get in for some time now. There’s been some talk about hosting providers noticing that this was a preferred state. I know wordpress.com, this is like the default state there and so we got that in. It’s going to be in WordPress 5.4 and while I find it, I personally find it a better experience because it really minimizes just other link distractions that are all over. And once I’m in Gutenberg, I kind of want to jump in and start editing, focusing on the content or the layout. I’m really not worried about all the other WP admin stuff. But there are a lot of opinions on the other side as well that are really well-thought-out and said and mentioned. And so there’s definitely been a couple of issues we’ve noticed. So we’re working to really make the experience flow better for the user and help bring the users into the editor better.

Birgit Pauli-Haack: Yeah. I also checked in with GoDaddy because I know I read somewhere on the many sites that I was, that GoDaddy actually makes that the default, and they go one step further, which I like. And I would have thought that that was what would be included is to also make enabled by default the top toolbar. So a lot of writers told me that when they are in the editing screen, it’s all a distraction. Yeah.

When they started writing and then the block toolbar pops up. And so sticking the toolbar on the top is actually a good way to take this out of the eye and GoDaddy has some great experiences there. They saw that people are distracted with whatever’s in the admin, PW admin menu, they don’t have to bother with it and, but they’re only do it for new site owners. Yeah. So I think the contention was a little bit more about the users that are now surprised that their settings change and it’s in default. And I think it’s a minor thing, but it’s definitely a surprise when it comes. But as soon as we had to undo it, they’re back to working again, but that’s…

Mark Uraine: Not that default setting really shouldn’t affect current users. If your setting is that it’s not the full screen setting, it shouldn’t affect you. Unless you’re opening your site in a new browser or on a new device because the setting state is stored in local storage. So that’s one of the points of discussion around is really those settings need to be stored in the database to be more persistent. So that the people have the same experience regardless of device or browser.

Birgit Pauli-Haack: That’s certainly a broader discussion because those also the guides to come up. Yeah. If you change your browser, the new user guides come up again, pop up again. Although you have been using it for quite a while because you’ve changed your browser. So yeah, putting the settings, the default settings of screen options and preferences should probably be in a user metatable or something like that.

Mark Uraine: Yeah, I think so, too. And then in addition to that, if you open up the inserter, the block inserter, the block library in the upper left hand corner of Gutenberg. Now you’ll see that the modal or the screen is full height of the inserter now or of the monitor. And that’s in preparation of some of the new designs coming out where we’re going to eventually bring the block patterns into that inserter and kind of merge them together. So you can add both blocks and block patterns right from that one area.

Birgit Pauli-Haack: Yeah, that’s awesome. And if you follow some of the GitHub issues around that, you will see some designs where that happens. And I think Rich Tabor will also had it in there in his article that we will link to in our show notes, of course. So what else is in 7.7 and 7.71? There were a lot of bug fixes, 26 of them. So the accessibility fixes for the image gallery and the top toolbar tab order as well as for the SVG icons. The column block as mentioned, got quite a few more bug fixes. And so the media plus text block and the latest post block.

Mark Uraine: Going to chime in about that column block. And I believe it’s merged in, I haven’t checked just recently. But if you ever use the column block, you would, and you had three columns, you’d set the width for one column, right? And then you’d go and you’d set the width maybe on the last column, and then you’d come to the middle, set the… As soon as you start setting the width on multiple columns, it starts changing the width on the other columns that you already set a width on. Which has always been an issue and really a problem that’s been resolved if I’m right. And I think it is merged into 7.7 here.

Birgit Pauli-Haack: So it affects us all.

Mark Uraine: So it’s a lot better. It should be persistent with the user settings now.

Birgit Pauli-Haack: Oh, good. Good. Yeah, the social block…

Mark Uraine: I’m so sorry. I did a bunch of tests, usability tests on the column block in January. And I just recently posted about it on the Make Test blog. So if anybody’s interested in seeing how people use the column block and get around, those tests were really eye-opening, basically to even find the width for an individual column was impossible for almost all the users who tried, so.

Birgit Pauli-Haack: Yeah, I can imagine. Yeah, that’s definitely eye-opening. So continuing with the bug fixes, there were the also bugs fixed with a social block and then quite a few browser-related fixes for issues in Safari, Firefox, I.E. 11 and Edge and their users will be grateful. There’s also updates on the experiments in the plugin and it will have a lighted arm, locked arm so it’s loaded faster and it has an automatic ad block class, some lighted inner blocks, so when you fill in the group block and the column blocks with more and more blocks, it’s easier to handle. It also has some updates on the full site editing sections with the template navigation using the link control and also modal why for the save feature.

Mark Uraine: Yeah, in full site editing, a user’s going to be able to make edits to a template part, to a template, to the content. And so there needs to be a way to inform the user that when they’re ready to publish or when they’re ready to save their content, like all these various things that have been changed and to let them know like, “OK, all of these things are going to be changed. Are you sure?” OK.

Birgit Pauli-Haack: Yeah, that’s certainly helpful. But I think also there is quite a few user interface work to be done for that.

Mark Uraine: Definitely.

Birgit Pauli-Haack: That’s why it’s still on the experiments, right?

Mark Uraine: Yeah.

Birgit Pauli-Haack: So it also has some fixes for the block toolbar in the widgets as well as the site editing screen and the insert on for the widget screen in the experiments. That has been a little bit fallen off the radar a bit to make those widgets work because they are refactoring. I understood that part of it. All right, so that’s what about up fixes and experiments and Gutenberg 7.7, what else?

Code Quality

Mark Uraine: That brings us to a new section called Code Quality. So this included things like refactoring existing blocks for the lighter DOM, that clean up of CSS variables, refactoring the slot fill components, resizable editor improvements, a bunch of just little areas throughout the code that’s just being cleaned up. So in the various section we have some changes to the WordPress EMV, the create block and end-to-end tests, 11 total there.

Birgit Pauli-Haack: Awesome. So there’s also a lot of documentation work done, and one is a tutorial to create a custom block editor instance outside the editor. So you learn how to use the editor package on other places of your site outside the post and editing screens. A use case is to make it available for instance, for a custom admin page or what I have been thinking about is a desk board widget for the welcome screen replacing the quick post widget. So the tutorial was created by Dave Smith and it was just now migrated over to the WordPress Repository and put in into the documentation for developers.

Also created was a new section called Gutenberg as a Platform. And it’s initially only has links to components and scripts, but it’s a good place for additional documentation, especially around using those packages. And that’s in the first tutorial in that section is the custom block editor instance tutorial. Yeah, and it’s indeed when you go to developers.workers.org blockeditor and then click on developers, go all the way down to the Gutenberg as a Platform and then you find it. Of course, we will put a link into the show notes. That was everything from what we want to talk about from the plugin that we found interesting. And there are quite a few things in active development and discuss. And Mark just published his number 45 Gutenberg 2 updates. And Mark, what did you put in there? What do you talk about?

Gutenberg 2 Updates #45

Mark Uraine: Yeah. So I talked a little bit about Gutenberg 7.7 in that post, but I also wanted to touch on our Figma libraries that we use in the design team. Figma is a design tool and allows for collaborative designing right in the cloud. And with the G2 updates, this new UI, I wanted to give a heads-up to other designers out there who are mocking things up in Gutenberg and building stuff that the G2… A lot of the components are up on that Figma library as well. And so I just wanted to help out our fellow designers out there and developers so they can find some resources.

Birgit Pauli-Haack: So just to clarify, they do not mock you, they’re not mocking you.

Mark Uraine: Although I don’t know, actually. I’m sure I get mocked quite often.

Birgit Pauli-Haack: No comment.

Mark Uraine: Yeah, I just wanted to share a little bit about that because G2 is such a big change. I just wanted to help bring some resources to people.

Birgit Pauli-Haack: In that post, however is also a big… Oh, is that, that’s part of the Figma file, is a big diagram layout for the various part, identifying the various part of the block editor. This is huge and it’s also small print, so I’m not sure.

Mark Uraine: You’re welcome.

Birgit Pauli-Haack: I would love to bring this into documents also for the end users because it lays everything out quite nicely. But in that size I need to think about it, how I get it in there. So if you have an idea, Mark, I’d be happy to listen to it.

Mark Uraine: There might be a way we can kind of redesign some of that. Like bring the Gutenberg UI, like the screenshot down smaller, and then we can fix it and blow up some of the texts, the annotations around it. If that could help, we could just jump in and make some changes.

Riad Benguella – Summary Issue for Full Page Editing Development

Birgit Pauli-Haack: Yeah, we definitely need to go work on that. Riyadh Benguela created a summary issue for the whole section of full page editing, so list all the issues and PRs that are open right now and he divided them up into subheaders, like this for framework. This is for editing sites, the site interface and this is for small enhancements and then it’s the site and post blocks that are needed. Then the rest of it, and then eventually about the global styles. It’s a great way to catch up on all the full site editing work that’s being done and all the issues that are out there. They need always a lot of opinions so it would be helpful if your listeners kind of go there and chime in and check it out and see if you can form an opinion and make it heard.

Mark Uraine: Definitely that list is very helpful for anybody just kind of looking through to see what are the next tasks.

Birgit Pauli-Haack: So we will end this. So we are at the end, almost at the end. Before I end I wanted to remind everyone April 2nd, 2020, WPTalk Conference. Watch the Twitter feed. The hashtag is #WPblocktalk for the announcements. 

And as always the show notes will be published on the gutenbergtimes.com/podcast. And if you have questions or suggestions or news, you can send us an email to changelog@gutenbergtimes.com, that’s changelog@gutenbergtimes.com. Thank you so much that you were here again with us. It was very interesting, I thought. I hope you feel the same and this is until the next time.

Mark Uraine: Thank you for listening, everybody. Birgit, thank you so much.

Birgit Pauli-Haack: Thank you, Mark. Bye.

Mark Uraine: Bye-bye.