In this episode, we discuss Gutenberg plugin release 7.9, Gradients, Full Site Editing, Block Patterns, new APIs, Community Contributions and Experiments.
- Music: Homer Gaines
- Editor: Sandy Reed
- Logo: Mark Uraine
- Production: Pauli Systems
Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed
Show Notes
The recordings of the WPBlockTalk conference are now available on WordPress TV
Community Contributions
Haris Zulfiqar: Gutenberg Theme Styles Integration and almost WYSIWYG
Block Patterns
- Mel Choyce: Creating a simple block pattern plugin for the Gutenberg editor
- Block Pattern Documentation
- Justin Tadlock: Create Custom Patterns with the Block Pattern Builder Plugin
- Block Pattern Builder plugin
Gutenberg 7.9 + 7.9.1
- Release Notes by Andres: What’s new in Gutenberg (15 April)
- WPTavern: Gutenberg 7.9 Adds Gradients to More Blocks, Extra Typography Controls, and New Patterns
What’s in active development and discussion
Gutenberg Phase 2 Friday Design Update #49
Transcript
Birgit Pauli-Haack: Hello and welcome to our 18th episode of the Gutenberg Changelog. In today’s show we will talk about Gutenberg 7.9 — Gradients, full site editing, and block patterns. I’m Birgit Pauli-Haack, curator at the Gutenberg Times and owner of Pauli Systems, an online business agency assisting non-profits to connect with their donors online. I’m here with my co-host, Mark Uraine, designer at Automattic, core contributor to WordPress and design lead of Gutenberg Phase Two. How are you doing, Mark?
Mark Uraine: Hey there, Birgit.
Birgit Pauli-Haack: Hey.
Mark Uraine: I am so anxious lately, being in quarantine. I’ll tell you, my kids are photo-bombing my Zoom calls. I’m high-dosing vitamin C to stay healthy, but I’ve never valued getting outside as much as I do nowadays though. I’m so thankful though that there’s a lot of good happening in the world. People are showing compassion, empathizing with one another, and generally smaller communities are really helping the regions in which they are. So, a lot of good. How have you been doing?
Birgit Pauli-Haack: Well, I’m in day 39 or 38 of staying home, but we have been good. We did 8 weeks of couch to 5k in a little over 4 weeks and now I can jog for 25 minutes straight, which is actually an accomplishment for someone like me who hasn’t run that long.
Mark Uraine: Oh, cool.
Birgit Pauli-Haack: So, yeah. Other than that, I’m getting a little bit more wanderlust. It was a time that we were supposed to go to Europe. I’m kind of still longing for that, but can’t help it, it’s better to stay here. It’s not safe yet to fly.
WPBlockTalk Conference
So, today we have a few announcements. Actually, one announcement, and that is the recordings of the WP BlockTalk Conference are now available on WordPress TV. If you missed the live event or if you want to watch some talks again, you can check them out. Some are an hour and 20 minutes, like the theme case studies with the impromptu Q and A with Bill Erickson, Beth Soderberg, and Ellen Bauer, and some of them are eight minutes long, like Greg Ziolkowski’s Create Block scaffolding demonstration. You could start with Matt and Matias Ventura’s roadmap talk and the subsequent Q and A.
Mark Uraine: Watching that roadmap talk, Birgit, was just so enlightening to kind of see how the vision is being laid out for Gutenberg and what it’s going to mean eventually, as it becomes this full site editing experience. So good, a lot of these talks. I had so much fun just conversing with everybody, and getting to know people I have never talked with before, and seeing what they’re doing out there. If you can create a block scaffold in eight minutes as Greg does, we should all be creating blocks, because that sounds amazing.
Birgit Pauli-Haack: Yeah, it’s pretty amazing and it actually is through the block plugin that you can upload to the WordPress repository. Yeah, there were some amazing talks there. I really liked the different use cases for themes. We had the theme developers and each one of them has a different aspect of it, so everybody that is in the WordPress space can really learn.
Mark Uraine: So true, right? All three of them had a similar topic, but they all talked about it from three very different points of view.
Birgit Pauli-Haack: Yeah, it’s quite interesting. I think my favorite talk… I had 12 favorite talks, right?
But one of them I found quite enlightening was K. Adams’ talk about how he worked with a customer to convert the short codes that they had, multiple in their current situation, to blocks. I think quite a few plugin developers find themselves in that situation, that they have their short codes are widely used, but how can you transform them into blocks and what you do with old code?
Mark Uraine: Yeah. I want to add that, if anybody out there has never listened to K. Adam give a talk, it is so fun because he is very elegant in how he conveys these concepts to the audience. I don’t think he ever really says “um” or stutters on his words. Very thoughtful in how he communicates this stuff. Anyways, I’m a fan and I enjoy his talks.
Birgit Pauli-Haack: Yeah. Tammie Lister’s was really good.
Mark Uraine: Oh, that was fantastic. Seeing all the work that she has done throughout that whole day. Wow.
Birgit Pauli-Haack: Yeah, and what goes into the new block UI that we will see in WordPress later this year hopefully, or maybe not, I don’t know. Yeah, take them out. You get a lot of insights from the developers of Gutenberg as well. Yeah, check them out.
Mark Uraine: We could probably spend the entire show just talking about that show.
Birgit Pauli-Haack: And longer.
Mark Uraine: Right.
Birgit Pauli-Haack: It’s not going to be a 30-minute podcast.
Community Contributions
Mark Uraine: Right. But anyways, let’s continue on to community contributions. Recently I read a piece of, from an article from Harris Zulfiqar, who wrote an article about Gutenberg theme styles integration and almost what-you-see-is-what-you-get. Harris talks about how Gutenberg is close to this what-you-see-is-what-you-get editing experience, but not quite there. And he talks about some of the other third-party plugins and people out there that have gotten a bit closer with this, and really hopes that Gutenberg and the block editor makes that leap to allowing one, just simple code base, one build process and then that’s what you get. He’s betting on Gutenberg, he’s betting that that’s going to be the way forward for WordPress. So it’s really good to see that support there.
I do want to add for you Harris, that there is an issue in GitHub right now that is currently talking about utilizing the editor in an iframe, so that we can limit this to one build, and one code base that it works both on the front end and the back end and something like that could get us closer.
So if you’re interested in leaving some feedback, please do. I’d love to hear from you.
Birgit Pauli-Haack: Well that’s good to hear. And I also learned in the WP BlockTalk from Bill Erickson, a method. So what Harris also says is that, I don’t have a code base for the CSS, just for the admin and the format the same. I have to do it twice, pretty much. And it’s duplication of code is something that everybody kind of shies away from. And Bill Erickson actually has a quite a nice work-around that talks about in his talk on WP BlockTalk, and I’m not revealing how that works. You need to go for yourself and watch it.
Block Patterns
So the two other contributions are about the block patterns. Block patterns are now in API for the Gutenberg plugin. And Mel Joyce wrote a nice tutorial on how to create a simple block pattern plugin for the Gutenberg editor. It walks you really through the documentation and through the CSS as well as the theme part of it. So check that out. It’s called “Creating a Simple Block Pattern Plugin for the Gutenberg Editor.”
And the other part was that I’ve found pretty much on the same day, Justin Tadlock from the WP Tavern, actually created a block pattern builder plugin, which is kind of the middle idea about that. But then Mel Choyce is more for the developers and theme builders, and Justin’s plugin is for those users who can create the patterns in the editor, and then share them out through the plugin with other people or make them available on their own site for other editors, so they can replicate that. And it’s going beyond the reusable block or taking care of her usable blocks when you don’t want to edit them. And so it’s quite an interesting movement there with block patterns.
Mark Uraine: Yeah. I really enjoyed picking a block pattern from the block pattern builder plugin. I just wanted to say that. I’m sorry that was…
Birgit Pauli-Haack: Yeah, say it really fast. “Block pattern builder plugin.”
Gutenberg 7.9 and 7.9.1
But that’s great work and great thought about. Yeah. How can this be used? How can this be pushed forward–which brings us to what’s released, and that is Gutenberg 7.9 and a day later, 7.9.1.
Mark, would you kind of talk us through the new features?
Mark Uraine: Yes, so 7.9. There were five features that were highlighted in this release. Let’s go through those. Add gradients, support to the group block, the columns, block and media, and text blocks. What did I say Birgit?
Birgit Pauli-Haack: Gradients! Gradients!
Mark Uraine: Yeah. OK.
Birgit Pauli-Haack: Well done.
Mark Uraine: So yes, as you can see the Gutenberg team is very focused on making sure everyone gets their bill of gradients. We’ll bring them to all the blocks eventually.
Line Heights, line Heights are a big one and we’ve noticed that as people are really creating some block patterns that are very customized. Line height becomes one of the key factors for bringing that design, that essential design aesthetic to a pattern. And so, whether you’re adjusting it so text is almost overlapping, or spreading it apart. Why like line height’s a big one.
Anyway, the fifth feature there is adding custom height unit support to the cover block. So, really good features I think that people can fiddle with and start making the content really their own in terms of customization. We had about 17 enhancements in 7.9. Who knew?
Birgit Pauli-Haack: Ooh, yes.
Mark Uraine: A Hero Two Column patterns, numbered features and “it’s time” sort of pattern, really working again with varying on font sizes and columns. Adding a new keyboard shortcut to the toggle full screen mode, that’s a plus for a lot of people. There’s the social links block that got some updates like the Tumblr icon and message, social links colors, updating all block previews to use the auto-height behavior, removing the post permalink UI from the post title. That, Birgit, that one that I just mentioned, I just said it, but that’s like historic right there, I feel. WordPress has had that permalink next to the title for… I don’t know what release that that came out in, but as long as I can remember. So now here it is. We’ve just removed it from the title.
Birgit Pauli-Haack: I’m hearing the other 50% of the WordPress because these decisions all pretty much what it comes down to, it’s 50-50 yeah. Some like it and some don’t like it, but I read back through that, and the initial issue was released sometime in spring 2018 as an accessibility issue, because you cannot write the title and then jump back if you don’t know that there’s something in there. So the order from top to bottom was different, that you wouldn’t have a permalink unless you have a title in, and then when you have a title, you weren’t able to jump back up. So that is something, and I think the earlier Gutenberg version was the permalink was underneath the title because of that. But people didn’t like that, and or didn’t use it, didn’t find it. And now it’s in the sidebar or only in the sidebar, right? And removed it. So I’m interested in what people feel about that. I don’t know the question. Oops, sorry. Go ahead.
Mark Uraine: I’m interested as well, but go on with your question.
Birgit Pauli-Haack: What is an auto-height behavior?
Mark Uraine: That’s a great question. I know I mentioned it. But you got me on the spot here… Oh, it’s for the auto-height preview. So you know how you roll over a block in the inserter and you get a preview of that block?
Birgit Pauli-Haack: Yeah.
Mark Uraine: Well, initially, it was set to a set height, which caused all the content to get small in the preview. So if you set the auto-height, the height to auto, it allows it to grow with the content and at least present the content in a way that you can actually read the preview.
Birgit Pauli-Haack: Yeah. Oh, that makes total sense.
Mark Uraine: So that was kind of a neat one. And with the new G2 styling, the UI interface like that, it’s looking beautiful.
Birgit Pauli-Haack: So what was your… You wanted to say something about the permalink?
Mark Uraine: Yeah, I’m just curious to see what people think as well. I mean that’s a historic one. I feel like right there. It’s a small change kind of, but it’s historically significant, I feel.
So, that takes us to performance. There were three performance PRS that helped. And you know what, Birgit? I didn’t look at, I did not look at what the performance rating was for this version. Do you know if we took a dip on performance or did we? Looks like we approved loading time, by just… What is that? A 10th of a second? And key precedent to keep load to key precedent took a hit a little bit. Is that milliseconds or microseconds? What’s an MS, Birgit?
Birgit Pauli-Haack: Milliseconds. Milliseconds. So a thousand millisecond gives you one second.
Mark Uraine: Thank you. Now is that the metric system?
Birgit Pauli-Haack: Yes.
Mark Uraine: I’m just kidding.
Birgit Pauli-Haack: It was a Twitter feed today. I really had to laugh out loud. A German husband and an American wife kind of talking about Imperial and metrics and the husband was always making up new measurements like social distancing. Take an alligator between you instead of two feet, six feet. What’s that yeah?
Mark Uraine: What else did we have going on, Birgit?
Bug Fixes
Birgit Pauli-Haack: So yeah, we had a few bug fixes, 26 PRs with bug fixes and I’m just going to point out a few. One is that the YouTube embed block is not flickering anymore and crashing Safari. Our Safari users will be happy about that. Also fixed the sibling inserter to have a better landing for the click that you needed. There were some occasions where you weren’t able to aim right.
Mark Uraine: That was so true. You saw that, because I, I wasn’t the only one then because I would hover and it was a guessing game of where, when is the inserter going to appear?
Birgit Pauli-Haack: Yeah, it was more like I’m going to place it here and maybe it appears. Right? Yeah. But I saw when it came out, I think it was with a new G2 or the new Block UI. So it came out 7.7, and I knew that was already very early. There was an issue in there. So yeah, I just waited for that. And there have been a quite a lot of fixes for the latest post block.
Mark Uraine: Wow.
Birgit Pauli-Haack: So it has a “read more” link now that can be added by the themes, the image dimensions are fixed, there were two latest posts blocks now after I tested it so I was always holding out, holding onto some of the block collections, and my idea is to actually get rid of most of them to still do wonderful webpages, and one of the blocks is atomic blocks.
Post Grid is just marvelous, and I was still holding onto that because it was so easy to use and just recently, I switched it over to the latest post block and it was really magical. I really liked it. I was able to select the category that I wanted the blocks to come from, because it was a subpage on a landing page, just to put this in there. There is a little bug still there because there’s an index warning showing up on the front page that is known, and it’s identified as a bug and I’m sure next, the week after next, with the new version that’s gone. What helps you as a word-around is to put it in, and then switch off the plugin. But I love the block yeah.
Mark Uraine: Birgit, on behalf of the Gutenberg team, you’re welcome.
Birgit Pauli-Haack: Thank you!
The new version also fixed the transparent images used on the cover block as backgrounds, and it also fixed the block movers for full-wide blocks. That took a while to fix, but until then, the workaround was that you had to change your alignment to wide or center, and then move the block. It was more annoying than really hindering, but I’m glad that it’s done.
Mark Uraine: And just to clarify, that’s because this, the block toolbar would be on the edge, and out of the edge of the block toolbar is now where the movers come out. So when it was already on the edge, the movers would slide out, but they’d be off screen. So you couldn’t move the block.
Birgit Pauli-Haack: Yeah. So I can move it.
Mark Uraine: That’s fixed.
Birgit Pauli-Haack: Yeah. Thank you. And then another one was that the cover block is fixed, so it doesn’t override the children’s blocks’ colors, where you could change the color of the paragraph that’s in the cover block, but when you go back and change the color block, kind of made it all look the same.
Mark Uraine: Wow.
New APIs
Birgit Pauli-Haack: There are a few new APIs. One is really… A lot of people are waiting for it. That’s a new utility API for register block types from metadata, and PHP. That kind of makes that dynamic block a little bit more versatile.
Mark Uraine: I’m just like, wow, OK, this is good stuff.
Birgit Pauli-Haack: It’s good stuff. Yeah. Then the screen sidebar is more extensible now, and you can add the full screen component to the WordPress interface package and there’s… I haven’t figured out the new create localization function or internationalization function, but having that is a new one, too. OK.
Experiments
Mark Uraine: And then that brings us to the experiments. There were 28 various PRs merged in for experiments. Of course, we have full site editing and the site editor screen, there are a lot of little things. Some fixes in there, improvements happening, PRs getting merged. A lot of this stuff is very structural-related right now to help as we start making the bigger UI changes, which are already pretty far along in design I’d say. So there’s a lot of things ready for development that are going to really impact the UI coming up.
Birgit Pauli-Haack: Do you mean I should start looking at a full site editing again?
Mark Uraine: Very, yes. I would say. I would say it’s worth it, worth to take another look. I think we need to still work on the experiment in the plugins, still, to get the layout a little better. But, there are things like the multi-entity saving flow, you know? So if you have manipulated some content, you changed a template part, like the header area and then it’ll… When you save the page, it kind of alerts you like, if you’re looking for that information, what actually has been saved, and you can turn on or off if you want to keep any of that.
Birgit Pauli-Haack: Oh that’s really good. Yeah. Because sometimes they do multiple things at the same time and then, where do I save all that? Yeah.
Mark Uraine: Right, right.
Birgit Pauli-Haack: Good.
Mark Uraine: And then we have the new menu screen as an experiment in the plugin right now.
So if you turn that on, you’ll get a menu screen that’s called the beta version that shows the navigation block inside of it. So it’s still a very similar user interface as the original menu screen in WP admin, except now it has the block and the block navigator to kind of help you figure that out. A lot of questions come up with that, but.
Birgit Pauli-Haack: Yeah, one is, so they’re going back to the menu term that was reserved for…
Mark Uraine: You know what? I’m just using menu just because it’s keeps the familiarity of the menu screen. I mean I was still calling it a navigation block though, so that’s a good question. I’m trying to pick those words carefully to help draw the relationship mentally for the listeners, but maybe I’m just messing it all up. Yeah, everybody’s like, man…
Birgit Pauli-Haack: Nah, I think you’re fine, I just wanted to… Yeah, going to make fun of it.
Mark Uraine: “Did he say template parts or did he say template areas?” What did you say?
Birgit Pauli-Haack: Page templates or block templates?
Mark Uraine: Oh goodness. This is my life actually every day I’m trying to understand terminology. So in addition to those things, we’ve got the navigation block like I mentioned as well. Navigation block is undergoing a lot of improvements to help with usability. I just spent like a good hour or two in a jam session with some other designers trying to talk about how sub-navigation works. Tammie is sharing a lot of her work that she’s doing with this to help improve it. So be on the lookout for some really cool stuff coming in the navigation block very soon.
And then we have the block API support flags. There’s, let’s see, introduced support key for support, global style colors and blocks. So kind of like, what does your block support? Or what do you have to support your block as far as style-wise and various font sizes, things like this. Yeah, and just a couple other experiment things happening there but that takes us to document… Oh did you have something to say?
Birgit Pauli-Haack: So that’s already in reparation for the global styles. So people can change the color scheme for their own website, and then have them block API support that.
Mark Uraine: Right. Thanks for conveying that, how people would actually use those things, and not only for global styles. I think what it’s opening up for as well is like, we have a label on GitHub called design tools and so that’s really pulling in some of these features to the actual block itself. So you can maybe make individual block changes, but then you also have global styles that affect all the blocks. So how to work with that, if you’re creating blocks, you know you can actually use, get some of these things to support your block.
Birgit, documentation!
Documentation
Birgit Pauli-Haack: All right. Yeah, there were a few documentation changes. I’m only picking two I think, and one is the ServerSideRender docs to include how to use, or use it for the WP Global package, and the other one is how to update post meta values from a block that documentation and a lot of people were looking for and it was a little thin, so… glad that it was updated. Thank you. Whoever did this.
Code Quality
And then we had… The rest of the release notes, code quality, there were 29 PRs that affected the code quality. Some of that has to do with the colors of port flags and also with special typing of in packages. Some refactoring is going on and then removing old code lighter DOM, block DOM behavior. So the page loads are faster. They may not have any indication for the block user, or the WordPress user, or content creator, but definitely, all the little things will add up.
Mark Uraine: Right.
Various
Birgit Pauli-Haack: And then there are some PRs in the various section, 31 of those, they cover unit tests, end to end tests making the bump the test info for the plugin to 5.4, or also some gardening ideas, SlotFills. And link plugins, updates, Reakit updates. So these are the toolings underneath Gutenberg. With that, we come to what’s in active development or discussed, and Mark Uraine has published his design update, 49 already. So Mark, tell us about, tell me about the W.
Active Development
Mark Uraine: Yeah. Oh it’s a W. This is for all you listeners out there might’ve noticed that with WordPress 5.4 came a full screen default mode for the editor. When you go into that editor, it defaults to full screen and there’s a W in the upper left-hand corner, and if you click on that W it kind of takes you back to WP admin. And so we’re trying to, there’s some explorations going on by Shaun Andrews who’s looking at animating that a little bit. So when you click the W, maybe the WP admin menu kind of just slides out, and then slides back, you know as… So you don’t really have to do any page loads, and you can just slide in the menu and then jump out to wherever you need to go. And that’s the W.
Birgit Pauli-Haack: So the PR and the gif of the animated gif and I really like it. That has something to it. It’s kind of the next step of UI. And I’m a fan of the full site editing… That too, but the full screen mode, just because you can focus on, on your content and not jumping in and out of it, but sometimes you have to.
Mark Uraine: Sure. And that, and one of my concerns recently was with the new block inserter, if anybody is watching what’s happening, the block inserter was emerged recently that also does a, kind of a slide out feature now. So when you click to add a block from the top toolbar, it slides out rather than a pop-over appearing. A slide-out appears showing your blocks, and then there’s also a tab in there now for patterns. So we’ve moved the block patterns into the inserter now, and making that really a unified area where whatever you want to add to your site, you kind of go to that one thing to add these things to your site.
So I’m a little curious to see how this slide-out W kind of interacts while you also have a slide-out inserter on that same side. We haven’t seen them both merged yet, so I’m curious. I need to I think pull down the master branch and then I can test the W with the block inserter. That would be fun.
Birgit Pauli-Haack: So the block inserter, that’s a great jump to take out the block patterns out of the sidebar into the inserter so whatever you want to add to the content, you get it from the same place.
Mark Uraine: Right.
Birgit Pauli-Haack: Yeah. So I really liked that. I was curious to find out what happens with the other inserters, that are throughout your document. Yeah, like between the blocks or underneath the blocks. Will they also have that larger pop-up or slide-out or something like that?
Mark Uraine: I think so. So there is experimentation going on with that as well.
But the idea there is like, if you’re in the sibling inserter within the content, that might default to the block patterns, you know. Because it might be likely that someone wants to get a block pattern, rather than an individual block when they’re in the content, but depending where they are in the content, I guess I should say. But all that is still kind of being explored right now.
Birgit Pauli-Haack: Yeah, totally. Quite some changed behavior pattern coming in. I can understand that quite a few of the collections plugins that have been in place for the last two years will change. They will not have the different blocks in the block section, but they are actually block patterns. They probably will switch them over now that the block patterns are in the inserter. It’s going to be interesting to see.
Mark Uraine: Yeah, and then I just touched on some of the full site editing stuff, and then the menu screen in that post.
That brings us to the end.
Birgit Pauli-Haack: Yes. Well, that was a quite a heavy release, 7.9. That… It was also moved for a week. When did you think… When is the next release coming? Is it coming next week or the week after?
Mark Uraine: I think in two weeks.
Birgit Pauli-Haack: In two weeks. All right, OK.
Mark Uraine: I am not positive though. I actually have a, I was AFK this last core editor meetings, so I wasn’t, I didn’t attend, I don’t know what was determined.
Birgit Pauli-Haack: All right, so we are at the end of the show, as always, the show notes will be published on the gutenbergtimes.com/podcast with the latest published episodes just on top of that page, and if you have questions and suggestions, or news that you want us to include, send them to us via email to changelog@gutenbergtimes.com that’s changelog@gutenbergtimes.com. My DMs on Twitter are open so you can always ping me there. I think Mark’s is also listening through his Twitter feed.
Mark Uraine: Definitely.
Birgit Pauli-Haack: Well, we are so happy that you’re here. Thank you very much for listening. I hope you all stay safe. Be well, wash your hands, and I wish you a goodbye. Until the next time.
Mark Uraine: Bye-bye everybody. Thanks for listening and Birgit, thank you so much.
Birgit Pauli-Haack: Bye-bye.